...
...
Use XML UI Markup to specify your UI in the Nexaweb Platform. Specifying Your UI Use the XML UI to specify all of the various widgets and Event handlers available in Nexaweb that make up your UI.
UI の指定
XML UI を使用して、UI を構成し、Nexaweb で使用可能な各種ウィジェットおよびイベント ハンドラをすべて指定します。
| Code Block | ||||
|---|---|---|---|---|
| ||||
<panel>
<textField text="Some sample text..." width="200" height="25" />
<button text="Submit" width="100" height="25" />
</panel> |
Use XML UI to specify layouts. The following shows a window that uses a grid layout:を使用してレイアウトを指定します。次の例は、グリッドレイアウトを使用するウィンドウを示します。
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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> |
The following example XML UI defines an event handler for its onDoubleClick event:
| Code Block |
|---|
次の XML UI の例では、onDoubleClick イベントにイベントハンドラを定義します。
<panel width="100" height="100" bgColor="#0000FF" onDoubleClick="change-color.xu"/> |
...
ページの取得または NetService.retrieveAndProcess() |
...
- 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.
XUpdate
...
メソッドの使用によって、Nexaweb で処理されたすべてのページには、次の内容を実行するための命令のセットが含まれています。 |
- ドキュメントを編集する
- MCO を宣言する
- マクロまたは呼び出しを定義する
XML UIでの操作の実行
クライアントがアプリケーションの初期ページをロードすると、アプリケーションのユーザーインターフェイスドキュメントである UI DOM (Document Object Model) は、アプリケーションのクライアントインターフェイスを指定します。この指定が行われた後でクライアントに送信されるすべての XML は、この初期ドキュメントを変更するか、置き換えます。
XUpdate
XUpdate を使用して、クライアント上に存在する UI ドキュメントを変更する命令を含む XML ドキュメントを作成します。次の XML は、XML の変更に使用される一般的な構造を示しています。この例では、XUpdate の append 命令を使用してボタンをパネルに追加します。
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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> |
Use XUpdate 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.
| language | html/xml |
|---|---|
| linenumbers | true |
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> |
Macros
Macros allow you to name a group of XUpdate 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 nxml element.
The following XML 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.マクロ
マクロを使用すると、クライアントが参照および実行する XUpdate 文のグループに名前を付けることができます。これにより、サーバーへの往復が回避され、アプリケーションの応答性が向上します。次の例では、"showDialog" というマクロを定義します。このマクロを実行すると、ダイアログを nxml 要素に追加することによって、ダイアログが表示されます。
| Code Block | ||||
|---|---|---|---|---|
| ||||
<button text="Show Dialog" onCommand="macro://showDialog" width="100" height="25" /> <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
You can use XInclude statements to include the contents of a file into an XML 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 NXML 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 XInclude 文を使用して、ファイルのコンテンツを XML ドキュメントにインクルードできます。一般に、開発者は、アプリケーションをより小さなファイルに分割して管理しやすくするために、この文を使用します。分割された小さなファイルは、後で必要に応じて他の NXML ファイルにインクルードすることができます。Nexaweb クライアントは、これらのファイルを含むドキュメントを処理した後で、XInclude によってインクルードされたファイルを処理します。次の例では、"table.nxml" into a panel widget.というファイルのコンテンツをパネルウィジェットにインクルードします。
| Code Block | ||||
|---|---|---|---|---|
| ||||
<panel>
<xi:include xmlns:xi="http://nexaweb.com/xinclude"
href="table.nxml" />
</panel> |
The following example shows the same XML without using the XInclude statement:次に、同じ XML で、XInclude 文を使用しない場合を示します。
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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> |
検証
You can use NXML schemas in standard XML editors to validate UI elements. However, XML elements are not validated at runtime.
Findng out more
For more complete reference on all available syntax for XML UI, see the XML UI section of the reference documentation. For more information on modifications syntax see XInclude and XUpdate in the reference documentation.NXML スキーマを標準の XML エディタで使用して、UI 要素を検証できます。ただし、実行時に XML 要素は検証されません。
詳細について
XML UI で使用可能なすべてのシンタックスの完全リファレンスについては、リファレンスドキュメントの XML UI セクションを参照してください。変更シンタックスの詳細については、リファレンスドキュメントの XInclude および XUpdate を参照してください。