cabrillo.ViewLayout

cabrillo.ViewLayout – getTitle()

Ruft den Titel der aktuellen nativen Ansicht ab.

Tabelle : 1. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 2. Rückgaben
Typ	Beschreibung
Versprechen	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. Rückgaben
Typ	Beschreibung
Keine

cabrillo.viewLayout.hideBackButton();

cabrillo.viewLayout – hideSpinner()

Blendet einen nativen Umlaufkreisel in der aktuellen Schnittstelle aus.

Tabelle : 5. Parameter
Name	Typ	Beschreibung
Keine

Tabelle : 6. Rückgaben
Typ	Beschreibung
Ungültig

cabrillo.viewLayout.hideSpinner();

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

Legen Sie Schaltflächen unten auf der aktuellen Schnittstelle fest.

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 festzulegenden Schaltflächen. Derzeit wird maximal eine Schaltfläche unterstützt.
ausführen	Funktion	Die Funktion, die aufgerufen werden soll, wenn auf eine Schaltfläche getippt wird. Die Funktion hat keinen Rückgabewert und verwendet den ausgewählten Schaltflächenindex als einzigen Parameter. Die Funktion muss einen einzelnen Parameter haben, bei dem es sich um eine Zahl handelt.

Tabelle : 8. Rückgaben
Typ	Beschreibung
Versprechen	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);
});

Unterste Schaltflächen löschen.

cabrillo.viewLayout.setBottomButtons();

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

Legen Sie Schaltflächen in der Navigationsleiste der aktuellen Schnittstelle fest.

Bilder und Abzeichen für Schaltflächen, die im Menü der Überlaufschaltfläche angezeigt werden, werden ausgelassen. Aus diesem Grund ist es am besten, einen Titel und einen Bildnamen anzugeben, wenn Sie eine Bildschaltfläche in der Navigationsleiste festlegen.

Tabelle : 9. Parameter
Name	Typ	Beschreibung
Schaltflächen	Array von Cabrillo.button-Objekten.	Beschreibt die festzulegenden Schaltflächen. Schaltflächen können bei Bedarf in ein zusätzliches Menü überlaufen.
ausführen	Funktion	Die Funktion, die aufgerufen werden soll, wenn auf eine Schaltfläche getippt wird. Die Funktion hat keinen Rückgabewert und verwendet den ausgewählten Schaltflächenindex als einzigen Parameter. Die Funktion muss einen einzelnen Parameter haben, bei dem es sich um eine Zahl handelt.

Tabelle : 10. Rückgaben
Typ	Beschreibung
Versprechen	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);
   });

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

Schaltflächen in der Navigationsleiste 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 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 nach Bedarf im Überlaufschaltflächenmenü platziert. Um eine Schaltfläche im Menü der Überlaufschaltfläche zu erzwingen, legen Sie die Eigenschaft „buttonStyle“ 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 Einkaufswagensymbol 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
Titel	Zeichenfolge	Der Titel der Schnittstelle.

Tabelle : 12. Rückgaben
Typ	Beschreibung
Ungültig

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. Rückgaben
Typ	Beschreibung
Keine

cabrillo.viewLayout.showBackButton();

cabrillo.ViewLayout – showSpinner(Objektoptionen)

Zeigt einen nativen Spinner in der aktuellen Schnittstelle an.

Tabelle : 15. Parameter
Name	Typ	Beschreibung
Optionen	Objekt	Optional. Zusätzliche Einstellungen zum Ändern der Darstellung des Drehkreisels. `{ "mask": Boolean, "maskColor": "String" }`
Options.mask	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. Standard: Falsch
Options.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

Yokohama-API-Referenz