Page Comparison

このフィーチャーは Platform 4.5.39 またはそれ以降を必要とします。NFC はPlatform 4.5ではサポートを廃止され、再導入されxal 構文に対応しました。

NFC (The Nexaweb Foundation Class ) ライブラリは、便利なタイプセーフのインターフェイスを介して UI 開発を容易にするクラスの集合です。伝統的に、Nexaweb ユーザー エクスペリエンスの開発は、従来の DOM API を使用した UI DOM (Document Object Model) を直接操作して実現されています。下記のサンプル メソッドでわかるように、NFC を使用して一定のレベルの抽象化を行うことにより、コーディングを簡単な UI タスクにし、若干短く、きれいにすることができます。標準の NFC に加えて、NFC パッケージには Model View Controller も実装され、NFC をビューとして使用できます。サンプル 1 (従来の DOM コード(NFC) library is a collection of classes that facilitate UI development via a convenient, type-safe interface. Historically, development for the Nexaweb user experience has been accomplished through direct manipulation of the UI document object model (DOM) using the traditional DOM API. As you can see in the sample methods below, using NFC allows a level of abstraction which makes coding simple UI tasks a bit shorter and cleaner.  In addition to standard NFC, the NFC package also includes an Model View Controller implementation which utilizies NFC as the view.

Sample 1 (Traditional DOM code)

public void newWindow() {
    Document uiDoc = getSession().getDocumentProvider().getUIDocument();

    Element newWindow = uiDoc.createElement("window");
    newWindow.setAttribute("backgroundColor", "blue");
    newWindow.setAttribute("borderWidth", "2");
    newWindow.setAttribute("borderStyle", "inset");

    Element rootElement = uiDoc.getRootElement();
    Vector kids = rootElement.getChildren();
    Element rootPane = null;
    for (int i = 0; i < kids.length(); i++) {
        if (kids.elementAt(i) instanceof Element) {
            (Element) curElement = (Element) kids.elementAt(i);
            if (curElement.getLocalName().equals("rootPane") {
                rootPane = curElement;
            }
        }
    }
    if (rootPane == null) {
        rootPane = uiDoc.createElement("rootPane");
        rootElement.appendChild(rootPane);
    }

    rootPane.appendChild(newWindow);
}  

サンプルSample 2 (NFC コードcode)

 public void newWindow() {
    Application app = Application.getApplication(getSession());

    Window newWindow = new Window();
    newWindow.setBackgroundColor("blue");
    newWindow.setBorderWidth(2);
    newWindow.setBorderStyle(BorderStyle.INSET);

    RootPane rootPane = app.getRoot().getRootPane();
    if (rootPane == null) {
        rootPane = new RootPane();
        app.getRoot().addRootPane(rootPane);
    }

    rootPane.addChild(newWindow);
}  

コンポーネントComponents

The NFC では UI ウィジェットをコンポーネントとして表します。represents UI widgets as components. The com.nexaweb.nfc.componentsパッケージには、各標準 UI 要素を表すコンポーネントが含まれます。また、 package contains components representing every standard UI element. In addition, it contains a special component, TextComponent, which represents any textual data in the Nexaweb UI DOMのテキスト形式のデータを表す特殊なコンポーネント TextComponent も含まれます。.

プロパティ

コンポーネントに対して定義されたプロパティは、Nexaweb UI 要素に対して定義された属性に対応しています。プロパティはコンポーネント定義内の標準の取得メソッドおよび設定メソッドから使用できます。プロパティには、int、float、String など、標準の Java の型を使用できます。また、定義済みの列挙型定義を持つ属性には特別な列挙型プロパティがあり、これらの列挙はProperties

The properties defined for components correspond to the attributes defined for Nexaweb UI elements. Properties are available through standard get and set methods in the component definition. A property may be any standard Java type such as int, float, and String. In addition, there are special enumerative properties for attributes with well defined enumerative definitions, and these enumerations are located in the com.nexaweb.nfc.types パッケージ内に含まれています。package.

リスナ

リスナは、リスナの追加および削除メソッドを使用して登録および登録解除することを除いて、プロパティに似ています。リスナを使用すると、UI イベントが発生した場合に実行するロジックを実装することができます。たとえば onCommand のように、属性にプレフィックス on を付けて、任意の UI イベント属性についてリスナを定義します。リスナを登録するには、適切なリスナ インターフェイスを実装し、コンポーネントの適切なリスナ追加メソッドを呼び出してリスナを指定します。Listeners

Listeners are similar to properties except you register and deregistered them using add and remove listener methods. You may use listeners to implement logic to fire when a UI event fires. You define listeners for any UI event attributes, that is, attributes prefixed by on, for example, onCommand. To register a listener, implement the appropriate listener interface and call the appropriate add Listener method on the component, supplying your listener. The com.nexaweb.nfc.listeners パッケージでリスナのインターフェイスが定義されます。

コンテンツ

...

package defines Llstener interfaces.

Content

イベントEvents

NFC ではリスナを通じてイベント処理が実行されます。イベントを処理するには、適切なリスナを実装します。The NFC performs event handling through listeners. To handle an event, implement the appropriate listener. The com.nexaweb.nfc.events パッケージでイベントが定義されます。イベントのタイプごとに、ソース コンポーネントおよびイベント固有の追加情報など、クライアントが報告する情報がすべて含まれます。NFC では、UI イベントごとに複数のリスナを登録できます。 

メモ: NFC では XAL シンタックスで提供されるイベント属性を使用してイベント ハンドラが登録されるため、イベント属性が XML で事前に宣言されていた場合、イベントの登録により既存のイベント属性は上書きされます。

アプリケーションで NFC を有効にする方法

従来のクライアント駆動型アプリケーションの場合、クライアントサイドで NFC ライブラリの使用を指示する必要があります。この処理は、次のいずれかの方法で実行します。

• Nexaweb Studio でアプリケーションを設計する際に、[Incorporate Nexaweb Foundation Classes] というラベルのチェックボックスをオンにします。
• nexaweb-client.xml ファイルを編集して、nfc 要素を「true」に設定します。

Nexaweb を使用してサーバーサイドの UI DOM 状態を保守することは、ベスト プラクティスとはみなされません。ただし、NFC ライブラリは場所に関しては可能な限り寛容であるように構築されています。必要な場合には、Nexaweb を使用してサーバーサイドから UI を駆動することができます。

例: NFC MCO を使用した簡単な Nexaweb アプリケーション

次のファイルでは、簡単な Nexaweb アプリケーションの例を表します。このアプリケーションにはボタンが 2 つ含まれており、押されるとルート ペインの色がそのボタンのフォントの色に変わります。index.xal ファイルには Nexaweb Studio Visual Editor で作成された UI 定義が含まれます。この例に含まれる BackGroundSwitch.java クラスは、NFC の ICommandListener インターフェイスを実装して押されたボタンを処理するように作成されています。ボタンの onCreate イベントにより各ボタンが MCO に登録されます。

 events package defines events. Each event type contains all the information that the client reports including the source component and any additional information specific to the event. The NFC allows multiple listeners to be registered for each UI event.

Note: Since NFC registers its event handlers using the event attributes supplied in the NXML syntax, event registration will overwrite any existing event attribute if one has been declared ahead of time in XML.

How to enable NFC in your application 

For a traditional client-driven application, you must indicate the use of NFC libraries on the client side. You do this either by:

• Checking the checkbox labeled Incorporate Nexaweb Foundation Classes whendesigning the application in Nexaweb Studio
• Editing the nexaweb-client.xml file to set the nfc element to true

It is not considered a best practice to maintain UI DOM state on the server side using Nexaweb. However, the NFC library has been built as agnostically as possible with regard to location. You can use it to drive the UI from the server side if this is required.

Example - A simple Nexaweb application with an NFC MCO

The following example files represent a simple Nexaweb application. This application contains two buttons that, when pressed, change the color of the root pane to the font color of that button. The index.nxml file contains the UI definition created with the Nexaweb Studio visual editor.  This example includes the BackGroundSwitch.java class that was created to implement the ICommandListener interface from NFC to process pressed buttons. The buttons' onCreate events register each button with the MCO.

index.xml

<nxml>
<declarations xmlns="http://nexaweb.com/mco">
    <mco id="BackgroundColorChanger" src="BackgroundSwitch"/>
</declarations>

<rootPane>
    <button fontColor="red" width="100" height="25" text="Red Background" 
    onCreate="mco://BackgroundColorChanger.clientCreationHandler(this)"/>
    <button fontColor="blue" width="100" height="25" text="Blue Background" 
    onCreate="mco://BackgroundColorChanger.clientCreationHandler(this)"/>
</rootPane>
</nxml>

...