...
What is XML UI Markup?
Specifying Your UI
マークアップとは
XML UI マークアップを使用して、Nexaweb Platform でUI を指定します。
UI の指定
XML UI を使用して、Nexaweb で使用可能な、さまざまなウィジェットおよびイベントハンドラのすべてを指定し、UI を構成します。
次のXML UI の例では、テキストフィールドおよびボタンが含まれるパネルを定義しています。
| Code Block |
|---|
<freePane> <textField text="Some sample text..." |
...
width="200" height="25" /> |
...
<button text="Submit" width="100" height="25" /> </freePane> |
Use XML UI to specify layouts. The following shows a window that uses a grid layout:を使用してレイアウトを指定します。グリッドレイアウトを使用したウィンドウを次に示します。
| Code Block |
|---|
<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> |
The following example XML UI defines an event handler for its onDoubleClick event: 次のXML UI の例では、onDoubleClick イベントのイベントハンドラを定義しています。
<panel width="100" height="100"
backgroundColor="#0000FF" onDoubleClick="change-color.xu"/>All pages processed by Nexaweb, either as a page retrieval or through the NetServiceページの取得またはNetService.retrieveAndProcess() method, contain a set of instructions to:
- Modify a document
- Declare MCOs
- Define Macros or calls.
Performing Operations on the XML UI
Once the client loads an application's intial page, the application's user interface document - the UI Document Object Model (DOM) - specifies the application's client interface. Any subsequent XML sent to the client modifies or replaces this initial document.
XModify
Use XModify to create XML documents containing instructions that modify the UI document existing on the client. The following XAL is a common structure for XML modifications; it uses an XModify append instruction to append a button to a panel.メソッドを使用した場合のいずれでも、Nexaweb で処理されるページにはすべて、次の処理を行う命令のセットが含まれます。
- ドキュメントの変更
- MCO の宣言
- マクロまたは呼び出しの定義.
XML UI での操作の実行
クライアントがアプリケーションの最初のページをロードすると、アプリケーションのユーザーインターフェイスドキュメントであるUI DOM (Document Object Model) によりアプリケーションのクライアントインターフェイスが指定されます。その後クライアントに送信されるXML はすべて、この最初のドキュメントを変更または置き換えます。
XModify
XModify を使用して、クライアントに存在するUI ドキュメントを変更する命令を含んだXML ドキュメントを作成します。次のXML はXML の変更に共通の構造です。このXML ではXModify append 命令を使用してパネルにボタンを追加しています。
| Code Block |
|---|
<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> |
Use XModify statements combinded with XPath expressions to search and modify your UI. The following appends a message dialog to the UI by appending it to the rootPane element.
...
XModify 文をXPath 式と組み合わせて使用して、UI を検索し変更します。次の例では、メッセージダイアログをrootPane 要素に追加することで、UI にメッセージダイアログを追加しています。
| Code Block |
|---|
<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> |
...
Macros
...
マクロ
マクロを使用すると、クライアントが参照して実行するXModify 文のグループに名前を付けることができます。これによって、サーバーへの往復が回避され、アプリケーションの応答性が向上します。次の例では、"showDialog" という名前のマクロを定義しています。このマクロは、実行時にxal 要素にダイアログを追加して、ダイアログを表示します。
| Code Block |
|---|
<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> |
The following XAL document defines a button that uses the "showDialog" macro as the event handler for its onCommand event. When a user presses a button, the dialog box defined in the "showMessageBox" macro appears.
...
次のXML ドキュメントでは、onCommand イベントのイベントハンドラとして"showDialog" マクロを使用するボタンを定義しています。ユーザーがボタンを押した場合、"showMessageBox" マクロで定義されたダイアログボックスが表示されます。
| Code Block |
|---|
<button text="Show Dialog" |
...
onCommand="macro://showDialog" width="100" height="25" /> |
XInclude
Macros allow you to name a group of XModify statements that the client references and executes, avoiding a roundtrip to the server and improving your application's responsiveness. The following defines a macro named "showDialog" that, when executed, displays a dialog by appending it to the XAL element.
You can use XInclude statements to include the contents of a file into a XAL document. Developers commonly use this to make applications more manageable by breaking applications into smaller files. Then a developer can include these smaller files into other XAL files as needed. The Nexaweb client processess XInclude included files after processing the document that contains them. The following example includes the contents of the file named table.xal into a panel widget.XInclude 文を使用して、ファイルのコンテンツをXML ドキュメントにインクルードすることができます。開発者は一般的に、XInclude 文を使用してアプリケーションを小さいファイルに分割することで、アプリケーションをより管理しやすくします。次に、開発者はこれらの小さいファイルを必要に応じて他のXAL ファイルにインクルードすることができます。Nexaweb クライアントは、XInclude で指定されたインクルードファイルを、それらをインクルードするファイルの処理後に処理します。次の例では、"table.xal" という名前のファイルのコンテンツをパネルウィジェットにインクルードします。
| Code Block |
|---|
<freePane>
<xi:include xmlns="http://openxal.org/core/xinclude" href="table.xal" />
</freePane> |
...
次の例では、XInclude 文を使用しない同じXML を示します。
| Code Block |
|---|
<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> |
...
Validation
You can use XAL schemas in standard XML editors to validate UI elements. However, XML elements are not validated at runtime.
Findng out more
...
検証
標準XML エディタでXAL スキーマを使用して、UI 要素を検証することができます。ただし、XML 要素は実行時には検証されません。
詳細について
XML UI で使用可能なシンタックスの完全なリファレンスについては、リファレンスドキュメントのXML UI のセクションを参照してください。変更シンタックスの詳細については、リファレンスドキュメントのXInclude およびXModify を参照してください。