Xforms とは
Xforms の歴史
ブラウザの対応状況
Xforms のシンプルな例
初期値と隠し値
複数の送信先
外部インスタンスのロード
コントロールの種類
複数のフォーム
データ型とコントロールの制御
送信メソッド
XML データの送信
イベント
まとめ

Xforms とは

次世代の Web フォーム

HTML フォームの限界

Web が発展するにつれ、Web サイトで表示されるデータ入力フォームは、非常に複雑なものになった。
サーバー上での PHP や Java、ブラウザーでの JavaScript などの処理、
さらに、HTML のフォームは、データとインターフェースとが入り交じった内容となっているため管理が困難。

Xforms の特徴

データモデルとコントロールの分離: デバイスに応じた表示、データモデルの再利用が可能
データ型の定義とコントロールの制御: XML Schema によりデータ型のチェックが可能、サーバーや、JavaScript の処理の低減
XML データの使用: フォームモデル内に XML データの記述、サーバーへの XML データの送信

Xforms の歴史

2003年10月 XForms 1.0 W3C 勧告
2007年10月 XForms 1.0 (Third Edition) W3C 勧告
2007年11月 XForms 1.1 W3C 勧告候補

ブラウザの対応状況

IE, Firefox プラグイン

X-Smils

Opera 対応してない ⇒ Web Forms 2.0 (WHATWG)

Xforms のシンプルな例

Xforms ではデータモデルとコントロールの記述が分離している MVC モデル ⇒ 複雑な Web フォームの保守・管理を容易にする

コントロールはデータモデルのインスタンスを ref 属性で参照

データモデルには、送信値、初期値、隠し値、送信先、データ型の定義を記述

従来の HTML フォーム

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Search Form</title>
</head>
<body>
	<form action="http://www.google.co.jp/search" method="get">
		<input type="text" name="q"/>
		<input type="submit" value="検索"/>
	</form>
</body>
</html>

Xforms

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:xf="http://www.w3.org/2002/xforms">
<head>
	<title>Search Form</title>
	<xf:model>
		<xf:instance>
			<data xmlns="">
			<q/>
			</data>
		</xf:instance>
		<xf:submission action="http://www.google.co.jp/search"
		 method="get" id="submit-search"/>
	</xf:model>
</head>
<body>
<xf:input ref="q"></xf:input>
<xf:submit submission="submit-search"><xf:label>検索</xf:label></xf:submit>
</body>
</html>

初期値と隠し値

初期値: ディフォルトの送信値; コントロールから参照するフォームモデル内の要素の中に記述
隠し値: ユーザからは見えない送信値; モデル内の要素として記述、コントロールから参照しない; 従来の方法では、隠しフォームとして記述していた

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:xf="http://www.w3.org/2002/xforms">
<head>
	<title>Search Form</title>
	<xf:model>
		<xf:instance>
			<data xmlns="">
			<q>検索キーワード</q>
			<as_sitesearch>www.atmarkit.co.jp</as_sitesearch>
			</data>
		</xf:instance>
		<xf:submission action="http://www.google.co.jp/search"
			 method="get" id="google-search" separator="&amp;"/>
	</xf:model>
</head>
<body>
	<xf:input ref="q"></xf:input>
	<xf:submit submission="google-search"><xf:label>検索</xf:label></xf:submit>
</body>
</html>

複数の送信先

従来の HTML フォームでは一つのフォームデータに対して、一つの送信先とメソッドでしか送信できない

Xforms では複数の送信先とメソッドを持つことができる

フォームモデル内に複数送信先を定義、 body 内の送信ボタンから参照

<head>
	<title>Search Form</title>
	<xf:model>
		<xf:instance>
			<data xmlns="">
			<q>検索キーワード</q>
			</data>
		</xf:instance>
		<xf:submission action="http://www.google.co.jp/search" 
		 	method="get" id="google-search" separator="&amp;"/>
		<xf:submission action="http://images.google.co.jp/images"
		 	method="get" id="google-image" separator="&amp;"/>
	</xf:model>
</head>

外部インスタンスのロード

大きなデータモデルがある場合や、ユーザーに隠したいデータがある場合には、外部の XML ファイルを読み込むことができる

フォームデータの共有、再利用

<xf:model>
    <xf:instance src="search-instance.xml"/>
    <xf:submission action="http://www.google.co.jp/search" 
        method="get" id="submit-search"/>
</xf:model>

コントロールの種類 (1)

テキスト入力

<xf:input ref="q"><xf:label>検索キーワード:</xf:label></xf:input>

テキストエリア

<xf:textarea ref="message"><xf:label>メッセージ:</xf:label></xf:textarea>

複数選択

select 要素はチェックボックス、 select1 要素はラジオボタン

apperrance 属性を minimal にするとメニュー形式で表示

<xf:select ref="os" appearance="full">
	<xf:item><xf:label></xf:label>Windows<xf:value>windows</xf:value></xf:item>
	<xf:item><xf:label></xf:label>Mac<xf:value>mac</xf:value></xf:item>
	<xf:item><xf:label></xf:label>Linux<xf:value>linux</xf:value></xf:item>
</xf:select>

コントロールの種類 (2)

ファイル参照

<xf:upload ref="file"><xf:label>ファイル:</xf:label></xf:upload>

パスワード

<xf:secret ref="pw"><xf:label>パスワード:</xf:label></xf:secret>

ボタン

イベントのトリガーとして使用

<xf:trigger>
	<xf:label>Click</xf:label>
	<xf:message level="modal" ev:event="DOMActivate">Hello</xf:message>
</xf:trigger>

レンジコントロール

新しいフォーム、入力範囲が決められている

<xf:range ref="volume" start="1" end="10" step="0.5"/>

複数のフォーム

複数のフォームを用いる場合は各フォーム毎に1つのモデルを作成

モデルの id 属性、コントロールの model 属性で指定

<xf:model id="search">
   <xf:instance><data xmlns=""><q/></data></xf:instance>
   <xf:submission id="s" .../>
</xf:model>
<xf:model id="login">
   <xf:instance><data xmlns=""><user/><passwd/></data></xf:instance>
   <xf:submission id="l" .../>
</xf:model>
...
<xf:input model="search" ref="q"><xf:label>検索キーワード:</xf:label></xf:input>
<xf:submit submission="s"><xf:label>検索</xf:label></xf:submit>
...
<xf:input model="login" ref="user"><xf:label>ユーザ名</xf:label></xf:input>
<xf:secret model="login" ref="passwd"><xf:label>パスワード</xf:label></xf:input>
<xf:submit submission="l"><xf:label>ログイン</xf:label></xf:submit>

データ型とコントロールの制御 (1)

モデル内の bind 要素でコントロールに制約をかける

入力が必須
選択不能
値の範囲
計算される値
データ型

⇒ スクリプトやサーバの処理を減らす

入力が必須

<xf:model>
   <xf:instance><data xmlns=""><q/></data></xf:instance>
   <xf:bind nodeset="q" required="true()"/>
   <xf:submission .../>
</xf:model>

選択不能

relevant は条件と一致するとき選択可能 readonly は逆

<xf:model>
   <xf:instance><data xmlns="">
      <amount/><method/><cc/><expires/>
   </data></xf:instance>
   <xf:bind nodeset="cc" relevant="../method='credit'"/>
   <xf:bind nodeset="expires" relevant="../method='credit'"/>
</xf:model>

データ型とコントロールの制御 (2)

値の範囲

<xf:bind nodeset="year" constraint=". &gt; 1970"/>

計算される値

<xf:bind ref="volume" calculate="../height * ../width * ../depth"/>

データ型

XMLSchema のデータ型を用いる（ xmlns:xsd="http://www.w3.org/2001/XMLSchema" ）

文字列、整数、URI、日付などさまざまなデータ型

xsd:string, xsd:normalizedString
xsd:integer, xsd:nonPositiveInteger, xsd:negativeInteger, xsd:nonNegativeInteger, xsd:positiveInteger
xsd:boolean
xsd:decimal, xsd:double
xsd:date, xsd:time, xsd:dateTime
xsd:anyURI

データ型と一致しない場合は送信されない

ブラウザによってはデータ型に応じたインタフェースの提供

<bind nodeset="q" type="xsd:integer"/>

送信メソッド

Xforms では通常の HTML 送信メソッドに加え XML データの送信に対応

get: HTML の get と同じ
urlencoded-post: HTML の post と同じ
form-data-post: HTML の post に enctype="multipart/form-data" と指定したもの
post: XML 文書として送信、HTML にはない
put: XML ファイルとしてサーバに保存、HTML にはない

XML データの送信

put メソッドを使った XML ファイルの保存

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>XML データの送信</title>
<xf:model>
    <xf:instance>
        <data xmlns="">
            <message/><day>6月27日</day>
        </data>
    </xf:instance>
    <xf:submission action="file:///C:/savedata.xml"
        method="put" id="save"/>    
</xf:model>
</head>
<body>
<p>
<xf:input ref="message"><xf:label>Message:</xf:label></xf:input>
<xf:submit 
submission="save"><xf:label>Save</xf:label></xf:submit>
</p>
</body>
</html>

イベント

XML Events を用いることで、スクリプトを使わずにイベントが記述できる

イベント：DOMActive (マウスのクリック)、イベントハンドラー：<massage> (警告メッセージの表示)

<xf:trigger>
	<xf:label>Click</xf:label>
	<xf:message level="modal" ev:event="DOMActivate">Hello</xf:message>
</xf:trigger>

まとめ

モデルとコントロールを分けて記述することによりフォームデータの再利用、保守・管理が容易（MVC モデル）

データ型、コントロールの制御、イベントの提供により、スクリプトやサーバの処理の低減

XML 文書の送信が可能

Xforms の問題点

既存の HTML フォームと互換性がない