한국물리학회 소스 분석_앱플러스폼(ApplusForm, AppForm)

ApplusForm에서 제공하는 Templete 중 한국물리학회에 대한 강좌입니다.

한국물리학회 Templete는 ApplusForm에서 제공하는 Templete 중 3rd party 개발사에서 제작한 애플리케이션입니다.

홈페이지의 소개 내용을 보겠습니다.

3rd Party Template 한국물리학회 Type
3rd Party Template은 제휴업체가 개발하여 제공하는 AppForm입니다.
한국물리학회 Type은 (주)넥스텔이 개발한 앱템플릿으로서 한국물리학회 소개 등 학술 대회의 초록, 일정 및 진행 내용을 소개하는 앱입니다.
* 주요메뉴
물리학회소개, 학술대회, 홍보잡지, 물리인증제 등
* 활용분야
학술대회, 컨퍼런스, 세미나, 박람회 소개 등
* 특징
북마크, 링크, 알림, 게시판 기능 등

한국물리학회(이하 KPS) Type은 첫 화면이 주요 메인 메뉴를 아이콘으로 배치하였고, 이후 단계에서는 하단에 탭 메뉴를 배치하는 메뉴 구조를 가지고 있습니다. 국내에서 선호하는 형태라 쓰임새가 많습니다.
각 메뉴내에 사용된 컨텐츠는 웹뷰를 이용하여 채워넣을 수도 있고, MOML로 코딩할 수도 있으므로, 여기에서는 메인메뉴와 탭메뉴로 이어지는 메뉴 구조를 중심으로 분석해보겠습니다.
(유사한 형태로 TablistA02가 있습니다만, 눈에 띄는건 KPS인 것 같습니다.)

소스

start.xml로 시작됩니다.

<UI>
    <UILAYOUT portrait="720,1240">
        <NAVIGATIONCONTAINER id="naviContainer" layout="0,userVariable.sbHeight,720,1240-userVariable.sbHeight" selectItem="start_intro" defaultImg="#ffffff">
            <VIEWITEMGROUP >
                <VIEWITEM id="start_intro" src="intro.xml" />
                <VIEWITEM id="main" src="main.xml" transitionInEffect="mosaic:random">
                    <VIEWITEM id="menu_info" src="about.xml" transitionInEffect="none" transitionOutEffect="move"/>
                    <VIEWITEM id="menu1" src="introduce.xml" transitionInEffect="none" transitionOutEffect="none">
                        <VIEWITEM id="notice" src="notice.xml" transitionInEffect="none" transitionOutEffect="none" >
                            <VIEWITEM id="notice_detail" src="notice_detail.xml" transitionInEffect="none" transitionOutEffect="none" />
                        </VIEWITEM>
                    </VIEWITEM>
                    <VIEWITEM id="menu2" src="symposium.xml" transitionInEffect="none" transitionOutEffect="none">
..중략..
                    </VIEWITEM>
            </VIEWITEMGROUP>
        </NAVIGATIONCONTAINER>
    </UILAYOUT>
</UI>  

본문에 적지는 않았지만 사용하지 않는 <THEMES>가 정의되어 있습니다. 이건 삭제해야겠네요..
start.xml에는 직접적으로 화면에 출력하거나 실행하는 구문은 없습니다. <NAVIGATIONCONTAINER>를 이용하여 메뉴를 생성하고 하위메뉴들을 구성하는 소스만 보입니다.
메뉴간의 이동은 naviContainer.selectedItem = 'main'과 같은 식으로 직접 지정해주면 어떤 메뉴로든지 이동할 수 있지만 계층적으로 구성했을 경우에는 이전으로 이동할 때 naviContainer.back으로 이동할 수 있으므로 일일히 기억할 필요가 없으므로 유용합니다.

첫 메뉴은 intro.xml에서는 필요한 userVariable 값들을 초기화하고 이미지 한장만을 fade효과로 보여주는게 전부이므로 main.xml로 넘어가겠습니다.

main.xml

<UI>
    <UILAYOUT portrait="720,1240" landscape="720,1240" >
        <WINDOW layout="0,0,720,1240"  align="relative" defaultImg="embed:/moml/res/home_bg.png" >
            <BUTTON layout="600,50,30,30" defaultImg="embed:/moml/res/info.png" onClick="root.naviContainer.selectedItem = 'menu_info'" />
            <BUTTON layout="82,280,167,211" defaultImg="embed:/moml/res/home_01_off.png" pressedImg="embed:/moml/res/home_01_on.png" onClick="root.naviContainer.selectedItem = 'menu1'" />
            <BUTTON layout="279,280,167,211" defaultImg="embed:/moml/res/home_02_off.png" pressedImg="embed:/moml/res/home_02_on.png" onClick="root.naviContainer.selectedItem = 'menu2'" />
            <BUTTON layout="474,280,167,211" defaultImg="embed:/moml/res/home_03_off.png" pressedImg="embed:/moml/res/home_03_on.png" onClick="root.naviContainer.selectedItem = 'menu3'" />

            <BUTTON layout="82,524,167,211" defaultImg="embed:/moml/res/home_04_off.png" pressedImg="embed:/moml/res/home_04_on.png" onClick="root.naviContainer.selectedItem = 'menu4'" />
            <BUTTON layout="279,524,167,211" defaultImg="embed:/moml/res/home_05_off.png" pressedImg="embed:/moml/res/home_05_on.png"  onClick="root.naviContainer.selectedItem = 'menu5'" />
            <BUTTON layout="474,524,167,211" defaultImg="embed:/moml/res/home_06_off.png" pressedImg="embed:/moml/res/home_06_on.png"  onClick="root.naviContainer.selectedItem = 'menu6'" />

            <BUTTON layout="82,771,167,211" defaultImg="embed:/moml/res/home_07_off.png" pressedImg="embed:/moml/res/home_07_on.png"  onClick="root.naviContainer.selectedItem = 'menu7'" />
            <BUTTON layout="279,771,167,211" defaultImg="embed:/moml/res/home_08_off.png" pressedImg="embed:/moml/res/home_08_on.png"  onClick="root.naviContainer.selectedItem = 'menu8'" />
            <BUTTON layout="474,771,167,211" defaultImg="embed:/moml/res/home_09_off.png" pressedImg="embed:/moml/res/home_09_on.png"  onClick="root.naviContainer.selectedItem = 'menu9'" />
            <BUTTON layout="25,1075,670,60" defaultImg="#00000000" onClick="{appLauncher.openUri('http://www.kps.or.kr', '')}"  />
        </WINDOW>
    </UILAYOUT>
</UI>  

<BUTTON>만 11개를 배치했습니다.
각 버튼을 눌렀을 때 start.xml에 정의된 <VIEWITEM>으로 이동합니다.

이중 ’한국물리학회’라는 버튼을 눌렀을 때 menu1이 선택되고 introduce.xml이 로드됩니다.

introduce.xml

<UI>
    <UILAYOUT portrait="720,1240" landscape="720,1240" >
        <LABEL layout="0,0,720,107" themeId="title" text="한국물리학회" >
            <BUTTON themeId="back"/>
            <BUTTON themeId="topNotice"/>
        </LABEL>

        <WEBVIEW layout="0,107,720,997" loadSrc="embed:/moml/res/mobileWeb/introduce.html"  clientControl="false" supportZoom="true" />

        <WINDOW layout="0,1104,720,136"  align="linear:horizontal" >
            <BUTTON themeId="footMenu1"/>
            <BUTTON themeId="footMenu2"/>
            <BUTTON themeId="footMenu3"/>
            <BUTTON themeId="footMenu4"/>
            <BUTTON themeId="footMenu5"/>
        </WINDOW>
    </UILAYOUT>
</UI>  

주석이 있는 부분은 삭제했습니다.
참고로, 주석은 HTML에서와 마찬가지로 <!-- 주석은 이렇게.. -->와 같이 작성할 수 있습니다. //, rem, /* */, #은 사용되지 않으니 주의하시기 바랍니다.

<WEBVIEW>는 html을 로드하여 내용을 출력하는 부분입니다. 하지만 하단에는 메뉴가 다섯개 있는데 이건 어디에 있을 까요..
소스 하단을 보면 <BUTTON> 다섯 개를 <WINDOW>가 감싸고 있습니다. 이게 하단 탭 메뉴로 구성되고 있습니다.
start.xml에서 <NAVIGATIONCONTAINER>의 하단에 구성하여 모든 UI에 보여주도록 구성할 수도 있지만 (TabListA02의 경우) 메인 메뉴에서 선택한 메뉴에 따라 하단의 탭메뉴가 유동적이라면 각 화면에 모두 탭메뉴를 포함시키는 것도 하나의 방법입니다.

<BUTTON>이 모두 theme로 지정되어 있습니다. 이 theme는 Document내에 정의되어 있지 않으니 applicationInfo.xml에 선언한 THEME파일은 theme/common.xml에 정의되어 있습니다.

<THEME id="footMenu1" element="BUTTON" layout="147,136" defaultImg="embed:/moml/res/menu_01_off.png" onClick="action:go('root.naviContainer','main')" />
<THEME id="footMenu2" element="BUTTON" layout="143,136" defaultImg="embed:/moml/res/menu_02_off.png" onClick="action:go('root.naviContainer','menu2')" />
<THEME id="footMenu3" element="BUTTON" layout="142,136" defaultImg="embed:/moml/res/menu_03_off.png" onClick="action:go('root.naviContainer','menu3')" />
<THEME id="footMenu4" element="BUTTON" layout="144,136" defaultImg="embed:/moml/res/menu_04_off.png" onClick="action:go('root.naviContainer','menu4')"  />
<THEME id="footMenu5" element="BUTTON" layout="144,136" defaultImg="embed:/moml/res/menu_05_off.png"  onClick="action:go('root.naviContainer','menu5')"  />  

버튼을 눌렀을 때 특정 <VIEWITEM>으로 이동하는 기능외에는 특별한 기능은 없습니다. 선택된 버튼은 다음과 같이 정의되어 있습니다.

<THEME id="footMenu1_on" element="BUTTON" layout="147,136" defaultImg="embed:/moml/res/menu_01_on.png" onClick="action:go('root.naviContainer','main')" />
<THEME id="footMenu2_on" element="BUTTON" layout="143,136" defaultImg="embed:/moml/res/menu_02_on.png" onClick="action:go('root.naviContainer','menu2')" />
<THEME id="footMenu3_on" element="BUTTON" layout="142,136" defaultImg="embed:/moml/res/menu_03_on.png" onClick="action:go('root.naviContainer','menu3')" />
<THEME id="footMenu4_on" element="BUTTON" layout="144,136" defaultImg="embed:/moml/res/menu_04_on.png" onClick="action:go('root.naviContainer','menu4')"  />
<THEME id="footMenu5_on" element="BUTTON" layout="144,136" defaultImg="embed:/moml/res/menu_05_on.png" onClick="action:go('root.naviContainer','menu5')"  />  

상황에 따라 현재 화면에 해당하는 버튼의 themeId를 변경하면 화면에는 선택된 버튼이 출력됩니다.
<THEME>에 element="BUTTON"> 이 있는 경우 이 theme는 모든 <BUTTON>에 동일하게 적용된다는 의미입니다. 따라서, 이와 같이 theme에 특정 id를 지정하여 사용하는 경우에는 사용하지 않아야 합니다.
다른 부분에 영향을 줄 수도 있어 수정하지 않았습니다만, 성능에 영향을 줄수도 있으니 주의하여 사용하시기 바랍니다.