cabrillo.viewLayout

cabrillo.viewLayout – getTitle()

Obtém o título da exibição nativa atual.

Tabela 1. Parâmetros
Nome	Tipo	Descrição
Nenhum

Tabela 2. Retorna
Tipo	Descrição
promessa	Se for bem-sucedido, será resolvido para o texto do título, caso contrário, ocorrerá um erro.

cabrillo.viewLayout.getTitle()
.then(function(title) {
   console.log(title);
}, function(error) {
   console.log(error);
});

cabrillo.viewLayout – hideBackButton()

Oculta o botão Voltar na interface do cliente.

Tabela 3. Parâmetros
Nome	Tipo	Descrição
Nenhum

Tabela 4. Retorna
Tipo	Descrição
Nenhum

cabrillo.viewLayout.hideBackButton();

cabrillo.viewLayout - hideSpinner()

Oculta um controle giratório nativo na interface atual.

Tabela 5. Parâmetros
Nome	Tipo	Descrição
Nenhum

Tabela 6. Retorna
Tipo	Descrição
vazio

cabrillo.viewLayout.hideSpinner();

cabrillo.viewLayout - setBottomButtons (botões de matriz, execução de função)

Defina botões na parte inferior da interface atual.

Imagens e selos não são compatíveis com os botões inferiores.

Tabela 7. Parâmetros
Nome	Tipo	Descrição
botões	Matriz de objetos Cabrillo.Button	Descreve os botões a serem definidos. No momento, há suporte para no máximo um botão.
execute	Função	A função a ser chamada quando um botão é tocado. A função não tem valor de retorno e usa o índice do botão selecionado como seu único parâmetro. A função deve ter um único parâmetro que seja um número.

Tabela 8. Retornos
Tipo	Descrição
promessa	Se for bem-sucedido, um objeto não resolvido, caso contrário, um erro.

Defina os botões inferiores.

var buttons = [
    {
        title: 'Add to Cart',
        buttonId: 'btnAddCart',
        enabled: true,
        backgroundColor: '#3091F9',
        textColor: '#FFFFFF'
    }
];

cabrillo.viewLayout.setBottomButtons(buttons, (buttonIndex) => {
    console.log('Success. Received an event from the button.');
}).catch((err) => {
    console.log('Failed to register buttons.');
    console.error(err);
});

Limpar botões inferiores.

cabrillo.viewLayout.setBottomButtons();

cabrillo.viewLayout - setNavigationBarButtons (botões de matriz, execução de função)

Defina botões na barra de navegação da interface atual.

As imagens e os selos dos botões que aparecem no menu do botão de estouro são omitidos. Por esse motivo, é melhor fornecer um título e um nome de imagem ao definir um botão de imagem na barra de navegação.

Tabela 9. Parâmetros
Nome	Tipo	Descrição
botões	Matriz de objetos Cabrillo.Button.	Descreve os botões a serem definidos. Os botões podem estourar em um menu adicional conforme necessário.
execute	Função	A função a ser chamada quando um botão é tocado. A função não tem valor de retorno e usa o índice do botão selecionado como seu único parâmetro. A função deve ter um único parâmetro que seja um Número.

Tabela 10. Retornos
Tipo	Descrição
promessa	Se for bem-sucedido, um objeto não resolvido, caso contrário, um erro.

Definir botões da barra de navegação.

var buttons = [
   {
      title: "Save",
      enabled: true,
      buttonId: "btnSave",
   },
];

cabrillo.viewLayout
   .setBottomButtons(buttons, (buttonIndex) => {
      console.log("Success. Received an event from the button.");
   })
   .catch((err) => {
      console.log("Failed to register buttons.");
      console.error(err);
   });

Manipular vários botões.

var buttons = [
   {
      title: "Save",
      enabled: true,
      buttonId: "btnSave",
   },
   {
      title: "Delete",
      enabled: true,
      buttonId: "btnDelete",
   },
];

cabrillo.viewLayout
   .setNavigationBarButtons(buttons, (buttonIndex) => {
      switch (buttonIndex) {
         case 0:
            console.log("Received an event from the Save button.");
            break;
         case 1:
            console.log("Received an event from the Delete button.");
            break;
      }
   })
   .catch((err) => {
      console.log("Failed to register buttons.");
      console.error(err);
   });

Os botões colocados na barra de navegação podem ser representados por uma imagem.

var buttons = [
   {
      title: "Compose",
      buttonId: "btnCompose",
      imageName: "compose",
      enabled: true,
   },
];

cabrillo.viewLayout
   .setNavigationBarButtons(buttons, (buttonIndex) => {
      console.log("Success. Received an event from the button.");
   })
   .catch((err) => {
      console.log("Failed to register buttons.");
      console.error(err);
   });

Um botão Voltar nativo é mostrado no aplicativo nativo por padrão, mas você pode substituir o botão Voltar por um botão Cabrillo definindo a propriedade botãoStyle de um botão.

var buttons = [
   {
      title: "Cancel",
      buttonId: "btnCancel",
      imageName: "close",
      buttonStyle: cabrillo.viewLayout.REPLACE_BACK_BUTTON_STYLE,
      enabled: true,
   },
   {
      title: "Done",
      enabled: true,
   },
];

cabrillo.viewLayout
   .setNavigationBarButtons(buttons, (buttonIndex) => {
      switch (buttonIndex) {
         case 0:
            c.log("Cancel button was clicked.");
            break;
         case 1:
            c.log("Done button was clicked.");
            break;
      }
   })
   .catch((err) => {
      c.log("Failed to register buttons.");
      c.error(err);
   });

Os botões são colocados no menu do botão de estouro conforme necessário. Para forçar um botão no menu do botão de estouro, defina a propriedade botãoStyle do botão.

var buttons = [
   {
      title: "Save",
      buttonId: "btnSave",
      buttonStyle: cabrillo.viewLayout.MORE_MENU_BUTTON_STYLE,
      enabled: true,
   },
];

cabrillo.viewLayout
   .setNavigationBarButtons(buttons, (buttonIndex) => {
      console.log("Success. Received an event from the button.");
   })
   .catch((err) => {
      console.log("Failed to register buttons.");
      console.error(err);
   });

Os botões podem ter um selo quando colocados na barra de navegação. Este exemplo define um botão com um ícone de carrinho de compras e uma contagem de selo de 3. O selo tem um fundo azul com texto branco.

var buttons = [
   {
      title: "Cart",
      buttonId: "btnCart",
      imageName: "cart",
      badgeCount: 3,
      backgroundColor: "#3091F9",
      textColor: "#FFFFFF",
      enabled: true,
   },
];

cabrillo.viewLayout
   .setNavigationBarButtons(buttons, (buttonIndex) => {
      console.log("Success. Received an event from the button.");
   })
   .catch((err) => {
      console.log("Failed to register buttons.");
      console.error(err);
   });

Limpar botões da barra de navegação.

cabrillo.viewLayout.setNavigationBarButtons();

cabrillo.viewLayout - setTitle(cadeia de caracteres título)

Define o título da exibição nativa atual.

Tabela 11. Parâmetros
Nome	Tipo	Descrição
título	Cadeia de caracteres	O título da interface.

Tabela 12. Retornos
Tipo	Descrição
vazio

cabrillo.viewLayout.setTitle('My Title');

cabrillo.viewLayout – showBackButton()

Mostra o botão Voltar na interface do cliente.

Tabela 13. Parâmetros
Nome	Tipo	Descrição
Nenhum

Tabela 14. Retorna
Tipo	Descrição
Nenhum

cabrillo.viewLayout.showBackButton();

cabrillo.viewLayout - showSpinner (opções de objeto)

Mostra um controle giratório nativo na interface atual.

Tabela 15. Parâmetros
Nome	Tipo	Descrição
opções	Objeto	Opcional. Configurações adicionais para modificar a aparência do controle giratório. `{ "mask": Boolean, "maskColor": "String" }`
opções.máscara	Booliano	Opcional. Determina se uma máscara deve ser exibida atrás do controle giratório. Valores válidos: verdadeiro: exibe uma máscara atrás do controle giratório. falso: não exibe uma máscara atrás do controle giratório. Padrão: falso
opções.maskColor	Cadeia de caracteres	Cor da máscara, se habilitada.

Tabela 16. Retornos
Tipo	Descrição
Nenhum

var options = { mask: true, maskColor: '#ffffff' };
cabrillo.viewLayout.showSpinner(options);

cabrillo.viewLayout - cliente

Referência de API do Yokohama