cabrillo.viewLayout - クライアント

cabrillo.viewLayout getTitle()

現在のネイティブビューのタイトルを取得します。

表 : 1. パラメーター
名前	タイプ	説明
なし

表 : 2. 返される内容
タイプ	説明
promise	成功した場合はタイトルテキストに解決され、それ以外の場合はエラーに解決されます。

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

cabrillo.viewLayout - hideBackButton()

クライアントインターフェイスの [戻る] ボタンを非表示にします。

表 : 3. パラメーター
名前	タイプ	説明
なし

表 : 4. 返される内容
タイプ	説明
なし

cabrillo.viewLayout.hideBackButton();

cabrillo.viewLayout - hideSpinner()

現在のインターフェイスでネイティブのスピナーを非表示にします。

表 : 5. パラメーター
名前	タイプ	説明
なし

表 : 6. 返される内容
タイプ	説明
なし

cabrillo.viewLayout.hideSpinner();

cabrillo.viewLayout setBottomButtons(アレイ buttons, 関数 execute)

現在のインターフェイスの下部にボタンを設定します。

画像とバッジは下部ボタンではサポートされていません。

表 : 7. パラメーター
名前	タイプ	説明
ボタン	Cabrillo.Button オブジェクトのアレイ	設定するボタンについて説明します。現在、最大 1 つのボタンがサポートされています。
execute	関数	ボタンがタップされたときに呼び出す関数。この関数は戻り値を持たず、選択されたボタンインデックスを唯一のパラメーターとして取ります。この関数には、数値である単一のパラメーターが必要です。

表 : 8. 返される内容
タイプ	説明
promise	成功した場合は未解決のオブジェクト、それ以外の場合はエラー。

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

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

cabrillo.viewLayout setNavigationBarButtons(アレイ buttons, 関数 execute)

現在のインターフェイスのナビゲーションバーにボタンを設定します。

オーバーフローボタンメニューに表示されるボタンの画像とバッジは省略されています。このため、ナビゲーションバーに画像ボタンを設定するときは、タイトルと画像名を入力することをお勧めします。

表 : 9. パラメーター
名前	タイプ	説明
ボタン	Cabrillo.Button オブジェクトのアレイ	設定するボタンについて説明します。必要に応じてボタンが追加メニューにオーバーフローすることがあります。
execute	関数	ボタンがタップされたときに呼び出す関数。この関数は戻り値を持たず、選択されたボタンインデックスを唯一のパラメーターとして取ります。この関数には、数値である単一のパラメーターが必要です。

表 : 10. 返される内容
タイプ	説明
promise	成功した場合は未解決のオブジェクト、それ以外の場合はエラー。

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

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(文字列 title)

現在のネイティブビューのタイトルを設定します。

表 : 11. パラメーター
名前	タイプ	説明
title	文字列	インターフェイスのタイトル

表 : 12. 返される内容
タイプ	説明
なし

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

cabrillo.viewLayout - showBackButton()

クライアントインターフェイスに [戻る] ボタンを表示します。

表 : 13. パラメーター
名前	タイプ	説明
なし

表 : 14. 返される内容
タイプ	説明
なし

cabrillo.viewLayout.showBackButton();

cabrillo.viewLayout - showSpinner(オブジェクト options)

現在のインターフェイスにネイティブスピナーを表示します。

表 : 15. パラメーター
名前	タイプ	説明
オプション	オブジェクト	オプション。スピナーの外観を変更するための追加設定。 `{ "mask": Boolean, "maskColor": "String" }`
options.mask	ブーリアン	オプション。スピナーの背後にマスクを表示するかどうかを決定します。有効な値： true:スピナーの背後にマスクを表示します。 false:スピナーの背後にマスクを表示しません。デフォルト：false
options.maskColor	文字列	マスクの色 (有効な場合)。

表 : 16. 返される内容
タイプ	説明
なし

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