XPLATFORM 101

- Button > Button


버튼 역시 다른 오브젝트와 마찬가지로 바인딩이 가능합니다.

하지만 버튼은 텍스트를 보여주기 보다는 버튼의 기능으로 동작하기 때문에

바인딩을 처리하기 애매할 수 있겠네요.


다른 오브젝트보다 버튼은 스타일을 적용했을때

상당히 많은 변화를 보여줄 수 있습니다.

얼마전까지만 해도 입체적인 느낌을 주는 패턴이 많았는데

최근에는 간결하면서 명확한 디자인을 많이 선호하는 경향인듯 합니다.


엑스플랫폼을 사용하는 장점 중 하나가 브라우저에 따른(IE, 웹킷, 모질라) 스타일 적용 시의 차이를

하나로 묶을 수 있다는 것입니다.

(물론 엑스플랫폼 개발팀에서는 힘든 작업이겠지만...)


API를 보면 터치와 관련된 이벤트나 메소드를 확인해볼 수 있습니다.

예를 들어 ontouch 의 경우에는 터치스크린을 통해 터치 이벤트를 발생시킵니다.

스마트폰만 대상으로 하는 것이 아니라 윈도우 7 부터 지원하는 터치 이벤트에 대한

처리도 지원하는 부분이라고 하네요.


버튼에서 제공되는 스타일 속성 중에서 background 를 사용하면 재미있는 결과도 만들 수 있네요.



image 속성에 원하는 url이나 첨부 이미지 경로를 기록하고

색상은 transparent 로 설정하고 나머지 속성을 지정해주면 위와 같은 투명 버튼을 만들 수 있습니다.

(물론 이미지는 투명 gif 나 png 파일이 있어야 겠죠).




http://cafe.naver.com/xplatform101/229


XPLATFORM 101

- CheckBox > CheckBox


체크박스를 바인딩한다는 것이 딱 와닿지는 않는데 도움말을 좀 보면

DataSet 의 특정 컬럼 값과 바인딩 하는 것입니다.

현재 Row의 지정된 컬럼의 값이 체크박스와 연동되는 것입니다.

반대로 체크박스의 상태가 수정되면 바인딩된 컬럼의 값이 바뀐다는 이야기입니다.


바인딩 처리는 Bind 태그내에서 처리됩니다.

    <Bind>

      <BindItem id="item0" compid="CheckBox01" propid="value" datasetid="Dataset00" columnid="Column0"/>

      <BindItem id="item1" compid="CheckBox00" propid="value" datasetid="Dataset01" columnid="Column0"/>

      <BindItem id="item2" compid="CheckBox00" propid="text" datasetid="Dataset01" columnid="Column1"/>

    </Bind>

UX 스튜디오에서는 마우스드래그앤드롭으로 작업을 하게되구요.


체크박스를 보면 스타일에 button... 라는 이름의 속성이 많습니다.

버튼은 체크를 해주는 영역을 이야기하는 것입니다.



해당 영역의 스타일을 조정해서 다양한 형식의 체크박스를 표현할 수 있습니다.


특이한 것은 falsevalue, truevalue 속성이 있어서

체크박스의 값을 지정하는 속성을 제공합니다.

http://cafe.naver.com/xplatform101/228 

XPLATFORM 101

- Div/PopupDiv > PopupDiv


먼저 설명을 보도록 하겠습니다.

PopupDiv는 하나의 화면에 여러개의 부분화면을 구성할 때 사용하는 컴포넌트입니다.

Division과 비슷한 개념이지만 PopupDiv는 포커스가 있는 경우에만 보여집니다.

즉 일시적으로 사용하는 경우에 유용하게 사용됩니다.


엑스플랫폼에서는 디자인 작업의 편의를 위해서인지

PopupDiv 영역을 화면 내에서 같이 디자인을 하더군요.

visible 속성을 지정할 수 있지만

실제 동작할때에는 팝업 상태에는 true가 되고 그렇지 않은 경우에는 false 가 되기 때문에

isPopup과 같은 메소드로 확인하는 것을 권장하고 있습니다.

그래서 디자인시에 따로 visible 속성을 false 로 처리할 필요는 없습니다.


일반적으로 팝업은 해당 이벤트가 발생하는 위치를 기준으로 새로운 창을 생성합니다.

그래서 이벤트가 발생한 오브젝트를 기준으로 좌표값을 설정합니다.


예제를 다시 보죠.

function Button00_onclick(obj:Button,  e:ClickEventInfo)

{

var ret;

var nX = system.clientToScreenX(obj,0);

var nY = system.clientToScreenY(obj,obj.position.height);

ret = PopupDiv00.trackPopup(nX+10,nY+10);

}

버튼 클릭 이벤트를 받아서 팝업을 생성하는데 해당 좌표값을 이벤트를 발생시킨 버튼을 기준으로 합니다.

system.clientToScreenX 는 원하는 컴포넌트 기준의 좌표값을 스크린 기준의 좌표값으로 바꾸는 API 입니다.

여기서 스크린 기준이라는 것은 사용자가 보는 스크린을 이야기합니다.

듀얼 모니터인 경우에는 2개의 모니터 해상도를 합친 크기가 됩니다.

그렇게 할 필요가 뭐가 있지 싶은데...엑스플랫폼에서 팝업은 메인프레임의 범위를 벗어날 수 있기 때문입니다.



이런 경우에는 프레임 기준으로 좌표값을 잡기 애매하기 때문에 그런듯 합니다.


trackPopup 메소드가 실행되면 자동으로 PopupDiv의 visible 속성은 true 가 됩니다.

그리고 혹 모니터 영역을 벗어나는 경우에는 자동으로 재배치가 된다고 합니다.

* 듀얼 모니터의 경우에는 PopupDiv 의 좌측상단을 기준으로 재배치가 됩니다.

화면 중간에 걸치게 할 수가 없죠.


PopupMenu는 메뉴 컴포넌트의 서브메뉴를 구성하는 컴포넌트라고 합니다.

트리와 비슷하다고 이해하면 될 것 같습니다.

하여튼 이 녀석도 동일하게 trackPopup 메소드를 가지고 있습니다.


trackPopup 메소드는 리턴값을 가지고 있는데

팝업된 객체가 닫히면서 리턴이 됩니다.


예제에 보이는 메뉴스러운 PopupDiv는 별도의 폼으로 구성되어 있는데

다음과 같이 이벤트가 정의되어 있습니다.

function Button00_onclick(obj:Button,  e:ClickEventInfo)

{

this.parent.PopupDiv00.closePopup(obj.text);

}


...


ret = PopupDiv00.trackPopup(nX+10,nY+10);

alert(ret);

this 라는 것은 해당 PopupDiv 를 의미하고 parent 는 form 을 이야기합니다.

* 이 예제에서는 this.closePopup 메소드를 바로 호출해도 무리가 없어 보이는데

저렇게 처리를 했네요. ~~


하여간 창이 닫히면서 텍스트를 넘겨주고 해당 텍스트를 받아서 처리를 합니다.

http://cafe.naver.com/xplatform101/227