「私はとてもファンシー!」
「ファンシー」は、Iggy Azaleaの大ヒットであるばかりでなく、L.A.のお客様にも東京のお客様にも大ヒットです!それでは、Nuxeoの「Fancybox」の話に入ります。Fancyboxは、ポップアップウィンドウに似たモーダルパネルです。この具体的な使用例では、テキスト/指示を収集するためのファンシーボックスを使用しています。お客様は、新しいグラフィックデザインを作成するときに必要な指示を収集するモーダルパネルを使用したいと考えました。ファンシーボックスを使用すると、ユーザアクション(この場合は、現在のページを離れずにユーザに追加のコンテンツを表示するボタン)を実行でき、一般的にはより充実したルックアンドフィールを提供します。

New Instructions

Fancyboxを使用するには、Nuxeo Labsバンドルをダウンロードしインストールする必要があります。ダウンロードしインストールしたら、すぐに実装を開始できます。このブログの目的上、「新しい指示」の例を使用します。

##ステップ1:
"Fancybox-NewInstructions"というNuxeo Studioの新しいXML Extensionを追加します。
レイアウトとチェーンプロパティに細心の注意を払います。

XML Extension

ステップ2:

"InstructionFB" という新しいスキーマを作成し、"instructions" という新しいフィールドを追加します。これは、指示を格納するためにFancyboxによって使用されます。また、オートメーションチェーンにはこれが必要となります。
Document Schema

ステップ3:

"fancybox_Instructions"という新しいFormレイアウトを作成し、スキーマの指示フィールドにテキストエリアをバインドします。

FancyBox Instructions

ステップ4:

"createInstruction_Fancybox"という新しいオートメーションチェーンを作成します。この例では、スキーマから指示を取得し、親ドキュメントの新しい指示ドキュメントを作成してから、「指示」と呼ばれるカスタムのタブページに移動します。これはすべて、ユーザがFancybox内の「指示の作成」ボタンをクリックしたときに発生します。

Document

ステップ5:

"InstructionActionCat" という新しいカスタムアクションカテゴリを作成します。これにより、クリックしたときにFancyboxを表示するために、指示タブにボタンを追加できるようにします。

Settings

Categories Editor

ステップ6:

どのタブで新しいカスタムアクションカテゴリを使用するかを定義します。この例では、Instructionsという新しいタブを作成します。"Toolbar actions" ウィジェットを [説明] フィールドとともにタブに追加します。

Tab Instructions

ステップ7:

最後に、ツールバーのアクションウィジェットを設定して、新しい「指示アクションカテゴリ」を使用し、アクション表示をボタンに設定します。ホットスワップ(またはサーバーの再起動)を済ませたら、すばらしいFancyboxを表示できるはずです!

Layout Widget Editor

詳細は、新しいNuxeo Documentation Centerをご覧ください。