SlideMenuA02를 활용한 앱 만들기_앱플러스폼(ApplusForm, AppForm)

개요.

이번에는 SlideMenuA02를 활용하하여 센차 혹은 폰갭을 사용하여 하이브리드 앱을 개발하는 것과 유사한 애플리케이션을 만들어 보겠습니다.모바일 웹페이지만 있는 경우에는 별다른 수정없이 애플리케이션을 만들어 앱스토어에도 올려 배포할 수 있습니다.

만들어진 프로젝트는 폴더째로 묶었습니다. elcipse혹은 xcode에서 바로 사용할 수 있습니다.

apk 다운로드
애플 앱스토어 다운로드
Android proejct 다운로드
iOS project 다운로드

이번 강좌에서는 농림축산식품부의 모바일 홈페이지를 애플리케이션으로 만들어 보겠습니다. 홈페이지 주소는 http://m.mafra.go.kr/이고 아래와 같이 생겼습니다.

이 홈페이지를 애플리케이션으로 옮긴 최종 모습을 먼저 보면 다음과 같습니다.

SlideMenuA02와 기본 골격은 동일하지만 홈페이지의 메뉴에 맞춰서 메뉴가 늘어났고, 처음 실행시 splash화면을 추가했습니다.
이제 수정해보겠습니다.

이미지 변경 및 폴더 정리.

먼저 moml/res의 이미지를 변경 및 추가했습니다.

왼쪽이 추가된 이미지입니다. splash화면에 사용할 intro.png와 webback.png, webfor.png, webbg.png가 추가되었습니다.
top_bg.jpg는 색상을 바꿨습니다.

다음으로 moml/ui를 변경했습니다.
각 화면에 맞는 웹페이지 링크만 연결하면 되므로 moml/ui/main에 있는 파일을 모두 moml/ui로 옮기고 나머지 폴더는 삭제했습니다.
여기에도 메뉴에 사용할 아이콘과 메뉴 이미지를 변경 및 추가되었습니다.
아래와 같이 단촐한 모양새입니다.

소스 수정.

start.xml

앱을 실행했을 때 로고가 있는 splash 화면을 먼저 보여준 후 시작하도록 하기 위해 여기서는 이미지를 출력하고 1초 동안 animation을 실행하도록 했습니다.
onShow function을 보면 흰 배경에 1초동안 천천히 로고가 출력된 후 1초더 머물다가 다음 화면으로 이동하게 됩니다.
다음 화면은 next function이 호출되면서 main.xml이 로드됩니다.

<FUNCTIONITEM cmd="function.next" delay="2000"/>는 <FUNCTIONITEM cmd="container.open('main.xml', 'root')" delay="2000"/> 이렇게 바꾸고 next function을 삭제해도 동일한 결과를 보입니다.

main.xml
메뉴가 늘어나다보니 소스가 좀 길어졌습니다.
주요 부분만 살펴보겠습니다.

<RADIO id="leftMenuInfo" style="button" groupId="leftMenu" themeId="thLeftButton" onClick="function.navigation('news')" selected="true">
    <LABEL id="infoIcon" themeId="thLabel1" defaultImg="menuIcon1.png"/>
    <LABEL themeId="thLabel2" text="최신뉴스"/>
</RADIO>

<RADIO id="leftMenuContact" style="button" groupId="leftMenu" themeId="thLeftButton"  onClick="function.navigation('notice')">
    <LABEL id="mapIcon" themeId="thLabel1" defaultImg="menuIcon2.png"/>
    <LABEL themeId="thLabel2" text="공지공고"/>
</RADIO>
... 중략...
<RADIO id="leftMenuLicense" style="button" groupId="leftMenu" themeId="thLeftButton" onClick="function.navigation('facebook')" >
    <LABEL id="reserveIcon" themeId="thLabel1" defaultImg="menuIcon11.png"/>
    <LABEL themeId="thLabel2"  text="페이스북"  />
</RADIO>
<LABEL themeId="thLeftButton" layout="140,80" defaultImg="leftMenuSelected.png" align="linear:vertical|top|center">
<LABEL themeId="thLeftButton" layout="60,60" defaultImg="menuAll.png" onClick="function.menuAllMenu" />

</LABEL>  

왼쪽에 출력되는 메뉴들입니다.
최신뉴스부터 페이스북까지 홈페이지에서 제공하는 메뉴를 그대로 옮겼습니다.
모든 메뉴를 모아서 볼 수 있는 기능도 layout크기만 조정하고 그대로 살렸습니다.

                    <NAVIGATIONCONTAINER themeId="bg" id="navigation" layout="0,0,320,460" selectedItem="news">
                        <VIEWITEM id="news" src="news.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="notice" src="notice.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="explain" src="explain.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="incruit" src="incruit.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="alert" src="alert.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="incruit" src="incruit.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="stats" src="stats.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="price" src="price.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="basket" src="basket.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="blog" src="blog.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="twitter" src="twitter.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="facebook" src="facebook.xml" transitionInEffect="none" transitionOutEffect="none" />
                        <VIEWITEM id="allMenu" src="mainAllMenu.xml" transitionInEffect="tornado" transitionOutEffect="tornado"/>
                    </NAVIGATIONCONTAINER>  

NAVIGATIONCONTAINER에서는 각 메뉴마다 id를 다시 할당해줬고, 이동할 페이지인 src도 현재폴더의 xml파일들로 지정해줬습니다.
이제 메뉴를 눌렀을 때 로드되는 페이지를 보겠습니다.

news.xml

<UI>
    <UILAYOUT portrait="320,460" landscape="320,460">
        <WEBVIEW id="web" layout="0,{userVariable.weby},320,{userVariable.webh}" 
            loadSrc="http://m.mafra.go.kr/bbs/list.jsp?board_division=b_sec_1&amp;menu_gubun=menu_1" clientControl="false"/>

        <LABEL id="navigationTitle" themeId="themeNavigationTitle" text="최신뉴스" onClick="">
            <BUTTON themeId="themeMenuBtn"/>
        </LABEL>

        <WINDOW layout="0,420,320,40" align="linear:horizontal|vCenter" defaultImg="/res/webbg.png">
            <BUTTON layout="30,30" margin="10,0,10,0" defaultImg="/res/webback.png" onClick="web.back"/>
            <BUTTON layout="30,30" margin="10,0,10,0" defaultImg="/res/webfor.png" onClick="web.forward"/>
        </WINDOW>
    </UILAYOUT>
</UI>  

별 내용 없습니다.
컨텐츠를 표시할 WEBVIEW와 타이틀 LABEL, 웹페이지내에서 링크를 눌렀을 때 이동하게 되므로 웹페이지 내에서 이전과 다음 페이지로 이동하는 기능을 하는 버튼들이 전부입니다.
notice, price, stats, twitter, alert, basket, blog, explain, facebook, incruit.xml도 모두 WEBVIEW의 loadSrc만 다릅니다.

여기서 유심히 봐야할 부분은 WEBVIEW에서 width와 height부분을 고정값으로 하지 않고 userVariable변수에 들어있는 값을 사용한 점입니다.

<WEBVIEW id="web" layout="0,{userVariable.weby},320,{userVariable.webh}"

start.xml

userVariable.weby와 userVariable.webh는 위와 같이 start.xml에서 Android인 경우와 그렇지 않는 경우로 구분하여 값을 다르게 했습니다.
userVariable.weby값을 마이너스값으로 하면 화면의 위쪽으로 올라가므로 웹페이지의 상단이 Android는 30만큼 iOS는 50만큼 보이지 않게 됩니다.
좀더 설명하면,
navigationTitle을 WEBVIEW위쪽에 배치하면 아래와 같이 타이틀이 WEBVIEW에 가려지게 됩니다.
물론 WEBVIEW의 y좌표를 navigationTitle보다 밑으로 배치하면 되지만 빨간 박스 영역이 출력되는게 싫었습니다.

웹페이지를 수정할 수는 없어 웹뷰를 navigationTitle밑에 두는 방법을 택하기로 했습니다.
이제 어느정도 가려졌습니다.
하지만 완전히 가려진 것은 아니기에 WEBVIEW의 y좌표를 –50으로 바꿨더니 아래와 같이 깔끔하게 가려졌습니다.

여기서 다른 문제가 발생했습니다.
안드로이드의 WEBVIEW는 iOS와 다르게 너무 많이 올라가는 문제가 있어 Android인 경우에는 WEBVIEW의 y좌표를 약간 조정했습니다.

twitter.xml

<WEBVIEW id="web" layout="0,40,320,380" loadSrc="https://twitter.com/mafrakorea" clientControl="false"/>  

twitter.xml과 같이 상단을 가리지 않아야 하는 페이지의 경우에는 WEBVIEW의 y좌표를 navigationTitle밑으로 배치했습니다.

그외에 mainAllMenu.xml로 수정해야 하지만 수정된 파일은 첨부된 파일을 참고해주세요..

SlideMenuA02를 이용하여 간단하게 모바일 웹페이지를 애플리케이션으로 바꾸는 과정은 이걸로 끝입니다.
Android와 iOS 모두 잘 돌아가는 애플리케이션이 만들어졌습니다.
첨부된 프로젝트는 라이센스키가 등록되어 있지 않기 때문에 30일이 지나면 실행되지 않습니다.
정식으로 스토어에 올릴 경우에는 www.applusform.com에서 키를 발급받으시길 바랍니다.

실행 icon을 바꾸는 방법이나 타이틀을 바꾸는 방법은 프로젝트 변경하기에서 소개해보겠습니다.