액션과 이벤트, 스크립트, 화면 전환

action 처리

- jamkit에는 action과 event가 있는데, event를 받아서 action을 처리하는 방법

- action과 script는 동일한 레벨에서 동작

- action이라는 단어를 script라는 단어로 바꾸면 해당 script가 실행되는 구조

- action은 반드시 특정한 event가 발생해야 실행

- object마다 발생할 수 있는 event가 정의되고, 그 event에 따른 action을 property로 넣어서 실행

 

button의 action

action	description	parameter
toast	하단에 검은색 텍스트가 잠깐 떴다 사라짐	message
alert	얼럿창이 떠서 '확인'을 누를 때 까지 유지	message

// sbml
=object button: action="toast", \
                params="message=\"hello\""
    
=object button: action="toast", \
                message="hello"

---

event 종류

- 대부분의 event는 object의 생애주기에 따라서 발생

- label이나 image 등의 정적인 object에는 event가 없다.

- 사용자 지정 event는 없으며, 필요한 경우 사용자 지정 script를 만들면 됨

 

showcase의 action

- 주로 action-when-{event}, params-when-{event}라는 코드를 씀

- seletable=yes가 설정된 showcase의 cell을 탭하면 'selected'라는 event가 발생하고 그에 따른 action이 발생

- 이때, 해당 cell의 데이터가 자동으로 parameter화하여 전달, prameter로 쓸 데이터를 미리 해당 showcase 데이터에 key와 value로 저장해두어야 함.

// cell을 누를 때, 해당 cell의 title을 toast로 띄움
#showcase_list: width=1pw, height=0.9ph, \
               keep-count=6, preload-count=6, column-count=1, \
                cell-size="0.9pw 50dp", cell-spacing=10dp, \
                selectable=yes, \
                action-when-selected="toast", \
                params-when-selected="message=\"hi {title}\""

// cell을 누를 때, 해당 cell에 설정된 url을 웹브라우로 띄움
#showcase_list: width=1pw, height=0.9ph, \
               keep-count=6, preload-count=6, column-count=1, \
                cell-size="0.9pw 50dp", cell-spacing=10dp, \
                selectable=yes, \
                action-when-selected="link", \
                params-when-selected="url="

---

스크립트 실행

- 대부분 스크립트를 많이 사용

- action 대신 script를 사용하면 됨.

- params는 없으며, 대신 연계된 js 파일에서 해당되는 함수를 불러옴.

button에서 script 실행

// sbml
=object button: script="alert_message"

// js
funtion alert_message(params) {
    console.log("alert_message");
    console.log(JSON.stringify(params, null, 2);
}

showcase에서 script 실행

// sbml
#showcase_list: width=1pw, height=0.9ph, \
               keep-count=6, preload-count=6, column-count=1, \
                cell-size="0.9pw 50dp", cell-spacing=10dp, \
                selectable=yes, \
                script-when-selected="showcase_seleted", \
                params-when-selected=""

// js
funtion showcase_seleted(params) {
    console.log(JSON.stringify(params, null, 2);
}

 

jamkit에서 action을 실행하는 3가지 주체

jamkit에서는 action을 실행하는 3가지 주체로는 controller, view, object가 있다.

 

- controller 예시

// js
controller.action("toast", {
    "message" : "hi"
});

---

화면전환

 

-가장 상위의 catalog 화면 위에서 구현 가능한 화면 전화는 page, popup, bottom sheet가 있다.

 

page: 우측에서 들어와서 현재 화면 전체를 덮는 화면

popup: fade-in 되어 현재 화면 중앙을 차지하는 화면

bottom-sheet: 화면 하단에서 튀어나오는 화면

// sbml
=object button: action="bottom-sheet", display-unit="S_123"

 

Bottom Sheet

- bottom sheet의 높이는 해당 sbml에 입력된 내용에 따라 결정

- 화면 전체 높이보다 많을 경우에는 bottom sheet에 지정한 height만큼 올라오고 한번 더 swipe up 해야 전체 화면으로 덮인다.

- sbml에서 section을 display=block으로 처리하거나 object를 넣으면 해당 영역만큼 올라간다.

- height를 지정하지 않으면 아주 살짝 올라온다.

- bottom sheet의 상단 handle 모양과 크기는 직접 구현해야 한다.

 

Page

- Page는 화면 상단에 navibar 영역이 자동으로 적용

- 요즘은 navibar를 직접 구현

- page에서는 hides-navibar=yes 속성으로 navibar를 숨기고, has-own-navibar=yes 속성으로 직접 만든 navibar를 적용

- 이 데이터는 엑셀이나 구글 시트의 해당 display-unit에 key,value로 설정

- page는 겹칠 수 있다. 만약 겹치지 않고 해당 page에 덮어쓰게 만들고 싶다면 target=self 속성을 주면 된다.

 

popup

-popup은 크기를 조절 할 수 없다.

- 크기를 조절하려면 page-background-color를 투명하게 주고, 가운데 object를 원하는 크기로 넣어서 처리

---

showcase와 연결하기

-cell을 탭할 때, 특정한 내용을 page, popup, bottom sheet로 띄울 수 있다.

// sbml
=object showcase: name=apps, selectable=yes, \
                action-when-seleted=page, \