cabrillo.viewLayout : client

Cabrillo JS permet d’accéder à des éléments d’interface utilisateur natifs tels que les boutons et les doubles flèches.

cabrillo.viewLayout : getTitle()

Récupère 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 du titre est résolu, sinon il s’agit d’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, Fonction exécuter)

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 maximum d’un bouton est actuellement pris en charge.
execute	Fonction	Fonction à appeler lorsqu’un bouton est touché. 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 succès, un objet non résolu, sinon une erreur.

Définissez les boutons du bas de page.

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écuter)

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 à régler. Les boutons peuvent déborder dans un menu supplémentaire selon les besoins.
execute	Fonction	Fonction à appeler lorsqu’un bouton est touché. 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 succès, 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);
   });

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

Les boutons sont placés dans le menu des boutons de débordement selon les besoins. Pour forcer l’ajout d’un bouton au 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 munis 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 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);
   });

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
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" }
Mots-clés Mots-clés	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, s’il est activé.

Tableau 16. Renvoie

Type	Description
Aucun

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