cabrillo.viewLayout - 클라이언트

cabrillo.viewLayout - getTitle()

현재 네이티브 뷰의 제목을 가져옵니다.

표 1. 매개변수
이름	유형	설명
없음

표 2. 반환
유형	설명
약속	성공하면 제목 텍스트로 해결되고, 그렇지 않으면 오류가 해결됩니다.

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. 반환
유형	설명
void

cabrillo.viewLayout.hideSpinner();

cabrillo.viewLayout - setBottomButtons(배열 버튼, 함수 실행)

현재 인터페이스 하단에 있는 버튼을 설정합니다.

하단 버튼에는 이미지와 배지가 지원되지 않습니다.

표 7. 매개변수
이름	유형	설명
단추	Cabrillo.Button 개체의 배열	설정할 버튼에 대해 설명합니다. 현재 최대 하나의 버튼이 지원됩니다.
실행	함수	버튼을 탭할 때 호출할 함수입니다. 함수에는 반환 값이 없으며 선택한 버튼 인덱스를 유일한 매개 변수로 사용합니다. 함수에는 숫자인 단일 매개변수가 있어야 합니다.

표 8. 반환
유형	설명
약속	성공하면 해결되지 않은 객체, 그렇지 않으면 오류가 발생합니다.

하단 버튼을 설정합니다.

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. 반환
유형	설명
약속	성공하면 해결되지 않은 객체, 그렇지 않으면 오류가 발생합니다.

탐색 모음 버튼을 설정합니다.

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(String title)

현재 네이티브 뷰의 제목을 설정합니다.

표 11. 매개변수
이름	유형	설명
제목	문자열	인터페이스의 제목입니다.

표 12. 반환
유형	설명
void

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

cabrillo.viewLayout - showBackButton()

클라이언트 인터페이스에서 뒤로 버튼을 표시합니다.

표 13. 매개변수
이름	유형	설명
없음

표 14. 반환
유형	설명
없음

cabrillo.viewLayout.showBackButton();

cabrillo.viewLayout - showSpinner(객체 옵션)

현재 인터페이스에 기본 스피너를 표시합니다.

표 15. 매개변수
이름	유형	설명
옵션	객체	옵션입니다. 스피너의 모양을 수정하는 추가 설정입니다. `{ "mask": Boolean, "maskColor": "String" }`
옵션.마스크	부울	옵션입니다. 스피너 뒤에 마스크를 표시할지 여부를 결정합니다. 유효한 값은 다음과 같습니다. true: 스피너 뒤에 마스크를 표시합니다. false: 스피너 뒤에 마스크를 표시하지 않습니다. 기본값: false
옵션.maskColor	문자열	마스크의 색입니다(활성화된 경우).

표 16. 반환
유형	설명
없음

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