Nexaweb Platform に付属する MVC (Model View Controller) を使用すると、データ ソースを Nexaweb クライアントの UI コンポーネントに接続できます。このオプションのコンポーネントは NFC (Nexaweb Foundation Class) パッケージに含まれています。MVC フレームワークは、View インスタンスと Model インスタンスを使用して設定されるコントローラ インスタンスに基づいています。View インスタンスと Model インスタンスは、Java Bean イベントなどのデータ プロバイダ イベントを使用してコントローラと通信します。コントローラはこれらのイベントのそれぞれに反応し、View から Model に、または Model から View に適切な変更を伝達します。
Model (モデル)
com.nexaweb.nfc.mvc.model パッケージに標準装備されている model クラスには、Java Bean オブジェクトと XML ドキュメントを操作するために、基本的なデータプロバイダと値プロバイダが含まれています。データプロバイダは、ビューで使用される補助データを表示し、 コントローラに提供される必要があります。値プロバイダは、コンテキストに対応した追加情報に基づいて、特定のデータオブジェクトからビューコンポーネン トで使用される値を選択します。たとえば、リストに基づく値プロバイダを使用して、Bean データプロバイダから返された 1 つの Bean オブジェクトからさまざまなプロパティを選択し、Bean が対応している行にさまざまなセルを作成します。
View (ビュー)
View は、com.nexaweb.nfc.components パッケージに含まれている NFC (Nexaweb Foundation Class) コンポーネントによって表示されます。com.nexaweb.nfc.mvc.renderers パッケージ内にある付属のレンダラは、値プロバイダによって抽出された値に基づいて、コンポーネントの表示方法を変更する場合に役立ちます。 CellRenderer クラスなど、テキストベースのサブコンポーネントに使用されるデフォルトのレンダラは、このような値の文字列表現を使用してテキストを作成するだけです。 そのため、データを使用してコンポーネントを作成する場合に、最小限のコードを記述するだけで済みます。また、必要な場合には、カスタムのレンダラによっ て高い柔軟性が得られるため、色など、コンポーネントについてのより複雑な設定が可能になります。
コントローラ
com.nexaweb.nfc.mvc.controllers パッケージには、独創的なコントローラが含まれています。コントローラは、モデルインターフェイスの各タイプに応じたインスタンスを使用して設定する必要 があります。たとえば、TableController は、IDataProvider、IValueProvider、および作成するテーブルを使用して設定します。
Nexaweb には、次のコントローラが用意されています。
- ListBoxController - データ プロバイダと値プロバイダからリストボックスを作成します。
- TableController - データ プロバイダとリスト値プロバイダからテーブルを作成します。
- TreeController - ネストされたデータ プロバイダと値プロバイダからツリーを作成します。
- TreeTableController - ネストされたデータ プロバイダとリスト値プロバイダから treeTable を作成します。
- MenuController - ネストされたデータ プロバイダと値プロバイダからメニューを作成します。
また、コントローラのバインディングは、1 回 (コンポーネントを作成してそれ以降は無視)、単方向 (コンポーネントを作成して、すべてのデータ変更を反映する)、または双方向 (モデルからビュー、またはビューからモデルへのデータ送信が可能) に設定できます。
サンプル
このサンプルでは、XML データをサーバーから読み取って、テーブルにロードする MVC ベースのアプリケーションを実装する NFC フレームワークが使用されます。詳細については、「NFC」を参照してください。
データは XML 形式で保存されます。
<customers> <customer> <first_name>Robert</first_name> <last_name>Buffone</last_name> <customer_id>1</customer_id> </customer> <customer> <first_name>John</first_name> <last_name>Constantine</last_name> <customer_id>37</customer_id> </customer> <customer> <first_name>Dave</first_name> <last_name>Gennaco</last_name> <customer_id>47</customer_id> </customer> </customers>
このプロジェクトの UI XML は次のとおりです。
<nxml> <mco:declarations xmlns:mco="http://nexaweb.com/mco"> <mco:mco id="customerTableController" src="CustomerTableControl"/> </mco:declarations> <rootPane> <borderLayout/> <panel borderPosition="center"> <borderLayout/> <table height="105" width="200" x="90" y="200" borderPosition="center" onCreate="mco://customerTableController.handleTable(this)"> <column> <header text="Customer ID"/> </column> <column> <header text="First Name"/> </column> <column> <header text="Last Name"/> </column> </table> </panel> </rootPane> </nxml>
このプロジェクトの Java クラスファイルは次のとおりです。
import java.io.InputStreamReader; import com.nexaweb.client.mco.AbstractMco; import com.nexaweb.nfc.components.*; import com.nexaweb.nfc.mvc.controllers.*; import com.nexaweb.nfc.mvc.model.*; import com.nexaweb.xml.*; /** * NFC の model view controller クラスを使用して * テーブルを制御するクラスです。 */ public class CustomerTableControl extends AbstractMco { /** * このクラスを使用して、データをロードし、 * MVC を使ってテーブル要素を制御します。 * * @param tableElement テーブル要素。 */ public void handleTable(Element tableElement) { // このセッションで NFC によって使用されるアプリケーションコンテキストの取得 Application app = Application.getApplication(getSession()); // 制御するテーブルの取得 (ビュー) Table customerTable = (Table) app.getComponent(tableElement); // これは、インデックス処理された値プロバイダを使用して、 // 各顧客レコード (列順) から値が抽出される順番になります。 String [] valueSelectionList = {"customer_id","first_name","last_name"}; try { // 顧客ドキュメントを取得します。 Document customerDoc = ParserFactory.getParser().parseXml( new InputStreamReader( getSession().getNetService().retrieve("customers.xml").getInputStream())); // データプロバイダを作成して顧客のリストを表示します。 // これはモデルです。 XmlListDataProvider customerDataProvider = new XmlListDataProvider( customerDoc, "/customers/customer"); // インデックス処理された値プロバイダを作成して、 // 各列の情報の各部分を選択します。 XmlIndexedValueProvider customerValueProvider = new XmlIndexedValueProvider( valueSelectionList); // テーブルのコントローラをセットアップします。 TableController tableController = new TableController( customerDataProvider, customerValueProvider, customerTable); // 更新を行います。この操作により、 // モデル側からコントローラに通知することによって、 // データプロバイダから取得した値でテーブルが作成されます。 customerDataProvider.refresh(null); } catch (Exception e) { System.out.println("Exception controlling table"); e.printStackTrace(); } } }