웹개발을위한 ASP.NET Framework 기반의 ComponentOne 사용법 권대건 부산대학교컴퓨터공학과 duskan@pusan.ac.kr Abstract 최근 Twitter 나 Facebook 과같이웹을이용한 SNS 가폭발적으로증가한데이어웹기반온라인게임시장이활성화되면서웹페이지에대한관심이증가하고있다. 웹페이지가이슈가되면서이를개발하기위한각종웹페이지개발툴이나오고있다. 그중 ComponentOne 은.net 기반의 Chart 를그리기위한유료라이센스툴로써 WinForm, ActiveX, iphone, Windows Phone, ASP.NET 등다양한환경에대한라이브러리를제공한다. 본보고서에서는이중 ASP.NET 기반으로작성된 ComponentOne 에대해설치및환경설정방법을소개한다. 그리고 ComponentOne 을이용하여기본적인 Line Chart 를구현하고, 센서에서가져오는값을 Line Chart 를이용하여보여줌으로써실제 ComponentOne 이어떻게동작하는지를알아본다. Keywords: ComponentOne, WebPage, Chart, ASP.NET 1 서론 최근 Twitter나 Facebook과같이웹을이용한 SNS가폭발적으로증가하고 SNS를활용한여러가지웹기반소셜게임과여러웹기반의온라인게임시장이활성화되면서웹어플리케이션개발에대한관심이높아지고있다. 웹페이지가이슈가되면서 j-query, JQuery Mobile과같은웹페이지개발을위한여러가지라이브러리가나왔다. 하지만대부분의툴의경우웹페이지의 UI기능에대해특화되어있으며 Chart와같은전문적인정보를다루는웹어플리케이션에대한지원은부족하다. ComponentOne 은.Net기반의유료라이센스툴로써 C# 기반의 WinForm 뿐만아니라 Wndows Phone, Iphone 과같은모바일개발을위한툴과웹페이지개발을위한 ASP.NET 기반의라이브러리를제공한다. 특히 ComponentOne에서는다양한종류에대한 Chart 기능을지원하고있으며 Sample 프로젝트를통해각각의기능을자세히설명하고있다. 본보고서에서는 ASP.NET 기반으로작성된 ComponentOne을사용하기위한설치및환경설정방법을소개한다. 그리고 ComponentOne을이용하여 Chart중대표적인 Line Chart 를구현하고, 센서정보가저장된 Database로부터값을가져와 Line Chart를이용하여보여줌으로써실제 ComponentOne이어떻게동작하는지를알아본다. 1
2 ComponentOne 의설치및환경설정 ComponentOne은 ASP.Net 기반으로동작하기때문에웹페이지에서이를사용하기위해서는 ASP.NET이설치되어있어야한다. 또한 ASP.NET이동작하기위한환경설정과 ComponentOne을사용하기위한환경설정이필요하다. 본보고서에서는 ComponentOne을사용을위해 Window 7 Professional OS환경에서 Visual Studio 2010을이용하였다. ComponentOne을설치하기위한설치과정은아래와같이진행된다. 1..Net 설치및 ASP.NET 개발을위한 Visual Studio 2010 설치 2. ASP.NET을사용하기위한환경설정 3. ComponentOne 다운로드및설치 4. ComponentOne SampleCode 구동 2.1.Net 설치및 ASP.NET 개발을위한 Visual Studio 2010 설치 ComponentOne은.Net 기반의툴로웹페이지개발을위한 ASP.NET 언어를지원한다. 본논문에서는.NET설치및 ASP.NET을사용하기위한대표적인툴인 Microsoft Visual Studio 2010 버전을설치하였다.[2] Microsoft Visual Studio 2010에는 ASP.NET구동을위한 C# 컴파일환경뿐만아니라.NET Framework 4.0 버전설치과정도포함되어있다. Microsoft Visual Studio 2010 을설치하기위해서는아래링크에서설치하면된다. http://www.microsoft.com/visualstudio/kor 2.2 ASP.NET을사용하기위한환경설정 ASP.NET을이용한웹페이지를사용하기위해서는 IIS(Internet Information Service) 를이용하여외부에서접속가능한포트및접속권한을설정해주어야한다. IIS 설치는아래와같이진행된다. 1. 시작 - 제어판 - 프로그램추가제거 - Window 기능사용 / 사용안함클릭 2. 인터넷정보서비스 - World Wide Web - 응용프로그램개발기능전체체크후확인. 3. 시작 - 실행 - IIS IIS 가정상적으로실행되면외부에서 ASP.NET 페이지에접근하기위해 IIS 설치완료후 IIS 를이용하여 ASP.NET 경로설정및 ASP.NET 에접근하기위한포트를설정해야한다. 2
1. 시작 - IIS 실행 2. 왼쪽항목에서 응용프로그램풀 - 응용프로그램풀추가 선택 3. 버전 -.Net Framework v4.0, 관리되는파이프라인모드 - 통합선택후확인 4. 왼쪽항목에서 사이트 - 웹사이트 추가선택 5. 사이트이름, 응용프로그램풀, 포트입력후확인 ASP.NET 에서포트를선택시일반적으로기본웹포트인 80 번포트를사용한다. 하지만 Apache 와같이다른응용프로그램이 80 번포트를사용중인경우에는다른포트를사용해야 하는데이때방화벽에예외를등록해야외부에서접근이가능하다. 2.3 ComponentOne 다운로드및설치 ComponentOne은아래링크에서구매및다운로드가가능하다.[1] ComponentOne은여러가지언어에대해지원하며그중 ASP.NET용 ComponentOne 을설치한다. 본보고서에서는 C1StudioEterprise 2011v3을설치하였다. http://www.componentone.com/downloads/ ComponentOne에대한설치가완료되면 Visual Studio에서 ASP.NET 웹응용프로그램프로젝트를생성한다. 그후도구상자를열고도구상자에서 오른쪽마우스클릭 - 항목찾기 를클릭한후 C1으로시작되는모든항목을체크한후확인을누른다. 해당과정을모두마치면도구상자에 ComponentOne 관련컴포넌트가생성된다. 2.4.NET 환경에서 ODBC와 MySql을연동하기위한환경설정 Visual Studio에서 ODBC를이용할경우 MS-SQL이나 Oracle DB는기본적으로라이브러리를제공하지만, MySQL의경우 ODBC에연결하기위한별도의프로그램설치가필요하며 MySQL 와.Net 연동을위한라이브러리참조가필요하다. 먼저 ODBC와연동을위해서는아래링크에서제공되는 ODBC Connector를설치해야한다. http://dev.mysql.com/downloads/connector/odbc/ 위링크에서개발환경에맞게 ODBC Connector 를설치한후 시작 - 검색 - odbc 로 ODBC Data Source Administrator 를실행시킨다. 그리고 UserDNS 에서추가버튼을누른후 3
MySQL ODBC 를추가하게되면 ODBC 에서 MySQL 의사용이가능하다. ODBC 의설치가끝나면.Net 과 MySQL 을연결하기위한라이브러리를추가해야한다. 아래링크에서 Mysql-connector-net Zip 파일을다운받는다. http://dev.mysql.com/downloads/connector/net/ 위에서받은파일의압축을풀고 mysql.data.msi 파일을실행하면아래경로에 MySql.Data.dll 파일이생성된다. C:/Program Files (x86)/mysql/mysql Connector Net 6.6.5/Assemblies/v4.0 생성된 dll 파일을생성한프로젝트에참조파일로추가하면 ODBC 에서 MySql 를이용한.Net 작업이가능하다. 3 ComponentOne LineChart 및데이터베이스연동 ComponentOne에는다양한 Chart와그외에웹페이지를작성하기위한수많은컴포넌트들이존재한다. 이러한다양한컴포넌트는설치시 시작 -모든프로그램- ComponentOne - Studio for ASP.NET Wijmo 에있는예제프로젝트를통해확인할수있다. 본보고서에는다양한 Chart 중가장대표적이라할수있는 LineChart를직접구현해보고실행해본다. 앞서언급한예제코드의경우 aspx를이용하여작성된코드가대부분이므로아래예제에서는 cs(c#) 을이용한컴포넌트를구현하는방법에대해설명한다. 3.1 LineChart 먼저 aspx 에서웹페이지에 chart를배치하기위해위치를선언한다. 그후 cs에서 LineChart 를제어하기위해앞서 aspx에선언된 line chart를 this.linechart id 와같은방식으로불러온다. LineChart 객체를불러온후객채의속성을이용하여 LineChart를제어할수있다. LineChart 구조는그림1와같다. 3.1.1 SeriesList 와 LineChartSeries LineChart에서라인은 LineChartSeries라는변수에의해정의된다. LineChartSeries는 X와 Y 값을 Array형태로저장하며 LineChart의속성을이용하여값의표시형태와 Marker등을제어할수있다. LineChartSeries에의해정의된라인은 LineChart의 SeriesList 속성에 List 형태로 4
LineChart Lable 그림 1: Line Chart 의각속성들을이용하여 C# 에서 Line Chart 를제어할수있다. 저장되며, SeriesList 에저장되는 LineChartSeries 의수만큼 LineChart 의라인수가결정된다. 3.1.2 Axis Axis는 LineChart의 X와 Y 축을설정하기위한속성이다. Axis.X, Axis.Y를통해 X, Y 축에접근할수있으며, X, Y축의표현범위와글꼴등을설정할수있다. 기본적으로 SeriesList 에입력된값에따라자동적으로값이결정되며필요한경우사용자가축의범위를설정할수있다. 3.1.3 Legend Legend는 LineChart의범례와관련된속성이다. TextSize와 TextStyle을이용하여범례에표시되는글꼴, 글의크기등을설정할수있으며 Style과 Border을이용하여 Legend영역에표시되는글자의색과테두리등을설정할수있다. 또한 Visible 변수를이용하여범례를표시하거나생략할수있다. 3.1.4 Marker Marker 는 LineChartSeries 내에저장되어있는변수중의하나이며해당 LineChartSeries 에서 Marker 와관련된속성을담당한다. Marker 는 Marker 의모양, 크기등을설정할수있으며 Vis- 5
ible 속성을이용하여 Marker 을숨기거나나타낼수있다. 3.2 데이터베이스연동 ComponentOne 에서는다음과같이 2 가지경우에따라데이터베이스를서로다른방식으로연 동할수있다. 1. ODBC 를이용하여 Chart 와연동하는경우. 2. C# 에서제공되는 SQL 라이브러리를이용하여 Chart 에데이터를집적넣는경우 3.2.1 ODBC를이용하여데이터베이스와 Chart 연동 ODBC를이용하여데이터베이스에연동하기위해서는 LineChart 도구에서데이터소스선택- 새데이터소스를이후데이터베이스를선택하고새연결을눌러자신이사용할데이터베이스와연결한다. 이후 Selec문구성화면에서가져올 Database의쿼리를설정하고제대로선택되었는지쿼리테스트를통해실행해본다. 앞의과정이다완료되면 aspx페이지에서 Select문으로가져온테이블을현재 Chart에 Binding해야한다. 이에대한자세한설명은뒤에예제에서예와함께자세히설명하도록하겠다. 3.2.2 C# 에서제공되는 SQL라이브러리를이용하여 Chart 연동 ODBC를이용하지않고 C# 에서제공되는기본 SQL라이브러리를이용해서도데이터베이스를연동할수있다. 기본 SQL라이브러리를이용하여데이터베이스를가져오는과정은인터넷에잘나와있기때문에본보고서에서는생략하도록한다. Chart에서는내부에존재하는 Series- List변수에 Data를관리하는 Series객체들을저장하여관리한다. LineChart에서는 Series객체에 X,Y값이저장되며 LineChart에값을추가하는방법은다음과같다. varseries = newlinechartseries(); this.c1linechart1.serieslist.add(series L ow); series.data.x.addrange(valuesx.t oarray < DateT ime? > ()); series.data.y.addrange(valuesy.t oarray < double? > ()); 위 Code 에서 valuesx, valuesy 는 List 형태로저장된 X, Y 의데이터값이다. series 에위와 같이 Data 들을추가한후 LineChart 의 SeriesList 에해당 Series 를추가하면 Chart 에 Data 가 추가된다. 6
그림 2: DB 로부터센서정보를가져와 LineChart 형태로표현한예 4 Line Chart 를이용한예 ComponentOne 예로 5 개의센서에서값을 LineChart 형태로표현하는프로그램을작성하였 다. 그림 2 의 (a) 에있는데이터베이스를 MySQL 로작성하고이를 Select * from tank Query 를이용하여 ODBC 로가지고왔다. 가져온 Data 는 Time 을 X 축으로다음과같이 Binding 하였다. < DataBindings >< wijmo : C1ChartBindingXF ield = time XF ieldt ype = String Y F ield = temp l Y F ieldt ype = Number / >< /DataBindings > Binding은 X축하나당 Y축하나씩 Binding되기때문에각행에대해전부다 Binding하였다. 이후 LineChartSeries를이용하여 SeriesList에값을저장한후각각의라인에 Marker를표시하도록설정하고 Markers.Type을이용하여 Marker 모양을원형으로설정하였다. 그이후센서값의최대값과최소값을표시하기위해 Axis의 X, Y의범위를설정하고 X축의 Text를 45 도기울여표현하였다. 그림2의 (b) 는위와같이설정하여나온결과화면이다. 5 결론 ComponentOne 은 ASP.NET 기반의언어에서동작하는웹페이지이다. ASP.NET 의경우 Window OS 환경에서만동작하기때문에실행환경에대한약간의제약이있다. 하지만 C# 언어를 이용하여개발이가능하여진입장벽이낮으며.Net 을활용하여쉽게웹페이지개발을할수 7
있도록여러가지컴포넌트와기능을제공한다. 특히 Chart에대한다양한기능을가진라이브러리를제공하며 Sample 프로젝트를통해 Chart에어떠한기능이들어가있는지확인할수있어개발자가 Chart를쉽고다양한형태로개발할수있다. 따라서본보고서에서는 ComponentOne을설치하는방법을소개하고 LineChart를이용하여간단한예제를구현해보았다. 향후에는 LineChart외에다른다양한 Chart에대해구현하는방법에대해소개할예정이다. References [1] Component one. http://www.componentone.com/downloads/. [2] Microsoft, visual studio. http://www.microsoft.com/visualstudio/kor. 8