cabrillo.viewLayout : Client

Cabrillo JS pour fournir un accès à des éléments d’interface utilisateur natifs tels que des boutons et des doubles flèches.

cabrillo.viewLayout : getTitle()

Obtient le titre de la vue native actuelle.

Tableau 1. Paramètres

Nom	Type	Description
Aucun

Tableau 2. Renvoie

Type	Description
Promesse	En cas de réussite, le texte de titre est résolu, sinon une erreur est générée.

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

cabrillo.viewLayout : masqueBackButton()

Masque le bouton de retour sur l’interface client.

Tableau 3. Paramètres

Nom	Type	Description
Aucun

Tableau 4. Renvoie

Type	Description
Néant

cabrillo.viewLayout.hideBackButton();

cabrillo.viewLayout - hideSpinner()

Masque un spinner natif dans l’interface actuelle.

Tableau 5. Paramètres

Nom	Type	Description
Aucun

Tableau 6. Renvoie

Type	Description
nul

cabrillo.viewLayout.hideSpinner();

cabrillo.viewLayout - setBottomButtons(Boutons de tableau, Fonction exécutée)

Définissez les boutons en bas de l’interface actuelle.

Les images et les badges ne sont pas pris en charge dans les boutons inférieurs.

Tableau 7. Paramètres

Nom	Type	Description
Boutons	Tableau d’objets Cabrillo.Button	Décrit les boutons à régler. Un bouton maximum est actuellement pris en charge.
execute	Fonction	Fonction à appeler lorsqu’un bouton est sélectionné. La fonction n’a pas de valeur de retour et prend l’index du bouton sélectionné comme seul paramètre. La fonction doit avoir un seul paramètre qui est un nombre.

Tableau 8. Renvoie

Type	Description
Promesse	En cas de réussite, un objet non résolu, sinon une erreur.

Réglez les boutons inférieurs.

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);
});

Effacer les boutons inférieurs.

cabrillo.viewLayout.setBottomButtons();

cabrillo.viewLayout - setNavigationBarButtons(Boutons de tableau, Fonction exécutée)

Définissez les boutons dans la barre de navigation de l’interface actuelle.

Les images et les badges des boutons qui apparaissent dans le menu des boutons de débordement sont omis. Pour cette raison, il est préférable de fournir un titre et un nom d’image lors de la définition d’un bouton d’image dans la barre de navigation.

Tableau 9. Paramètres

Nom	Type	Description
Boutons	Tableau d’objets Cabrillo.Button.	Décrit les boutons à régler. Les boutons peuvent déborder dans un menu supplémentaire selon les besoins.
execute	Fonction	Fonction à appeler lorsqu’un bouton est sélectionné. La fonction n’a pas de valeur de retour et prend l’index du bouton sélectionné comme seul paramètre. La fonction doit avoir un seul paramètre qui est un nombre.

Tableau 10. Renvoie

Type	Description
Promesse	En cas de réussite, un objet non résolu, sinon une erreur.

Définissez les boutons de la barre de navigation.

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);
   });

Gérez plusieurs boutons.

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);
   });

Les boutons placés dans la barre de navigation peuvent être représentés par une image.

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);
   });

Un bouton de retour natif est affiché dans l’application native par défaut, mais vous pouvez remplacer le bouton de retour par un bouton Cabrillo en définissant la propriété buttonStyle d’un bouton.

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);
   });

Les boutons sont placés dans le menu des boutons de débordement selon les besoins. Pour forcer l’ajout d’un bouton dans le menu du bouton de débordement, définissez la propriété buttonStyle du bouton.

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);
   });

Les boutons peuvent être dotés d’un badge lorsqu’ils sont placés dans la barre de navigation. Cet exemple définit un bouton avec une icône de panier d’achats et un nombre de badges de 3. Le badge a un arrière-plan bleu avec du texte blanc.

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);
   });

Effacer les boutons de la barre de navigation.

cabrillo.viewLayout.setNavigationBarButtons();

cabrillo.viewLayout - setTitle(titre de la chaîne)

Définit le titre de la vue native actuelle.

Tableau 11. Paramètres

Nom	Type	Description
Titre	Chaîne	Le titre de l’interface.

Tableau 12. Renvoie

Type	Description
nul

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

cabrillo.viewLayout - showBackButton()

Affiche le bouton de retour sur l’interface client.

Tableau 13. Paramètres

Nom	Type	Description
Aucun

Tableau 14. Renvoie

Type	Description
Néant

cabrillo.viewLayout.showBackButton();

cabrillo.viewLayout - showSpinner(options de l’objet)

Affiche un spinner natif dans l’interface actuelle.

Tableau 15. Paramètres

Nom	Type	Description
options	Objet	Facultatif. Paramètres supplémentaires permettant de modifier l’apparence du spinner. { "mask": Boolean, "maskColor": "String" }
options.masque	Booléen	Facultatif. Détermine s’il faut afficher un masque derrière le spinner. Valeurs valides : true : affiche un masque derrière le spinner. false : n’affiche pas de masque derrière le spinner. Valeur par défaut : false
options.masqueCouleur	Chaîne	Couleur du masque, si activée.

Tableau 16. Renvoie

Type	Description
Néant

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