내비게이션 요소, 스크립트 연결

내비게이션 요소

- subview와 subcatalog는 jamkit 화면이 실행되면 처음으로 구성되는 내비게이션 요소

- jamkit의 요소 중에 데이터가 포함된 요소는 showcase, banner, panes, collection 등이 있다.

- collection은 일반적인 데이터를 다룬다, 특정한 object에 묶이지 않고, 데이터를 관리 할 수 있다. 구조는 showcase와 동일하며, showcase나 banner 등에서 collection의 데이터를 이용할 수 있다.

=object showcase: name={name}@collection

 

 

- banner는 데이터가 슬라이드되는 object로서, transition 효과를 다양하게 줄 수 있다.

 

subcatalog

- jamkit은 기본적으로 catalog로 화면이 구성되는데, 앱의 메뉴나 사이드바 등 앱의 각 영역을 그룹화 할 수 있다.

- 즉, 앱의 각 부분이나 화면을 subcatalog 단위로 나눠서 구성한다고 보면 된다.

- 카탈로그 엑셀 문서에 subcatalogs라는 시트가 있고, 각 subcatalog는 소문자로 된 id가 부여되어 있다.

 

subcatalog 액션

action=subcatalog, subcatalog={name}, target=self/popup

- 위 명령어를 쓰면 catalog_{name}이 현재 화면 내에서 바뀌거나 팝업으로 뿌려진다. 다만, 위 명령어는 거의 쓰지 않고 subview를 불러서 subcatalog를 띄우는 방식으로 쓴다.

- 정리하면, 앱은 catalog라는 기본 화면 내에 subcatalog가 있고, 내비게이션으로 보면 subcatalog 위에서 page, popup, bottom-sheet 등이 뜨는 것이다.

 

controller, module 속성

- controller는 필요한 기능을 추가적으로 부여하는 속성으로, 예를 들면 사용자 설정을 다룰 때는 SettingView라는 controller를 쓸 수 있다.

- module은 sbml/sbss 파일이 많아질 경우, 폴더로 묶을 수 있는 속성이다.

 

subview

- 위에서도 얘기했듯이 jamkit에서는 subcatalog를 직접 다루는 일이 없고, subview라는 논리적인 개념으로 연결하여 이용

- subview는 subcatalog만 앱에 올릴 수 있음

- 하나의 subcatalog는 여러 subview와 연결될 수 있으나, 대부분 1 대 1로 연결된다.

- 카탈로그 엑셀 문서에 subview라는 시트가 있고, 각 subview는 "V_"로 시작하는 대문자로 된 id가 부여되어 있다.

- subview는 앱에서 동적으로 추가할 수 없다.

 

- 앱이 처음 실행되면 catalog_main_sbml이 실행된다. 내부에는 id가 container인 blank object가 들어 있다. 참고로, catalog_main의 subview 이름은 "_MAIN_"으로 고정이다.

- catalog_main은 catalog.bon에 있는 default-subview를 찾아서 해당 subview와 연결된 subcatalog를 화면에 띄웁니다.

// catalog_main.sbml
=begin catalog
=object blank: id=container, style=blank_container
=end catalog

// catalog.bon
{
    "title": "MainApp 카탈로그",
    "version": "1.0",
    "uses-database": "yes",
    "database-version": "2.0",
    "default-subview": "V_HOME",
    "orientations": "portrait,landscape"
}

- action=subview, subview={name}, target=embed/self/popup

- 위 명령어를 쓰면 해당 subview에 연결된 subcatalog가 container 내에 뜨거나 전체화면 팝업으로 뜬다.

1. target = embed (default)

    catalog_main에 뜬 container 영역 위에 겹처쳐서 보임(전체화면이 아닐수가 있다.)

2. target = self

    catalog_main에 뜬 container 영역을 대체하면서 보임(전체화면이 아닐수가 있다.)

3. target = popup

    catalog_main 위에 전체화면으로 보임

 

스크립트 연결

controller

- 현재의 subview에 연결된 js파일에서 controller 객체를 통해 스크립트를 활용 할 수 있다.

- 아래는 버튼을 누르면 start라는 스크립트를 실행하도록 만들었다.

// catalog_start.sbml
=begin catalog: script-when-loaded=on_loaded

=begin title
=object image: filename=img_title.png, style=img_title
=end title

=object showcase: name=onboarding, style=showcase_onboarding

=begin buttons
=object button: script=start, label="@{Getting Started}", style=btn_action
=end buttons

=end catalog


// catalog_start.js
function start() {
    controller.action("bottom-sheet", {
        "display-unit": "S_START_WALLET"
    });
}

function create_wallet() {
    controller.action("subview", {
        "subview":"V_WALLET.CREATE",
        "target":"popup"
    });
    controller.action("bottom-sheet-close");
}

function restore_wallet() {
    controller.action("bottom-sheet-close");
    controller.action("subview", {
        "subview":"V_WALLET.RESTORE",
        "target":"popup"
    });
}