![閉じる [x]](http://dw1.s81c.com/i/c.gif){kind=small}
このヒントは、XForms に関する特定のタスクについてのヒントです。XFroms についての背景となる情報については、3 回シリーズの「XForms 入門」を参照してください。
このヒントで説明する XForms のサンプルは、(XForms エクステンションをインストールした) Firefox 1.5 と、Formsplayer コントロールをインストールした Microsoft® Internet Explorer 6 でテストされ、動作しています。ダウンロードには、Firefox 用の XHTML ファイルと IE 用の HTML ファイルが含まれています。
XForms は、トリガーやアクションを使うことでフォームに対話動作を容易に追加できるようになっています。しかしほとんどの場合、こうしたアクションは XForms に関係したアクションです。このヒントで作成するフォームには、クリックされると JavaScript を実行するボタンが含まれています。まず、基本的なフォームから始めましょう (リスト 1)。
リスト 1. 基本的なフォーム
<?xml version="1.0" encoding="ASCII"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<title>Instance Data-To-XHTML/XForms Example</title>
<xforms:model id="auctionItems">
<xforms:instance id="auctions" src="auctions.xml"/>
<xforms:submission id="submit_model_auctionItems"
action="http://xformstest.org/cgi-bin/showinstance.sh"
method="post" instance="auctions"/>
</xforms:model>
<link href="gen_default.css" rel="stylesheet"/>
</head>
<body>
<h1 align="center" id="myTest">Auction Item Inventory</h1>
<xforms:repeat nodeset="instance('auctions')/auctionItem"
id="repeatAuctionItems">
<h2 align="center">Auction Item</h2>
<xforms:input ref="@itemID">
<xforms:label>Item ID</xforms:label>
</xforms:input>
<xforms:input ref="purchaseDate">
<xforms:label>Purchase Date</xforms:label>
</xforms:input>
<xforms:input ref="auctionLength">
<xforms:label>Auction Length</xforms:label>
</xforms:input>
<xforms:input ref="purchasePrice">
<xforms:label>Purchase Price</xforms:label>
</xforms:input>
<xforms:input ref="description">
<xforms:label>Description</xforms:label>
</xforms:input>
<xforms:input ref="estimatedValue">
<xforms:label>Estimated Value</xforms:label>
</xforms:input>
</xforms:repeat>
<xforms:group>
<xforms:trigger>
<xforms:label>Show action</xforms:label>
</xforms:trigger>
<xforms:trigger>
<xforms:label>Insert Auction Item</xforms:label>
<xforms:insert nodeset="instance('auctions')/auctionItem"
at="index('repeatAuctionItems')"
position="after" ev:event="DOMActivate" />
</xforms:trigger>
<xforms:trigger>
<xforms:label>Delete Auction Item</xforms:label>
<xforms:delete nodeset="instance('auctions')/auctionItem"
at="index('repeatAuctionItems')"
ev:event="DOMActivate" />
</xforms:trigger>
</xforms:group>
<xforms:submit submission="submit_model_auctionItems">
<xforms:label>Submit</xforms:label>
</xforms:submit>
</body>
</html>
|
このフォームには、フォームの送信先のアクションを示す必要のあるボタンがあります。これを図 1 に示します。
図 1. Show action ボタンを持つフォーム
そのためには、まず実際のスクリプトを作ります (リスト 2)。
リスト 2. JavaScript
...
<head>
<title>Instance Data-To-XHTML/XForms Example</title>
<xforms:model id="auctionItems">
<xforms:instance id="auctions" src="auctions.xml"/>
<xforms:submission id="submit_model_auctionItems"
action="http://xformstest.org/cgi-bin/showinstance.sh"
method="post" instance="auctions"/>
</xforms:model>
<link href="gen_default.css" rel="stylesheet"/>
<script type="text/javascript">
var testJS= function()
{
alert('This form submits to: '+
document.getElementById('submit_model_auctionItems')
.getAttribute('action'));
}
</script>
</head>
<body>
...
|
このスクリプトは JavaScript ですが、標準の DOM メソッドを使って XForms と対話動作します。
今度は、このスクリプトをコールするための方法が必要です。
XForms の load 要素は、既存のウィンドウ、あるいは新しいウィンドウにリソースをロードするようにブラウザーに命令するという点で、HTML のリンクと非常に似ています。つまり、幸いなことに XForms の load 要素を使って URL を呼び出せるということです。この JavaScript を、URL として参照できるので、これは便利です。ところで皆さんは、これをリスト 3 のように設定できると思うかもしれません。
リスト 3. JavaScript をロードするための誤った方法
...
<xforms:trigger>
<xforms:label>Show action</xforms:label>
<xforms:load ref="javascript:testJS()" ev:event="DOMActivate"/>
</xforms:trigger>
...
|
しかし、このように設定することはできません。ref 属性は XPath 式しか受け付けないのです。幸い、この問題を避けられる非常に単純な方法があります (リスト 4)。
リスト 4. JavaScript をロードするための正しい方法
<?xml version="1.0" encoding="ASCII"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<title>Instance Data-To-XHTML/XForms Example</title>
<xforms:model id="auctionItems">
<xforms:instance id="auctions" src="auctions.xml"/>
<xforms:instance id="data">
<data url="javascript:testJS()"/>
</xforms:instance>
<xforms:submission id="submit_model_auctionItems"
action="http://xformstest.org/cgi-bin/showinstance.sh"
method="post" instance="auctions"/>
</xforms:model>
...
</xforms:repeat>
<xforms:group>
<xforms:trigger>
<xforms:label>Show action</xforms:label>
<xforms:load ref="instance('data')/@url"
ev:event="DOMActivate"/>
</xforms:trigger>
<xforms:trigger>
<xforms:label>Insert Auction Item</xforms:label>
<xforms:insert nodeset="instance('auctions')/auctionItem"
at="index('repeatAuctionItems')"
position="after" ev:event="DOMActivate" />
</xforms:trigger>
...
|
今度は ref 属性に XPath 式が含まれています。この XPath 式は、このスクリプトを参照する URL を指しています。そのため、このボタンをクリックすると、求める結果が得られます (図 2)。
図 2. ボタンをクリックすると、求める結果が得られる
load 要素を使うと、任意の URL を実行することができます。ただしそのためには、その URL がデータ・インスタンスの中に含まれている必要があり、load 要素の ref 属性に XPath 式が含まれるようにしなければなりません。そうなっていれば、その URL は実際の JavaScript を指します。これはつまり、たとえそのページ上にある XForms 要素や属性と対話動作するような JavaScript スクリプトであっても、正しく記述されていれば、任意の JavaScript スクリプトを実行できるということにも注意してください。
| 内容 | ファイル名 | サイズ | ダウンロード形式 |
|---|---|---|---|
| Call JavaScript XForms samples | calljs_source.zip | 4KB | HTTP |
学ぶために
-
Skimstone は XForms とは何かを説明してくれます。
-
Skimstone のサイトで XForms の紹介を見てください。
- XForms 入力のスキーマ型として他にどんなものがあるかを知るために、w3cschools を調べてください。
-
このシリーズは、XForms を使い始めるためのガイドとして最適です。
- alphaWorks の Visual XForms Designer について学ぶために、ここから出発してください。
-
developerWorks のXML ゾーンには、XForms や他の XML 技術に関するスキルを向上するために役立つ資料が豊富に用意されています。
-
Technology bookstore には、この記事や他の技術的な話題に関する本が豊富に取り揃えられています。
製品や技術を入手するために
- IE で XForms を描画できるオープンソース・コントロール、MozzIE を入手してください。
議論するために
-
ディスカッション・フォーラムに参加してください。
タグ
スライダーバーを使用することで、より多く（少なく）タグを表示します。
人気のタグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するトップのタグを表示します。
マイ・タグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するお客様ご自身のタグを表示します。
記事の人気タグ |
記事のマイ・タグタグ・リストへスキップ
記事の人気タグ |
記事のマイ・タグ