cabrillo.viewLayout

cabrillo.ViewLayout – getTitle()

Ruft den Titel der aktuellen nativen Ansicht ab.

Tabelle : 1. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 2. Ergebnisse
Typ	Beschreibung
promise	Wenn erfolgreich, wird der Titeltext aufgelöst, andernfalls ein Fehler.

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

cabrillo.ViewLayout – hideBackButton()

Blendet die Schaltfläche zurück 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-Schaltflächen, Funktionsausführung)

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	Wenn erfolgreich, 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);
});

Löschen Sie die unteren Schaltflächen.

cabrillo.viewLayout.setBottomButtons();

cabrillo.ViewLayout – setNavigationBarButtons(Array-Schaltflächen, Funktionsausführung)

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	Wenn erfolgreich, ein ungelöstes Objekt, andernfalls ein Fehler.

Legen Sie die Schaltflächen der 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);
   });

Verarbeiten Sie mehrere 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);
   });

Standardmäßig wird in der nativen App eine native Schaltfläche „zurück“ angezeigt, Sie können die Schaltfläche „zurück“ jedoch durch eine Cabrillo-Schaltfläche ersetzen, indem Sie eine Schaltfläche festlegen Schaltflächenstil Eigenschaft.

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

Schaltflächen der Navigationsleiste löschen.

cabrillo.viewLayout.setNavigationBarButtons();

cabrillo.ViewLayout – setTitle(Zeichenfolgentitel)

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 Schaltfläche „zurück“ auf der Client-Schnittstelle an.

Tabelle : 13. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 14. Ergebnisse
Typ	Beschreibung
Keine

cabrillo.viewLayout.showBackButton();

cabrillo.ViewLayout – showSpinner(Objektoptionen)

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 Umfelds. `{ "mask": Boolean, "maskColor": "String" }`
Optionen.Maske	Boolean	Optional. Bestimmt, ob eine Maske hinter dem Drehfeld angezeigt werden soll. Gültige Werte: Wahr: Zeigt eine Maske hinter dem Drehfeld an. Falsch: Zeigt keine Maske hinter dem Drehfeld an. Standardwert: false
Optionen.maskColor	Zeichenfolge	Farbe der Maske, falls aktiviert.

Tabelle : 16. Rückgaben
Typ	Beschreibung
Keine

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

cabrillo.viewLayout – Client

Zürich-API-Referenz