Introduction W3C는 현재 표준적으로 사용하고 있는 웹 UI의 표준인 HTML 4.x 발 표 이후 HTML 5.x 대신 XHTML 1.0을 발표하였으며, HTML 표준을 이어갈 차세대 웹 UI 표준이라 칭하고 있다. HTML 5라 칭하지 않는 이유는 무엇일까? XHTML은 XML에 기반하여 HTML4를 다시 재구성한 것이기 때문이다. W3C 원문을 인용한다면, “XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4 [HTML4]. XHTML family document types are XML based, and ultimately are designed to work in conjunction with XML-based user agents.” W3C 말들은 대부분 애매모호한 점들이 많지만 일부 해석한다면 “XHTML은 HTML4를 재구성, 서브셋 하고 확장하여 현재와 미래의 문서 타입과 모듈..” 이러한 추상적인 표현들을 정리하여 부연 설명을 하면, “XHTML은 HTML4 문서타입들을 XML 문서 표준에 맞게 재구성하고, HTML4 규격에 맞는 사용도구들에 호환되면서 XHTML 규격에 맞는 사용도구들에서는 더 작동될 수 …” XHTML 은 차세대 UI로서 W3C 권고안이다. 구성의 특징으로는 HTML 4.01의 Element를 그대로 사용하면서 XML 문법을 따르고 있다. 즉, XM 응용분야에서 사용될 수 있는 잘 정의된 HTML이라 정의할 수 있으며, 이러한 특징은 OS, 브라우저, PDA, Mobile 등 다양한 환경에서 단일한 언어로 호환가능한 웹 표준을 적용할 수 있는 것으로 확장될 수 있다. Why XHTML? XHTML이 왜 필요한가? 차세대 UI로서 XHTML을 사용했을 경우 주는 이점은 무엇인가? W3C 원문을 인용하면 “The XHTML family is the next step in the evolution of the Internet.” 이라 정의하고 있으며, 또한 “…Alternate ways of accessing the Internet are constantly being introduced…. Ultimately, it will be possible to develop XHTML-conforming content that is usable by any XHTML-conforming user agent.” 라 하고 있다. 요약한다면 “XHTML은 인터넷 발전의 다음 단계이며, ..(앞으로도)..인터넷에 접속하는 방식들은 계속 소개 되어질 것이며, 궁극적으로 XHTML 은 이러한 모든 것을 지원 가능하게 될 것이다.” 부연 설명을 하자면 다음과 같다. HTML4가 Dynamic HTML을 위해 탄생된 것이라면 XHTML은 인터페이스에 중점을 둔 것이 아니라 유비쿼터스 환경과 같은 구동 환경에 초점을 맞추고 있다. 즉 단순히 HTML4.0을 업그레이드 한 것이 아니라 XML 응용을 바탕으로 다양한 장치와 브라우저 등에 가장 폭 넓게 웹 페이지를 적용할 수 있다는 데에서 의미를 찾을 수 있다. 또한, 기존의 HTML 문서와의 호환성 유지와 함께 더욱 강력하게 확장할 수 있도록 해주는 것이다. 이 의미를 시장의 관점에서 접근했을 때 해석한다면 PC의 모든 브라우저와 모바일 장치의 브라우저 등을 지원하는 단일 언어로서, 미래의 UI 표준 기술로서 XHTML이 위치해 있으며, 차세대 웹 표현을 위한 Markup Language 이라는 것이다. W3C(World Wide Web Consortium) 는 미래의 모든 유선 프로그래밍에 XHTML을 권장하며, 모바일 장치와 같은 작은 화면과 적은 리소스 동원이 가능한 기기인 경우 XHTML의 하위 언어인 XHTML 베이직을 권고한다. XHTML 베이직은 시장 점유율과 업체 영향력 측면에서 차세대 브라우저 표준 방향을 주도하는 WAP 포럼(WAP) NTT도코모(아이-모드)의 지원을 받고 있다. 이러한 반영은 결국 WAP 2.0 기본 표시언어로서 XHTML 베이직을 채택으로 나타나고 있다. 결론적으로 차세대 웹 UI 기술은 결국 어떠한 장치, 어떠한 브라우저 환경하에서도 동일한 언어와 기술 환경하에 표현되어야 한다는 것이며, 바로 이 방향에 XHTML이 있는 것이다. Extensibility XML documents are required to be well-formed (elements nest properly). Under HTML (an SGML application), the addition of a new group of elements requires alteration of the entire DTD. In an XML-based DTD, all that is required is that the new set of elements be internally consistent and well-formed to be added to an existing DTD. This greatly eases the development and integration of new collections of elements. Portability There will be increasing use of non-desktop devices to access Internet documents. By the year 2002 as much as 75% of Internet access could be carried out on these alternate platforms. In most cases these devices will not have the computing power of a desktop computer, and will not be designed to accommodate ill-formed HTML as current browsers tend to do. In fact, if these non-desktop browsers do not receive well-formed markup (HTML or XHTML), they may simply be unable to display the document. 위에서도 언급했지만, XForms는 전통적인 HTML Forms 기술과는 다르게 모델, 입력된 데이타, 그리고 XForms 사용자 인터페이스의 세가지 부분으로 분리함으로써 폼의 내용과 표현을 명확하게 분리하여 다음과 같은 이점을 준다. 3 Strong typing 3 Existing schema re-use 3 External schema augmentation 3 XML submission 3 Internationalization 3 Enhanced accessibility 3 Multiple device support 3 Declarative event handlers 여기서는 간단한 HTML Form Sample을 XForms으로 변환하는 과정을 통해 XForms에 대해 소개하고자 한다. œ Sample. HTML Form <html> <head> <title>eCommerce Form</title> </head> <body> <form action="http://example.com/submit" method="post"> <table summary="Payment method selector"> <tr> <td><p>Select Payment Method:</p></td> <td><label><input type="radio" name="as" value="cash"/>Cash</label> <label><input type="radio" name="as" value="credit"/>Credit</label></td> </tr> <tr> <td><label for="cc">Credit Card Number:</label></td> <td><input type="text" name="cc" id="cc"/></td> </tr> <tr> <td><label for="exp">Expiration Date:</label></td> <td><input type="text" name="exp" id="exp"/></td> </tr> <tr> <td colspan="2"><input type="submit"/></td> </tr> </table> </form> </body> </html>

HTML Form 방식은 Form 데이터, 유효성 체크 등의 제약조건, 프리젠테이션(표현) 처리를 분리하지 못하는 한계를 갖고 있으나 XForms 방법은 이러한 한계를 개선하여 제공할 수 있는 기술적 구조를 제공합니다. 다음은 위 HTML Form을 XForm으로 변환하는 과정들을 간단한 예와 함께 설명하고자 한다. 모델 요소를 추출하여 간단히 변환환 예 <xforms:model> <xforms:submitInfo action="http://examples.com/submit" id="submit"/> </xforms:model> œ Sample. 프리젠테이션 표현을 위해 XForms 방식으로 변환 <selectOne ref="as"> <caption>Select Payment Method</caption> <choices> <item> <caption>Cash</caption> <value>cash</value> </item> <item> <caption>Credit</caption> <value>credit</value> </item> </choices> </selectOne> <input ref="cc"> <caption>Credit Card Number</caption> </input> <input ref="exp"> <caption>Expiration Date</caption> </input> <submit submitInfo="submit"> <caption>Submit</caption> </submit> 변환된 코드의 특징을 보면 디바이스 비종속성을 고려하여 라디오 버튼 객체 표현을 위해 하드코딩 방식을 사용하지 않고 <selectOne> 과 같은 방식으로 표현되었을 뿐만 아니라 XML 기반의 표현 방식을 통해서 명확하고 간결하다. 또한 표현과 데이터를 표준적 스펙에 따라 완벽하게 분리함으로써 XML submission 을 가능하게 한다. Providing XML Instance Data <xforms:model> <xforms:instance> <payment as="credit" xmlns="http://commerce.example.com/payment"> <cc/> <exp/> </payment> </xforms:instance> <xforms:submitInfo action="http://example.com/submit" method="post"/> </xforms:model> 유효성 체크의 예 XForms 은 특정 객체의 Value 체크 또는 객체와 객체간의 상관 관계하의 특정 조건 체크 등을 위해 HTML 방식에서 사용했던 것처럼 스크립트를 사용할 필요가 없다. 위에서 제시된 예제를 기반으로 유효성 체크를 어떻게 처리하는지 소개한다. 조건은 Select Payment Method 에서Credit 를 선택 했을 경우이며, 그 상세 내용은 다음과 같다. 3 Cridit Card Number를 반드시 입력 3 Expiration Date를 반드시 입력 3 Credit Card Number 입력 데이터는 Digit 형이어야 하며, 14-18 자 3 Expiration Date는 month/year 형식의 날짜형 데이터 œ Sample. 유효성 체크 <xforms:bind ref="my:payment/my:cc" relevant="../my:payment/@as = 'credit'" required="true" type="my:cc"/> <xforms:bind ref="my:payment/my:exp" relevant="../my:payment/@as = 'credit'" required="true" type="xsd:gYearMonth"/> <xforms:schema> <xsd:schema ...> ... <xsd:simpleType name="cc"> <xsd:restriction base="xsd:string"> <xsd:pattern value="\d{14,18}"/> </xsd:restriction> </xsd:simpleType> ... </xsd:schema> </xforms:schema> HTML Forms을 이용하여 작성하던 구성들이 과연 XForms을 사용할 경우 어떻게 변해야 하는지 그 변화의 감을 잡기 위해 몇 가지 예제를 코드레벨에서 소개하고자 한다. œ Sample. HTML 구성의 예 <html> <head><title>Search</title></head> <body> <form action="http://example.com/search" method="get"> Find <input type="text" name="q"> <input type="submit" value="Go"> </form> </body> </html> XForm 으로 변환시 과연 무엇이 바뀌어야 하는가? 가장 중요한 차이는 하나로 표현되었던 것을 분리하는 것이다. 예를 들자면 Form 객체를 통해서 표현되었던 Submit 객체와 UI 분리 같은 것을 말한다. HTML-Form 객체를 XForm으로 변환하기 위해 기술된 아래의 부분적 코드를 보면 이해가 빠를 것이다. <model> <submission action="http://example.com/search" method="get" id="s"/> </model> <input ref="q"><label>Find</label></input> <submit submission="s"><label>Go</label></submit> œ Sample. 변환된 전체 소스를 본다면 다음과 같다 <h:html xmlns:h="http://www.w3.org/1999/xhtml"
xmlns="http://www.w3.org/2002/xforms">
<h:head>
<h:title>Search</h:title>
<model>
<submission action="http://example.com/search"
method="get" id="s"/>
</model>
</h:head>
<h:body>
<h:p>
<input ref="q"><label>Find</label></input>
<submit submission="s"><label>Go</label></submit>
</h:p>
</h:body>
</h:html> Submit HTML Form은 하나의 방법을 통해 특정서버에 한 곳에 Submit이 가능하지만 XForm은 여러 다른 서버(Different Server)에 또는 여러가지 방법으로 Submit (Multiple Submission) 하는 방법을 제공 한다. <model>
<instance>…</instance>
<submission action="http://example.com/search"
method="get" id="com"/>
<submission action="http://example.org/search"
method="get" id="org"/>
</model> <submit submission="org"><label>Search example.org</label></submit>
<submit submission="com"><label>Search example.com</label></submit> HTML Forms 유저를 위한 XForm 가이드는 전통적 HTML Form을 어떻게 변환해야 하는가에 대해서 Forms Control, Types 등 여러가지 소개하고 있으나 생략한다. 위에서도 언급했지만, XForms는 전통적인 HTML Forms 기술과는 다르게 모델, 입력된 데이타, 그리고 XForms 사용자 인터페이스의 세가지 부분으로 분리함으로써 폼의 내용과 표현을 명확하게 분리하여 다음과 같은 이점을 준다. 3 Strong typing 3 Existing schema re-use 3 External schema augmentation 3 XML submission 3 Internationalization 3 Enhanced accessibility 3 Multiple device support 3 Declarative event handlers 여기서는 간단한 HTML Form Sample을 XForms으로 변환하는 과정을 통해 XForms에 대해 소개하고자 한다. œ Sample. HTML Form <html> <head> <title>eCommerce Form</title> </head> <body> <form action="http://example.com/submit" method="post"> <table summary="Payment method selector"> <tr> <td><p>Select Payment Method:</p></td> <td><label><input type="radio" name="as" value="cash"/>Cash</label> <label><input type="radio" name="as" value="credit"/>Credit</label></td> </tr> <tr> <td><label for="cc">Credit Card Number:</label></td> <td><input type="text" name="cc" id="cc"/></td> </tr> <tr> <td><label for="exp">Expiration Date:</label></td> <td><input type="text" name="exp" id="exp"/></td> </tr> <tr> <td colspan="2"><input type="submit"/></td> </tr> </table> </form> </body> </html>
HTML Form 방식은 Form 데이터, 유효성 체크 등의 제약조건, 프리젠테이션(표현) 처리를 분리하지 못하는 한계를 갖고 있으나 XForms 방법은 이러한 한계를 개선하여 제공할 수 있는 기술적 구조를 제공합니다. 다음은 위 HTML Form을 XForm으로 변환하는 과정들을 간단한 예와 함께 설명하고자 한다. 모델 요소를 추출하여 간단히 변환환 예 <xforms:model> <xforms:submitInfo action="http://examples.com/submit" id="submit"/> </xforms:model> œ Sample. 프리젠테이션 표현을 위해 XForms 방식으로 변환 <selectOne ref="as"> <caption>Select Payment Method</caption> <choices> <item> <caption>Cash</caption> <value>cash</value> </item> <item> <caption>Credit</caption> <value>credit</value> </item> </choices> </selectOne> <input ref="cc"> <caption>Credit Card Number</caption> </input> <input ref="exp"> <caption>Expiration Date</caption> </input> <submit submitInfo="submit"> <caption>Submit</caption> </submit> 변환된 코드의 특징을 보면 디바이스 비종속성을 고려하여 라디오 버튼 객체 표현을 위해 하드코딩 방식을 사용하지 않고 <selectOne> 과 같은 방식으로 표현되었을 뿐만 아니라 XML 기반의 표현 방식을 통해서 명확하고 간결하다. 또한 표현과 데이터를 표준적 스펙에 따라 완벽하게 분리함으로써 XML submission 을 가능하게 한다. Providing XML Instance Data <xforms:model> <xforms:instance> <payment as="credit" xmlns="http://commerce.example.com/payment"> <cc/> <exp/> </payment> </xforms:instance> <xforms:submitInfo action="http://example.com/submit" method="post"/> </xforms:model> 유효성 체크의 예 XForms 은 특정 객체의 Value 체크 또는 객체와 객체간의 상관 관계하의 특정 조건 체크 등을 위해 HTML 방식에서 사용했던 것처럼 스크립트를 사용할 필요가 없다. 위에서 제시된 예제를 기반으로 유효성 체크를 어떻게 처리하는지 소개한다. 조건은 Select Payment Method 에서Credit 를 선택 했을 경우이며, 그 상세 내용은 다음과 같다. 3 Cridit Card Number를 반드시 입력 3 Expiration Date를 반드시 입력 3 Credit Card Number 입력 데이터는 Digit 형이어야 하며, 14-18 자 3 Expiration Date는 month/year 형식의 날짜형 데이터 œ Sample. 유효성 체크 <xforms:bind ref="my:payment/my:cc" relevant="../my:payment/@as = 'credit'" required="true" type="my:cc"/> <xforms:bind ref="my:payment/my:exp" relevant="../my:payment/@as = 'credit'" required="true" type="xsd:gYearMonth"/> <xforms:schema> <xsd:schema ...> ... <xsd:simpleType name="cc"> <xsd:restriction base="xsd:string"> <xsd:pattern value="\d{14,18}"/> </xsd:restriction> </xsd:simpleType> ... </xsd:schema> </xforms:schema>
by Anna 안나 2008. 11. 9. 15:37