「Enterキーを使ったXML文書フラグメントの追加と分割」では、Enterキーの入力でXML文書フラグメントを分割したり、追加したりしました。今度は、DeleteキーやBackspaceキーが押されたときにXML文書フラグメントを結合する処理を追加しましょう。
まず、Deleteキーの処理を追加します。連続する２つのノードを結合するコマンドインストラクション要素は、
xvcd:combineコマンドインストラクションです。このxvcd:combineコマンドインストラクションを
xvcd:action要素の内容に記述します。xvcd:action要素のevent属性には、stroke属性の値にDeleteキーを表すDELETEが設定された
event:key-pressedイベントを表すXPath式「event:key-pressed[@stroke='DELETE']」を記述します。
Deleteキーが押されたときにhw:message要素を結合できるのは、キャレットがhw:message要素のノードにあるときです。このときに、キャレット位置のノードを直後にあるノードと結合するので、
xvcd:main-elements要素のtest属性にhw:messageを指定します。
ノードを結合できない状態でDeleteキーが押されたときは、選択されている文字列を削除します。削除処理を行うコマンドインストラクション要素は、
xvcd:deleteコマンドインストラクションです。select属性には削除する対象を指定します。削除する対象は選択されている範囲なので、
xvcd:selection-range関数を使用します。
ここまでの内容を適用したユーザー操作イベント定義は以下のようになります。強調文字で表記した箇所が、追加された箇所です。
<?xml version="1.0"?>
<xvcd:xvcd
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xvcd="http://xmlns.xfy.com/xvcd"
xmlns:event="http://xmlns.xfy.com/event"
xmlns:hw="http://xmlns.example.com/developer/tutorial/helloworld"
version="1.0">
<!-- =============================================
Vocabulary
=============================================== -->
<xvcd:vocabulary name="HelloWorld4" match="hw:document" call-template="root"/>
<!-- =============================================
Template Rules
=============================================== -->
<xvcd:template name="root">
<html>
<!-- KEY EVENT -->
<xvcd:action event="event:key-pressed[@stroke='ENTER']">
<xvcd:split>
<xvcd:main-elements test="self::hw:message"/>
<xvcd:default>
<xvcd:insert
ref="xvcd:caret-node()/ancestor-or-self::hw:message[1]"
position="after">
<hw:message/>
</xvcd:insert>
</xvcd:default>
</xvcd:split>
</xvcd:action>
<xvcd:action event="event:key-pressed[@stroke='DELETE']">
<xvcd:combine>
<xvcd:main-elements test="self::hw:message"/>
<xvcd:default>
<xvcd:delete select="xvcd:selection-range()"/>
</xvcd:default>
</xvcd:combine>
</xvcd:action>
<head>
<title>HelloWorld example</title>
</head>
<body>
<xvcd:apply-templates select="*"/>
</body>
</html>
</xvcd:template>
<xvcd:template match="hw:message">
<p>
<xvcd:text-of select="." filler="[** Enter any text here.]"/>
</p>
</xvcd:template>
</xvcd:xvcd>
続いて、Backspaceキーの処理を追加します。Backspaceキーのイベントを処理するxvcd:action要素を追加します。event属性には、stroke属性の値にBackspaceキーを表すBACK_SPACEが設定されたevent:key-pressedイベントを表すXPath式「event:key-pressed[@stroke='BACK_SPACE']」を記述します。このxvcd:action要素の内容にxvcd:combineコマンドインストラクションを記述します。
Backspaceキーの場合は直前にあるノードと結合すればよいので、xvcd:combineコマンドインストラクションのto属性に結合対象ノードの結合方向を属性値テンプレートで指定します。この場合、beforeを指定します。
また、xvcd:deleteコマンドインストラクションのbackspace属性に文字を削除するときの動作を指定します。この場合、yesを指定します。
ここまでの内容を適用したユーザー操作イベント定義は以下のようになります。強調文字で表記した箇所が、追加された箇所です。
<?xml version="1.0"?>
<xvcd:xvcd
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xvcd="http://xmlns.xfy.com/xvcd"
xmlns:event="http://xmlns.xfy.com/event"
xmlns:hw="http://xmlns.example.com/developer/tutorial/helloworld"
version="1.0">
<!-- =============================================
Vocabulary
=============================================== -->
<xvcd:vocabulary name="HelloWorld4" match="hw:document" call-template="root"/>
<!-- =============================================
Template Rules
=============================================== -->
<xvcd:template name="root">
<html>
<!-- KEY EVENT -->
<xvcd:action event="event:key-pressed[@stroke='ENTER']">
<xvcd:split>
<xvcd:main-elements test="self::hw:message"/>
<xvcd:default>
<xvcd:insert
ref="xvcd:caret-node()/ancestor-or-self::hw:message[1]"
position="after">
<hw:message/>
</xvcd:insert>
</xvcd:default>
</xvcd:split>
</xvcd:action>
<xvcd:action event="event:key-pressed[@stroke='DELETE']">
<xvcd:combine>
<xvcd:main-elements test="self::hw:message"/>
<xvcd:default>
<xvcd:delete select="xvcd:selection-range()"/>
</xvcd:default>
</xvcd:combine>
</xvcd:action>
<xvcd:action event="event:key-pressed[@stroke='BACK_SPACE']">
<xvcd:combine to="before">
<xvcd:main-elements test="self::hw:message"/>
<xvcd:default>
<xvcd:delete select="xvcd:selection-range()" backspace="yes"/>
</xvcd:default>
</xvcd:combine>
</xvcd:action>
<head>
<title>HelloWorld example</title>
</head>
<body>
<xvcd:apply-templates select="*"/>
</body>
</html>
</xvcd:template>
<xvcd:template match="hw:message">
<p>
<xvcd:text-of select="." filler="[** Enter any text here.]"/>
</p>
</xvcd:template>
</xvcd:xvcd>
編集が完了したら、HelloWorld4.xvcdを上書き保存します。
実際にxfy Clientで動作を確かめましょう。次の操作で、HelloWorld4.xmlをxfy Clientで開きます。
- xfy Clientを起動します
- ［ファイル - 開く］を選択します
-
HelloWorld4.xmlを選択して、［開く］をクリックします
DeleteキーやBackspaceキーを押すと、文字列を削除したり、ノードを結合したりすることができます。
DeleteキーやBackspaceキーでノードを結合する
