フォームへの追加
- Xiaoyan Kong (Unlicensed)
手順
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();
}
}
}