투비소프트 (33) 썸네일형 리스트형 그림을 그려보자 - GraphicPath (하) 이제 마지막 단계입니다. GraphicPath 을 사용하면 벡터그래픽의 장점인 확대와 축소를 가능하게 합니다. 기업용 애플리케이션을 만들면서 그림 그리는 툴이 뭐가 필요할까 싶지만 의외로 많은 부분에서 이를 필요로 합니다. 조직도나 다이어그램을 그린다고 할때 드로잉 도구가 없이 그리려고 한다면 정말 난감할 겁니다. 커브는 Cubic Bezier Curve 형식을 따릅니다. 베지어 곡선 Bezier curve 은 불규칙한 곡선을 표현하기 위해 프랑스의 수학자 베지어(Bezier P.)가 수학적으로 만든 선이라고 합니다. 이럴때는 수학공부를 학교다닐때 열심히 할걸이라는 생각이 듭니다. 커스텀 컴포넌트 개발로 깊이 들어갈때에도 수학적인 지식이 필요하기때문에 여유가 있을때 기본을 다시 잡아주는 것도 좋습니다. .. 그림을 그려보자 - GraphicPath (중) 이번 시간에는 타원,호를 살펴보겠습니다. 사실 타원과 호라고 했지만 원을 그릴때도 마찬가지로 적용합니다. 엄격하게 말하면 원은 완전한 원은 아닙니다. 하지만 일반적인 모니터로 보았을때 거의 구분이 안되기 때문에 그냥 원이라고 합시다. ㅠㅠ 앞에서 살펴본 GraphicPath 의 속성은 사실 어디서 뚝 떨어진것은 아니고 SVG 스펙에 근거해서 만들어졌습니다. http://www.w3.org/TR/SVG/paths.html 내용을 보면 거의 유사하다고 보시면 됩니다. SVG 소스를 그대로 가져다 놓으면 동일하게 구현되지만 약간의 차이가 있긴 합니다. elliptical arc 는 A 로 구분하고 다음과 같은 속성을 가집니다. nRx nRy nAngle bLargearcflag bSweepflag nX nY .. 그림을 그려보자 - GraphicPath (상) 애플리케이션을 만들면서 그림을 그리는 일이 있을까 싶지만 일반 컴포넌트만으로 부족한 부분을 채워주기 위해 그래픽 처리를 지원해주는 컴포넌트가 있다는 것이 얼마나 고마운지 모릅니다. 그렇지 않다면 정말 힘들게 표현을 해야 하거든요. 엑스플랫폼에서는 GraphicPath 라는 컴포넌트를 제공합니다. 폼 위에 도형을 직접 그릴 수 있는 컴포넌트로 GraphicPathData 정보를 가지고 선이나 곡선을 그릴 수 있습니다. data 속성에 대해서 먼저 알아보겠습니다. 해당 속성값에 들어가는 인자값은 type과 argument 순으로 들어갑니다. type은 대소문자 구분없이 들어갈 수 있습니다. M : moveTo 이동에 대한 속성입니다. GraphicPath 시작점(또는 마지막 위치)에서부터 이동하게 됩니다. .. 콤보 컴포넌트 콤보는 여러 종류의 음식이 섞여 나오는 것을 의미한다고 합니다. 극장에 가서 팝콘이랑 콜라랑 같이 주문을 할때 콤보세트로 주문을 하게 되면 좀 더 가격이 저렴해지거나 합니다. 또는 게임을 할때 몇가지 명령을 조합해서 내리는 경우 새로운 공격을 할 수 있는 명령이 만들어지는데 이것도 콤보라고 표현합니다. 그냥 콤보라고만 하면 좀 혼란스러워 콤보박스라고 이야기합니다. 엑스플랫폼에서는 컴포넌트명이 Combo 입니다. 그리고 일반적으로 콤보박스와 드롭다운을 구별하여 텍스트 영역을 편집 가능하다면 콤보박스 그렇지 않다면 드롭다운이라고 구분하기도 합니다. 엑스플랫폼에서는 type 으로 이를 구분할 수 있게 지원합니다. UX 스튜디오에서 Combo의 모습은 달력 컴포넌트의 기본 모습과 동일합니다. 내부적으로 들어가면.. 달력 컴포넌트 사용해보기 날짜를 입력하는 방식에는 여러가지가 있지만 가장 편한 방법은 직접 텍스트로 입력하는게 아닌가 싶습니다. 하지만 직접 입력하는 방식은 실제 가능한 날짜인지 검증하는데 어려움이 있습니다. 그래서 많은 개발 도구에서 다양한 기능을 가지는 달력 컴포넌트를 제공하고 있습니다. 개발 과정에서 처음에 단순한 달력을 원하다가 점점 기능이 추가되더니 스케쥴 관리 애플리케이션이 되어버릴 수도 있습니다. UX 스튜디오는 기업용 애플리케이션 제작에 필요한 강력한 달력 컴포넌트를 제공하고 있습니다. 메뉴얼을 찾아보면 다음과 같이 설명되고 있습니다. Calendar는 날짜와 시간을 입력받기위한 Component입니다. 날짜와 시간의 출력보다 입력 관련된 기능이 많습니다. 월단위로 보고 입력하는 방식과 편집영역에 직접입력하는 방식.. 디버깅 조금 해보기 그럼 간단한 애플리케이션을 만들면서 디버깅에 대해 살펴보겠습니다. 만들어볼 애플리케이션은 간단한 그리드에 간단한 데이터가 들어가고 각 셀을 클릭하면 이벤트를 발생시키도록 했습니다. 새로운 프로젝트를 만들고 (File > New > Project) 새로운 폼을 만듭니다 (File > New > Item > Form) 툴바에서 그리드를 선택하고 폼에 배치합니다. 크기는 상관없습니다. 그리고 DataSet도 하나 만들어줍니다. DataSet 은 실체는 있지만 눈에 보이지 않는 객체로 폼에서 그려도 상관없지만 폼에 표현되지 않고 Invisible Objects 영역에 표시됩니다. 데이터도 설정해놓고 DataSet을 그리드로 드래그앤드롭해서 연결하면 셋팅이 완료됩니다. 그리드 이벤트에서 oncellclick 를 .. 디버깅 기초 애플리케이션 개발 시 가장 어려운 부분이 어디서 문제가 생기는지 확인하는 작업입니다. 과거에는 alert 메시지나 로그만으로 오류가 발생하는 지점을 찾아야 했지만 최근에 나오는 도구는 대부분 디버깅 기능을 제공하고 있어 그나마 개발자들의 부담을 덜어주고 있습니다. 엑스플랫폼 개발시 사용하는 UX 스튜디오에도 기본적인 디버깅 기능을 제공합니다. 전체 프로젝트 단위 또는 개별 화면 단위로 라인 디버깅(Line Debugging)을 지원하며 특정 함수나 서브루틴 실행 시 상위 호출 함수 관계를 확인할 수 있는 Call Stack 기능을 제공합니다. 또한 디버깅 외에도 Trace Log를 설정할 수 있는 기능을 디버깅과 별도로 제공합니다. 일단 UX 스튜디오에서 디버깅과 관련된 기능을 살펴보겠습니다. 다른 툴을.. 레이아웃 구성하기 (Div, Panel) Div 라고 하면 HTML 태그에서 나오는 div 와 혼란스러운 부분이 있는데 일단 정의부터 확인해보겠습니다. 메뉴얼을 보면 Div를 다음과 같이 정의하고 있습니다. 하나의 화면에 여러개의 부분화면을 구성할 때 사용하는 컴포넌트로 주 화면과 독립되거나 연계된 화면을 구성할 수 있으며 다른 폼(Form)과 연결해서 사용할 수 있고 border 나 scrollbar를 사용해 영역을 분할할 수 있다. 프레임과의 차이점은 프레임은 각 프레임이 별개의 윈도우처럼 동작하는데 반해 Div는 화면을 분할해서 폼을 용이하게 사용하려는 목적이라고 볼 수 있습니다. UX 스튜디오에서 작업은 Div 를 배치하고 해당 영역 위에 컴포넌트를 추가하면 됩니다. 코드에서 보면 다음과 같이 구성이 됩니다. 각 컴포넌트의 위치를 좌표값.. 이전 1 2 3 4 5 다음
