このフィーチャーは Platform 4.5.39 以降を要します。NFC は Platform4.5 では廃止され、xal 構文対応のため再導入されました。
Nexaweb Platform
...
に付属する MVC (Model View Controller)
...
を使用すると、データ ソースを Nexaweb クライアントの UI コンポーネントに接続できます。このオプションのコンポーネントは NFC (Nexaweb Foundation
...
...
インスタンスと Model インスタンスを使用して設定されるコントローラ インスタンスに基づいています。View インスタンスと Model インスタンスは、Java Bean
...
イベントなどのデータ プロバイダ イベントを使用してコントローラと通信します。コントローラはこれらのイベントのそれぞれに反応し、View から Model に、または Model
...
から View に適切な変更を伝達します。
Model (モデル)
com.nexaweb.nfc.mvc.model
...
com.nexaweb.nfc.mvc.model パッケージ内のモデルクラスには、Java Bean オブジェクトやXML ドキュメントと連係するための基本的なデータプロバイダと値プロバイダが含まれています。データプロバイダは、ビューの補助データを示すもので、コントローラにより提供される必要があります。値プロバイダは、コンテキスト固有の追加情報に基づいて、識別したデータオブジェクトからビューコンポーネントで使用される値を選択します。たとえば、リストベースの値プロバイダを使用して、Bean データプロバイダから返される1 つのBean オブジェクトからさまざまなプロパティを選択し、Bean が対応する行にさまざまなセルを作成します。
...
パッケージに標準装備されている 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 を作成します。入れ子になったデータプロバイダと値プロバイダからメニューを作成します。ネストされたデータ プロバイダとリスト値プロバイダから treeTable を作成します。
- MenuController - ネストされたデータ プロバイダと値プロバイダからメニューを作成します。
...
また、コントローラのバインディングは、1 回 (
...
コンポーネントを作成してそれ以降は無視)
...
、単方向 (
...
コンポーネントを作成して、すべてのデータ変更を反映する)
...
、または双方向 (
...
モデルからビュー、またはビューからモデルへのデータ送信が可能)
...
に設定できます。
サンプル
...
このサンプルでは、XML データをサーバーから読み取って、テーブルにロードする MVC ベースのアプリケーションを実装する NFC フレームワークが使用されます。詳細については、「NFC」を参照してください。
...
データは XML 形式で保存されます。
Code Block |
---|
...
...
<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 を次に示します。
...
language | html/xml |
---|---|
linenumbers | true |
...
このプロジェクトの UI XML は次のとおりです。
Code Block |
---|
<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> |
プロジェクトの MCO のJava ファイルは以下のようなものです(CustomerTableControl.java):
...
language | java |
---|---|
linenumbers | true |
...
このプロジェクトの Java クラスファイルは次のとおりです。
Code Block |
---|
import java.utilio.VectorInputStreamReader; import com.nexaweb.client.mco.AbstractMco; import com.nexaweb.nfc.components.*; import com.nexaweb.nfc.mvc.controllers.*; import com.nexaweb.nfc.components.Application; import com.nexaweb.nfc.mvc.model.*; import com.nexaweb.xml.*; /** * ClassNFC to control a table using the の model view controller クラスを使用して * classes in NFC. テーブルを制御するクラスです。 */ public class CustomerTableControl extends AbstractMco { private static Vector s_data = new Vector(); /** * Populate some sample beans to use with the data provider. */ static { s_data.add(new Customer(1, "Robert", "Buffone")); s_data.add(new Customer(37, "John", "Constantine")); s_data.add(new Customer(47, "Dave", "Gennaco")); } /** * Use this class to load the data and control the table * element using MVC. * このクラスを使用して、データをロードし、 * MVC を使ってテーブル要素を制御します。 * * @param tableElement The table element. テーブル要素。 */ public void handleTable(Element tableElement) { // Get the application context used by NFC for this session このセッションで NFC によって使用されるアプリケーションコンテキストの取得 Application app = Application.getApplication(getSession()); // Get the table to control (the view) 制御するテーブルの取得 (ビュー) Table customerTable = (Table) app.getComponent(tableElement); // This will be the order in which the values are extracted from each これは、インデックス処理された値プロバイダを使用して、 // customer各顧客レコード record (the column order) using the indexed value provider (列順) から値が抽出される順番になります。 String [] valueSelectionList = {"customer_id","firstNamefirst_name","lastNamelast_name"}; try { // Create顧客ドキュメントを取得します。 aDocument datacustomerDoc provider to present the list of customers. = ParserFactory.getParser().parseXml( new InputStreamReader( getSession().getNetService().retrieve("customers.xml").getInputStream())); // データプロバイダを作成して顧客のリストを表示します。 // Thisこれはモデルです。 is the model. BeanDataProvider XmlListDataProvider customerDataProvider = new BeanDataProviderXmlListDataProvider(); customerDataProvider.setData(s_data); customerDoc, "/customers/customer"); // Create an indexed value provider to select each piece of インデックス処理された値プロバイダを作成して、 // information // for each column BeanValueProvider 各列の情報の各部分を選択します。 XmlIndexedValueProvider customerValueProvider = new BeanValueProviderXmlIndexedValueProvider( valueSelectionList); // Set up the table controller テーブルのコントローラをセットアップします。 TableController tableController = new TableController( customerDataProvider, customerValueProvider, customerTable); // Fire the refresh, this will populate the table with values 更新を行います。この操作により、 // retrieved from the data providers by signalling the controller // from the model side モデル側からコントローラに通知することによって、 // データプロバイダから取得した値でテーブルが作成されます。 customerDataProvider.fireRefreshEventrefresh(null); } catch (Exception e) { System.out.println("Exception controlling table"); e.printStackTrace(); } } /** * Customer class, to simulate a bean or DTO for use in this example. * * @author dgennaco */ public static class Customer{ private int _id; private String _firstName; private String _lastName; public Customer(int id, String first, String last) { _id = id; _firstName = first; _lastName = last; } public void setId(int id) { _id = id; } public void setFirstName(String first) { _firstName = first; } public void setLastName(String last) { _lastName = last; } public int getId() { return _id; } public String getFirstName() { return _firstName; } public String getLastName() { return _lastName; } } } |