The model view controller (MVC) supplied with the Nexaweb platform allows data sources to be connected to the UI components in the Nexaweb client. This optional component is contained within the Nexaweb Foundation Class package. The MVC framework is based upon a controller instance configured with a View instance and a Model instance. The View and Model instances communicate with the controller through data provider events, such as Java bean events. The controllers react to each of these events and communicate the appropriate changes from either the View to the Model or vice-versa.
Model
...
Model (モデル)
com.nexaweb.nfc.mvc.model
...
View
...
View は、com.nexaweb.nfc.components
...
...
Controllers
...
コントローラ
com.nexaweb.nfc.mvc.controllers
...
Nexaweb provides the following controllers:
- ListBoxController - populates a listbox from a data provider and value provider
- TableController - populates a table from a data provider and list value provider
- TreeController - populates a tree from a nested data provider and a value provider
- TreeTableController - populates a treeTable from a nested data provider and a list value provider
- MenuController - populates a menu from a nested data provider and a value provider
In addition, controllers can be configured to bind one time (populate the component and forget it), one way (populate the component and reflect any data changes), or two way (allow data to flow from the model to the view and the view to the model).
Sample
This sample uses the NFC framework to implement a MVC based application that reads XML data from the server and loads into a table. See NFC for more information.
The data is stored in XML format
...
language | html/xml |
---|---|
linenumbers | true |
...
- ListBoxController - データ プロバイダと値プロバイダからリストボックスを作成します。
- TableController - データ プロバイダとリスト値プロバイダからテーブルを作成します。
- TreeController - ネストされたデータ プロバイダと値プロバイダからツリーを作成します。
- TreeTableController - ネストされたデータ プロバイダとリスト値プロバイダから treeTable を作成します。
- MenuController - ネストされたデータ プロバイダと値プロバイダからメニューを作成します。
サンプル
このサンプルでは、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 |
...
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> |
The java class file for the project.
...
language | java |
---|---|
linenumbers | true |
...
このプロジェクトの Java クラスファイルは次のとおりです。
Code Block |
---|
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.*; /** * Class to control a table using theNFC の model view controller クラスを使用して * classes in NFC. テーブルを制御するクラスです。 */ public class CustomerTableControl extends AbstractMco { /** * 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","first_name","last_name"}; try { // Retrieve the customers document 顧客ドキュメントを取得します。 Document customerDoc = ParserFactory.getParser().parseXml( new InputStreamReader( getSession().getNetService(). retrieve("customers.xml").getInputStream())); // Create a data provider to present the list of customers. // This is the model. データプロバイダを作成して顧客のリストを表示します。 // これはモデルです。 XmlListDataProvider customerDataProvider = new XmlListDataProvider( customerDoc, "/customers/customer"); // Create an indexed value provider to select each piece インデックス処理された値プロバイダを作成して、 // of information for each column 各列の情報の各部分を選択します。 XmlIndexedValueProvider customerValueProvider = new XmlIndexedValueProvider( 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.refresh(null); } catch (Exception e) { System.out.println("Exception controlling table"); e.printStackTrace(); } } } } } |