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(アレイボタン, 関数実行)

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

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

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

表 : 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(アレイボタン, 関数実行)

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

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

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

表 : 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(オブジェクトオプション)

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

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

表 : 16. 戻り値
タイプ	説明
なし

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