cabrillo.viewLayout – Client

Cabrillo JS-Funktionen, die den Zugriff auf native UI-Elemente wie Buttons und Spinner ermöglichen.

cabrillo.viewLayout – getTitle()

Ruft den Titel der aktuellen nativen Ansicht ab.

Tabelle : 1. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 2. Ergebnisse

Typ	Beschreibung
promise	Bei Erfolg wird der Titeltext zurückgegeben, andernfalls ein Fehler.

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

cabrillo.viewLayout – hideBackButton()

Blendet die Zurück-Schaltfläche auf der Client-Schnittstelle aus.

Tabelle : 3. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 4. Ergebnisse

Typ	Beschreibung
Keine

cabrillo.viewLayout.hideBackButton();

cabrillo.viewLayout – hideSpinner()

Blendet einen nativen Spinner in der aktuellen Benutzeroberfläche aus.

Tabelle : 5. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 6. Ergebnisse

Typ	Beschreibung
void

cabrillo.viewLayout.hideSpinner();

cabrillo.viewLayout – setBottomButtons(Array buttons, Function execute)

Stellen Sie Schaltflächen am unteren Rand der aktuellen Benutzeroberfläche ein.

Bilder und Abzeichen werden in den unteren Schaltflächen nicht unterstützt.

Tabelle : 7. Parameter

Name	Typ	Beschreibung
Schaltflächen	Array von Cabrillo.Button-Objekten	Beschreibt die einzustellenden Schaltflächen. Derzeit wird maximal eine Schaltfläche unterstützt.
ausführen	Funktion	Die Funktion, die aufgerufen wird, wenn eine Schaltfläche angeklickt wird. Die Funktion hat keinen Rückgabewert und nimmt den ausgewählten Schaltflächenindex als einzigen Parameter an. Die Funktion muss einen einzelnen Parameter haben, der eine Zahl ist.

Tabelle : 8. Ergebnisse

Typ	Beschreibung
promise	Bei Erfolg ein ungelöstes Objekt, andernfalls ein Fehler.

Legen Sie die unteren Schaltflächen fest.

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

Untere Schaltflächen löschen.

cabrillo.viewLayout.setBottomButtons();

cabrillo.viewLayout – setNavigationBarButtons(Array buttons, Function execute)

Legen Sie Schaltflächen in der Navigationsleiste der aktuellen Benutzeroberfläche fest.

Bilder und Abzeichen für Schaltflächen, die im Menü der Überlaufschaltfläche angezeigt werden, werden weggelassen. Aus diesem Grund sollten Sie beim Einstellen einer Bildschaltfläche in der Navigationsleiste am besten einen Titel und einen Bildnamen angeben.

Tabelle : 9. Parameter

Name	Typ	Beschreibung
Schaltflächen	Array von Cabrillo.Button-Objekten.	Beschreibt die einzustellenden Schaltflächen. Schaltflächen können bei Bedarf in ein zusätzliches Menü überlaufen.
ausführen	Funktion	Die Funktion, die aufgerufen wird, wenn eine Schaltfläche angeklickt wird. Die Funktion hat keinen Rückgabewert und nimmt den ausgewählten Schaltflächenindex als einzigen Parameter an. Die Funktion muss einen einzelnen Parameter haben, der eine Zahl ist.

Tabelle : 10. Ergebnisse

Typ	Beschreibung
promise	Bei Erfolg ein ungelöstes Objekt, andernfalls ein Fehler.

Legen Sie die Schaltflächen für die Navigationsleiste fest.

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

Behandeln mehrerer Schaltflächen.

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

In der Navigationsleiste platzierte Schaltflächen können durch ein Bild dargestellt werden.

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

Eine native Zurück-Schaltfläche wird standardmäßig in der nativen App angezeigt. Sie können die Zurück-Schaltfläche jedoch durch eine Cabrillo-Schaltfläche ersetzen, indem Sie die buttonStyle -Eigenschaft einer Schaltfläche festlegen.

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

Schaltflächen werden bei Bedarf im Menü der Überlaufschaltfläche platziert. Um eine Schaltfläche in das Überlauf-Schaltflächenmenü zu zwingen, legen Sie die buttonStyle-Eigenschaft der Schaltfläche fest.

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

Schaltflächen können ein Abzeichen haben, wenn sie in der Navigationsleiste platziert werden. In diesem Beispiel wird eine Schaltfläche mit einem Einkaufswagen-Symbol und einer Abzeichenanzahl von 3 festgelegt. Das Abzeichen hat einen blauen Hintergrund mit weißem Text.

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

Löschen Sie die Schaltflächen der Navigationsleiste.

cabrillo.viewLayout.setNavigationBarButtons();

cabrillo.viewLayout – setTitle(String title)

Legt den Titel der aktuellen nativen Ansicht fest.

Tabelle : 11. Parameter

Name	Typ	Beschreibung
title	Zeichenfolge	Der Titel der Schnittstelle.

Tabelle : 12. Ergebnisse

Typ	Beschreibung
void

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

cabrillo.viewLayout – showBackButton()

Zeigt die Zurück-Schaltfläche auf der Client-Schnittstelle an.

Tabelle : 13. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 14. Ergebnisse

Typ	Beschreibung
Keine

cabrillo.viewLayout.showBackButton();

cabrillo.viewLayout – showSpinner(Object options)

Zeigt einen nativen Spinner in der aktuellen Benutzeroberfläche.

Tabelle : 15. Parameter

Name	Typ	Beschreibung
Optionen	Objekt	Optional. Zusätzliche Einstellungen zum Ändern der Darstellung des Spinners. { "mask": Boolean, "maskColor": "String" }
options.mask	Boolean	Optional. Legt fest, ob eine Maske hinter dem Spinner angezeigt werden soll. Gültige Werte: true: Zeigt eine Maske hinter dem Spinner an. false: Zeigt keine Maske hinter dem Spinner an. Standardwert: false
options.maskColor	Zeichenfolge	Farbe der Maske, falls aktiviert.

Tabelle : 16. Ergebnisse

Typ	Beschreibung
Keine

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