カスタムツールバーを使用したHTML Formsのレンダリング

このドキュメントのサンプルと例は、JEE上のAEM Forms環境に限られています。

カスタムツールバーを使用したHTML Formsのレンダリング

Formsサービスを使用すると、HTMLフォームでレンダリングされるツールバーをカスタマイズできます。 デフォルトのCSSスタイルを上書きすることでツールバーの外観を変更したり、Javaスクリプトを上書きして動的な動作を追加したりするように、ツールバーをカスタマイズできます。 ツールバーは、 fscmenu.xmlという名前のXMLファイルを使用してカスタマイズされます。 デフォルトでは、Formsサービスは内部で指定されたURIの場所からこのファイルを取得します。

メモ

このURIの場所は、adobe-forms-core.jarファイル( adobe-forms-dsc.jarファイル)にあります。 adobe-forms-dsc.jarファイルは、C:\Adobe\Adobe_Experience_Manager_forms\ folder (C:\ is the installation directory)にあります。 Win RARなどのファイル抽出ツールを使用して、アドビを開くことができます。

この場所からfscmenu.xmlをコピーし、必要に応じて変更して、カスタムURIの場所に配置できます。 次に、FormsサービスAPIを使用して、指定した場所のfscmenu.xmlファイルを使用してFormsサービスを実行する実行時オプションを設定します。 これらのアクションにより、Formsサービスは、カスタムツールバーを含むHTMLフォームをレンダリングします。

fscmenu.xmlファイルに加えて、次のファイルも取得する必要があります。

  • fscmenu.js
  • fscattachments.js
  • fscmenu.css
  • fscmenu-v.css
  • fscmenu-ie.css
  • fscdialog.css

fscJSは、各ノードに関連付けられているJavaスクリプトです。 div#fscmenuノード用とul#fscmenuItemノード用にそれぞれ1つを指定する必要があります。 JSファイルは、コアツールバー機能を実装し、デフォルトファイルが機能します。

fscCSSは、特定のノードに関連付けられているスタイルシートです。 CSSファイル内のスタイルによって、ツールバーの外観が指定されます。 fscVCSSは、レンダリングされたHTMLフォームの左側に表示される、垂直方向のツールバー用のスタイルシートです。 fscIECSSは、Internet ExplorerでレンダリングされるHTMLフォームに使用されるスタイルシートです。

上記のすべてのファイルがfscmenu.xmlファイルで参照されていることを確認します。 つまり、 fscmenu.xmlファイルで、これらのファイルを指すURIの場所を指定して、Formsサービスがそれらのファイルを見つけられるようにします。 デフォルトでは、これらのファイルは、内部キーワードFSWebRootまたはApplicationWebRootで始まるURIの場所で使用できます。

ツールバーをカスタマイズするには、外部キーワードFSToolBarURIを使用してキーワードを置き換えます。 このキーワードは、実行時にFormsサービスに渡されるURIを表します(このアプローチについては、この節で後述します)。

また、これらのJSファイルとCSSファイルの絶対的な場所(例: https://www.mycompany.com/scripts/misc/fscmenu.js )を指定することもできます。 この場合、FSToolBarURIキーワードを使用する必要はありません。

メモ

これらのファイルの参照方法を混在させることはお勧めしません。 つまり、すべてのURIはFSToolBarURIキーワードまたは絶対位置を使用して参照する必要があります。

JSファイルとCSSファイルは、 adobe-forms-<appserver>.earファイルを開いて取得できます。 このファイル内で、 adobe-forms-res.warを開きます。 これらのファイルはすべてWARファイルに格納されています。 adobe-forms-<appserver>.earファイルは、AEM formsのインストールフォルダー(C:\ is the installation directory)にあります。 WinRARなどのファイル抽出ツールを使用して、 adobe-forms-<appserver>.earを開くことができます。

次のXML構文は、 fscmenu.xmlファイルの例を示しています。

 <div id="fscmenu" fscJS="FSToolBarURI/scripts/fscmenu.js" fscCSS="FSToolBarURI/fscmenu.css" fscVCSS="FSToolBarURI/fscmenu-v.css" fscIECSS="FSToolBarURI/fscmenu-ie.css">
         <ul class="fscmenuItem" id="Home">
             <li>
                 <a href="#" fscTarget="_top" tabindex="1">Home</a>
             </li>
         </ul>
         <ul class="fscmenuItem" id="Upload" fscJS="FSToolBarURI/scripts/fscattachments.js" fscCSS="FSToolBarURI/fscdialog.css">
             <li>
                 <a tabindex="2">Upload Attachments</a>
                 <ul class="fscmenuPopup" id="fscUploadAttachments">
                     <li>
                         <a href="javascript:doUploadDialog();" tabindex="3">Add ...</a>
                     </li>
                     <li>
                         <a href="javascript:doDeleteDialog();" tabindex="4">Delete ...</a>
                     </li>
                 </ul>
             </li>
         </ul>
         <ul class="fscmenuItem" id="Download">
             <li>
                 <a tabindex="100">Download Attachments</a>
                 <ul class="fscmenuPopup">
                     <li>
                         <a tabindex="101">None available</a>
                     </li>
                 </ul>
             </li>
         </ul>
     </div>
メモ

太字のテキストは、参照する必要があるCSSおよびJSファイルへのURIを表します。

次の項目では、ツールバーをカスタマイズする方法を説明します。

  • fscJSfscCSSfscVCSSfscIECSSの各属性の値を(fscmenu.xmlファイル内で)変更し、この節で説明する方法(例えばfscJS="FSToolBarURI/scripts/fscmenu.js")の1つを使用して、参照ファイルのカスタムの場所を反映します。
  • すべてのCSSファイルとJSファイルを指定する必要があります。 どのファイルも変更されない場合は、カスタムの場所にデフォルトのファイルを指定します。 この節で説明するように、様々なファイルを開くことで、デフォルトのファイルを取得できます。
  • 任意のファイルに絶対参照(例えば、https://www.example.com/scripts/custom-vertical-fscmenu.css)を指定することはできます。
  • div#fscmenuノードで必要となるJSファイルとCSSファイルは、ツールバー機能に不可欠です。 個々のul#fscmenuItemノードには、サポートするJSまたはCSSファイルが含まれている場合と含まれない場合があります。

ローカル値の変更

ツールバーのカスタマイズの一環として、ツールバーのロケール値を変更できます。 つまり、別の言語で表示できます。 次の図は、フランス語で表示されるカスタムツールバーを示しています。

メモ

複数の言語でカスタムツールバーを作成することはできません。 ツールバーは、ロケール設定に基づいて異なるXMLファイルを使用できません。

ツールバーのロケール値を変更するには、表示する言語がfscmenu.xmlファイルに含まれていることを確認します。 次のXML構文は、フランス語のツールバーを表示するために使用されるfscmenu.xmlファイルを示しています。

 <div id="fscmenu" fscJS="FSToolBarURI/scripts/fscmenu.js" fscCSS="FSToolBarURI/fscmenu.css" fscVCSS="FSToolBarURI/fscmenu-v.css" fscIECSS="FSToolBarURI/fscmenu-ie.css">
         <ul class="fscmenuItem" id="Home">
             <li>
                 <a href="#" fscTarget="_top" tabindex="1">Accueil</a>
             </li>
         </ul>
         <ul class="fscmenuItem" id="Upload" fscJS="FSToolBarURI/scripts/fscattachments.js" fscCSS="FSToolBarURI/fscdialog.css">
             <li>
                 <a tabindex="2">Télécharger les pièces jointes</a>
                 <ul class="fscmenuPopup" id="fscUploadAttachments">
                     <li>
                         <a href="javascript:doUploadDialog();" tabindex="3">Ajouter...</a>
                     </li>
                     <li>
                         <a href="javascript:doDeleteDialog();" tabindex="4">Supprimer...</a>
                     </li>
                 </ul>
             </li>
         </ul>
         <ul class="fscmenuItem" id="Download">
             <li>
                 <a tabindex="100">Télécharger les pièces jointes</a>
                 <ul class="fscmenuPopup">
                     <li>
                         <a tabindex="101">Aucune disponible</a>
                     </li>
                 </ul>
             </li>
         </ul>
     </div>
メモ

このセクションに関連付けられているクイックスタートは、前の図に示すように、このXMLファイルを使用してフランス語のカスタムツールバーを表示します。

また、HTMLRenderSpecオブジェクトのsetLocaleメソッドを呼び出し、ロケール値を指定する文字列値を渡すことで、有効なロケール値を指定します。 例えば、fr_FRを渡してフランス語を指定します。 Formsサービスは、ローカライズされたツールバーにバンドルされています。

メモ

カスタムツールバーを使用するHTMLフォームをレンダリングする前に、HTMLフォームのレンダリング方法を理解しておく必要があります。 (FormsをHTMLとしてレンダリングするを参照)。

Formsサービスについて詳しくは、『 AEM Formsのサービスリファレンス 』を参照してください。

手順の概要

カスタムツールバーを含むHTMLフォームをレンダリングするには、次のタスクを実行します。

  1. プロジェクトファイルを含めます。
  2. Forms Java APIオブジェクトを作成します。
  3. カスタムfscmenu XMLファイルを参照します。
  4. HTMLフォームをレンダリングします。
  5. フォームデータストリームをクライアントWebブラウザーに書き込みます。

プロジェクトファイルを含める

必要なファイルを開発プロジェクトに含めます。 Javaを使用してクライアントアプリケーションを作成する場合は、必要なJARファイルを含めます。 Webサービスを使用している場合は、プロキシファイルを含めます。

Forms Java APIオブジェクトの作成

Formsサービスがサポートする操作をプログラムで実行する前に、Formsクライアントオブジェクトを作成する必要があります。

カスタムfscmenu XMLファイルの参照

カスタムツールバーを含むHTMLフォームをレンダリングするには、ツールバーを記述するfscmenu XMLファイルを参照します。 (この節では、fscmenu XMLファイルの2つの例を示します)。 また、 fscmenu.xmlファイルで、すべての参照ファイルの場所が正しく指定されていることを確認してください。 この節で前述したように、すべてのファイルがFSToolBarURIキーワードまたは絶対位置で参照されていることを確認します。

HTMLフォームのレンダリング

HTMLフォームをレンダリングするには、Designerで作成されXDPファイルとして保存されたフォームデザインを指定します。 また、HTML変換タイプを選択します。 例えば、Internet Explorer 5.0以降用の動的HTMLをレンダリングするHTML変換タイプを指定できます。

HTMLフォームのレンダリングには、他のフォームタイプをレンダリングするためのURI値などの値も必要です。

フォームデータストリームをクライアントWebブラウザーに書き込む

Formsサービスは、HTMLフォームをレンダリングする際に、フォームデータストリームを返します。このストリームをクライアントWebブラウザーに書き込んで、HTMLフォームをユーザーに表示させる必要があります。

関連トピック

Java APIを使用したカスタムツールバーでのHTMLフォームのレンダリング

WebサービスAPIを使用したカスタムツールバーでのHTMLフォームのレンダリング

AEM Forms Java ライブラリファイルを含める

接続プロパティの設定

FormsサービスAPIのクイックスタート

インタラクティブPDF formsのレンダリング

FormsをHTMLとしてレンダリング

Forms

Java APIを使用して、カスタムツールバーでHTMLフォームをレンダリングする

FormsサービスAPI(Java)を使用して、カスタムツールバーを含むHTMLフォームをレンダリングします。

  1. プロジェクトファイルを含める

    Javaプロジェクトのクラスパスに、adobe-forms-client.jarなどのクライアントJARファイルを含めます。

  2. Forms Java APIオブジェクトの作成

    • 接続プロパティを含む ServiceClientFactory オブジェクトを作成します。
    • コンストラクタを使用して FormsServiceClient オブジェクトを渡すことによって、ServiceClientFactory オブジェクトを作成します。
  3. カスタムfscmenu XMLファイルの参照

    • HTMLRenderSpecオブジェクトを作成するには、コンストラクタを使用します。
    • ツールバーでHTMLフォームをレンダリングするには、HTMLRenderSpecオブジェクトのsetHTMLToolbarメソッドを呼び出して、HTMLToolbar列挙値を渡します。 例えば、垂直方向のHTMLツールバーを表示するには、HTMLToolbar.Verticalを渡します。
    • HTMLRenderSpecオブジェクトのsetToolbarURIメソッドを呼び出し、XMLファイルのURI位置を指定する文字列値を渡して、fscmenu XMLファイルの場所を指定します。
    • 該当する場合は、HTMLRenderSpecオブジェクトのsetLocaleメソッドを呼び出し、ロケール値を指定する文字列値を渡してロケール値を設定します。 デフォルト値は英語です。
    メモ

    このセクションに関連付けられているクイックスタートは、この値を​fr_FR.​に設定します。

  4. HTMLフォームのレンダリング

    FormsServiceClientオブジェクトのrenderHTMLFormメソッドを呼び出し、次の値を渡します。

    • ファイル名拡張子を含むフォームデザイン名を指定するstring値。 Formsアプリケーションの一部であるフォームデザインを参照する場合は、必ずApplications/FormsApplication/1.0/FormsFolder/Loan.xdpのように完全なパスを指定してください。
    • HTML環境設定タイプを指定するTransformTo列挙値。 例えば、Internet Explorer 5.0以降の動的HTMLと互換性のあるHTMLフォームをレンダリングするには、TransformTo.MSDHTMLと指定します。
    • フォームとマージするデータを含むcom.adobe.idp.Documentオブジェクト。 データを結合しない場合は、空のcom.adobe.idp.Documentオブジェクトを渡します。
    • HTML実行時オプションを格納するHTMLRenderSpecオブジェクト。
    • HTTP_USER_AGENTヘッダー値を指定するstring値(Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)など)。
    • HTMLフォームのレンダリングに必要なURI値を格納するURLSpecオブジェクト。
    • 添付ファイルを格納するjava.util.HashMapオブジェクト。 これはオプションのパラメーターで、フォームにファイルを添付しない場合はnullを指定できます。

    renderHTMLFormメソッドは、クライアントのWebブラウザーに書き込む必要があるフォームデータストリームを含むFormsResultオブジェクトを返します。

  5. フォームデータストリームをクライアントWebブラウザーに書き込む

    • FormsResultオブジェクトのgetOutputContentメソッドを呼び出して、com.adobe.idp.Documentオブジェクトを作成します。
    • getContentTypeメソッドを呼び出して、com.adobe.idp.Documentオブジェクトのコンテンツタイプを取得します。
    • setContentTypeメソッドを呼び出し、com.adobe.idp.Documentオブジェクトのコンテンツタイプを渡すことで、javax.servlet.http.HttpServletResponseオブジェクトのコンテンツタイプを設定します。
    • javax.servlet.http.HttpServletResponseオブジェクトのgetOutputStreamメソッドを呼び出して、フォームデータストリームをクライアントWebブラウザーに書き込むために使用するjavax.servlet.ServletOutputStreamオブジェクトを作成します。
    • com.adobe.idp.DocumentオブジェクトのgetInputStreamメソッドを呼び出して、java.io.InputStreamオブジェクトを作成します。
    • InputStreamオブジェクトのreadメソッドを呼び出し、バイト配列を引数として渡すことで、バイト配列を作成し、フォームデータストリームに入力します。
    • javax.servlet.ServletOutputStreamオブジェクトのwriteメソッドを呼び出して、フォームデータストリームをクライアントWebブラウザーに送信します。 writeメソッドにバイト配列を渡します。

関連トピック

クイックスタート(SOAPモード):Java APIを使用した、カスタムツールバーでのHTMLフォームのレンダリング

AEM Forms Java ライブラリファイルを含める

接続プロパティの設定

WebサービスAPIを使用したカスタムツールバーでのHTMLフォームのレンダリング

FormsサービスAPI(Webサービス)を使用して、カスタムツールバーを含むHTMLフォームをレンダリングします。

  1. プロジェクトファイルを含める

    • FormsサービスのWSDLを使用するJavaプロキシクラスを作成します。
    • クラスパスにJavaプロキシクラスを含めます。
  2. Forms Java APIオブジェクトの作成

    FormsServiceオブジェクトを作成し、認証値を設定します。

  3. カスタムfscmenu XMLファイルの参照

    • HTMLRenderSpecオブジェクトを作成するには、コンストラクタを使用します。
    • ツールバーでHTMLフォームをレンダリングするには、HTMLRenderSpecオブジェクトのsetHTMLToolbarメソッドを呼び出して、HTMLToolbar列挙値を渡します。 例えば、垂直方向のHTMLツールバーを表示するには、HTMLToolbar.Verticalを渡します。
    • HTMLRenderSpecオブジェクトのsetToolbarURIメソッドを呼び出し、XMLファイルのURI位置を指定する文字列値を渡して、fscmenu XMLファイルの場所を指定します。
    • 該当する場合は、HTMLRenderSpecオブジェクトのsetLocaleメソッドを呼び出し、ロケール値を指定する文字列値を渡してロケール値を設定します。 デフォルト値は英語です。
    メモ

    このセクションに関連付けられているクイックスタートは、この値を​fr_FR.​に設定します。

  4. HTMLフォームのレンダリング

    FormsServiceオブジェクトのrenderHTMLFormメソッドを呼び出し、次の値を渡します。

    • ファイル名拡張子を含むフォームデザイン名を指定するstring値。 Formsアプリケーションの一部であるフォームデザインを参照する場合は、必ずApplications/FormsApplication/1.0/FormsFolder/Loan.xdpのように完全なパスを指定してください。
    • HTML環境設定タイプを指定するTransformTo列挙値。 例えば、Internet Explorer 5.0以降の動的HTMLと互換性のあるHTMLフォームをレンダリングするには、TransformTo.MSDHTMLと指定します。
    • フォームとマージするデータを含むBLOBオブジェクト。 データを結合しない場合は、nullを渡します。
    • HTML実行時オプションを格納するHTMLRenderSpecオブジェクト。
    • HTTP_USER_AGENTヘッダー値を指定するstring値(Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322など)。 この値を設定しない場合は、空の文字列を渡すことができます。
    • HTMLフォームのレンダリングに必要なURI値を格納するURLSpecオブジェクト。
    • 添付ファイルを格納するjava.util.HashMapオブジェクト。 このパラメーターはオプションです。フォームにファイルを添付しない場合は、nullを指定できます。
    • renderHTMLFormメソッドで設定される空のcom.adobe.idp.services.holders.BLOBHolderオブジェクト。 このパラメーター値は、レンダリングされたフォームを保存します。
    • renderHTMLFormメソッドで設定される空のcom.adobe.idp.services.holders.BLOBHolderオブジェクト。 このパラメーターは、出力XMLデータを格納します。
    • renderHTMLFormメソッドで設定される空のjavax.xml.rpc.holders.LongHolderオブジェクト。 この引数は、フォームのページ数を保存します。
    • renderHTMLFormメソッドで設定される空のjavax.xml.rpc.holders.StringHolderオブジェクト。 この引数はロケール値を格納します。
    • renderHTMLFormメソッドで設定される空のjavax.xml.rpc.holders.StringHolderオブジェクト。 この引数は、使用されるHTMLレンダリング値を格納します。
    • この操作の結果を格納する空のcom.adobe.idp.services.holders.FormsResultHolderオブジェクト。

    renderHTMLFormメソッドは、最後の引数値として渡されるcom.adobe.idp.services.holders.FormsResultHolderオブジェクトに、クライアントWebブラウザーに書き込む必要のあるフォームデータストリームを設定します。

  5. フォームデータストリームをクライアントWebブラウザーに書き込む

    • com.adobe.idp.services.holders.FormsResultHolderオブジェクトのvalueデータメンバーの値を取得して、FormResultオブジェクトを作成します。
    • FormsResultオブジェクトのgetOutputContentメソッドを呼び出して、フォームデータを含むBLOBオブジェクトを作成します。
    • getContentTypeメソッドを呼び出して、BLOBオブジェクトのコンテンツタイプを取得します。
    • setContentTypeメソッドを呼び出し、BLOBオブジェクトのコンテンツタイプを渡すことで、javax.servlet.http.HttpServletResponseオブジェクトのコンテンツタイプを設定します。
    • javax.servlet.http.HttpServletResponseオブジェクトのgetOutputStreamメソッドを呼び出して、フォームデータストリームをクライアントWebブラウザーに書き込むために使用するjavax.servlet.ServletOutputStreamオブジェクトを作成します。
    • バイト配列を作成し、BLOBオブジェクトのgetBinaryDataメソッドを呼び出してそれを設定します。 このタスクは、FormsResultオブジェクトの内容をバイト配列に割り当てます。
    • javax.servlet.http.HttpServletResponseオブジェクトのwriteメソッドを呼び出して、フォームデータストリームをクライアントWebブラウザーに送信します。 writeメソッドにバイト配列を渡します。

関連トピック

Base64エンコーディングを使用したAEM Formsの呼び出し

このページ