cabrillo.viewLayout

cabrello.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 in den Titeltext aufgelöst, andernfalls ein Fehler.

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

cabrillio.viewLayout – ausblendenZurückSchaltfläche ()

Blendet die Schaltfläche „Zurück“ auf der Clientoberfläche 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();

cabrillio.viewLayout - setBOTOMButtons(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	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();

cabrillio.viewLayout - setNavigationBarButtons(Array-Schaltflächen, Funktion ausführen)

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

Behandelt 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 Zurück-Schaltfläche angezeigt. Sie können die Zurück-Schaltfläche jedoch durch eine CABRILLO-Schaltfläche ersetzen, indem Sie die Eigenschaft buttonStyle 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();

cabrillio.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');

cabrello.viewLayout – showBackButton()

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

Tabelle : 13. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 14. Ergebnisse
Typ	Beschreibung
Keine

cabrillo.viewLayout.showBackButton();

cabrillio.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 Zahlenauswahlfelds. `{ "mask": Boolean, "maskColor": "String" }`
Optionen.Maske	Boolean	Optional. Bestimmt, ob eine Maske hinter dem Zahlenkreisel angezeigt werden soll. Gültige Werte: „wahr“: Zeigt eine Maske hinter dem Zahlenkreisel an. „falsch“: Zeigt keine Maske hinter dem Zahlenkreisel an. Standardwert: false
Optionen.Maskenfarbe	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

Yokohama API-Referenz