TOUCH CONTROLLER CUWIN UI Component 사용서 Version :200808A 컴파일테크놀로지주식회사 www.comfile.co.kr
본 COMPONENT 는 CUWIN 시리즈에서만사용가능합니다. ( 타사 WINCE 제품에서는동작하지않습니다.) CUWIN 고객에한하여무료로배포합니다. 본사영업부에요청하시면됩니다. [02-711-2592] 등록상표 WINDOWS 는 Microsoft Corporation 의등록상표입니다. CUWIN은 Comfile Technology의등록상표입니다. 기타다른상표는해당회사의등록상표입니다. 알림 본서의내용은사전통보없이변경될수있습니다. 본제품의기능은성능개선을위하여사전통보없이변경될수있습니다. 본제품을이자료에서한용도외에서사용할경우, 폐사에서는어떠한책임도지지않으므로주의하시기바랍니다. 본제품은컴파일테크놀로지의고유기술을사용하여개발된제품으로저작권법에의한보호를받고있습니다. 따라서본제품 ( 제품에대한아이디어및서및기타포함 ) 의어떠한부분도사전에폐사와의문서동의없이복사되거나변경, 재생산할수없으며또한다른언어로도번역될수없습니다. 주의사항 본 UI COMPONENT 는 CUWIN 사용자를위하여제작된것입니다. CUWIN 고객은무료로이용할수있습니다만, 타사의 WINCE 제품에서는동작하지않습니다. 만약타사 WINCE 제품에본프로그램을무단복제및무단사용시에는민, 형사상의법적제제를받을수있음을알려드립니다. 본 COMPONENT 는컴파일테크놀로지의지적재산임을밝힙니다. 본 UI COMPONENT 는고객여러분의프로그램제작을돕기위해서라이브러리형태로제공하는것이며, 완성된형태의독립실행파일이아닙니다. 따라서본프로그램사용으로인한어떠한피해및손해에대하여, 폐사에서는책임을지지않으므로주의하시기바랍니다. 본책자의내용또한저작권법에의한보호를받고있습니다. 따라서본책자의 ( 아이디어및서및기타포함 ) 의어떠한부분도사전에폐사와의문서동의없이복사되거나변경, 재생산할수없으며, 또한다른언어로도번역될수없습니다. 인쇄내역 2008 년 08 월배포함 Copyright 1996,2008 컴파일테크놀로지
CUWIN UI Component 소개 CUWIN UI Component는 CUWIN 제품군에서사용이가능한그래픽컨트롤모음입니다. 이컨트롤들은.Net Compact Framework환경에서.Net Component형식으로제공이되어 VB.Net, C# 등의개발언어에서사용이가능합니다. Visual Studio 툴에서기본적으로제공되는버튼이나, 라벨등의 UI 컨트롤의경우 WINCE 환경에선그래픽이단조로워서, 좀더화려한그래픽을구현하려면, 직접그래픽디자인을해야하고이에대한코딩을별도로해야하는번거로움이있습니다. 그래서이런수고를조금이라도덜고자 CUWIN에서사용가능한 UI Component 모음을제작하였습니다. UI Component 의구성은다음과같습니다. RoundGradientButtonControl LabelControl RoundButtonControl ProgressBarControl SliderBarControl ClockControl CalendarControl
TableControl TrendControl CheckBoxControl WhirlControl 총 11 개컨트롤로구성되어있으며컨트롤은차후지속적으로업데이트될예정입니다. 각컨트롤에대한은주요한속성과이벤트, 멤버메소드를위주로하도록하겠습니다.
UI Component 예제화면 위화면은컴포넌트를이용하여제작한프로그램으로압축파일에함께들어있습니다.
설치방법 Component 를설치하는방법은기존 ModproControl 설치방법과동일합니다. 우선현재문서와함께압축되어있는 CuComponent 폴더를원하는위치로옮기시기바랍니다. 예 > C: Program files ComfileTools CuComponent 폴더내용을보면 위와같이 4개파일이존재합니다. 이파일중 CertificationDLL.dll 파일을 CUWIN의 Flash disk 폴더로이동시켜주십시오.
Visual Studio를실행하시고새프로젝트를하나생성합니다. 생성후, 도구상자에서마우스우측버튼을클릭하고탭추가항목을선택하시면, 새로운탭이하나생성됩니다. 여기에원하시는탭이름을입력하십시오 예 > CuComponent 새로생성된탭에서마우스오른쪽버튼을클릭하시면, 항목선택이라는메뉴가나오게됩니다. 이를클릭해주십시오.
항목선택을클릭하면위와같은창이하나뜨게됩니다. 여기서찾아보기를선택하여처음에옮겼던 CuComponent 폴더의 CuComponent.dll파일을선택하십시오. 정상적으로컨트롤이등록되었다면, 위와같은컨트롤들이등록되어있을것입니다. 이제컨트롤들을폼위로끌어놓아크기를조정하여배치하여주시기바랍니다. 폼위에올려놓은컨트롤은일부컨트롤을제외하고모두동일한크기로생성이될것입니다. 하지만크기조절이가능하므로, 원하는크기로변경하시기바랍니다. 단, WhirlControl의경우크기조정이불가능합니다. 위의화면처럼컨트롤이보인다면정상적으로설치가된것입니다. 만약컨트롤이정상적으로보이지않다면, 폴더에 CuComponent.WindowsCE.asmmeta.dll 파일이있는지확인하여주시기바랍니다.
LabelControl LabelControl의경우 Text를디스플레이를할수있는컨트롤입니다. Visual Studio에서제공하는 Label과동일한역할을합니다. 주요속성 속성명 LabelColor 컨트롤의색을지정합니다. BackColor 컨트롤의배경색을지정합니다. Font 컨트롤의사용될폰트를지정합니다. LeftRectMode 컨트롤의왼편의모서리를각진형태로사용할지둥근형태로사용할지를지정합니다. TextColor 컨트롤의글자색을지정합니다. TextValue 컨트롤에서표시될 Text 를지정합니다. 위 2번째그림과같이 LeftRectMode 속성을이용하면 RoundButtonControl과붙여좀더자연스러운그래픽을만들수있습니다.
RoundButtonControl RoundButtonControl 은모서리가둥근형태의버튼입니다. 주요속성 속성명 ForeColor 컨트롤의색을지정합니다. ClickForeColor 컨트롤이눌려졌을때색을지정합니다. BackColor 컨트롤의배경색을지정합니다. Font 컨트롤의사용될폰트를지정합니다. RightRectMode 컨트롤의오른편의모서리를각진형태로사용할지둥근형태로사용할지를지정합니다. TextColor 컨트롤의글자색을지정합니다. TextValue 컨트롤에서표시될 Text 를지정합니다. 위 2번째그림과같이 RightRectMode 속성을이용하면, LabelControl과붙여좀더자연스러운그래픽을만들수있습니다. 이벤트 Click: 컨트롤의클릭이벤트입니다. MouseDown: 컨트롤이눌려졌을때이벤트입니다. MouseUp: 컨트롤이떼어졌을때이벤트입니다.
RoundGradientButtonControl RoundGradientButtonControl 은 Gradation 효과가들어간모서리가둥근형태의버튼입니다. 주요속성 속성명 StartColor 버튼의시작색을지정합니다. EndColor 버튼의끝색을지정합니다. ClickStartColor 버튼클릭시시작색을지정합니다. ClickEndColor 버튼클릭시끝색을지정합니다. BackColor 컨트롤의배경색을지정합니다. TextColor 컨트롤의글자색을지정합니다. TextValue 컨트롤에서표시될 Text를지정합니다. Font 컨트롤의사용될폰트를지정합니다. 이벤트 Click: 컨트롤의클릭이벤트입니다. MouseDown: 컨트롤이눌려졌을때이벤트입니다. MouseUp: 컨트롤이떼어졌을때이벤트입니다.
ProgressBarControl ProgressBarControl은 Max치에대한현재 Value값을게이지형태로디스플레이하는컨트롤입니다. 주요속성 속성명 EmptyColor 값이비어있을때의색을지정합니다. FillColor 값이채워져있을때의색을지정합니다. LineColor 테두리의색을지정합니다. MaxValue 수치의최대치를지정합니다. Value 현재컨트롤의수치값을지정합니다. ViewMode 디스플레이형태를수직혹은수평형태로지정합니다.
SliderBarControl SliderBarControl은 Max치에대한현재 Value값을디스플레이하고이를변경할수있는컨트롤입니다. 주요속성 속성명 EmptyColor 값이비어있을때의색을지정합니다. FillColor 값이채워져있을때의색을지정합니다. LineColor 테두리의색을지정합니다. MaxValue 수치의최대치를지정합니다. Value 현재컨트롤의수치값을지정합니다. ViewMode 디스플레이형태를수직혹은수평형태로지정합니다. PointFillColor 값을표시하는 Point 커서의색을지정합니다. PointLineColor 값을표시하는 Point 커서의테두리색을지정합니다. Divide 컨트롤을지정한수치로등분합니다. 속성에입력할수있는값은 MaxValue값의대한소수형태이며그이외값을입력할시가장가까운소수를찾아값이지정됩니다. 최대 20등분까지가능합니다. 값이 1인경우등분없이컨트롤을사용하게됩니다. 이벤트 Click: 컨트롤의클릭이벤트입니다.
ClockControl ClockControl 은시간을디스플레이하는컨트롤입니다. 주요속성 속성명 DisplayLanguage 요일을표시할언어를지정합니다. UpStartColor 컨트롤상단의시작색을지정합니다. UpEndColor 컨트롤상단의끝을지정합니다. DownStartColor 컨트롤하단의시작색을지정합니다. DownEndColor 컨트롤하단의시작색을지정합니다. LineColor 컨트롤의테두리색을지정합니다. TextColor 컨트롤에서사용하는텍스트의색을지정합니다. DateFont 날짜를표시하는폰트를지정합니다. TimeFont 시간을표시하는폰트를지정합니다. 주요메소드 메소드명 Start () 시간디스플레이를시작합니다. Stop () 시간디스플레이를중지합니다.
CalendarControl CalendarControl은달력을디스플레이할수있는컨트롤입니다. 상단화살표를눌러표시되는달을변경할수도있고특정일에메모를삽입할수있습니다. 날짜를클릭할시상, 하, 좌, 우, 각대각선방향까지총 9칸만큼의크기의메모를디스플레이할수있는영역이나타나옵니다. 주요속성 속성명 DisplayLanguage 컨트롤의시작색을지정합니다. StartColor 컨트롤의끝색을지정합니다. EndColor 메모가삽입된날을표시할테두리색을지정합니다. MemoColor 오늘날짜를표시할테두리색을지정합니다. TodayLineColor 글자색을지정합니다. Font 컨트롤에서사용할폰트를지정합니다. 주요메소드 메소드명 지정한날짜에지정한메모를등록합니다 AddMemo (string Date, string Data) 인자 Date Data 메모날짜 (Format: 2008.8.20 ), 메모내용
TableControl TableControl 은지정한행, 열만큼의테이블을사용할수있는컨트롤입니다. 주요속성 속성명 Rows 테이블의행수를지정합니다. Cols 테이블의열수를지정합니다. ColumnStartColor 열제목부분의시작색을지정합니다. ColumnEndColor 열제목부분의끝색을지정합니다. ColumnFont 열제목부분에서사용할폰트를지정합니다. ColumnStrings 열제목, string 배열형태를지정합니다. ColumnTextColor 열제목부분의글자색을지정합니다. LineColor 컨트롤의테두리색을지정합니다. TableStartColor 데이터영역의시작색을지정합니다. TableEndColor 데이터영역의끝색을지정합니다. TextColor 데이터영역의글자색을지정합니다. Font 컨트롤에서사용할폰트를지정합니다.
주요메소드 메소드명 SetValue (int Row, int Col, string val) 인자 Row Col Val 데이터를지정한셀에입력합니다. 메모날짜 (Format: 2008.8.20 ), 메모내용입력할데이터 테이블전체데이터를입력합니다. SetValues (string[,] values) 인자 Values 테이블데이터, 2 차원 string 배열
TrendControl TrendControl은입력되는값을실시간그래프형태로표시하는컨트롤입니다. 기본적으로좌측의그림처럼눈금에대한값을표시하지않습니다. 만약우측그림처럼값을표기하고싶으시다면, label를배치하여표시해주시기바랍니다. 속성 속성명 Rows 테이블의행수를지정합니다. Cols 테이블의열수를지정합니다. BackColor 컨트롤의색을지정합니다. LineColor 컨트롤의테두리색을지정합니다. MaximumValue 값의최대치를지정합니다. RefreshInterval 값을읽어화면의뿌리는타임을지정합니다. ShiftGapWidth 이전값과현재값사이간격을지정합니다. ValueCount 화면에표시할값의개수를지정합니다. 주요메소드 메소드명 SetValue (ArrayList data) 인자 컨트롤의표시할데이터를입력합니다 ArrayList 입력데이터, ArrayList 방식 Start () 컨트롤표시를시작합니다. Stop () 컨트롤표시를중지합니다.
CheckBoxControl CheckBoxControl은좌측그림과같이두가지의형태의체크박스를지원합니다. CheckBoxControl은컨트롤자체에서 Text를지원하지않고있어, 우측그림처럼 CheckBoxControl과 Label을같이배치하여사용하셔야합니다. 속성 속성명 BackColor 컨트롤의배경색을지정합니다. CheckStartColor Rect 모드 : 체크표시의시작색을지정합니다. Check 모드 : 체크표시색을지정합니다. CheckEndColor Rect 모드 : 체크표시의끝색을지정합니다. EmptyColor 체크되지않았을때색을지정합니다. LineColor 테두리색을지정합니다. ControlSize ViewMode 컨트롤크기를지정합니다. 크기는 Small, Medium, Large 세가지입니다. 체크형태를지정합니다. 모드에는 Rect, Check 두가지가있습니다. Checked 컨트롤이체크상태를지정합니다. 이벤트 Click: 컨트롤의클릭이벤트입니다.
WhirlControl WhirlControl은다이얼버튼과같은형식으로제작되었습니다. WhirlControl에서다루는값은 360도를기준으로한각도값으로, 이값을특정값으로변경하는것은간단한비례공식을이용하여사용하실수있습니다. 예 > 1000을 Max값으로하였을때현재의각도가나타내는값, 현재각도 :180 360:180 = 1000:x 360*x = 1000*180 x = 180000/360 x = 500 WhirlControl 은크기수정이불가능합니다. 속성 속성명 Angle 현재멈춰있는포인트의각도입니다. ChangeAngle 현재이동중인포인트의각도입니다. BackColor 컨트롤의배경색을지정합니다. TimerInterval 포인트가이동할때의 Interval을지정합니다. 이벤트 ChangedValue: 포인트가이동이완료한후호출되는이벤트입니다. ChangingValue: 포인트가이동중일때호출되는이벤트입니다.
예제 예제프로그램은 ZIP 파일안에라이브러리와함께들어있습니다. 예제프로그램은 CuComponent(UI Component) 와 ModproControl을이용하여제작하였습니다. 코드에대한자세한내용은실제예제프로그램의코드에주석으로처리해두었습니다. 본문서에서는예제프로그램에서유의할사항에대해서만기술하였습니다. - Panel을이용한페이지교체페이지교체는동일한위치의동일한크기의 Panel 컨트롤 3개를교체하여보여주는방식을사용하였습니다. Panel 을디자인타임에서교체하는방법은 속성창의컨트롤리스트의 Panel을선택하면아래와같이폼디자인화면의 Panel이선택이됩니다. 선택된 Panel에서, 좌측상단의컨트롤이동아이콘 우측버튼을클릭하여 맨앞으로가져오기 메뉴를선택하여주시면컨트롤이보이게됩니다.
- CUBLOC과의통신예제프로그램에선 ModproControl을이용하여 Cubloc과통신을하게됩니다. 아래는 CUBLOC쪽소스입니다. Const Device = CB280 Opencom 1,9600,3,100,100 ' RS 232 통신규격설정 Set Modbus 1,1 Set Ladder On Ramclear Dim nadvalue As Integer Dim nadvalue2 As Integer Do nadvalue=adin(0) nadvalue2 =Adin(1) If nadvalue > 1000 Then nadvalue=1000 End If If nadvalue2 > 1000 Then nadvalue2=1000 End If _D(0)=nADValue _D(1)=nADValue2 Loop
주의사항 현재 CuComponent의경우, 컨트롤자체에서그래픽작업을하기때문에, 지나치게많은컨트롤을사용시메모리사용과속도에제약이생길수있습니다. 항상 CuComponent의컨트롤을이용하여프로그램하실때에는메모리와속도에유의하여프로그램하시기바랍니다. CuComponent는저희 CUWIN 제품군에서만동작하도록되어있습니다. CUWIN이외제품군에서사용이불가하오니이에유의하여주시기바랍니다. 앞으로도지속적으로 CuComponent를업데이트할예정입니다. 사용하시면서버그를발견하시거나, 개선점, 새로운컨트롤에대한내용을저희홈페이지의커뮤니티에올려주세요!