XPLATFORM 101
이벤트에 대한 내용은 기초가 부족하면 어느 단계에 가서 한계에 도달하게 됩니다.
일반적인 웹 프로그래밍 모델에 익숙해져 버리면
이벤트를 적절히 사용하기 보다는 기존에 익숙한 방법을 사용하게 됩니다.
하지만 이렇게 되는 경우 최적의 성능을 담보할 수 없으며 심지어는
잘못된 시점에 이벤트를 처리해서 돌이킬 수 없는 문제를 양산하곤 합니다.
(특히 이런 문제는 테스트 중에는 발견되지 않습니다. 이런 시나리오를 고민하지 않고
테스트 케이스를 만들거든요).

엑스플랫폼 애플리케이션은 EDA를 기본으로 하고 있다고 합니다.
이벤트 기반 아키텍처(Event Driven Architecture)의 약자로 프로그래밍에 한정되는 개념은 아니고
좀 더 범용적인 개념입니다.
위키피디아의 정의를 보면 자동차에 대한 예를 들고 있습니다.

판매중(for sale)인 자동차가 고객이 구매해서 판매됨(sold)으로 상태가 바뀌게 되면
자동차의 상태 변화를 감지한 시스템에서 이벤트를 발생하게 되고
재무, 마케팅, 관련 부서 시스템에 자동으로 전송되어지게 됩니다.
그리고 전송된 이벤트는 각 시스템의 요구에 따라 적절한 처리 과정을 거치게 됩니다.



여기서 중요한 것은 분산된 시스템간에 이벤트가 생성되고 전송되어 필요에 따라 처리되는 시스템 아키텍처라는 점입니다.
그리고 각 이벤트는 주목할 만한 상태의 변화(notable thing)를 의미합니다.

EDA를 구성하는 요소는 크게 3가지로 구분됩니다.
이벤트 생성자(Event generator), 이벤트 채널(Event channel), 이벤트 처리 엔진(Event processing engine)
이벤트 생성자는 시스템의 상태 변화를 감지하여 표준화된 형식의 이벤트를 생성합니다.
이벤트 채널은 이벤트를 각 시스템에 전달하는 역할을 합니다.
그리고 이벤트 처리 엔진에서는 수신된 이벤트를 적절하게 처리하고 필요에 따라 이벤트를 발생시키기도 합니다.

EDA를 적용하는 것은 서로 다른 트랜잭션을 연결해줄 수 있으며 이벤트 처리에 따른 흐름을 가지게 되어
익숙한 워크플로우 모델을 떠올리게 합니다.
EDA를 같이 이야기하면서 따라오는 것이 약결합(loosely coupled)에 대한 이야기입니다. 이벤트 생성자는 생성된 이벤트의 처리에 대한 책임을 지거나 관리하지 않습니다. 이벤트의 발생과 처리가 분리가 된 상태이며 이에 따른 유연성을 보장할 수 있습니다.

이 정도 기초적인 개념을 가지고 엑스플랫폼의 이벤트 모델을 접근한다면
좀 더 쉽게(?) 이해할 수 있지 않을까 싶습니다.

http://cafe.naver.com/xplatform101/33 
XPLATFORM 101
이제 마지막 단계입니다.
GraphicPath 을 사용하면 벡터그래픽의 장점인 확대와 축소를 가능하게 합니다.
기업용 애플리케이션을 만들면서 그림 그리는 툴이 뭐가 필요할까 싶지만
의외로 많은 부분에서 이를 필요로 합니다.
조직도나 다이어그램을 그린다고 할때
드로잉 도구가 없이 그리려고 한다면 정말 난감할 겁니다.

커브는 Cubic Bezier Curve 형식을 따릅니다.
베지어 곡선 Bezier curve 은 불규칙한 곡선을 표현하기 위해 프랑스의 수학자 베지어(Bezier P.)가 수학적으로 만든 선이라고 합니다. 이럴때는 수학공부를 학교다닐때 열심히 할걸이라는 생각이 듭니다. 커스텀 컴포넌트 개발로 깊이 들어갈때에도 수학적인 지식이 필요하기때문에 여유가 있을때 기본을 다시 잡아주는 것도 좋습니다.

각 속성에 대한 설명이 가장 잘 나와있는 이미지로 설명을 대체합니다.


각 점과 해당 점의 콘트롤 포인트가 동일하게 되면 컨트롤할 수 있는 포인트가 없습니다.
예를 들어 M 100 100 c 0 0 0 0 100 100 와 같이 데이터가 정의되었다면
100,100 좌표점에서 200,200 좌표점간에 직선이 그어집니다.
그렇지 않다면 각 콘트롤 포인트를 활용해서 원하는 곡선을 만들어줄 수 있습니다.

GraphicPath 의 각 속성은 data 속성을 직접 지정해줄 수도 있지만
UX 스튜디오를 통해 편집도 가능합니다.
하지만 직접 편집하는 것은 조금 까다롭기도 하고 애플리케이션 작업시 원하는 것은
동적으로 그래픽을 구성하는 것이기 때문에 참조만 하시면 될 듯 합니다.

설정된 GraphicPath  영역내에서 오른쪽 마우스를 클릭하면 
GraphicPath Edit 항목이 나옵니다.
그리고 나면 지정된 값을 GUI 환경에서 수정할 수 있는 편집상태가 됩니다.



콘트롤 포인트의 위치에 따라 원하는 곡선을 만들 수 있습니다.
채우기와 같이 동작하게 되면 입체적인 면을 만들어낼 수도 있습니다.
작업을 마치게 되면 마무리를 해줘야 겠죠.
역시 오른쪽 마우스를 클릭하고 End Edit 를 선택합니다.


* 참고로 GraphicPath 는 기타 아이콘으로 표시가 되어있습니다.
수정을 원한다면 프로젝트 탐색기에서 TypeDefinition을 더블클릭해주면 편집 가능한
대화상자가 보일겁니다.
거기에서 GraphicPath를 선택하고 Image 컬럼의 아이콘을 42번으로 바꾸어줍니다.


자주 쓰는 기능은 아니지만 저렇게 조정이 가능합니다.
다른 아이콘들도 맘에 들지 않는다면 자유롭게 바꿀 수 있습니다.
단 초기화 기능따위는 없으니 주의하시구요.

http://cafe.naver.com/xplatform101/32 
XPLATFORM 101
이번 시간에는 타원,호를 살펴보겠습니다.
사실 타원과 호라고 했지만 원을 그릴때도 마찬가지로 적용합니다.
엄격하게 말하면 원은 완전한 원은 아닙니다. 하지만 일반적인 모니터로 보았을때
거의 구분이 안되기 때문에 그냥 원이라고 합시다. ㅠㅠ

앞에서 살펴본 GraphicPath 의 속성은 사실 어디서 뚝 떨어진것은 아니고
SVG 스펙에 근거해서 만들어졌습니다.

내용을 보면 거의 유사하다고 보시면 됩니다.
SVG 소스를 그대로 가져다 놓으면 동일하게 구현되지만 약간의 차이가 있긴 합니다.
elliptical arc 는 A 로 구분하고 다음과 같은 속성을 가집니다.
nRx nRy nAngle bLargearcflag bSweepflag nX nY
먼저 nRx, nRy는 타원의 반지름에 해당합니다. 2개 속성의 크기가 같다면 타원이 아닌 원이 됩니다.
중심을 기준으로 X축 반지름과 Y축 반지름이 같은 상황이구요.
각 반지름의 길이가 달라지면 타원이 됩니다.

중심축을 기준으로 그냥 그리게 되면 각 축에 수평으로 타원이 그려지는데
X축의 회전각도 nAngle에 변화를 주면 해당 각도에 따라 방향이 변하게 됩니다.


첫번째 케이스는 M 300.0 350.0 a 150 150 0 1 1 50 50 로 설정한 상태입니다.
X,Y 축 반지름이 동일하기 때문에 정원에 가까운 모습입니다.
마지막 속성값인 nX nY 는 끝점으로 정원을 만들고 싶다면 해당 값을 0에 가깝게 하면 됩니다.
단 0으로 하면 안되고 2이상의 값으로 지정해주고 마지막에 path 를 끝내는 z를 추가해주면 작은 구멍이 채워집니다.
그렇게 놓고 보면 빈틈이 없어 보입니다.


두번째 케이스는 M 300.0 350.0 a 100 150 0 1 1 50 50 로 설정한 상태입니다.
X축 반지름이 줄었기 때문에 서있는 계란 모양이 만들어졌습니다.


세번째 케이스는 M 300.0 350.0 a 100 150 45 1 1 50 50 로 설정한 상태입니다.
X축 회전각도를 45도 기울였기 때문에 그림과 같은 모양이 되었습니다.
동적으로 응용을 하게 되면 애니메이션 효과도 낼 수 있겠죠.
하지만 애니메이션은 별도의 컴포넌트를 제공하니 굳이 사용할 필요는 없습니다.

bLargearcflag bSweepflag 속성은 설명이 좀 애매하긴 한데
아래 그림이 가장 잘 설명이 되어있습니다.


W3C 스펙에 나와있는 내용이긴 한데 그림으로 보고 이해하는것이 빠를듯 합니다.
일단 타원은 여기까지 하고 다음 시간에는 커브에 대해 알아보겠습니다.

UX 스튜디오에서 편집할때 스크립트나 인라인 속성으로 집어넣을 수 있고
아래 그림과 같이 편집 대화상자에서 항목을 추가할 수도 있습니다.