NFC/XFC

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

NFC (Nexaweb Foundation Class) ライブラリは、便利なタイプセーフのインターフェイスを介して UI 開発を容易にするクラスの集合です。伝統的に、Nexaweb ユーザーエクスペリエンスの開発は、従来の DOM API を使用した UI DOM (Document Object Model) を直接操作して実現されています。下記のサンプルメソッドでわかるように、NFC を使用して一定のレベルの抽象化を行うことにより、コーディングを簡単な UI タスクにし、若干短く、きれいにすることができます。標準の NFC に加えて、NFC パッケージには Model View Controller も実装され、NFC をビューとして使用できます。

サンプル 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 要素に対して定義された属性に対応しています。プロパティはコンポーネント定義内の標準の取得メソッドおよび設定メソッドから使用できます。プロパティには、int、float、String など、標準の Java の型を使用できます。また、定義済みの列挙型定義を持つ属性には特別な列挙型プロパティがあり、これらの列挙は com.nexaweb.nfc.types パッケージ内に含まれています。

リスナ

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

コンテンツ

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

イベント

NFC ではリスナを通じてイベント処理が実行されます。イベントを処理するには、適切なリスナを実装します。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 に登録されます。

index.xal

<xal xlmns="http://openxal.org/ui/java">
<declarations xmlns="http://openxal.org/core/mco">
    <mco id="BackgroundColorChanger" src="BackgroundSwitch"/>
</declarations>
<freePane id="topLevelPane">
    <button fontColor="red" width="100" height="25" text="Red Background" onCreate="mco://BackgroundColorChanger.clientCreationHandler(this, topLevelPane)"/>
    <button fontColor="blue" width="100" height="25" text="Blue Background" onCreate="mco://BackgroundColorChanger.clientCreationHandler(this)"/>
</freePane>
</xal>

BackgroundSwitch.java

import com.nexaweb.client.mco.AbstractMco;
import com.nexaweb.nfc.components.Application;
import com.nexaweb.xfc.components.Button;
import com.nexaweb.nfc.components.Root;
import com.nexaweb.xfc.events.CommandEvent;
import com.nexaweb.xfc.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 { 
    private FreePane _freePane = null;

    /** 
     * 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, Element topPane) { 
        Application app = Application.getApplication(getSession()); 
        Button b = (Button) app.getComponent(element);        if (_freePane == null) _freePane = (FreePane) app.getComponent(topPane); 
        b.addCommandListener(this); 
    } 
    /* (non-Javadoc) 
     * @see com.nexaweb.xfc.listeners.ICommandListener#processEvent(com.nexaweb.xfc.events.CommandEvent) 
     */ 
    public void processEvent(CommandEvent event) { 
        // Set the parent pane's color based on the button's font color. 
        Button b = (Button) event.getSource(); 
        _freePane.setBackgroundColor(BackgroundColorType.findType(b.getColor().toString()) ); 
    }
}