UI의 Attribute값을 변경하는 방법_앱플러스폼(ApplusForm, AppForm)

MOML은 크게 화면을 구성하는 <UI>와 데이터를 처리하거나 연산등을 수행하는 <FUNCTION>로 구성되어 있습니다.
다른 요소들도 있지만 개발을 하다보면 이 두 부분만 손대고 있게 됩니다.
그만큼 중요하고, 개발 방법도 다양합니다.

<UI>의 UI Elements들의 Attribute에 값을 세팅하는 법에 대해 알아보겠습니다.

<FUNCTIONLIST>
    <FUNCTION id="labelTouched">
        <FUNCTIONITEM cmd="device.toastPopup('Label touched')"/>
    </FUNCTION>
</FUNCTIONLIST>
 <UI>
    <UILAYOUT potrait="320,460" landscape="320,460">
        <LABEL layout="0,0,200,30" defaultImg="#ffffff" text="Sample!!!" fontSize="20" fontColor="#000000" textAlign="left|vCenter" onClick="function.labelTouched"/>
    </UILAYOUT>
</UI>

<UI> 내에서는 보통 위와 같은 식으로 구성됩니다.
<LABEL>의 layout, defaultImg, text, fontSize, textAlign, onClick과 같은 Attribute에 값을 설정할 때 상수로 설정하는 방법입니다.
고정된 크기이거나 값의 변화가 없는 경우에는 간편하게 사용하는 방법입니다.

상황에 따라 <LABEL>의 크기나 위치가 바뀌어야 하거나 text의 값을 바꿔야 하는 경우도 있는데, 이런 경우에는 어떻게 처리해야 하는지 예제를 통해 설명해보겠습니다.

1. attribute에서 script를 실행하는 방법

attribute는 상수값을 받도록 되어 있지만 상수값을 리턴하는 script라면 사용해도 무방합니다.

 <LABEL text="Sample"/>

<LABEL text="{'Sample'}"/>

<FUNCTION id="sampleText">
    <FUNCTIONITEM cmd="'Sample'"/>
</FUNCTION>

<LABEL text="{function.sampleText}"/>

<LABEL text="{userVariable.sampleText}"/>

모두 <LABEL>의 text에 “Sample”이라는 값을 대입하는 코드입니다. 표현은 다르지만 동일한 코드입니다.
상수값만을 받는 attribute의 경우에 {}로 묶인 문장이 있다면 이는 script로 인지하여 script를 실행한 결과값을 attribute에 대입합니다.

UI Elements에 따라 attribute에 script를 사용하더라도 실행되지 않을 수 있지만 대부분은 동작하도록 구현되어있습니다.

<LABEL layout="0,0,200,30" defaultImg="#ffffff" text="Sample!!!" fontSize="20" fontColor="#000000" textAlign="left|vCenter" onClick="function.labelTouched"/>

모든 attribute에서 script 수행을 위해 {}를 넣어줘야 하는 건 아닙니다.
위 의 onClick을 보면 function을 호출하는 script임에도 불구하고 {}가 없습니다.

onClick, onShow, onHide등은 상수값을 필요로 하는 attribute가 아닌 event가 발생했을 때 특정 일을 수행하는 script가 수행되어야 하는 attribute이므로 {}를 굳이 해주지 않아도 괜찮습니다.

1. <FUNCTION>에서 attribute에 대입하는 방법

<UI>가 생성될 때 값을 지정해주는 경우가 아닌 실행중에 값을 바꾸고 싶은 경우에 사용됩니다.
처음 예제를 <LABEL>을 터치했을 때 <LABEL>의 text를 바꾸는 예제로 수정해보겠습니다.

<FUNCTIONLIST>
    <FUNCTION id="labelTouched(txt)">
        <FUNCTIONITEM cmd="labelSample.text = 'Hello ' + txt"/>
    </FUNCTION>
</FUNCTIONLIST>

 <UI>
    <UILAYOUT potrait="320,460" landscape="320,460">
        <LABEL id="labelSample" layout="0,0,200,30" defaultImg="#ffffff" text="Sample!!!" fontSize="20" fontColor="#000000" textAlign="left|vCenter" onClick="function.labelTouched(caller.text)"/>
    </UILAYOUT>
</UI>

실행결과는 다음과 같습니다.

onClick에서 function을 호출할 때 인자로 caller.text를 전달합니다.
caller.text는 호출하는 LABEL의 text attribute값으로 labelSample.text와 같은 의미입니다.

labelTouched Function에서는 기존 값인 ’Sample!!!’에 ’Hello ’를 더하여 labelSample.text에 지정하면 바로 UI에 반영되어 출력됩니다.

반복해서 터치를 하면 계속해서 ’Hello ’가 더해지므로, 세번째 그림과 같이 LABEL의 ellipsis기능이 동작하는 것을 볼 수 있습니다.
정해진 layout안에서 text를 출력할 수 없어지면 fontSize가 자동으로 줄어들고 최소 사이즈에 도달했을 때는 문장의 처음 또는 중간 또는 끝부분에 …을 자동으로 출력하는 기능을 가지고 있습니다.

minFontSize와 ellipsis는 attribute로 제공되며 여러 옵션을 제공하고 있으니 API Reference 문서를 보시기 바랍니다.