Page Comparison

This document provides general instructions and an example for how you can populate a form in your Nexaweb application UI from a table or other component bound to an external database or web resource.

General Steps

1. Create a table or other component in your Nexaweb Application UI in which you want to display data from an external data source.

2. Get data from external data source.

• Create a serviceRequest to get the data from the external data source
• Set the target of the serviceRequest  to a documentDataSource to store the data in an XML formal

3. Create a documentDataSource to serve data to the form from the documentDataSource created to hold the data retrieved by the serviceRequest.

4. Create one way data bindings for the data in the documentDataSource that you want to use in the form. By creating one-way data bindings, you ensure that the data auto-refreshes when the event handler executes.

5. Create the UI form and connect the fields in the UI form to the data bindings.

6. Create an event - such as doubleclick, drag and drop, or onCommand - to handle populating the form from the data bound component. Create this event to reference the MCO created to manage a class with methods for handling the data.

7. Create a class with methods to handle the data event including:

• To get selected elements from the documentDataSource created to store data retrieved by the serviceRequest
• To parse selected rows from this documentDataSource
• Add document to documentDataSource that feeds data bindings to form fields

Example

The following example shows the XAL syntax for populating a form from a data bound table.

Table

...

• serviceRequest を作成し、外部データソースからデータを入手する
• serviceRequest のターゲットを、documentDataSource に設定し、XML formal にデータを保存する

3. documentDataSource を作成し、serviceRequest から取得されたデータを保有するために作成された documentDataSource から送られるフォームにデータを供給する。

4. form で使いたいdocumentDataSource でデータに one way データバインディングを作成する。One-way データバインディングを作成することにより、イベントハンドラの実行時、確実にデータのオートリフレッシュを行うようにする。

5. UI フォームを作成し、UI フォームのフィールドをdata binding に接続する。

6. イベントの作成 - ダブルクリック、 ドラッグ&ドロップ、 onCommand のようなもの　– data bound コンポーネントからの form を表示対応するため。このイベントを作成し、作成された MCO を参照しデータ対応のメソッドがついたクラスを管理する。

7. メソッドのあるクラスを作成し以下を含む data event に対応する

• 作成された documentDataSource から選択した要素を取得し、serviceRequest から取得したデータを保存する
• この documentDataSource から選択された行をパースする
• データバインディングを form フィールドにフィードする documentDataSource にドキュメントを追加する

例

次の例は data bound table から form を表示させる XAL シンタックスを示しています。

テーブル

この例ではコンポーネントがデータを表示するようテーブルを使用しています。テーブルにはイテレーターがあり employees データ XML フォーマットで表現するdocumentDataSource からのデータで行とコラムを表示します。employees データはどの物理的なデータソースからでも来る事ができます：JDBC 互換性のあるデータベース、REST または SOAP ウェブサービスまたは提供する独自ソースまたはカスタムソース

<table id="employees_table" onSelect="mco:handler.clickPopulateForm()"
   height="250px" width="650px">
   <column>
     <header text="ID"/>
   </column>
   <column>
     <header text="First Name"/>
   </column>
   <column>
     <header text="Last Name"/>
   </column>
   <column>
     <header text="Department"/>
   </column>
   <column>
     <header text="Phone"/>
   </column>
   <data:iterator dataSource="employees"
     name="rowIterator" select="//myResult/resultSet/row" type="ONE_WAY">
     <row draggable="true" >
       <data:iterator dataSource="rowIterator"
         name="cellIterator" select="*" type="ONE_WAY"> 
         <cell fieldName="{*('name(.)')}" text="{*('.')}"/> 
       </data:iterator>
     </row>
   </data:iterator>
</table>

Datasource and BindingsThis example includes a data-source from which the form obtains the data. It also includes bindings from which the data-source obtains data from the table's source. The XPath query is configured to work with XML data that will derive from the selected row in the table component.データソース とバインディング

この例は form がデータを取得する データソースを示しています。また、table の ソースからデータを取得するデータソースの バインディングも含んでいます。XPath クエリは、table コンポーネントの選択された行から取得された XML と連動するよう設定されています。

<data:documentDataSource x
  mlns:data="http://openxal.org/core/data" id="form"/>
 <data:binding xmlns:data="http://openxal.org/core/data" 
  id="emp_id" dataSource="form"
  select="/row/cell[@fieldName='emp_id']/@text" type="ONE_WAY"/>
 <data:binding xmlns:data="http://openxal.org/core/data" 
  id="emp_fname" dataSource="form"
  select="/row/cell[@fieldName='emp_fname']/@text" type="ONE_WAY"/>
 <data:binding xmlns:data="http://openxal.org/core/data" 
  id="emp_lname" dataSource="form"
  select="/row/cell[@fieldName='emp_lname']/@text" type="ONE_WAY"/>
 <data:binding xmlns:data="http://openxal.org/core/data" 
  id="dept_name" dataSource="form"
  select="/row/cell[@fieldName='dept_name']/@text" type="ONE_WAY"/>
 <data:binding xmlns:data="http://openxal.org/core/data" 
  id="phone" dataSource="form" 
  select="/row/cell[@fieldName='phone']/@text" type="ONE_WAY"/>

Form

The form includes fields to display data from the datasource, using the bindings created above. The bindings are ONE_WAY, so that they auto-refresh when handling the event (next section).この form は、上記で作成されたバインディングを使用し、データソースからデータを表示するフィールドを含んでいます。バインディングは ONE_WAY で、イベントハンドリングする場合、自動的にリフレッシュします。（次項)

 <textField disabled="true" id="tf_emp_id" text="{bind(binding:emp_id)}" 
  height="25px" width="120px" />
<textField id="tf_emp_fname" text="{ bind(binding:emp_fname) }" 
  height="25px" width="250px" />
<textField id="tf_emp_lname" text="{ bind(binding:emp_lname) }" 
  height="25px" width="250px" />
<textField id="tf_emp_phone" text="{ bind(binding:phone) }" 
  height="25px" width="250px" />

Handling Eventイベントのハンドリング

The following MCO method handles the user event and populates the form. The table onSelect event calls this method.  This method parses the XML from the selected row into a document 次の MCO メソッドでは、ユーザイベントをハンドルし、form を表示します。onSelect のtable イベントはこのメソッドを呼び出します。このメソッドは、選択行からドキュメント(com.nexaweb.xml.Document) and then adds it to the form datasource. Setting the source refreshes the bindings in the form fields and updates the data that the form fields display.に XMLform をパースし、formdatasource に追加します。Sourceを設定することにより、form フィールドでバインディングをリフレッシュし、form フィールドが表示するようデータを更新します。

 public void clickPopulateForm() {
//helper method for getting the current row from the UI table
  _selectedRow = getSelectedRow("employees_table");
  if (_selectedRow != null) {
       try {
       String xml =_selectedRow.toXmlWithoutAutoAssignedIds(true);
//parse the row into a document
       Document document = ParserFactory.getParser().parseXml(xml);
       DocumentDataSource dataSource = getDocumentDataSource("form");
//set this document to the "form" DocumentDataSource
       dataSource.setSource(document);
       } catch (ParserException ex) {
         ex.printStackTrace();
       } 
  } 
 } 

...