yfiles AJAX 를이용한웹어플리케이션기능구현 (1) Web Application Function Implementation using yfiles AJAX 탁해성 부산대학교컴퓨터공학과 tok33@pusan.ac.kr Abstract yworks 에서는 PC 및웹환경에서그래프를그릴수있는 yfiles 을상용화하였다. yfiles 은 Graph, Diagram, Network 등을시각화하고편집할수있도록하는그림도구이다. 최근웹을이용하여 PC 어플리케이션과유사한성능을내기위한시도가많이됨에따라, yfiles 에서도웹프로그래밍언어에대해호환성을가지는버전들을많이출시하였다. 본보고서에서는상용화된 yfiles 중에서 AJAX 버전을사용하여웹어플리케이션을개발하기위해필요한제반지식에대해소개하고자한다. 아울러 yfiles for AJAX 를사용하기위한간단한예제를통해어떻게웹어플리케이션이동작하는지알아본다. Keywords: yfiles for AJAX, yfiles, Graph Drawing, Web Application 1 Introduction 최근스마트폰의등장으로사용자가보다직관적이고빠르게정보를전달하기위해인터렉션이중요해지고있다. 웹분야에서도전통적인인터렉션방식의한계를보완하기위해 AJAX가많이쓰이고있다. AJAX를이용할경우기존에웹페이지를호출하는방식보다서버응답에대한대기시간이짧고, 서버의부담을줄여준다. 또한이미출력된 HTML 문서를자유롭게변경하거나, 재배치할수있다. 현재많이사용되고있는 facebook, twitter의경우에도 AJAX를이용하여인터렉션을강화하였다. 이러한현상은정보를시각화하는방식에도많이응용되고있는데, 현재 yworks사에서상용하고있는 yfiles for AJAX ( 이하 yfiles AJAX) 도한부류로볼수있다 [4]. yfiles AJAX는 Graph와같은다이어그램을그릴수있는드로잉툴이자라이브러리이다. yfiles AJAX는기존에개발된 yfiles for Java를기본으로하여서버에동작에대한전반적인사항을구현하고, 클라이언트에서원하는정보에대한시각화나가공을할수있는인터페이스를제공한다. 이를이용하여소셜네트워크에대한시각화웹어플리케이션에대한연구도진행중에있다 [1]. 1
본보고서는 yfiles AJAX에대해소개하고, 구현을위해필요한서버 / 클라이언트의구성을알아보고자한다. 더불어간단한예제를통해어플리케이션이어떻게동작하는지소개한다. 2장은 yfiles AJAX를알기위해필요한개념에대해서술한다. 3장에서는 yfiles AJAX의서버와클라이언트가어떤식으로구성되어있는지서술한다. 4장은간단한예제를이용하여 yfiles AJAX를이용하여간단한웹어플리케이션예제를통해사용법에대해소개한다. 끝으로 5장에서는 yfiles AJAX에대한결론을내리고본보고서를마친다. 2 yfiles AJAX 시스템개요 2.1 Web Application and AJAX 웹어플리케이션은 Client/Server Application으로사용자는표준웹브라우저를이용하여어플리케이션을실행한다. 이때사용자가사용하는각기능은기능이구현되어있는서버로부터네트워크를통해공급받는다. 현재, 웹어플리케이션이발달함에따라실제 PC 어플리케이션과유사하게정보를갱신해주고있다. AJAX를사용하면, 웹어플리케이션을보다 PC 어플리케이션에근접하게만들수있다. 일반적인웹어플리케이션에서한기능이동작할때페이지전체가바뀌는것과달리, AJAX는실제기능이수행되는부분만정보를갱신한다. 하지만 AJAX를사용하게될경우여러웹브라우저에최적화되어있지않기때문에동작이되지않는경우가발생한다. 이는각웹브라우저에맞는프레임워크를적용하여해결할수있지만개발에많은시간을필요로한다. 2.2 yfiles AJAX 특징 yfiles AJAX는웹어플리케이션을기반으로한다. 이를이용하여 Graph, Diagram, Network 와같은구조를시각화하고편집할수있다. yfiles AJAX는서버 / 클라이언트구조로되어있다. 서버에서는 yfiles for Java ( 이하 yfiles Java) 를기반으로각기능들을구현하며, 클라이언트에서는 Dojo Toolkit 및 AJAX를통해서버에서구현된기능을이용한다 [2]. yfiles AJAX는다음과같은특징이있다. 그래프는서버측에유지된다. 그래프의 Zoom Level, Node, Edge에대한정보들은서버에유지된다. 그래프편집기능은서버에서제공한다. 클라이언트측은 GUI를이용하여서버측그래프데이터를생성및변경할수있다. 그래프편집기는클라이언트측에구현된다. 서버는기능을사용하기위해 yfiles JAVA 를사용한다. 클라이언트는 Dojo 및 Javascript를이용하여컴포넌트를구현한다. 2
그래프편집기능은서버에서제공한다. 아래그림 1 은 yfiles AJAX 의컴포넌트를개략적으로나타낸것이다. 그림 1: yfiles AJAX Components - 클라이언트가서버에있는이벤트를호출하여동작 그림 1을통해알수있듯이서버와클라이언트두부분으로나뉘어져있음을알수있다. 서버에서는사용자가수행한 Action에대해기능을수행하기위해서 Servlet을사용하며, 클라이언트는 MVC 모델을이용하여 Graph를그리거나해당정보를취득및변경할수있는기능을제공한다. 2.3 Dojo Toolkit [3] Dojo Toolkit은 JavaScript 애플리케이션을신속하게배치할수있는오픈소스 JavaScript 사용자인터페이스툴킷이다. Dojo Toolkit은 JavaScript 코드를쓰는시간을줄여주고덜복잡하게해주는 JavaScript 라이브러리의시리즈로간주할수있다. Dojo Toolkit의기능은네가지별도의섹션으로전개된다. 분할된각기능은분할된라이브러리로나타나라이브러리파일크기를작게유지한다. 이는라이브러리다운로드로인해발생하는웹어플리케이션의성능저하를막아준다. 각라이브러리의특징은아래와같다. Base는 Dojo Toolkit의기반이라할수있으며, 여기에는 DOM 유틸리티함수, CSS3 선택기기반 DOM 쿼리, 이벤트처리, Ajax, 기본애니메이션및 Dojo의클래스기반오브젝트지향기능이포함되어있다. 3
Core는 Base에포함되지않은일부추가적인함수가포함되어있다. 이패키지는고급애니메이션, 끌어서놓기, I/O, 데이터관리, 브라우저히스토리관리와같은실제로유용한컴포넌트를일부제공한다. Dijit은 Dojo Toolkit의확장 UI 위젯라이브러리와컴포넌트가포함되어있다. 이패키지는표준 HTML 양식제어보다훨씬더많은기능을제공하는양식제어세트와완전한레이아웃관리옵션이포함되어있다. DojoX는프레임워크의다른파트에서는사용되지않은실험적인컴포넌트및기능세트를제공한다. 다른파트에서이런컴포넌트와기능이없는것은해당코드를바로프로덕션단계에적용하기에는미흡하다거나, 기본적으로포함시키기에는너무크거나, 기본파트에포함될만큼꼭필요하기때문이다. 따라서 DojoX 컴포넌트중일부는테스트나인증을거치지않았을수있으므로, 사용시주의해야한다. 본보고서에서는 Dojo Toolkit 의활용방식에대해서는자세히설명하지않으며, 이를이 용하여 UI 를수정하거나필요한라이브러리를연결하는등의작업을수행한다. 추후에 yfiles AJAX 사용에따른 Dojo 학습이필요할경우보고서로작성하고자한다. 3 yfiles AJAX Components 3.1 Client Side Components yfiles AJAX 클라이언트는 Dojo Toolkit을기반으로시각화및어플리케이션기능에대한작업을수행한다. 클라이언트에서데이터처리및그래프호출에관한전반적인작업을수행하기위해서서버단에구현되어있는 EventHandler를호출하여작업을수행한다. 클라이언트구성요소는 Model View Controller (MVC) 로각각그룹화되어있다. 이구성은 yfiles JAVA 의 y.view 패키지와동일한구성을나타낸다. 3.1.1 Model Component Model은그래프구조를구성하거나, 시각화하는데필요한기능을수행한다. 현재구현되어있는 Model Class는총 6가지로 Graph, HitTest, HierarchyManager, UndoManager, GraphSelection, GraphBounds이다. 각 Class의역할은다음과같다. Graph Class는그래프에대한전반적인기능을수행한다. 이클래스는그래프를서버에서불러오거나, 새로운그래프를생성, 그래프를변경하는등의함수를제공한다. HitTest Class는그래프원소에대한질의를수행한다. 이클래스는필요한경우서버에있는그래프원소경계정보를캐시에저장하고, 별도의서버접근없이그래프원소정보 4
를가공할수있도록한다. HierarchyManager Class는군집화된그래프에대한정보를제공한다. 또한그래프조직정보를변경하거나추가할수있다. UndoManager Class는그래프를조작할때발생할수있는실수를처리하기위해 Undo, Redo 기능을제공한다. GraphSelection Class는노드와에지에대한추가 / 삭제기능을제공한다. 이클래스는서버와는독립적으로동작한다. GraphBounds Class는몇몇그래프를둘러싸는 Bounding Box를조작할수있다. 3.1.2 View Component View는그래프를 Canvas를이용하여서버에서데이터를호출하서시각화하거나특정이벤트처리를수행한다. 현재 yfiles AJAX에서제공하는 View Class는 5가지로 GraphCanvas, ViewPortMarker, Rubberband, CanvasDragLine, GraphHighlighter이다. 각 Class의특징은아래와같다. GraphCanvas Class는 View의메인이되는클래스로, Dojo 위젯을이용하여서버측에있는그래프를시각화하거나조작할수있다. ViewPortMarker Class는 GraphCanvas와함께그래프의개요를제공하는데사용된다. 그래프원소에대한질의를수행한다. 이클래스는필요한경우서버에있는그래프원소경계정보를캐시에저장하고, 별도의서버접근없이그래프원소정보를가공할수있도록한다. Rubberband Class는 GraphCanvas의영역을마킹하는위젯으로사용된다. 이는확대와같은기능을구현하는데주로이용된다. CanvasDragLine Class는사용자가선택한지점으로부터현재마우스위치까지의선을긋거나, 에지를생성하는데이용된다. GraphHighlighter Class는사용자가정의한모양에따라노드와에지를강조할때사용된다. 3.1.3 Controller Component Controller는 yfiles AJAX를이용한웹어플리케이션의동작에있어가장필수적인요소로볼수있다. Controller는그래프를 InputMode를기반으로동작방식에따른어플리케이션구동방식을결정하고, Server Action Class를이용하여서버측에구현되어있는 Servlet Action을호출한다. 5
InputMode는하나의추상클래스로이를기반으로만들어지는파생클래스를이용하여각동작모드에알맞는클래스가호출된다. 입력방식에는크게마우스와터치를동시에지원하는모드와마우스입력만을지원하는모드 2가지로나뉘며, 각분류에서동작방식에따라여러가지파생클래스들이존재한다. ServerAction의경우서버에구현되어있는 Action을호출하거나, 클라이언트측데이터를 Action으로전달, 서버와클라이언트간에데이터변경을확인하는용도로사용된다. 아래그림 2는 Controller의구성요소를나타낸것이다. 그림 2처럼 InputMode를추상클래스로하여파생클래스들이있는것을알수있다. 그림 2: yfiles AJAX Controller Components 3.2 Server Side Components yfiles AJAX 를이용한웹어플리케이션의서버에서는 Servlet 을기본으로사용하며, 기본적으 로사용되는 Servlet 은다음과같다. BaseSevlet Class는서버에서그래프원소에대한특정기능을구현하기위해사용되는하부구조를추상화하였다. 이는파생클래스의기본이되는몇몇함수들을표준화하기위한것이다. QueryServlet Class는클라이언트의 HitTest 정보나계측구조를위해사용된다. UpdateServlet Class는서버측에유지되는그래프정보를최신화하기위해사용된다. LoaderServlet Class는서버에저장되어있는그래프나, 클라이언트측에서사용가능한그래프를다운받을경우그래프를불러오기위해사용된다. UndoServlet Class는서버측에유지되는그래프정보를업데이트하기위해사용된다. 6
TileServlet Class는클라이언트에노드나에지와같은이미지제공을위해사용된다. LayoutServlet Class는서버측에유지되는그래프의레이아웃을조작하기위한요청을처리하기위해사용된다. ActionServlet Class는기본적으로제공되는기능이외에특정기능을구현하기위해사용된다. 이를위해서해당클래스에연결되는 Handler와해당동작을구현하기위해 ActionContext, ClientControl와같은클래스가필요하다. 서버에서주어진기능이외에별도의기능을수행하기위해서 ActionServlet을기반으로새로운클래스를생성할경우, 기능을수행하기위해필요한함수를재정의하는과정이필요하다. 또한구현된기능이호출됨에따라클라리언트에서수행되는동작이나정보전달에관해서도정의가필요한데이를위에다음과같은클래스를이용하여야한다. ActionHandler Interface는별도의기능이구현되기위해필요한인터페이스를정의한것이다. ActionContext Class는별도의기능이 ActionHandler를이용하여실행될경우서버로부터클라이언트에정보를전달하기위해사용된다. ClientControl Class는서버에서실제구동되는함수들을실행하기위해사용된다. 이외에도 JSON 을이용하여정보를처리하기위해 JSONSupport 와 JSONStringBuilder Class 를 이용한다. 4 Example of yfiles AJAX Implementation yfiles AJAX는웹어플리케이션구동에필요한모든리소스를제공한다. 하지만라이센스를별도로구매하여야한다. 웹어플리케이션을개발하기위해앞서말했던 Servlet과 AJAX 이외에도기본적으로설정해야할서버의구동및웹페이지구성들과같은작업이필요하다. 본보고서에서는서버와클라이언트측면에서그래프를시각화하는기능과하나의 Action이동작하기위해구현해야할사항에대해간단한예제를통해알아보고자한다. 4.1 Client Side 클라이언트는서버측에구현된기능을수행하기위해서는, ServerAction 객체를통해이를구동한다. 이때 dojo.xhrput 방식처럼 Key-Word 형식의인수를생성자에전달한다. 클라이언트에서각기능에대한 Action을연결하여동작할경우, AJAX를기반으로동작하기때문에각기능에독립되게동작을수행한다. 또한데이터의가공에있어서도클라이언트가따로저장을 7
하지않더라도 Cache 를이용하여저장하고있기때문에, 웹페이지가정상작동할경우데이터 를유지할수있다. 그림 3: yfiles AJAX Demo - Swimlanes 그림 3 은 yfiles AJAX 에서제공하는 Swimlanes 데모실행화면이다. 해당데모파일은컴퓨 터연결관계에따른 Swim lane diagram 을나타낸것으로 Select Reachable Nodes 를선택하 게될경우해당노드에서갈수있는노드를나타내주는기능을수행한다. 이는 yfiles AJAX 의 기능이아니기때문에서버에서해당기능에대한 Action 을정의하고이를호출하게된다. 정상적으로클라이언트에서해당기능이수행되기위해서는 Action 을연결해야한다. 아래 예제에서볼수있듯이클라이언트는실제서버에서구현하는것과달리각인수를 Key - Word 타입에맞추어전달해주는것만으로사용하는것을확인할수있다. Source 1 ServerAction instance from the Swimlanes demo 1 selectreachablenodesaction = new yfiles.client.tiles.serveraction({ 2 id : yworks.demos.actions.selectreachablenodes, 3 graph : graph, 4 selection : editmode.getselection() 5 }); 8
4.2 Server Side 서버에서기본기능을사용하거나따로정의한기능을사용하기위해서구동할때필요한 web.xml 에 정의한다. 이를이용하여웹어플리케이션이구동될때정의된 Servlet 을호출한다. Servlet 은 Java 와동일한방식으로코드를구현한다. 서버에서특정기능을사용하기위해 서는새롭게정의한클래스에 ActionHandler 를구현하기위해호출하고해당함수를구현한다. 웹어플리케이션의그래프동작이외의 UI 구현의경우개발자의정의에따라구성을달리할 수있다. 아래예제는클라이언트에서연결한 Select Reachable Nodes 버튼이실행되기위해서필 요한코드를나타낸것이다. 인수로받아온 ActionContext 의내용에대해그래프와선택정보 에대해연결하고인접노드들을계산하여반환한다. Source 2 Custom ActionHandler Implementation for selectreachablenodesaction 1 public void handleaction(actioncontext context, ClientControl control) { 2 Graph2D graph = context.getgraph(); 3 NodeList nodesin = context.getnodes(); 4 5 if (graph == null nodesin.size()!= 1) { 6 control.setupdateselection(false); 7 return; 8 } 9 10 boolean[] reached = new boolean[graph.n()]; 11 Node startnode = nodesin.firstnode(); 12 GraphConnectivity.reachable(graph, startnode, true, reached); 13 14 NodeList nodesout = control.getnodes(); 15 nodesout.clear(); 16 17 for (NodeCursor nodecursor = graph.nodes(); 18 nodecursor.ok(); nodecursor.next()) { 19 Node node = nodecursor.node(); 20 21 if (node!= startnode && reached[node.index()]) { 22 nodesout.add(node); 23 } 24 } 25 } 5 Conclusion 본보고서에서는 yfiles AJAX 의구성요소와이를웹어플리케이션에서구동하기위해필요한 제반지식에대해서살펴보았다. yfiles AJAX 가동작하기위해기존에개발된 yfiles Java 가 9
이용된다. 이를웹환경에서이용하기위해 yfiles Java를기반으로기능을구현하고, Dojo Toolkit을이용하여 AJAX부분에서데이터를처리하도록하였다. 대다수의웹어플리케이션이단순히웹페이지의구현에그쳤던것에반해, yfiles AJAX는 Servlet, Javascript, AJAX와같은웹프로그래밍언어가각기필요한부분에서동작한다. yfiles AJAX의구성요소외에도별도로정의한기능이동작하기위해, 서버와클라이언트측에필요한함수구현에대해분석하였다. 간단한코드를통해서버에서는실제 yfiles Java와유사하게그래프정보를생성하거나변경할수있는것을확인하였고, 클라이언트에서이를이용하기위해 Dojo Toolkit이활용되는것을파악하였다. yfiles AJAX를분석하는과정에서 yfiles AJAX을활용하여웹어플리케이션을개발하기위해, Dojo Toolkit에대한선행학습이전제되어야함을알수있었다. 본보고서작성이후 yfiles AJAX에대한간단한프로그램을만드는과정을통해, yfiles AJAX을활용한웹어플리케이션개발을하기위한지침서를작성하고자한다. 또한현재연구중인댓글작성자들간의관계분석을시각화하기위한도구로사용하고자한다. References [1] Ruth Breuer, Ralf Klamma, Yiwei Cao, and Riina Vuorikari. Social network analysis of 45,000 schools: A case study of technology enhanced learning in europe. Learning in the Synergy of Multiple Disciplines, pages 166 180, 2009. [2] Kim SeonYeong. Graph visualization of tf-mirna regulation network using yfiles. Technical Report, 2010. [3] Dojo Toolkit. Dojo toolkit reference guide. http://dojotoolkit.org/reference-guide/1.8/. [4] yworks. yfiles ajax developer s guide. http://docs.yworks.com/yfilesajax/doc/devguide/index.html. 10