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

ApplusForm VideoClipB01을 활용한 앱 만들기

개요

이번에는 VideoClipB01를 활용하여 센차 혹은 폰갭을 사용하여 하이브리드 앱을 개발하는 것과 유사한 애플리케이션을 만들어 보겠습니다.
메이크업이라는 주제나 디자인에는 변화없이 /moml/data에 있던 목록 데이터를 서버로 옮기고 카메라의 크기와 위치를 좀더 다양하게 변경했습니다.
목록이 길어질 경우를 대비하여 검색기능도 추가되었습니다.

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

안드로이드 마켓 다운로드
아이폰 앱스토어(심사중)
Android proejct 다운로드
iOS project 다운로드

DATA.

먼저 /moml/data에 있었던 listData.xml와 thumbnail 이미지들을 웹서버로 이동합니다.
Youtube를 검색하여 데이터를 좀더 추가했습니다.

<?xml version="1.0" encoding="UTF-8"?>
<data>
    <contatct>
        <id>15</id>
        <title>김연아 라끄베르 CF 메이크업</title>
        <subtitle>지면광고 속 김연아 메이크업의 특징은 피부 속부터 차오르는 듯한 윤기있는 피부와 내추럴하면서도 섹시한 아이 메이크업이다.</subtitle>
        <videopath>WlyMbxepzmQ</videopath>
    </contatct>
...중략...
</data>

<contatct></contatct>가 리스트에서 한줄로 보일 내용입니다.
videopath명과 thumbnail이미지의 파일명을 동일하게 만들어두면 됩니다.

VideoClipB01의 /moml/data 폴더는 이제 필요없으니 삭제합니다.
삭제를 하지 않는다면 소스상에서 기존 경로로 참조하는 오류를 찾기 어려울 수 있으니 삭제해서 오류나는 부분을 찾는게 낫습니다.

소스

이제 소스를 수정해보겠습니다.

vcb01Start.xml

<LIST id="faceList" layout="50,163,1196,557" dataSource="http://applusform.com/study/makeup/listData.xml" dataList="/data/contatct" >
    <LISTLAYOUT >
        <BUTTON layout="0,0,1196,324" defaultImg="#00ffffff" pressedImg="#00ffffff" onClick="{}"/>
        <WINDOW layout="0,0,1196,324" align="relative" >
            <WINDOW layout="0,20,1196,284" align="relative" defaultImg="/res/bg_list.png">
            <!-- IMAGE는 videopath와 동일한 파일이름으로 만들어 줍니다. -->

            <IMAGE layout="37,13,500,256" defaultImg="{'http://applusform.com/study/makeup/'+xpath.evaluate('./videopath/text()')+'.png'}"/>  

기존에는 <LIST>의 dataSource=“/data/listData.xml”이었지만 웹서버의 주소로 변경했습니다.
이렇게 경로만 변경해주면 웹서버에 접근하여 데이터를 가져옵니다.

<IMAGE>도 defaultImg의 경로를 웹서버의 경로로 변경해줍니다.
defaultImg attribute에 값을 지정할 때 문자열의 합치는 연산을 수행하고 있으므로 {}로 묶어 줍니다.
{}로 묶어주지 않으면 값으로 판단하여 스크립트를 수행하지 않으므로 오류가 발생하게 됩니다.

이제 추가된 검색기능을 보겠습니다.

UI

<WINDOW layout="0,0,1280,126"  align="relative" defaultImg="/res/bkbton.png" >
    <BUTTON layout="62,10,144,95" defaultImg="/res/btn_before.png" pressedImg="/res/btn_before_tou.png" onClick="{root.start_navigationContainer.back}"/> 
    <LABEL id="title" layout="0,0,1280,126" text="연예인 메이크업 따라하기" fontSize="45" textAlign="vCenter|hCenter" fontStyle="bold" fontColor="#ffffff"/>
    <BUTTON layout="1110,10,110,95" defaultImg="/res/btn_search.png" pressedImg="/res/btn_search_tou.png" onClick="searchPop.visible='visible'"/>

</WINDOW>
...중략...
<POPUP id="searchPop" layout="0,0,1280,720" showEffect="fade:400,up" hideEffect="fade:400,down" defaultImg="#50000000" align="linear:vertical|center" visible="invisible" onClick="searchPop.visible='invisible'">
    <WINDOW layout="1000,200" defaultImg="/res/bg_list.png" align="relative">
        <LABEL layout="50,15,900,100" text="제목으로 찾아보세요." fontSize="50" fontColor="#000000"/>
        <EDIT id="searchText" layout="50,100,800,80" defaultImg="#00ffffff" border="#00ffffff" fontSize="50" textAlign="left|vCenter" placeholder="검색어를 입력하세요."/>
        <BUTTON layout="860,100,100,80" defaultImg="/res/btn_search.png" pressedImg="/res/btn_search_tou.png" onClick="searchPop.visible='invisible', function.search"/>
    </WINDOW>
</POPUP>  

FUNCTION

<FUNCTION id="search">
    <FUNCTIONITEM cmd="faceList.dataList = '/data/contatct[contains(title/text(), \'' + searchText.text + '\')]'"/>
    <FUNCTIONITEM cmd="faceList.dataSource = 'http://applusform.com/study/makeup/listData.xml'"/>
</FUNCTION>

타이틀바 오른쪽에 검색버튼을 배치했습니다.
검색버튼을 누르면 <POPUP>이 출력됩니다.
<POPUP>에는 <EDIT>를 배치하여 검색어를 입력받아 search Function에서 검색하게 됩니다.
<LIST>의 dataList는 xpath로 구성되는데 검색시에도 xpath 문법을 그대로 이용할 수 있습니다.

vcb01Play.xml

<DATASOURCELIST>
    <DATASOURCE id="vcb01Data" src="http://applusform.com/study/makeup/listData.xml" />
    <DATASOURCE id="vcb01MeData" src="{userVariable.vcb01OfMeData}" />
</DATASOURCELIST>  

마찬가지로 웹서버의 경로로 변경해줍니다.

Play할 때 자동으로 카메라가 실행되도록 변경했습니다.

 <FUNCTIONCALL cmd="userVariable.cameraStatus = 'true', function.cameraOpen" />

카메라를 화면의 절반정도 차지하게 키울 수 있는 기능이 추가되었고, 위, 아래로도 움직일 수 있는 기능도 추가했습니다.

UI

<WINDOW id="camWin" layout="870,300,400,400" align="relative" defaultImg="#50000000" visible="invisible">
    <CAMERA id="cam" layout="5,5,390,390" type="front" savePath="storage:camera"/>
    <WINDOW layout="0,0,640,715" defaultImg="#00ffffff" onFlickLeft="{function.toLeft}" onFlickRight="{function.toRight}" onFlickUp="function.toUp" onFlickDown="function.toDown"/>
    <BUTTON layout="0,camWin.height-50,50,50" text="E" onClick="camWin.width==400?function.expandCamera:function.narrowCamera"/>

</WINDOW>

FUNCTION

<FUNCTION id="toDown">
    <FUNCTIONITEM condition="camWin.top != 300 &amp;&amp; camWin.width == 400" cmd="camWin.visible='invisible', camWin.top=300, animation.flyIn('camWin', 0, -295, 100, '', 500, '')"/>
</FUNCTION>

<FUNCTION id="expandCamera">
    <FUNCTIONITEM cmd="cam.close"/>
    <FUNCTIONITEM condition="camWin.left == 5" cmd="camWin.left=5" elseCmd="camWin.left=630"/>
    <FUNCTIONITEM cmd="camWin.top=5, camWin.width=640, cam.width=715, camWin.height=715, cam.height=715"/>
    <FUNCTIONITEM cmd="cam.open"/>
</FUNCTION>

<FUNCTION id="narrowCamera">
    <FUNCTIONITEM cmd="cam.close"/>
    <FUNCTIONITEM condition="camWin.left == 5" cmd="camWin.left=5" elseCmd="camWin.left=870"/>
    <FUNCTIONITEM cmd="camWin.top=300, camWin.width=400, cam.width=400, camWin.height=400, cam.height=400"/>
    <FUNCTIONITEM cmd="cam.open"/>
</FUNCTION>

좌우 Flick시에만 이벤트를 처리했지만, 상하 Flick시에도 onFlickUp, onFlickDown이벤트가 발생합니다.
이때 카메라화면이 위,아래로 이동하도록 toUp, toDown Function을 추가합니다.

카메라화면 위에 작은 버튼을 추가하여 이 버튼을 눌렀을 때 expandCamera, narrowCamera Function이 실행되어 카메라화면이 커졌다 작아졌다 하도록 기능을 추가했습니다.
이때, 안드로이드와 아이폰의 다른점이 있습니다.
카메라를 키우고 줄일 때 안드로이드에서는 카메라를 open, close할 필요가 없지만, 아이폰에서는 카메라를 close한 후 크기를 변경하고 다시 open해줘야 크기가 제대로 반영됩니다.

타이틀명이나 기타 자잘한 문자열 변경은 소스를 참고하시기 바랍니다.

VideoClipB01를 이용하여 간단하게 Android와 iOS 모두 잘 돌아가는 애플리케이션을 만들어 보았습니다.
첨부된 프로젝트의 라이센스키는 이미 스토어에 등록되어 있기 때문에 스토어에 등록할 수 없습니다.
정식으로 스토어에 올릴 경우에는 package명을 변경한 후 ApplusForm에서 키를 발급받으시길 바랍니다.