XML user interface

Owned by Rob Gagne (Unlicensed)
Last updated: Dec 04, 2012 by Xiaoyan Kong (Unlicensed)Version comment
1 min read

XML UI マークアップとは

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

UI の指定

XML UI を使用して、Nexaweb で使用可能な、さまざまなウィジェットおよびイベントハンドラのすべてを指定し、UI を構成します。

次のXML UI の例では、テキストフィールドおよびボタンが含まれるパネルを定義しています。

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

XML UI を使用してレイアウトを指定します。グリッドレイアウトを使用したウィンドウを次に示します。

<xal xlmns="http://openxal.org/ui">
  <window width="300" height="300">
   <gridPane />
    <label text="Description" width="100" height="25" />
    <textArea width="100" height="100">A description...</textArea>
    <button text="Submit" width="100" height="25" />
  </window>
 </xal>

次のXML UI の例では、onDoubleClick イベントのイベントハンドラを定義しています。

<panel width="100" height="100" backgroundColor="#0000FF" onDoubleClick="change-color.xu"/>

ページの取得またはNetService.retrieveAndProcess() メソッドを使用した場合のいずれでも、Nexaweb で処理されるページにはすべて、次の処理を行う命令のセットが含まれます。

  • ドキュメントの変更
  • MCO の宣言
  • マクロまたは呼び出しの定義.

XML UI での操作の実行

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


XModify

XModify を使用して、クライアントに存在するUI ドキュメントを変更する命令を含んだXML ドキュメントを作成します。次のXML はXML の変更に共通の構造です。このXML ではXModify append 命令を使用してパネルにボタンを追加しています。

<xm:modifications xmlns:xm="http://openxal.com/core/xmodify">
  <xm:append select="/xal/rootPane/panel">
  <button text="Submit" width="100" height="25" />
  </xm:append>
</xm:modifications>

XModify 文をXPath 式と組み合わせて使用して、UI を検索し変更します。次の例では、メッセージダイアログをrootPane 要素に追加することで、UI にメッセージダイアログを追加しています。

<xm:modifications xmlns:xm="http://openxal.com/core/xmodify">
  <xm:append select="/xal/rootPane">
    <messageDialog title="Error" message="Invalid Id" width="300" height="300" / >
  </xm:append>
</xm:modifications>

マクロ

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

<macro:macro xmlns:macro=http://openxal.org/core/macro name="showDialog" >
  <xm:modifications xmlns:xm="http://openxal.com/core/xmodify"> 
   <xm:append select="/xal/rootPane">
    <dialog title="My Dialog" width="300" height="300" /> 
   </xm:append>
  </xm:modifications>
</macro:macro>

次のXML ドキュメントでは、onCommand イベントのイベントハンドラとして"showDialog" マクロを使用するボタンを定義しています。ユーザーがボタンを押した場合、"showMessageBox" マクロで定義されたダイアログボックスが表示されます。

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

XInclude

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

<freePane>
 <xi:include xmlns="http://openxal.org/core/xinclude" href="table.xal" />
</freePane>

次の例では、XInclude 文を使用しない同じXML を示します。

<xm:modifications xmlns:xm="http://openxal.com/core/xmodify">
  <xm:append select="/xal">
    <rootPane>
      <label text="Username" width="100" height="35" />
    </rootPane>
 </xm:append>
</xm:modifications>

検証

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

詳細について

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