Page Comparison

This feature requires このフィーチャーは Platform 4.5.39 or later; NFC was been deprecated in Platform 4.5, and has been reintroduced to support the xal syntax.
The またはそれ以降を必要とします。NFC はPlatform 4.5ではサポートを廃止され、再導入されxal 構文に対応しました。

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

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

public void addNewWindow(Element rootPane, NxSession sessionnewWindow() {
    Document uiDoc = sessiongetSession().getDocumentProvider().getUIDocument();

    Element newWindow = uiDoc.createElement("window", "http://openxal.org/ui/java");
    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(RootPane rootPane, NxSession session) {
    Application app = Application.getApplication(getSession());

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

    RootPane rootPane = app.getRoot().getRootPane();
    if (rootPane == null) {
        rootPane = new RootPane();
        newWindowapp.setBorderStylegetRoot(BorderStyleType).INSETaddRootPane(rootPane);
    }

    rootPane.addWindowaddChild(newWindow);
}  

 Components

コンポーネント

The NFC represents UI widgets as components. The では UI ウィジェットをコンポーネントとして表します。com.nexaweb.xfcnfc.components package contains components representing every standard UI element. In addition, there is a special component, com.nexaweb.nfc.TextComponent,which represents any textual data in the Nexaweb UI DOM.
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.xfc.types package.
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.xfc.listenerspackage defines Listener interfaces.
Content

...

パッケージには、各標準 UI 要素を表すコンポーネントが含まれます。また、Nexaweb UI DOM のテキスト形式のデータを表す特殊なコンポーネント TextComponent も含まれます。

プロパティ

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

リスナ

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

コンテンツ

EventsイベントThe NFC performs event handling through listeners. To handle an event, implement the appropriate listener. The

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

...

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