フォームへの追加

このドキュメントでは、外部データベースやウェブリソースに出力するテーブルや他のコンポーネントやテーブルから Nexaweb アプリケーションUI でのフォーム表示方法の説明や例を示しています。

手順

1. 外部データソースからデータを表示させたい Nexaweb アプリケーション UI にテーブルまたはその他コンポーネントを作成する。

2. 外部データソースを入手する。

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>

データソースとバインディング

この例は 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

この 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" />

イベントのハンドリング

次の MCO メソッドでは、ユーザイベントをハンドルし、form を表示します。onSelect のtable イベントはこのメソッドを呼び出します。このメソッドは、選択行からドキュメント(com.nexaweb.xml.Document) に 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();
       } 
  } 
 }