Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

The shipped model classes, located in the このフィーチャーは Platform 4.5.39 以降を要します。NFC は Platform4.5 では廃止され、xal 構文対応のため再導入されました。

Nexaweb Platform に付属するMVC (Model View Controller) を使用すると、データソースを Nexaweb クライアントのUI コンポーネントに接続できます。このオプションのコンポーネントは、Nexaweb Foundation Class パッケージに含まれています。MVC フレームワークは、View インスタンスとModel インスタンスで構成されるコントローラインスタンスに基づいています。View インスタンスと Model インスタンスは、Java Bean イベントなどのデータプロバイダイベントを使用してコントローラと通信します。コントローラは、これらのイベントのそれぞれに反応し、View から Model に、またはModel からView に適切な変更を伝達します。

Model (モデル)

com.nexaweb.nfc.mvc.model パッケージ内のモデルクラスには、Java Bean オブジェクトやXML ドキュメントと連係するための基本的なデータプロバイダと値プロバイダが含まれています。データプロバイダは、ビューの補助データを示すもので、コントローラにより提供される必要があります。値プロバイダは、コンテキスト固有の追加情報に基づいて、識別したデータオブジェクトからビューコンポーネントで使用される値を選択します。たとえば、リストベースの値プロバイダを使用して、Bean データプロバイダから返される1 つのBean オブジェクトからさまざまなプロパティを選択し、Bean が対応する行にさまざまなセルを作成します。

com.nexaweb.nfc.mvc.model package, contain basic data and value providers for interfacing with Java bean objects and Xml documents. A data provider indicates the backing data for the view and needs to be supplied to the controller.  A value provider selects values from identified data objects for use in view components based on additional context-specific information. For example, use a list based value provider to select different properties from a single bean object returned by a bean data provider to populate the various cells in the row to which the bean corresponds.

View

The view is represented by Nexaweb Foundation Class (NFC) components, located in the comパッケージ内のモデルクラスには、Java Bean オブジェクトやXML ドキュメントと連係するための基本的なデータプロバイダと値プロバイダが含まれています。データプロバイダは、ビューの補助データを示すもので、コントローラにより提供される必要があります。値プロバイダは、コンテキスト固有の追加情報に基づいて、識別したデータオブジェクトからビューコンポーネントで使用される値を選択します。たとえば、リストベースの値プロバイダを使用して、Bean データプロバイダから返される1 つのBean オブジェクトからさまざまなプロパティを選択し、Bean が対応する行にさまざまなセルを作成します。

com.nexaweb.nfc.mvc.model パッケージ内のモデルクラスには、Java Bean オブジェクトやXML ドキュメントと連係するための基本的なデータプロバイダと値プロバイダが含まれています。データプロバイダは、ビューの補助データを示すもので、コントローラにより提供される必要があります。値プロバイダは、コンテキスト固有の追加情報に基づいて、識別したデータオブジェクトからビューコンポーネントで使用される値を選択します。たとえば、リストベースの値プロバイダを使用して、Bean データプロバイダから返される1 つのBean オブジェクトからさまざまなプロパティを選択し、Bean が対応する行にさまざまなセルを作成します。

View (ビュー)

ビューは、com.nexaweb.nfc.components package. The supplied renderers, located in the com.パッケージに含まれているNFC (Nexaweb Foundation Class) コンポーネントによって表示されます。com.nexaweb.nfc.mvc.renderers package, facilitate modifying the way components are presented based on the values extracted using value providers. The default renderers for text based sub-components, such as the CellRenderer class, simply populate the text with the String representation of these values. This allows a minimum of code to be written to populate a component with data, while allowing the flexibility to make more complex decisions (color, etc) of components when the need arises by supplying custom renderers.

Controllers

The out-of-box controllers are located in the comパッケージに含まれている付属のレンダラは、値プロバイダを使用して抽出される値に基づくコンポーネントの表示方法の変更を容易にします。CellRenderer クラスなど、テキストベースなサブコンポーネントのデフォルトレンダラは、単に、これらの値のString 表現をテキストに入力します。これにより、コンポーネントにデータを入力するためのコード記述量を最小限にすることができます。必要になれば、カスタムレンダラを使用することで、コンポーネントについてのより複雑な決定(色など) を柔軟に行うことができます。

コントローラ

標準のコントローラは、com.nexaweb.nfc.mvc.controllers package. You must configure a controller with an instance of each type of model interface. For example, the TableController must be configured with an IDataProvider, an IValueProvider, and the table to populate.

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パッケージに含まれています。コントローラは、モデルインターフェイスの各タイプのインスタンスで構成する必要があります。たとえば、TableController は、IDataProvider、IValueProvider、および作成するテーブルで構成する必要があります。

Nexaweb には、次のコントローラが用意されています。

  • ListBoxController - データプロバイダと値プロバイダからリストボックスを作成します。
  • TableController - データプロバイダとリスト値プロバイダからテーブルを作成します。
  • TreeController - 入れ子になったデータプロバイダと値プロバイダからツリーを作成します。
  • TreeTableController - 入れ子になったデータプロバイダとリスト値プロバイダからtreeTable を作成します。入れ子になったデータプロバイダと値プロバイダからメニューを作成します。
  • MenuController -

また、コントローラは、ワンタイム(コンポーネントを作成して、それ以降の変更はなし)、ワンウェイ(コンポーネントを作成して、すべてのデータ変更を反映)、またはツーウェイ(モデルからビュー、およびビューからモデルへのデータの送信が可能) でバインドするように構成できます。

サンプル

このサンプルでは、NFC フレームワークを使用して、XML データをサーバーから読み取りテーブルにロードするMVC ベースのアプリケーションを実装します。詳細については「NFC」を参照してください。

Image Added

データは、XML フォーマットで保存されます。

 

Code Block
languagehtml/xml
linenumberstrue
<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>


The UI XML for this project:このプロジェクトのUI XML を次に示します。

Code Block
languagehtml/xml
linenumberstrue
 <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.プロジェクトの MCO のJava ファイルは以下のようなものです(CustomerTableControl.java):

Code Block
languagejava
linenumberstrue
 import    import java.ioutil.InputStreamReaderVector;

	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.*;

	/**
	 * Class 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.
	  *
	  * @param tableElement The table element.
	  */
	 public void handleTable(Element tableElement) {
	 
	   // Get the application context used by NFC for this session
	  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
	  // from each customer record (the column order) using the indexed 
  // value provider
	  String [] valueSelectionList = 
         {"customer_id","first_namefirstName","last_namelastName"};
  
	  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 BeanDataProvider customerDataProvider = new BeanDataProvider();
	         new XmlListDataProvider(customerDoc, "/customers/customer"customerDataProvider.setData(s_data);
	       // Create an indexed value provider to select each piece of
	    // information
	    // of information for each column
	    XmlIndexedValueProviderBeanValueProvider customerValueProvider = new BeanValueProvider(
   	      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.refreshfireRefreshEvent(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;
	        }
	    }
	}