Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

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

...

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

...

View

...

パッケージに標準装備されている model クラスには、Java Bean オブジェクトと XML ドキュメントを操作するために、基本的なデータプロバイダと値プロバイダが含まれています。データプロバイダは、ビューで使用される補助データを表示し、 コントローラに提供される必要があります。値プロバイダは、コンテキストに対応した追加情報に基づいて、特定のデータオブジェクトからビューコンポーネン トで使用される値を選択します。たとえば、リストに基づく値プロバイダを使用して、Bean データプロバイダから返された 1 つの Bean オブジェクトからさまざまなプロパティを選択し、Bean が対応している行にさまざまなセルを作成します。
View (ビュー)

View は、com.nexaweb.nfc.components

...

パッケージに含まれている NFC (Nexaweb Foundation Class) コンポーネントによって表示されます。com.nexaweb.nfc.mvc.renderers

...

Controllers

...

パッケージ内にある付属のレンダラは、値プロバイダによって抽出された値に基づいて、コンポーネントの表示方法を変更する場合に役立ちます。 CellRenderer クラスなど、テキストベースのサブコンポーネントに使用されるデフォルトのレンダラは、このような値の文字列表現を使用してテキストを作成するだけです。 そのため、データを使用してコンポーネントを作成する場合に、最小限のコードを記述するだけで済みます。また、必要な場合には、カスタムのレンダラによっ て高い柔軟性が得られるため、色など、コンポーネントについてのより複雑な設定が可能になります。

コントローラ

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.

Image Removed

The data is stored in XML format

...

languagehtml/xml
linenumberstrue

...

パッケージには、独創的なコントローラが含まれています。コントローラは、モデルインターフェイスの各タイプに応じたインスタンスを使用して設定する必要 があります。たとえば、TableController は、IDataProvider、IValueProvider、および作成するテーブルを使用して設定します。
Nexaweb には、次のコントローラが用意されています。
  • ListBoxController - データ プロバイダと値プロバイダからリストボックスを作成します。
  • TableController - データ プロバイダとリスト値プロバイダからテーブルを作成します。
  • TreeController - ネストされたデータ プロバイダと値プロバイダからツリーを作成します。
  • TreeTableController - ネストされたデータ プロバイダとリスト値プロバイダから 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

...

languagehtml/xml
linenumberstrue

...

は次のとおりです。
 

 

 
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.

...

languagejava
linenumberstrue

...

 

 


このプロジェクトの 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();
}
}
}

}
}