NFC

NFC (Nexaweb Foundation Class) ライブラリはクラスの集合体で、型保証された便利なインターフェイスを使用して UI の開発を円滑に進めます。Nexaweb のユーザーエクスペリエンスは、従来の DOM (Document Object Model) API を使用した UI DOM の直接操作によって向上しました。次のメソッドの例で示すように、NFC を使用すると、シンプルな UI タスクのコーディングを少し簡潔にする高度な抽象化が可能になります。また、NFC のパッケージには、標準の NFC のほか、NFC をビューとして使用する MVC (Model View Controller) の実装も含まれています。

サンプル 1 (従来の DOM コード)

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);
}

サンプル 2 (NFC コード)

 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);
}

コンポーネント

NFC は、UI ウィジェットをコンポーネントとして表します。com.nexaweb.nfc.componentsパッケージには、標準の UI 要素をすべて表すコンポーネントが含まれています。また、Nexaweb の UI DOM でテキストデータを表す、特殊なコンポーネントの TextComponent も含まれています。

プロパティ

コンポーネントに定義されるプロパティは、Nexaweb の UI 要素に定義される属性と対応しています。プロパティは、コンポーネント定義の標準 get および set メソッドによって使用可能です。プロパティは標準の Java データ型 (int、float、String など) である可能性があります。また、定義済みの列挙型定義を持つ属性には特別な列挙プロパティがあり、これらの列挙プロパティは com.nexaweb.nfc.types パッケージにあります。

リスナ

リスナはプロパティに似ていますが、add および remove リスナメソッドを使用して登録および登録解除する点が異なります。リスナを使用して、UI イベントの発生時に発生させるロジックを実装できます。UI イベント属性、つまり接頭辞 on の付いた属性 (例: onCommand) にはリスナを定義します。リスナを登録するには、適切なリスナインターフェイスを実装して、コンポーネントでリスナを提供する add リスナメソッドを呼び出します。com.nexaweb.nfc.listenersパッケージはリスナインターフェイスを定義します。

コンテンツ

コンポーネント	NFC で提供されるメソッド
サブコンポーネントを含めることができるコンポーネント (ウィンドウなど)	子コンテンツを追加および削除するためのメソッド
ほとんどのコンポーネントタイプを子コンポーネントとして含めることができるコンポーネント	汎用メソッド: addChild(Component) removeChild(Component)
専用のコンポーネント (ListBox など)	コンテンツを処理するための特定のメソッド ListBox の場合: addListItem(ListItem) removeListItem(ListItem)

イベント

NFC は、リスナを通じてイベント処理を実行します。イベントを処理するには、適切なリスナを実装します。com.nexaweb.nfc.eventsパッケージはイベントを定義します。各イベントタイプには、ソースコンポーネントやイベントに特有の追加情報など、クライアントがレポートするあらゆる情報が含まれています。NFC を使用すると、複数のリスナを各 UI イベントに登録できます。

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

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

従来のクライアント方式のアプリケーションでは、クライアントサイドで NFC ライブラリの使用を指定する必要があります。これを行うには、次の方法を使用します。

Nexaweb Studio でアプリケーションをデザインする場合は、[Incorporate Nexaweb Foundation Classes] というラベルのチェックボックスを選択する
nexaweb-client.xml ファイルを編集して nfc 要素を true に設定する

Nexaweb を使用してサーバーサイドで UI DOM の状態を維持するのは、最良の方法とは言えません。ただし、NFC ライブラリは、サーバーサイドまたはクライアントサイドのどちらでも使用できるように構築されています。必要な場合には、NFC ライブラリを使用してサーバーサイドから UI を駆動できます。

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

次のファイルの例は、シンプルな Nexaweb アプリケーションを表しています。このアプリケーションには、2 つのボタンが含まれており、ボタンを押すと、ルートペインの色がこのボタンのフォントカラーに変化します。index.nxml ファイルには、Nexaweb Studio ビジュアルエディタで作成された UI 定義が含まれています。この例には、押されたボタンを処理する ICommandListener インターフェイスを NFC から実装するために作成された BackGroundSwitch.java クラスが含まれています。このボタンの onCreate イベントは各ボタンを 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>

BackgroundSwitch.java

import com.nexaweb.client.mco.AbstractMco;
import com.nexaweb.nfc.components.Application;
import com.nexaweb.nfc.components.Button;
import com.nexaweb.nfc.components.Root;
import com.nexaweb.nfc.events.CommandEvent;
import com.nexaweb.nfc.listeners.ICommandListener;
import com.nexaweb.xml.Element;
/*
 * Created on Oct 17, 2005
 */

/**
 * A simple object for the client side to allow a button to register itself
 * and when pressed, change the background of the root pane.
 */
public class BackgroundSwitch extends AbstractMco 
       implements ICommandListener { 

    /** 
     * Allows us to register a button when it is created in the UI on the 
     * client using the onCreate event. 
     * 
     * @param element The element representing the button. 
     */ 
    public void clientCreationHandler(Element element) { 
        Application app = Application.getApplication(getSession()); 
        Button b = (Button) app.getComponent(element); 
        b.addCommandListener(this); 
    } 

    /* (non-Javadoc) 
     * @see com.nexaweb.nfc.listeners.ICommandListener#processEvent(
     *  com.nexaweb.nfc.events.CommandEvent) 
     */ 
    public void processEvent(CommandEvent event) { 
        // Set the root pane's color based on the button's font color. 
        Button b = (Button) event.getSource(); 
        Application app = Application.getApplication(getSession()); 
        ( (Root)app.getRoot() ).getRootPane().setBgColor(b.getFontColor() ); 
    }

}