Profile Template B01 소스 분석(2)_앱플러스폼(ApplusForm, AppForm)

ApplusForm에서 제공하는 Templete 중 VideoClipB01에 대한 강좌입니다.
첫번째 강좌에 이어 진행하겠습니다.

Mainmenu.xml의 첫번째 메뉴이 Who am I?를 선택하면, profile.xml이 로드됩니다.

여기서 눈여겨 볼 부분은 text에 애니메이션 효과를 어떤 방식으로 주었는지입니다.

사진의 옆에 보이는 기본정보와 아래에 있는 인사말은 마치 타이핑치는 듯한 효과를 보여주고 있고, 학력사항, 경력사항, 수상내역은 한줄씩 올라오면서 서서히 나타나는 효과가 적용되어 있습니다.

먼저, MOML에서 지원하는 animation의 종류를 보겠습니다.

• flyIn
  UI element에 날아 들어와 나타나기 애니메이션을 실행합니다.
  flyOut UI element에 날아가 없어지기 애니메이션을 실행합니다.
• hide
  UI element에 사라지는 애니메이션을 실행합니다.
  polyIn UI element에 다각형으로 날아 들어와 나타나기 애니메이션을 실행합니다.
• polyOut
  UI element에 다각형으로 날아 들어와 나타나기 애니메이션을 실행합니다.
• rotate
  UI element를 회전합니다.
• show
  UI element에 보이기 애니메이션을 지정합니다.

총 7개의 animation이 지원되며 모든 UI Element에 적용하여 사용할 수 있습니다.
종류는 많지 않지만 동일한 UI Element에 flyIn과 fade를 함께 적용하는 식으로 조합하여 적용할 수 있으므로 구현하고자하는 거의 모든 animation을 구현할 수 있습니다.
자세한 내용은 MOMLAPIReference 문서를 참고하시기 바랍니다.

UI

<!-- info.txt -->
<WINDOW layout="120,60,170,140" scroll="vertical">
    <LABEL id="infoText" themeId="infoLabel" fontColor="#abcdef" layout="0,0,170,140" text="{file.read('/data/info.txt')}" visible="invisible"/>
</WINDOW>  

Function

<FUNCTIONCALL cmd="function.infoAni" delay="2000"/>

<FUNCTION id="infoAni">
    <FUNCTIONITEM cmd="userVariable.infoText=infoText.text"/>
    <FUNCTIONITEM cmd="userVariable.infoTextPos=0"/>
    <FUNCTIONITEM cmd="infoText.text=''"/>
    <FUNCTIONITEM cmd="infoText.visible='visible'"/>
    <FUNCTIONITEM cmd="animation.show('infoText', 'fade', '', 3000, '')"/>
    <FUNCTIONITEM cmd="function.infoAniLoop"/>
</FUNCTION>

<FUNCTION id="infoAniLoop">
    <FUNCTIONITEM cmd="infoText.text=string.sub(userVariable.infoText, 0, userVariable.infoTextPos)"/>
    <FUNCTIONITEM cmd="userVariable.infoTextPos = userVariable.infoTextPos + 1"/>
    <FUNCTIONITEM condition="userVariable.infoTextPos &lt;= string.len(userVariable.infoText)" cmd="function.infoAniLoop" elseCmd="function.info2Ani" delay="30"/>
</FUNCTION>  

UI는 단순합니다. LABEL에 file에서 읽어온 텍스트를 text attribute에 넣었습니다.
UI가 만들어지면서 function.infoAni를 2초 후에 실행하도록 했구요..
infoAni Function에서는 초기값을 세팅하고 animation.show효과를 적용했습니다. infoText는 3초간 서서히 나타나게 됩니다.

타이핑을 치는 듯한 효과를 위해 infoAniLoop function이 호출됩니다.
loop를 돌면서 전체 텍스트에서 한글자씩 이어붙여 infoText의 text에 넣어 주도록 했습니다.
<LABEL>의 text attribute에는 값을 넣기만 해도 바로 화면에 반영되기 때문에 infoAniLoop function을 30밀리세컨드 간격으로 호출하면서 한글자씩 추가로 출력되게 하는 것으로 타이핑 치는 듯한 효과를 구현하였습니다.

문자열을 자르는 string.sub외에 다른 function도 있으니 MOMLAPIReference 문서를 보시기 바랍니다.

이제 학력사항등에 적용된 애니메이션을 보겠습니다.
profile.xml의 <CONTAINER id="infoCon" layout="0,30,240,130" src="/data/infoTab1.xml"/> 이 애니메이션 효과가 적용된 영역입니다.

/data/infoTab1.xml을 보겠습니다.

<THEME id="tr" layout="240,28" align="linear" visible="invisible" onCreate="function.aniTableRow"/>

<WINDOW layout="0,0,240,180" align="linear:vertical" scroll="vertical" onCreate="function.init">
    <WINDOW layout="240,auto" align="linear:vertical">
        <WINDOW themeId="tr">
            <LABEL themeId="td1" text="???? ~ ????"/>
            <LABEL themeId="td2" text="영국 대학교  학사"/>
        </WINDOW>
        <WINDOW themeId="splitter" />
        <WINDOW themeId="tr">
            <LABEL themeId="td1" text="???? ~ ????"/>
            <LABEL themeId="td2" text="영국 고등학교"/>
        </WINDOW>
        <WINDOW themeId="splitter" />
        <WINDOW themeId="tr">
            <LABEL themeId="td1" text="???? ~ ????"/>
            <LABEL themeId="td2" text="영국 중학교"/>
        </WINDOW>
        <WINDOW themeId="splitter" />
        <WINDOW themeId="tr">
            <LABEL themeId="td1" text="???? ~ ????"/>
            <LABEL themeId="td2" text="영국 초등학교"/>
        </WINDOW>
        <WINDOW themeId="splitter" />
    </WINDOW>
</WINDOW>
<FUNCTION id="aniTableRow">
    <FUNCTIONITEM cmd="container.aniCount = math.add(container.aniCount, 1)"/>
    <FUNCTIONITEM cmd="container.aniDelay = 500 + math.mul(container.aniCount, 100)"/>
    <FUNCTIONITEM cmd="animation.flyIn('caller', 0,20,240,30,'easeOut3', 500, '')" delay="container.aniDelay"/>
    <FUNCTIONITEM cmd="animation.show('caller', 'fade','easeOut3', 500, '')" delay="container.aniDelay"/>
</FUNCTION>  

이력사항을 <LABEL>로 배치했습니다. 각 라인에 해당하는 <WINDOW>에는 tr theme를 동일하게 적용했음을 볼 수 있습니다.
따라서 생성될 때 aniTableRow function이 모두 실행될 것입니다.

aniTableRow에는 caller 즉 function을 호출한 UI Element에 개별적으로 flyIn과 show animation을 중복해서 적용한 것을 볼 수 있습니다.
이렇게 animation을 조합하면 flyIn으로 이동하면서 show 로 서서히 나타나는 효과를 얻을 수 있습니다.
<FUNCTIONITEM>에 각 <WINDOW>마다 500millisecond 차이가 나도록 delay를 주었으므로 마치 차례대로 출력되는 효과를 보여주게 됩니다.

여기서 <WINDOW>에만 animation을 적용하면 여기에 속해있는 두개의 <LABEL>에 모두 animation이 적용되는 것도 유의해서 보시기 바랍니다.
<LABEL>하나에만 animation을 적용할 수도 있고, 여러 UI Element가 속해 있는 <WINDOW>에도 함께 animation을 적용할 수 있습니다.

마지막으로, gallery.xml를 보겠습니다.

UI

<CONTAINER id="gallery1" themeId="galleryContainer" layout="0,0,280,430" onCreate="function.loadGallery('/data/gallery1')"/>  

Function

<FUNCTION id="containerFile">
    <FUNCTIONITEM condition="gallery1.type=='coverflow' || device.os.platform=='iOS'" cmd="'coverflowContainer.xml'" elseCmd="'galleryContainer.xml'"/>
</FUNCTION>

<FUNCTION id="loadGallery(dataDir)">
    <FUNCTIONITEM cmd="userVariable.galleryDataDir=dataDir"/>
    <FUNCTIONITEM cmd="userVariable.galleryData=file.dir(userVariable.galleryDataDir, 'jpg|png', '')"/>
    <FUNCTIONITEM cmd="gallery1.src=function.containerFile"/>
</FUNCTION>  

<CONTAINER>인 gallery1이 생성될 때 loadGallery Function이 실행되어 필요한 경로를 설정하고, coverflowContainer.xml 혹은 galleryContainer.xml을 로드하게 됩니다.

device.os.platform은 현재 동작하는 기기가 android인지 iOS인지를 알 수 있는 정보입니다.
굳이 iOS와 Android를 구분한 이유는 Android에만 가 들어있기 때문입니다.
Android에서도 <COVERFLOW>를 보고 싶다면 비교할 필요가 없이 <FUNCTIONITEM cmd="'coverflowContainer.xml'"/>로 변경해주면 Coverflow가 출력됩니다.

여기서 <FUNCTIONITEM>의 cmd에 문자열만 지정하고.. 아무것도 하지 않았는데.. 어떻게 <CONTAINER>의 src에 값이 들어갈 수 있는지 보겠습니다.

<FUNCTIONITEM cmd="gallery1.src=function.containerFile"/>를 보면 gallery1.src에 containerFile 호출한 결과를 넣도록 했습니다.
<FUNCTION>의 마지막 <FUNCTIONITEM>의 cmd를 실행했을 때 결과가 문자열이나 숫자 등의 상수값이라면, 이 값은 Function의 return 값이 됩니다.

따라서, function.containerFile의 return값은 ‘coverflowContainer.xml’ 혹은 ’galleryContainer.xml’이 되고 이 값이 gallery1.src에 설정되는 것입니다.

이상으로 본 강좌를 마치겠습니다.