cabrillo.viewLayout : client

Cabrillo JS Fonctions permettant d’accéder à des éléments d’interface utilisateur natifs tels que les boutons et les spinners.

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, résout le texte du titre, sinon une erreur.

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

cabrillo.viewLayout : hideBackButton()

Masque le bouton de retour sur l’interface client.

Tableau 3. Paramètres

Nom	Type	Description
Aucun

Tableau 4. Renvoie

Type	Description
Aucun

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, exécution de fonction)

Placez 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 à définir. Un maximum d’un bouton est actuellement pris en charge.
exécuter	Fonction	Fonction à appeler lorsqu’un bouton est touché. La fonction n’a pas de valeur de retour et prend l’index de bouton sélectionné comme seul paramètre. La fonction doit avoir un seul paramètre, c’est-à-dire un nombre.

Tableau 8. Renvoie

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

Définissez les boutons de bas.

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, exécution de fonction)

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

Les images et les badges des boutons qui apparaissent dans le menu du bouton 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 à définir. Les boutons peuvent déborder dans un menu supplémentaire selon les besoins.
exécuter	Fonction	Fonction à appeler lorsqu’un bouton est touché. La fonction n’a pas de valeur de retour et prend l’index de bouton sélectionné comme seul paramètre. La fonction doit avoir un seul paramètre, c’est-à-dire 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érer 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é par défaut dans l’application native, 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);
   });

Des boutons sont placés dans le menu des boutons de débordement selon les besoins. Pour forcer un bouton dans le menu des boutons 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 avoir un badge lorsqu’ils sont placés dans la barre de navigation. Cet exemple définit un bouton avec une icône de panier et un nombre de badges de 3. Le badge a un fond 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);
   });

Boutons Effacer la barre de navigation.

cabrillo.viewLayout.setNavigationBarButtons();

cabrillo.viewLayout : setTitle(titre de 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
Aucun

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 pour 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.maskColor	Chaîne	Couleur du masque, si activée.

Tableau 16. Renvoie

Type	Description
Aucun

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