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

cabrillo.viewLayout.hideBackButton();

cabrillo.viewLayout.hideSpinner();

下部ボタンを設定します。

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

下部ボタンをクリアします。

cabrillo.viewLayout.setBottomButtons();

ナビゲーションバーボタンを設定します。

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

複数のボタンを処理します。

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

ナビゲーションバーに配置されたボタンは画像で表すことができます。

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

ネイティブの戻るボタンはデフォルトでネイティブアプリに表示されますが、ボタンの buttonStyle プロパティを設定することで、戻るボタンを Cabrillo ボタンに置き換えることができます。

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

ボタンは、必要に応じてオーバーフローボタンメニューに配置されます。ボタンを強制的にオーバーフローボタンメニューにするには、ボタンの buttonStyle プロパティを設定します。

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

ボタンをナビゲーションバーに配置するとバッジが表示される場合があります。この例では、買い物かごアイコンとバッジカウント 3 のボタンを設定します。バッジは青い背景に白いテキストがあります。

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

ナビゲーションバーボタンをクリアします。

cabrillo.viewLayout.setNavigationBarButtons();

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

cabrillo.viewLayout.showBackButton();

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