개정일 : 2012 년 12 월 21 일 T T A S t a n d a r d RIA 메타모델 RIA(Rich Internet Application) Metamodel
개정일 : 2012 년 12 월 21 일 RIA 메타모델 RIA(Rich Internet Application) Metamodel 본문서에대한저작권은 TTA 에있으며, TTA 와사전협의없이이문서의전체또는일부를 상업적목적으로복제또는배포해서는안됩니다. Copyrightc Telecommunications Technology Association 2012. All Rights Reserved.
서 문 1. 표준의목적 이표준의목적은다양한운영체제 (OS) 및기기등에서동작하는기업용리치인터넷애플리케이션 (RIA, Rich Internet Application) 응용의개발, 배포에대한상호호환성및확장성을제공하기위한것이다. 이미세계표준기관 W3C, OMG 등에서표준으로지정 (HTML, ECMA Script, XML, XPath 등 ) 되었거나, 표준은아니지만시장에서표준으로인정되고있는권고안들을수용하되, 기존의표준및권고안만으로는소스코드수준의호환성을제공하기에부족한 RIA 기반의응용프로그램과컴포넌트, UI 프레임워크영역에대하여규정함으로써, 다양한 RIA 플랫폼저작도구사이에사용자인터페이스에대한소스코드수준의호환성및확장성을제공한다. 2. 주요내용요약 이표준은아래의내용들에대해각부문별로세부표준을정의하는 RIA 메타모델 표준에대해소개한다. 제 1 부 RIA 플랫폼아키텍처참조모델 RIA 플랫폼에서 RIA 응용프로그램을구조화하는일반적인형태를참조모델로 제공한다. 제 2 부 RIA 컴포넌트참조모델 RIA 응용프로그램을 RIA 컴포넌트화하는일반적인형태를참조모델로제공한 다. 제 3 부 RIA 기술언어 RIA 응용프로그램을메타데이터형태로직렬화하기위한표준을정의한다. i
제4부 RIA UI 프레임워크메타모델 RIA 응용프로그램을구성하거나실행할수있도록 RIA 플랫폼이제공하는데이터구조와클래스, 컴포넌트, 시스템함수등의인터페이스를기술하기위한표준을정의한다. 3. 표준적용산업분야및산업에미치는영향 이표준은전세계적으로인터넷이보편화되고, 기업업무수행의핵심인프라로사용되고있는상황에서, RIA 응용프로그램의구조및사용자와의상호작용에대한정의규칙을표준화함으로써, RIA 플랫폼별로상이한저작도구 (Authoring Tool) 사이의소스코드호환성과확장성을확보하는데기여할것이다. 4. 참조표준 ( 권고 ) 4.1. 국외표준 ( 권고 ) - 해당사항없음 4.2. 국내표준 - 해당사항없음 5. 참조표준 ( 권고 ) 과의비교 5.1. 참조표준 ( 권고 ) 과의관련성 - 해당사항없음 5.2. 참조한표준 ( 권고 ) 과본표준의비교표 - 해당사항없음 ii
6. 지적재산권관련사항 본표준의 지적재산권확약서 제출현황은 TTA 웹사이트에서확인할수있다. 본표준을이용하는자는이용함에있어지적재산권이포함되어있을수있으므로, 확인후이용한다. 본표준과관련하여접수된확약서이외에도지적재산권이존재할수있다. 7. 적합인증관련사항 7.1. 적합인증대상여부 - 해당사항없음 7.1. 시험표준제정현황 - 해당사항없음 8. 표준의이력정보 8.1. 표준의이력 판수제정 개정일제정 개정내역 제 1 판 2009.12.22. 제 2 판 2012.12.21. 제정 TTAK.KO-10.0367 개정 8.2. 주요개정사항 이표준에서는 RIA 플랫폼아키텍처표준 (TTAK.KO10-0368) 과 RIA 컴포넌트모델표준 (TTAK.KO.10-0369) 을참조모델로변경하고, 위 2 개표준이수행하던역할을좀더일반적인형태로대신하도록 RIA UI 프레임워크메타모델표준이추가되었다. UI 프레임워크메타모델의도입에따라 RIA 기술언어표준 (TTAK.KO.10-0370) 에도변경사항이발생하였다. iii
TTAK.KO-10.0367 비고 1. 개요 - 추가 2. 표준의구성및범위 1. 목적및범위 변경 3. 참조표준 ( 권고 ) - 4. 용어정의및약어 2. 용어정의 변경 5. RIA(Rich Internet Application) 배경및현황 3. RIA (Rich Internet Application) 동일 6. RIA Platform 의일반적구조 4. RIA Platform 의일반적구조 동일 7. RIA 메타모델 5. RIA Metamodel 동일 - 5.1. 개요 삭제 - 5.2. 구성요소 삭제 7.1. RIA 플랫폼아키텍처참조 모델 5.2.1. RIA Platform Architecture 참조모델로변경 7,2, RIA 컴포넌트참조모델 5,2,2, RIA Component Model 참조모델로변경 7.3. RIA 기술언어 5.2.3. RIA Description Language 변경 7.4. RIA UI 프레임워크메타모델 - 추가 부록 1. RIA 응용프로그램예시 5.2.4 RDL 예제 부록으로이동 iv
Preface 1. Purpose of Standard Purpose of this standard is to provide inter-compatibility and expandability for development and deployment of enterprise RIA application running on diverse operating system and devices. By defining a boundary on UI Framework, Component, and Application Programs based on the RIA that are not sufficient enough to provide compatibility at the source code level with already existing standard (HTML, ECMA Script, XML, XPath, and etc.) and recommendations of international standard organizations (W3C, OMG, and etc.), it assures source code level compatibility and expandability for User Interface between various RIA Platform authoring tools. 2. Summary of Contents This standard introduces RIA metamodel standard that defines details for each part. Part 1 - RIA Platform Architecture Reference Model It provides a reference model of general format that structuralized RIA application on the RIA platform. Part 2 - RIA Component Reference Model It provides a reference model of general format that converts RIA application to RIA component. Part 3 - RIA Description Language It defines a standard to serialize from RIA application to the metadata format. v
Part 4 - RIA UI Framework Metamodel It defines a standard for description of data structure, class, component, system function and etc. that supplied by the RIA platform to compose and execute RIA application. 3. Applicable Fields of Industry and its Effect In today s environment where Internet is used for core infrastructure in carrying out the enterprises business and is used worldwide, by standardizing defined rules between Application Program s structure and interoperability of the users, this standard will contribute in securing compatibility and expandability of the authoring tool. 4. Reference Standards(Recommendations) 4.1. International Standards(Recommendations) - None 4.2. Domestic Standards - None 5. Relationship to Reference Standards(Recommendations) 5.1. Relationship of Reference Standards - None 5.2. Differences between Reference Standard(Recommendation) and this Standard - None vi
6. Statement of Intellectual Property Rights IPRs related to the present document may have been declared to TTA. The information pertaining to these IPRs, if any, is available on the TTA Website. No guarantee can be given as to the existence of other IPRs not referenced on the TTA website. And, please make sure to check before applying the standard. 7. Statement of Conformance Testing and Certification 7.1. Object of Conformance Testing and Certification - None 7.2. Standards of Testing and Certification - None 8. History of Standard 8.1. Change History Edition Issued date Outline The 1st edition 2009.12.22. The 2nd edition 2012.12.21. Established TTAK.KO-10.0367 Revised vii
8.2. Revisions TTAK.KO-10.0367 Remarks 1. Introduction - Added 2. Scope of this standard 1. Scope of this standard modified 3. Reference Standards (Recommendations) - Added 4. Terms and Definitions 2. Definitions modified 5. RIA (Rich Internet Application) background and current status 3. RIA (Rich Internet Application) equal 6. General structure of RIA Platform 4. General structure of RIA Platform equal 7. RIA Metamodel 5. RIA metamodel equal - 5.1. Synopsis removed - 5.2. Constituent Elements removed 7.1. RIA Platform Architecture Reference Model 5.2.1. RIA Platform Architecture modified 7.2. RIA Component Reference Model 5.2.2. RIA Component Model modified 7.3. RIA Description Language 5.2.3. RIA Description Language modified 7.4. RIA UI Framework Metafmodel - added Appendix 1. Examples of RIA Application 5.2.4 Examples of RDL modified viii
목 차 1. 개요... 1 2. 표준의구성및범위... 1 3. 참조표준 ( 권고 )... 3 4. 용어정의및약어... 4 5. RIA 배경및현황... 8 5.1. 클라이언트-서버... 8 5.2. 월드와이드웹 (World Wide Web)... 9 5.3. RIA(Rich Internet Application)... 9 6. RIA 플랫폼의일반적구조... 10 6.1. 실행환경 (Runtime)... 11 6.2. 컴포넌트프레임워크 (Component Framework)... 12 6.3. 통합개발도구 (Integrated Development Tool)... 13 7. RIA 메타모델구성요소설명... 13 7.1. 제 1 부 RIA 플랫폼아키텍처참조모델... 13 7.2. 제 2 부 RIA 컴포넌트참조모델... 17 7.3. 제 3 부 RIA 기술언어... 17 7.4. 제 4 부 RIA UI 프레임워크메타모델... 18 부록 I... 20 ix
Contents 1. Summary... 1 2. Construction & Range of Standard... 1 3. Reference Standards... 3 4. Terms & Abbreviation... 4 5. Background & Present Situation of RIA... 8 5.1. Client-Server... 8 5.2. World Wide Web... 9 5.3. RIA(Rich Internet Application)... 9 6. General Structure of RIA Platform... 10 6.1. Runtime... 11 6.2. Component Framework... 12 6.3. Integrated Development Tool... 13 7. Description of RIA Metamodel s Structural Elements... 13 7.1. RIA Platform Architecture Reference Model... 13 7.2. RIA Component Reference Model... 17 7.3. RIA Description Language... 17 7.4. RIA UI Framework Metamodel... 18 Appendix I. RIA Application Examples... 20 x
RIA 메타모델 (RIA(Rich Internet Application) Metamodel) 1. 개요 컴포넌트기반의리치인터넷클라이언트응용프로그램은인터넷을기업의클라이언트응용프로그램의핵심인프라로활용하면서, 동시에비즈니스클라이언트응용프로그램이갖추어야할사용자인터페이스와각종장치및다른응용소프트웨어와의연동을가능케한다. RIA 메타모델 ( 이하 RIAM) 표준은 RIA 플랫폼이제공하는저작도구사이의 RIA 응용프로그램소스코드의호환성확보를목표로한다. HTML 은웹을인터넷에서가장강력한응용프로그램으로만들었고, 인터넷을짧은시간동안에폭발적으로전세계에확산시키는핵심이되었다. 인터넷의확산에따라기업에서는업무처리를위한비즈니스클라이언트응용프로그램에도웹을도입하였으나, 매우복잡하고다양한사용자인터페이스와각종장치및응용소프트웨어와연동을해야하는기업용애플리케이션의특성상웹클라이언트응용프로그램은기업용웹응용프로그램용도로는태생적인한계점을가질수밖에없다. 이와같이인터넷을기업용클라이언트응용프로그램에도입하고자하지만, 웹클라이언트응용프로그램의한계로인하여기업이요구하는응용프로그램을개발하지못하는상황을극복하고자하는곳에서이표준을유용하게적용할수있을것이다. 2. 표준의구성및범위 2.1. 구성 RIA 메타모델은다음의표준들로구성된다. 제1부 RIA 플랫폼과응용의구조 (Architecture) 를정의하는 RIA 플랫폼구조 (RPA, RIA Platform Architecture) 참조모델 제2부 RIA 응용을 RIA 컴포넌트 (Component) 로정의하는 RIA 컴포넌트모델 (RC M, RIA Component Model) 참조모델 1
제3부 RIA 응용을소스코드파일로직렬화하고다시복원하기위한표현언어인 RIA 기술언어 (RDL, RIA Description Language) 제4부 RIA 응용개발을제공하는프레임워크의구조를정의하는 RIA UI 프레임워크메타모델 (RUF, RIA UI Framework Metamodel) RIA Platform Architecture Reference Model RIA Component Reference Model references references RIA UI Framework Meta- Model instantiates RIA Application serialized RIA Description Language ( 그림 2-1) RIA 메타모델구성 2.2. 범위 이표준은웹클라이언트응용프로그램에서기존의 HTML 이제공하는태그만으로는 만족할수없는기능들을, 사용자들이직접구현하여클라이언트응용프로그램에 추가하는방법에대한표준을제시한다. 외부에서구현된컴포넌트들을웹브라우저에 플러그인하기위하여 HTML 에서는 Object 태그를제공하고있으나, Object 태그는 HTML 안에서지정된위치에서단일인스턴스를생성하는것이므로, 응용프로그램에서하나의데이터타입으로객체를생성하여참조되어야하는반복적재사용과는거리가멀다고할수있다. 본표준에서는윈도계열의 DLL 과 ActiveX, 유닉스, 리눅스계열의 Shared Object 파일등과같이다양한운영체제에서다양한형태로개발또는제공되는컴포넌트들을배포하는방법과, 컴포넌트들을서로다른 RIA 플랫폼의저작도구에서인식하기위한방법, 그리고배포된컴포넌트들을인터넷클라이언트응용프로그램에서사용자정의데이터타입으로지정하기위한태그확장방법, 컴포넌트를이용하여인터넷응용프로그램을개발하기위한기본아키텍처와응용프로그램의소스코드포맷, RIA 2
기반의 UI 응용을개발할수있도록 RIA 플랫폼이제공하는라이브러리의모음인 UI 프레임워크를기술하는방법등에대하여정의한다. 본표준은다음의요소로구성되어있다. RIA 의등장배경및현황과발전방향에대하여설명한다. RIA 플랫폼의일반적인구조에대하여설명한다. 부문별 RIA 메타모델표준에서정의하는내용에대하여설명한다. 3. 참조표준 ( 권고 ) RIA 응용프로그램의구조에관련하여 W3C 의 XForms 1.1 과 XHTML 1.0, HTML5, DOM Level-3 Events Specification 등이참조되었다. RIA 응용프로그램의구조를 언어적으로표현하기위하여 W3C 의 XML 1.0 과 XML Schema 등이사용되었다. RIA 응용프로그램의절차적언어를표현하기위하여 ECMA 의 ECMA-262 5 판이 사용되었다. 모듈들의인터페이스를기술하기위하여 W3C 의 Web IDL 명세를 사용하였다. - W3C XForms 1.1 Candidate Recommendation, 2007. - W3C XHTML 1.0, The Extensible HyperText Markup Language A Reformulation of HTML 4 in XML 1.0, 2002. - W3C XML 1.0, Extensible Markup Language(Fourth Edition), 2006. - W3C XSLT 1.0, XSL Transforms, 1999. - W3C XPath 2.0, XML Path Language, 2007. - W3C XML Schema Part 0, Primer, 2001. - W3C XML Schema Part 1, Structures, 2004. - W3C XML Schema Part 2, Datatypes, 2004. - ECMA ECMAScript, Standard ECMA-262 Language Specification 4th edition, 2008. - W3C The XMLHttpRequest, 2009. 3
- W3C Web IDL Editor's Draft, 2009. - W3C Document Object Model (DOM) Level 3 Events Specification: Editor's Draft, 2009. - W3C HTML5 : Editor's Draft, 2009. - IETF RFC4627 : The application/json Media Type for Java Script Object Notation (JSON), 2006 4. 용어정의및약어 4.1. 용어 4.1.1. 컴포넌트 (Component) 사용자의행위나시스템에서발생되는이벤트에따라적절하게반응할수있도록 설계되고, 실행가능한단일구성요소로배포되는재사용가능한소프트웨어 모듈 4.1.2. 컴포넌트구현체 컴포넌트를특정 OS 및기기에서실행되도록컴퓨터언어로구현되어배포되는 실행가능한프로그램 4.1.3. UI 컴포넌트 (User Interface Component) 응용프로그램의기능을증진시키기위하여제공되는프로그램모듈또는루틴. 특히버튼이나메뉴, 다이얼로그박스등사용자인터페이스와관련하여 사용되는컴포넌트를지칭함. 4
4.1.4. 스크립트언어 (Script Language) 응용프로그램안에서비즈니스로직을제어하고, 프로그램의상태를보관및 변경시키기위하여사용되는프로그래밍언어 4.1.5. 저작도구 (Authoring Tool) 프로그램이나멀티미디어등의저작물을보다쉽고간편하게만들도록도와주는소프트웨어. 여기에서는 RIA 기반의응용프로그램을쉽게저작할수있도록벤더들이제공하는전용프로그램을일컬음. 4.1.6. 리치인터넷애플리케이션 (RIA, Rich Internet Application) 인터넷을사용하되, 문서 (Document) 중심의 HTML 로구성된 Web 과달리 사용자와의상호작용을강화하여기능적웹사용자인터페이스 (UI) 를제공하는 인터넷응용프로그램. 4.1.7. 기업용 RIA(RIA for Enterprise) 기업의복잡한업무처리에적합하도록다양하고특화된 UI 컴포넌트를제공하고, 업무로직을구현할수있도록스크립트언어 (Script Language) 를지원하는 RIA 4.1.8. 기기 (Device) 프로그램을실행시키기위한장치. 범용 OS 기반의데스크톱컴퓨터나노트북, 모바일 OS 기반의 PDA, 기타특수한용도로제작된장비등, 그래픽사용자 인터페이스를필요로하는모든종류의장치를총칭함 5
4.1.9. 메타 (Meta) 어떤모델을도출하고표현하기위해설정된기준 4.1.10. 메타모델 (Metamodel) 모델의모델 정보를수집, 분류, 명시하기위해사용되는의사소통모델로, 언어를표기하기 위한상위의언어이며, 단어가의미하는것을이해하는데혼동을예방하도록함 4.1. 11. 기술언어 (Description Language) 실행모듈이응용을실행하기위하여필요로하는모든정보및제어로직을 제공하는완전한형태의문법구조. 이러한문법구조를이용하여저작도구에의해생성되는최종결과물. 4.1.12. 인터페이스 (Interface) 컴포넌트또는응용사이에정보를교환할수있도록상호작용방법을정의하는도구또는개념 이벤트중심의객체지향프로그래밍관점에서볼때여기에서는속성 (Property), 메소드 (Method), 이벤트핸들러 (Event Handler) 를인터페이스로정의함 6
4.1.13. RIA 메타모델 (RIAM, RIA Metamodel) RIA 응용프로그램의문법구조와구성요소를정의하기위한메타모델. 컴포넌트를정의하고구현하기위한문법구조와컴포넌트를사용하여 RIA 응용프로그램을생성하기위한기술언어의문법및응용구조를정의함. 4.1.14. UI 프레임워크 (UI Framework) UI 응용프로그램이구조화되는방법과구성요소들의인터페이스및구성 요소들이동작하는데필요한시스템 API 들을정의하는프레임워크 4.2. 약어 GUI Graphical User Interface( 그래픽사용자인터페이스 ) JSON Java Script Object Notation RIA Rich Internet Application( 리치인터넷애플리케이션 ) RIAM RIA Metamodel(RIA 메타모델 ) RCM RIA Component Model(RIA 컴포넌트모델 ) RPA RIA Platform Architecture(RIA 플랫폼아키텍처 ) RUF RIA UI Framework(RIA UI 프레임워크 ) UI User Interface( 사용자인터페이스 ) WYSIWYG What you see is what you get( 위지위그 ) 4GL 4 th Generation Language( 제4세대언어 ) C/S Client-Server( 클라이언트-서버 ) 7
5. RIA 배경및현황 이장에서는 RIA 의등장배경및현황과향후발전방향에대하여간략하게설명한다. 5.1. 클라이언트 - 서버 메인프레임으로시작된컴퓨팅의역사는, 1980 년대의개인용컴퓨터의등장과 비약적인발전에힘입어, 메인프레임으로대변되는서버시스템의부하를최소화하고, 막강해진개인용컴퓨터의연산능력을최대한활용하고자하는분산시스템에대한욕구가높아짐에따라 1990 년대에이르러클라이언트-서버 (C/S) 아키텍처가등장하게되었다. 서버시스템의연산부하감소로인한총소유비용의절감과 WYSIWYG 기반의 막강한사용자인식성, 조작성, 기능성등, 그리고시기적절하게등장된 4 세대 언어 (4GL) 의 RAD(Rapid Application Development) 개발도구들의등장으로인한응용개발생산성향상등에힘입어, C/S 아키텍처는짧은시간에시장의주목을받으며, 폭넓게채택되기에이르렀다. 4GL 이적용된시스템의개발이본격화되고, 엔터프라이즈규모의업무에적용되는케이스들이증가함에따라, 애플리케이션의너무큰파일크기로인해네트워크를통한배포문제가심각한해결과제로대두되고, 아울러사용자마다상이한클라이언트컴퓨터의환경차이로인한설치의어려움및관리비용증가등의새로운문제점들에직면하게되었다. 기능성과생산성등의다양한장점에도불구하고, 배포와관리문제에직면한 C/S 아키텍처는별다른대안을제시하지못함으로써메인프레임아키텍처를대신할새로운패러다임인분산시스템아키텍처의완성자로써의입지를다지는데는실패하게되었다. 8
5.2. 월드와이드웹 (World Wide Web) 1990 년대에들어폭발적으로증가한인터넷망과월드와이드웹 ( 이하웹 ) 은마크업언어 ((Markup Language) 를활용하는새로운형태의분산시스템아키텍처모델을제시하였고, 4GL 로개발된응용프로그램의배포및설치문제등을원천적으로해결해주었다. 기업들은신속하게웹위에 CGI(Common Gateway Interface) 모델을채택하여응용프로그램을개발하고배포함으로써, 배포와설치가필요없는분산시스템아키텍처모델을완성하는듯했다. 하지만매우복잡하고유기적으로사용자와의상호작용이이루어져야하며, 업무수행을위하여는다양한주변기기들과의통신및데이터교환이수행되어야하는기업용애플리케이션에있어서, 한번생성된된후에는변경 ( 상호작용 ) 이없이배포를주목적으로하여만들어진 HTML 문서기반의단순한 UI 와더불어, 주변기기와의인터페이스를위해서는또다시비표준적인방법으로돌아가야만하는웹애플리케이션들은, 배포와설치문제는해결하였으나가장중요한기능성면에서사용자들로부터의불만과외면이라는새로운문제에직면하게되었다. 5.3. RIA(Rich Internet Application) 웹의기능성에대한사용자들의불만과외면을해결하기위하여, 1990 년대 중, 후반부터는 C/S 아키텍처의기능과성능, 외부기기와의확장성등의장점과웹의서버시스템접근성, 표현의단순성, 배포및설치문제해결능력등의장점을결합하여, 엔터프라이즈수준의응용프로그램및시스템아키텍처를구축하고자하는시도들이구체적인결실을맺게되었다. 주된결과들은아래와같다. 네트워크밴드폭을최소화하기위하여, 2 진코드형식의응용프로그램대신 X ML 기반의응용프로그램구조채택 사용자컴퓨터에응용프로그램을설치하는데따른다양한환경문제및관리 를최소화하기위하여 4GL 대신에웹의마크업기술과자바스크립트를이용하 여클라이언트응용프로그램개발 9
서버시스템과의원활한접속및통신을위하여 http, https, ftp 등표준기반의 인터넷통신프로토콜채택 다양한기기와의연동및성능향상을위하여컴포넌트기반의기능확장구조 채택 웹의단순한사용자상호작용을극복하고, 4GL 수준의사용자상호작용능력 을제공하기위하여컴포넌트기반의다양한 UI 컨트롤제공등 웹의단순한 UI 한계극복을위하여클라이언트응용프로그램의모델로서등장한 RIA 는, 이제 OS, 기기, 웹브라우저등다양한클라이언트의환경에관계없이수행될 수있는응용프로그램을개발하기위한플랫폼아키텍처로발전해가고있다. 6. RIA 플랫폼의일반적구조 대부분의 RIA 응용프로그램은워드프로세서, 스프레드시트등의오피스프로그램또는리포트설루션등과같은다양한응용프로그램이나, 카드리더기, 특수프린터, 공장자동화장비등과같은다양한장치들과연동을하면서최적의업무처리를지원할수있도록요청을받는다. RIA 응용들이다양한환경에서도유연하게시스템의확장과연동을지원하도록하기위하여, RIA 플랫폼은일반적으로 RIA 응용이수행될수있는실행환경 (Runtime) 과핵심컴포넌트 (Core Component) 및복합컴포넌트 (Composite Component) 들이배포되고실행되는컴포넌트프레임워크 (Component Framework), 그리고, 생산성높은응용개발을지원하기위한통합개발도구 (Integrated Development Tool) 등으로구성된다. 10
( 그림 6-1) RIA 플랫폼의일반적구조 6.1. 실행환경 (Runtime) 보통 6 개의기반모듈로구성되며컴포넌트의생명주기를관리한다. RIA 응용소스 코드를해석하여컴포넌트프레임워크 (Component Framework) 에연동함으로써응용을 실행한다. 네트워크서비스 (Network Service) 서버와의데이터통신연결을위한서버위치정보와데이터소스등과같은통신환 경을관리한다. 시각화 (Visualization) 운영체제 (OS) 나장치 (Device) 의종류에관계없이동일한형태로컴포넌트를시각화 하여화면에표시하고, 사용자와의상호작용을지원하는기능을수행한다. 이벤트 (Event) 관리자 메시지큐와이벤트처리기를관리한다. 입출력장치의확장에따라사용자및시스템 이벤트를유연하게확장가능하게하며, 이벤트의조합을용이하게수행하도록지원 한다. 11
데이터모델 (Data Model) 관리자 응용프로그램에서정의되고사용되는데이터모델이컴포넌트와바인드되고, 소스 코드에서사용될수있도록관리한다. 형상관리자 (Configuration) 컴포넌트및응용프로그램을구성하는소스파일, 리소스, 스타일 (Style), 형상정보 등의버전을관리한다. 응용프로그램 (RDL) 해석기 소스코드 (RDL), 형상정보, 스타일정보등으로구성된 RIA 응용의구조를해석하고, 응용프로그램을실행한다. 6.2. 컴포넌트프레임워크 (Component Framework) 핵심컴포넌트 (Core Component) 와복합컴포넌트 (Composite Component) 로 구성된다. 6.2.1. 핵심컴포넌트 (Core Component) RIA 플랫폼을구성하고동작시키기위한핵심컴포넌트를제공한다. 데이터수집, 가공, 표현, 분배등의기능을수행한다. 6.2.2. 복합컴포넌트 (Composite Component) 핵심컴포넌트를활용하여특정한비즈니스로직을수행하도록개발된컴포넌트들의 집합으로구성된다. 12
6.3. 통합개발도구 (Integrated Development Tool) 디자이너 (Designer) RIA 응용프로그램을 GUI 방식으로개발하도록지원한다. 소스코드편집기 (Code Editor) ECMA 기반의자바스크립트소스코드를편집하고, 디버깅할수있는기능을제공한 다. 자원관리 (Resource Management) 응용프로그램을구성하는소스파일, 그림파일, 스타일등의개체를관리한다. 7. RIA 메타모델구성요소설명 RIA 메타모델 ( 이하 RIAM) 의구성요소에대하여설명한다 7.1. 제 1 부 RIA 플랫폼아키텍처참조모델 RIA 런타임 (Runtime) 및응용의구조를정의하기위한참조모델을제공한다. RIA 응용소스코드는사용자정의폼에서사용할기본컴포넌트와복합컴포넌트들로 구성된다. 런타임은이정보를읽어서컴포넌트들을배포받아응용에서참조할수있는 상태로구성한다. RIA 응용이사용자의행위에반응하여사용자정의폼 URL 을 런타임에알려주면, 런타임은해당사용자정의폼을배포받아해석한후, 사용자 정의폼에정의된컴포넌트들을런타임에올려진재정의컴포넌트유형과매치하여 실행가능한형태로변환한다. 13
( 그림 7-1) RIA 응용프로그램수행구조 액티브-엑스 (Active-X) 만을지원하는런타임하에서동작하도록개발된 RIA 응용을, DLL 만지원하는런타임에서수행하고자하는경우에 RIA 응용과기본컴포넌트, 복합컴포넌트만을교체하면, RIA 응용의소스코드를수정하지않아도 RIA 응용은정상적으로수행가능하도록한다. 기본컴포넌트는핵심컴포넌트 (Core Component), 컨테이너컴포넌트 (Container Component), 원시컴포넌트 (Primitive Component) 로구성된다. Core Components Container Components Primitive Components ( 그림 7-2) 기본컴포넌트패키지다이어그램 14
핵심컴포넌트 (Core Component) 패키지는 RIA 플랫폼을구성하기위한핵심컴포넌트들을제공한다. 사용자들이클래스를정의할수있도록최상위클래스인 Object 클래스를제공하고, 사용자와의상호작용을가능케하도록이벤트를처리할수있는컴포넌트클래스가제공된다. 컴포넌트의가시화를위하여보여줄수있는능력을가진 UIComponent 와데이터를취급하기위한데이터모델 (DataModel), 그리고 UIComponent 와 DataModel 간에데이터및행위 (Action) 를교환할수있도록연결해주는바인드 (Bind) 클래스가있다. UIComponent 는그특성에따라서단일컴포넌트로동작되는 UIControl 과여러개의 UIControl 들을관리하는 UIContainer 추상클래스를제공한다. 핵심컴포넌트 (Core Component) 패키지의클래스구조는아래와같다. Basic Components Object RIAMEventTarget PersistenStorage Component RIAMEvent ModelView Bind RegionStyle UIComponent TableModelView RemoteInterface LocalInterface UIContainer UIControl UIControl Types Execution Selection Image Multimedia FreeFormat SingleSelection MultipleSelection ( 그림 7-3) Core Component 클래스다이어그램 컨테이너컴포넌트 (Container Component) 패키지는 UIContainer 클래스를상속받아 생성되며, Application, Form 등으로구성된다. UIControl 들의생성 / 소멸과배치및 제어를담당한다. 15
UIContainer <<html5>> Window contents Form window Frame Application MainFrame Frameset GroupBox Tray Widget CascadeFrameset TabFrameset ( 그림 7-4) Container Component 클래스다이어그램원시컴포넌트 (Primitive Component) 패키지는 UIControl 을상속받아데이터를 Visual 하게표시하고, 사용자와의상호작용을가능케하는컴포넌트들로, 시스템에서반드시제공해야하는컨트롤들을정의한다. Core Components Object Component UIComponent UIControl Button Splitter Edit Static CheckBox Spin RadioButtonGroup ProgressBar TreeUI TableUI ImageViewer AudioPlayer VideoPlayer MultilineText Tree List Menu Grid Execution FreeFormat SingleSelection ContextMenu MultipleSelection Image Multimedia ( 그림 7-5) Primitive Component 클래스다이어그램 16
7.2. 제 2 부 RIA 컴포넌트참조모델 프로그래밍언어나플랫폼에맞추어개발된 RIA 응용을플랫폼종류에무관하게 RIA 플랫폼의저작도구에서이해하고응용을개발가능하도록컴포넌트화하는참조모델을제공한다. 모든컴포넌트는제 4 부에서정의하는 UI 프레임워크메타모델명세에따라인터페이스를구현하여야하며, UI 프레임워크메타모델에의하여정의된컴포넌트타입은모든사용자정의폼에서데이터타입이름으로사용된다. ( 그림 7-6) RIA 컴포넌트참조모델 7.3. 제 3 부 RIA 기술언어 RDL 은제 4 부의 UI 프레임워크메타모델구조에따라생성된 RIA 응용을저장, 배포, 복원하기위한직렬화 ( 또는시리얼라이즈 ) 문법구조를정의한다. RIA 응용을구성하는 컴포넌트들은 XML 의요소 (Element) 로저장되고, 비즈니스로직을수행하는이벤트 처리기들은자바스크립트함수로저장된다. 복잡한내부구조를가지는복합 컴포넌트들은자식컴포넌트들을 JSON 구조로직렬화한후복합컴포넌트의속성에 연결시키는구조로직렬화된다. 17
7.4. 제 4 부 RIA UI 프레임워크메타모델 UI 프레임워크메타모델은 RIA 플랫폼이제공하는컴포넌트들의종류와데이터타입, 이벤트구조, 시스템함수등의인터페이스를정의할수있는메타모델을제공한다. 데이터타입 (DataType) 은데이터구조 (Data Structure) 를정의한다. 클래스는데이터구조 (Property) 와처리기능 (Method) 을동시에가지는유형을정의할수있다. 컴포넌트는이벤트기반으로동작할수있도록이벤트처리기의종류와인터페이스를정의할수있다. 데이터타입, 클래스, 컴포넌트는모두객체의구조를설명하는스키마 (Schema) 기능을수행하며, 스키마구조에따라생성된값들인인스턴스는변수 (Variable) 객체로참조된다. UI 응용은컴포넌트를상속받아사용자에게보여지는 UIComponent 들로확장되고, 이를폼 (Form) 이상속받아단위업무를구성할수있도록한다. 다국어를지원할수있도록하나의문자열을여러가지언어로표현할수있는기능도폼 (Form) 수준에서정의한다. 애플리케이션은여러개의폼 (Form) 을관리할수있도록컨테이너기능을수행한다. 18
uf.primitivetype uf.variable instantiates uf.datatype 0..1 ownedproperty 1..* uf.property 0..* references ownedreturntype ownedargument uf.class 0..* ownedmethod uf.function 0..* uf.component ownedeventhandler uf.uicomponent internationalize uf.text uf.application uf.form texts 0..* ( 그림 7-7) UI 프레임워크메타모델클래스다이어그램 19
부록 I RIA 응용프로그램예시 아래그림은 RIA 응용프로그램이제공하는 UI 화면의예이다. ( 그림 I-1) RIA 응용프로그램예시화면 위 UI 화면은아래와같은 RIA 기술언어구조로직렬화한후파일로저장및 배포될수있다. 직렬화되는데이터항목및구조는제 4 부 UI 프레임워크메타모델 표준에서정의된인터페이스구조에따른다. <?xml version="1.0" encoding="euc-kr"?> <rdl xmlns:rdl="http://www.omg.org/2009/rdl/" xmlns:xsd="http://www.w3.org/2001/xmlschema"> <!--====================================================== ============ Style class 정의 ====================== ======================================================--> <link:ns1 rel="stylesheet" path="css::componentstyle.css" type="text/css"/> <styles type="text/css"> div.style1 { background : bisque; color : bisque; div.style2 { background : cornsilk; color : cornsilk; 20
static.style1 { background : transparent; border : 0px none; color : #cad7de; align : right; font : Arial,9,bold; usedecorate : false; disabled : ; edit.style1 { align : right; static.style1 { background : bisque; font : arial,9, bold; </styles> <!--====================================================== ============== Image Resource 정의 ================= ======================================================--> <link rel="image" path="resources::images.xml" type="text/rdl"/> <!--====================================================== ============ 관련 Component import ================= ======================================================--> <link:rdl rel="interface" path="classes::systeminterfaces.xml" type="text/rdl"/> <!--====================================================== ==================== Class 정의 ==================== ======================================================--> <Form name="formpaymentlist" extends="" implements="" version="1.0.0.0" cachelevel="" showtitlebar="true" title="payment List" position="absolute 0 0 584 407" onload="form_onload"> <!--====================================================== ============ Local 변수생성 ======================= ======================================================--> <variables> <boolean id="save_info" value="false"/> </variables> <layout id="layout01" type="flow"> <rdl::static id="static00" position="10 17 46 67" class="static.style1" text="payment Method"/> <rdl::radiobuttongroup id="radio01" nodeset="/paymenttype" position="10 45 46 67" class="static.style1"> <models> <tabledataset id="dspaymenttype" enableevent="true" loadstatus="false" preload="true" updatecontrol="true"> <!--====================================================== ============== 지불방법정의 ======================== ======================================================--> <!--====================================================== ========== Dataset 의데이터송수신구조정의 ========= ======================================================--> <xsd:schema> <xsd:element name="paymenttype"> <xsd:complextype name="paymenttype"> <xsd:sequence> <xsd:element name="code" type="xsd:string"/> <xsd:element name="desc" type="xsd:string"/> </xsd:sequence> </xsd:complextype> </xsd:element> </xsd:schema> <!--==================================================== ============== Initial Data 정의 =================== 21
====================================================--> <instance schema="#paymenttype"> <paymenttype> <code></code> <desc>all</desc> </paymenttype> <paymenttype> <code>cash</code> <desc>cash</desc> </paymenttype> <paymenttype> <code>credit</code> <desc>credit Card</desc> </paymenttype> </instance> </tabledataset> </models> <eventmap> <!-- Radio button dataset bind 지정 --> <sync type="unisync" srcobj="this" sproperty="codecolumn" targetobj="dspaymenttype" tproperty="code"/> <sync type="bisync" srcobj="this" sproperty="datacolumn" targetobj="dspaymenttype" tproperty="desc"/> </eventmap> </radiobuttongroup> <static id="static01" text="card Number" position="7 70 103 100"/> <edit id="ed_ccnum" imemode="english" position="44 14 172 38" style="background:url('left_editbg');border:0px solid #000000a0;padding:10 0 0 0;"/> <button id="button00" enable="true" text="query" tooltiptext=" 조회 " position="182 14 234 68" style="background:url('left_btn_query');border:0px none;"/> <grid id="grid00" selecttype="row" useinputpanel="false" scrollbars="autoboth" position="10 112 573 299"> <layout id="default" type="flow"> <columns> <column width="60px"/> <column width="80px"/> <column width="90px"/> <column width="70px"/> <column width="80px"/> <column width="70px"/> <column width="80px"/> </columns> <rows> <row band="head" height="24px"/> <row band="head" fix="fixed" height="24px"/> <row band="body" height="24px"/> </rows> <band id="head"> <cell disptype="normal" rowspan="2" text="as"/> <cell col="1" colspan="2" disptype="normal" text="credit Card"/> <cell col="3" colspan="2" disptype="normal" text="payment"/> <cell col="5" colspan="2" disptype="normal" text="exchanged"/> <cell col="1" row="1" text="number"/> <cell col="2" row="1" text="expire Date"/> <cell col="3" row="1" text="currency"/> <cell col="4" row="1" text="amount"/> <cell col="5" row="1" text="currency"/> <cell col="6" row="1" text="amount"/> </band> <band id="body"> <cell disptype="normal" id="as"/> <cell col="1" disptype="normal"/> <cell col="2" disptype="normal"/> <cell col="3" disptype="normal"/> <cell col="4" disptype="number" style="align:right" mask="##,###,###,##0"/> <cell col="5" disptype="normal"/> <cell col="6" disptype="number" style="align:right" mask="##,###,###,##0"/> </band> </layout> <taborders>body.cell[0],body.cell[1],body.cell[2],body.cell[3],body.cell[4],body.cell[5],body.cell[6]</taborders> </Grid> 22
<div id="div00" layout="flow" taborder="4" position="absolute 9 286 283 377" class="div.style1"> <components> <combo id="combo00" taborder="0" text="combo00" codecolumn="curr_id" position="absolute 7 28 129 45"> <models> <tabledataset id="dscurrency" url="http://localhost/riam/rdl/currency.jsp"/> </models> <eventmap> <sync type="bisync" id="item0" srcobj="this" sproperty="codecolumn" targetobj="dscurrency" tproperty="curr_id"/> <sync type="bisync" id="item1" srcobj="this" sproperty="datacolumn" targetobj="dscurrency" tproperty="curr_name"/> </eventmap> </combo> <static id="static00" position="absolute 6 7 182 22" text="payment Currency" class="static.style1"/> <static id="static01" position="absolute 6 47 182 62" text="exchanged Currency" class="static.style1"/> <combo id="combo01" text="combo00" position="absolute 7 68 129 85"> <models> <tabledataset id="dscurrency" url="http://localhost/riam/rdl/currency.jsp"/> </models> <eventmap> <sync type="bisync" id="item2" srcobj="this" sproperty="codecolumn" targetobj="dscurrency" tproperty="curr_id"/> <sync type="bisync" id="item3" srcobj="this" sproperty="datacolumn" targetobj="dscurrency" tproperty="curr_name"/> </eventmap> </combo> <edit id="maskedit00" position="absolute 134 28 266 45" type="number" mask="###,###,##0" class="edit.style1"/> <edit id="maskedit01" position="absolute 133 65 264 85" type="number" mask="###,###,##0" class="edit.style1"/> </components> <taborders>combo00,combo01,maskedit00,maskedit01</taborders> </div> <div id="div01" layout="flow" taborder="4" position="absolute 288 286 560 377" class="div.style2"> <styles> static.style1 { background : cornsilk; font : arial,9, bold; </styles> <components> <static id="static00" text="card Number" class="static.style1" position="absolute 12 32 132 52"/> <static id="static01" text="expired Date" class="static.style1" position="absolute 12 56 132 76"/> <edit id="maskedit00" mask="###-###-####" type="string" position="absolute 134 33 210 54"/> <edit id="maskedit01" mask="####/##" type="string" position="absolute 134 56 185 73"/> <static id="static02" text="credit Card" class="static.style1" position="absolute 12 5 189 25"/> </components> <eventmap/> <taborders>maskedit00,maskedit01</taborders> </div> </layout> <models> <tabledataset id="dssearchcondition" nodeset="/conditions"> <xsd:schema> <xsd:element name="condition"> <xsd:complextype name="condition"> <xsd:sequence> <xsd:element name="paymenttype" type="xsd:string"/> <xsd:element name="cc_number" type="xsd:string"/> </xsd:sequence> </xsd:complextype> </xsd:element> </xsd:schema> <!--====================================================== ============== Initial Data 정의 =================== ======================================================--> <instance schema="#condition> 23
<Condition> <paymenttype>credit</paymenttype> <cc_number>123-45</cc_number> </Condition> </instance> </tabledataset> <!--====================================================== ============== 지불내역정의 ====================== ======================================================--> <tabledataset id="dspaymentlist" nodeset="/payment"> <schema type="text/xsd" url="http://localhost/riam/schema/paymentlist.xsd"/> <!--====================================================== ============== Initial Data 정의 =================== ======================================================--> <instance schema="#payment"> <payment as="credit"> <cc /> <exp /> <payamount currency="krw"/> <exchangeamount currency="krw"/> </my:payment> </instance> </tabledataset> </models> <taborders>radio01,ed_ccnum,grid00,button00,div00,div01</taborders> <!--====================================================== ============ Event Mapping 정의 ================== ============ Event-Driven Bind 사용 ================== ======================================================--> <eventmap> <!-- 검색조건바인드 --> <sync type="bisync" id="item1" srcobj="radio01" sproperty="value" targetobj="dssearchcondition" tproperty="paymenttype"> <preprocess obj="radio01" function=""/> <postprocess obj="radio01" function=""/> <preprocess obj="dssearchcondition" function=""/> <postprocess obj="dssearchcondition" function=""/> </sync> <sync type="bisync" id="item2" srcobj="ed_ccnum" sproperty="value" targetobj="dssearchcondition" tproperty="cc_number" preprocess="" postprocess=""/> <!-- Grid cell Bind --> <sync type="bisync" id="item11" srcobj="grid00.body.cell[0]" sproperty="value" targetobj="dspaymentlist" tproperty="as"/> <sync type="bisync" id="item12" srcobj="grid00.body.cell[1]" sproperty="value" targetobj="dspaymentlist" tproperty="cc_number"/> <sync type="bisync" id="item13" srcobj="grid00.body.cell[2]" sproperty="value" targetobj="dspaymentlist" tproperty="exp"/> <sync type="bisync" id="item14" srcobj="grid00.body.cell[3]" sproperty="value" targetobj="dspaymentlist" tproperty="pay_curr"/> <sync type="bisync" id="item15" srcobj="grid00.body.cell[4]" sproperty="value" targetobj="dspaymentlist" tproperty="pay_amount"/> <sync type="bisync" id="item16" srcobj="grid00.body.cell[5]" sproperty="value" targetobj="dspaymentlist" tproperty="exch_curr"/> <sync type="bisync" id="item17" srcobj="grid00.body.cell[6]" sproperty="value" targetobj="dspaymentlist" tproperty="exch_amount"/> <!-- Div00 : 통화 Bind --> <sync type="unisync" id="item21" readonly="true" srcobj="div00.combo00" sproperty="value" targetobj="dsgrid" tproperty="pay_curr"/> <sync type="unisync" id="item22" readonly="true" srcobj="div00.combo01" sproperty="value" targetobj="dsgrid" tproperty="exch_curr"/> <sync type="unisync" id="item23" readonly="true" srcobj="div00.maskedit00" sproperty="value" targetobj="dsgrid" tproperty="pay_amount"/> <sync type="unisync" id="item24" readonly="true" srcobj="div00.maskedit01" sproperty="value" targetobj="dsgrid" tproperty="exch_amount"/> <!-- Div01 : 신용카드 Bind --> 24
<sync type="unisync" id="item31" readonly="true" srcobj="div01.maskedit00" sproperty="value" targetobj="dsgrid" tproperty="cc_number"/> <sync type="unisync" id="item32" readonly="true" srcobj="div01.maskedit01" sproperty="value" targetobj="dsgrid" tproperty="exp"/> <!-- Event Map Function --> <Event name="ondraw" srcobj="div00" function="[object Cy_FunctionObject]"/> <Event name="ondraw" srcobj="div01" function="[object Cy_FunctionObject]"/> <Event name="onclick" srcobj="button00" function="button00_onclick"/> </eventmap> <!--====================================================== ================= Method 구현 ====================== ======================================================--> <script><![cdata[ function Form_onload(obj:Form, e:loadeventinfo) { function getsave_info() { return save_info; function getradio01() { return Radio01; function geted_ccnum() { return ed_ccnum; function getbutton00() { return Button00; function getgrid00() { return Grid00; function setcode(bsave_info) { save_info = bsave_info; function setpaymenttype(paymenttype) { // Radio01.setValue(paymentType); dssearchcondition.setcolumn(0, "paymenttype", paymenttype); function setcreditnumber(creditnumber) { // ed_ccnum.setvalue(creditnumber); dssearchcondition.setcolumn(0, "cc_number", creditnumber); function Button00_onclick(obj:Button, e:clickeventinfo) { var type = dspaytype.getcolumn(dssearchcondition.getrowposition(), "paymenttype"); var cc_number = dspaytype.getcolumn(dssearchcondition.getrowposition(), "cc_number"); var strid, surl, sinds, soutds, sarg, scallback; strid = "select"; surl = "http://localhost/riam/jspsrc/paymentlist.jsp"; sinds = "dssearchcondition=dssearchcondition"; 25
soutds = "dspaymentlist=paymentlist"; sarg = ""; scallback = "fn_callback"; trace("transaction---url=>[" +surl+"]"); transaction(strid,surl,sindataset,soutdataset,sarg,scallback); function fn_callback(trid,nerrcode,serrmsg) { trace("callback - start : " + trid + ":" + nerrcode + ":" + serrmsg); if(nerrcode!= 0) { alert( "Error Info \n" + "ErrCode = [" + nerrcode + "]\n" + "ErrMsg = [" + serrmsg + "]"); return; if(trid == "select") { trace( ds_staff.savexml() ); trace("callback end..."); function Grid00_onselectchanged(obj:Grid, e:gridselecteventinfo) { var type = dsgrid.getcolumn(dsgrid.rowposition, "type"); if (type == "cash") { Div01.visible = false; else { Div01.visible = true; ]]></script> </moduleimpl> </rdl> ( 그림 I-2) RIA 응용프로그램예제소스 26
표준작성공헌자 표준번호 : 이표준의제정 개정및발간을위해아래와같이여러분들이공헌하였습니다. 구분성명위원회및직위연락처소속사 표준 ( 과제 ) 제안표준초안작성자표준초안에디터표준초안검토표준안심의사무국담당 김시만 - smkim@tobesoft.com 투비소프트 김시만 - smkim@tobesoft.com 투비소프트 최성운 - choisw@mju.ac.kr 명지대학교 김시만 - smkim@tobesoft.com 투비소프트 이승윤 웹프로젝트그룹의장 syl@etri.re.kr 한국전자통신연구원 외프로젝트그룹 위원 박승민 기반소프트웨어기술위원회의장 minpark@etri.re.kr 한국전자통신연구원 외기술위원회의원 김영화 - ykim@tta.or.kr TTA 이혜진 - hjlee@tta.or.kr TTA 27
RIA 메타모델 (RIA(Rich Internet Application) Metamodel) 발행인 : 한국정보통신기술협회회장발행처 : 한국정보통신기술협회 463-824, 경기도성남시분당구서현동 267-2 Tel : 031-724-0114, Fax : 031-724-0109 발행일 : 2012.12.