/
XML UI

XML UI

Dec 05, 2012
XML UI マークアップとは

XML UI マークアップを使用して、Nexaweb Platform で UI を指定します。

UI の指定


XML UI を使用して、UI を構成し、Nexaweb で使用可能な各種ウィジェットおよびイベント ハンドラをすべて指定します。
　
次に示す XML UI の例では、テキスト フィールドとボタンを含むパネルを定義します。

 

<panel>
    <textField text="Some sample text..." width="200" height="25" />
    <button text="Submit" width="100" height="25" />
</panel>

XML UI を使用してレイアウトを指定します。次の例は、グリッドレイアウトを使用するウィンドウを示します。

<window width="300" height="300">
    <gridLayout />
    <label text="Description" width="100" height="25" />
    <textArea width="100" height="100">A description...</textArea> 
    <button text="Submit" width="100" height="25" />
</window>
次の XML UI の例では、onDoubleClick イベントにイベントハンドラを定義します。
<panel width="100" height="100" bgColor="#0000FF" onDoubleClick="change-color.xu"/>
ページの取得または NetService.retrieveAndProcess() メソッドの使用によって、Nexaweb で処理されたすべてのページには、次の内容を実行するための命令のセットが含まれています。
  • ドキュメントを編集する
  • MCO を宣言する
  • マクロまたは呼び出しを定義する

XML UIでの操作の実行

クライアントがアプリケーションの初期ページをロードすると、アプリケーションのユーザーインターフェイスドキュメントである UI DOM (Document Object Model) は、アプリケーションのクライアントインターフェイスを指定します。この指定が行われた後でクライアントに送信されるすべての XML は、この初期ドキュメントを変更するか、置き換えます。

XUpdate


XUpdate を使用して、クライアント上に存在する UI ドキュメントを変更する命令を含む XML ドキュメントを作成します。次の XML は、XML の変更に使用される一般的な構造を示しています。この例では、XUpdate の append 命令を使用してボタンをパネルに追加します。

 

<xu:modifications document="nxml" xmlns:xu="http://nexaweb.com/xupdate">
    <xu:append select="/nxml/rootPane/panel">
      <button text="Submit" width="100" height="25" />
    </xu:append>
</xu:modifications>
XUpdate 文を XPath 式と組み合わせて使用し、UI を変更します。次の例では、メッセージダイアログを rootPane 要素に追加することによって UI に追加します。
<xu:modifications document="nxml" xmlns:xu="http://nexaweb.com/xupdate">
    <xu:append select="/nxml/rootPane">
        <messageDialog title="Error" message="Invalid Id"  width="300" height="300" / >
    </xu:append>
</xu:modifications> 

 

マクロ


マクロを使用すると、クライアントが参照および実行する XUpdate 文のグループに名前を付けることができます。これにより、サーバーへの往復が回避され、アプリケーションの応答性が向上します。次の例では、"showDialog" というマクロを定義します。このマクロを実行すると、ダイアログを nxml 要素に追加することによって、ダイアログが表示されます。

<macro:macro xmlns:macro="http://nexaweb.com/macro" 
    name="showDialog">
    <xu:modifications document="nxml" 
        xmlns:xu="http://nexaweb.com/xupdate">
        <xu:append select="/nxml/rootPane">
            <dialog title="My Dialog" width="300" height="300"/>
        </xu:append>
    </xu:modifications>
</macro:macro>
次の XML ドキュメントは、onCommand イベントのイベントハンドラとして "showDialog" マクロを使用するボタンを定義します。ユーザーがボタンを押すと、"showMessageBox" マクロで定義したダイアログボックスが表示されます。

<button text="Show Dialog" onCommand="macro://showDialog" width="100" height="25" />

 

XInclude

  XInclude 文を使用して、ファイルのコンテンツを XML ドキュメントにインクルードできます。一般に、開発者は、アプリケーションをより小さなファイルに分割して管理しやすくするために、この文を使用します。分割された小さなファイルは、後で必要に応じて他の NXML ファイルにインクルードすることができます。Nexaweb クライアントは、これらのファイルを含むドキュメントを処理した後で、XInclude によってインクルードされたファイルを処理します。次の例では、"table.nxml" というファイルのコンテンツをパネルウィジェットにインクルードします。

 

<panel>
    <xi:include xmlns:xi="http://nexaweb.com/xinclude" 
     href="table.nxml" />
</panel>

次に、同じ XML で、XInclude 文を使用しない場合を示します。

<xu:modifications document="nxml" 
    xmlns:xu="http://nexaweb.com/xupdate">
    <xu:append select="/nxml">
        <rootPane>
            <label text="Username" width="100" height="35" />
        </rootPane>
    </xu:append>
</xu:modifications>

検証


NXML スキーマを標準の XML エディタで使用して、UI 要素を検証できます。ただし、実行時に XML 要素は検証されません。

詳細について


XML UI で使用可能なすべてのシンタックスの完全リファレンスについては、リファレンスドキュメントの XML UI セクションを参照してください。変更シンタックスの詳細については、リファレンスドキュメントの XInclude および XUpdate を参照してください。