Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

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

NFC (Nexaweb Foundation Class)

...

ライブラリはクラスの集合体で、型保証された便利なインターフェイスを使用して UI

...

の開発を円滑に進めます。Nexaweb のユーザーエクスペリエンスは、 従来の DOM (Document Object Model)

...

API を使用した UI DOM の直接操作によって向上しました。次のメソッドの例で示すように、NFC を使用すると、シンプルな UI タスクのコーディングを少し簡潔にする高度な抽象化が可能になります。また、NFC のパッケージには、標準の NFC のほか、NFC をビューとして使用する MVC (Model View Controller

...

) の実装も含まれています。

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

 

Code Block
languagejava
linenumberstrue
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 コード)

Code Block
languagejava
linenumberstrue
 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 データ型 (intfloatString

...

など) である可能性があります。また、定義済みの列挙型定義を持つ属性には特別な列挙プロパティがあり、これらの列挙プロパティはcom.nexaweb.nfc.types

...

パッケージにあります。

リスナ

...

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

...

パッケージはリスナインターフェイスを定義します。

コンテンツ

 

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


イベント

NFC

...

は、リスナを通じてイベント処理を実行します。イベントを処理するには、適切なリスナを実装します。com.nexaweb.nfc.events

...

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

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

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

...

パッケージはイベントを定義します。各イベントタイプには、ソースコンポーネントやイベントに特有の追加情報など、クライアントがレポートするあらゆる情報が含まれています。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

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

...