CustomToolbars を使用した HTML フォームのレンダリング rendering-html-forms-with-customtoolbars
カスタムツールバーを持つ HTML Forms のレンダリング rendering-html-forms-with-custom-toolbars
Forms サービスを使用すると、HTML フォームでレンダリングされるツールバーをカスタマイズできます。ツールバーは、デフォルトの CSS スタイルをオーバーライドして外観を変更したり、Java スクリプトをオーバーライドして動的な動作を追加したりするようにカスタマイズできます。ツールバーは、fscmenu.xml という名前の XML ファイルを使用してカスタマイズされます。デフォルトでは、Forms サービスは内部で指定された URI の場所からこのファイルを取得します。
この場所から fscmenu.xml をコピーして、必要に応じて変更し、カスタムの URI の場所に配置できます。次に、Forms Service 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
ノード用を提供する必要があります。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
キーワードを使用する必要はありません。
FSToolBarURI
キーワードまたは絶対位置のいずれかを使用して、参照する必要があります。JS ファイルと CSS ファイルを取得するには、adobe-forms-<appserver>.ear ファイルを開きます。このファイル内で、adobe-forms-res.war を開きます。これらのファイルはすべて WAR ファイル内にあります。adobe-forms-<appserver>.ear ファイルは、AEM Forms のインストールフォルダー内にあります(C:\ はインストールディレクトリです)。adobe-forms-<appserver>.ear は、WinRAR などのファイル展開ツールを使用して開くことができます。
次の 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>
次の項目では、ツールバーをカスタマイズする方法を説明します。
fscJS
、fscCSS
、fscVCSS
、fscIECSS
属性(fscmenu.xml ファイル内)の値を変更し、この節で説明するメソッドの 1 つ(例:fscJS="FSToolBarURI/scripts/fscmenu.js"
)を使用して、参照されるファイルのカスタムの場所を反映させます。- すべての CSS ファイルと JS ファイルを指定する必要があります。どのファイルも変更されない場合は、カスタムの場所にデフォルトのファイルを指定します。デフォルトのファイルを取得するには、この節で説明するように、様々なファイルを開きます。
- どのファイルに対しても、絶対参照(例えば、https://www.example.com/scripts/custom-vertical-fscmenu.css)を指定できます。
div#fscmenu
ノードが必要とする JS ファイルと CSS ファイルは、ツールバー機能に不可欠なものです。個々のul#fscmenuItem
ノードには、サポートする JS ファイルまたは CSS ファイルがある場合とない場合があります。
ロケール値の変更
ツールバーのカスタマイズの一環として、ツールバーのロケール値を変更できます。つまり、別の言語で表示できます。次の図は、フランス語で表示されたカスタムツールバーを示しています。
ツールバーのロケール値を変更するには、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>
また、HTMLRenderSpec
オブジェクトの setLocale
メソッドを呼び出してロケール値を指定する文字列値を渡すことによって、有効なロケール値を指定します。例えば、fr_FR
を渡してフランス語を指定します。Forms サービスは、ローカライズされたツールバーにバンドルされています。
Forms サービスについて詳しくは、AEM Forms サービスリファレンスを参照してください。
手順の概要 summary-of-steps
カスタムツールバーを含む HTML フォームをレンダリングするには、次のタスクを実行します。
- プロジェクトファイルを含めます。
- Forms Java API オブジェクトを作成します。
- カスタム fscmenu XML ファイルを参照します。
- HTML フォームをレンダリングします。
- フォームデータストリームをクライアントの 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 フォームをレンダリングすると、フォームデータストリームが返されます。このデータストリームは、HTML フォームをユーザーに表示するためにクライアントの web ブラウザーに書き込む必要があります。
関連トピック
Java API を使用してカスタムツールバーを含む HTML フォームをレンダリングする
Web サービス API を使用してカスタムツールバーを含む HTML フォームをレンダリングする
Forms をレンダリングする web アプリケーションの作成
Java API を使用してカスタムツールバーを含む HTML フォームをレンダリングする render-an-html-form-with-a-custom-toolbar-using-the-java-api
Forms Service API(Java)を使用して、カスタムツールバーを含む HTML フォームをレンダリングします。
-
プロジェクトファイルを含める
adobe-forms-client.jar などのクライアント JAR ファイルを Java プロジェクトのクラスパスに含めます。
-
Forms Java API オブジェクトの作成
- 接続プロパティを含む
ServiceClientFactory
オブジェクトを作成します。 - コンストラクタを使用して
FormsServiceClient
オブジェクトを渡すことによって、ServiceClientFactory
オブジェクトを作成します。
- 接続プロパティを含む
-
カスタム fscmenu XML ファイルの参照
- コンストラクターを使用して
HTMLRenderSpec
オブジェクトを作成します。 - ツールバーを使用して HTML フォームをレンダリングするには、
HTMLRenderSpec
オブジェクトのsetHTMLToolbar
メソッドを呼び出して、HTMLToolbar
enum 値を渡します。例えば、縦の HTML ツールバーを表示するには、HTMLToolbar.Vertical
を渡します。 HTMLRenderSpec
オブジェクトのsetToolbarURI
メソッドを呼び出して XML ファイルの URI の場所を指定する文字列値を渡すことによって、fscmenuXML ファイルの場所を指定します。- 該当する場合は、
HTMLRenderSpec
オブジェクトのsetLocale
メソッドを呼び出してロケール値を指定する文字列値を渡すことによって、ロケール値を設定します。デフォルト値は英語です。
note note NOTE この節に関連するクイックスタートでは、この値を fr_FR
に設定します。 - コンストラクターを使用して
-
HTML フォームのレンダリング
FormsServiceClient
オブジェクトのrenderHTMLForm
メソッドを呼び出して、次の値を渡します。- フォームデザイン名を指定する文字列値で、ファイル名の拡張子も含まれます。Forms アプリケーションの一部であるフォームデザインを参照する場合は、必ず次のような完全なパスを指定します。
Applications/FormsApplication/1.0/FormsFolder/Loan.xdp
- HTML の環境設定タイプを指定する
TransformTo
enum 値。例えば、Internet Explorer 5.0 以降の動的 HTML と互換性のある HTML フォームをレンダリングするには、TransformTo.MSDHTML
を指定します。 - フォームに結合するデータを含む
com.adobe.idp.Document
オブジェクト。データを結合しない場合は、空のcom.adobe.idp.Document
オブジェクトを渡します。 - HTML の実行時オプションが格納された
HTMLRenderSpec
オブジェクト。 HTTP_USER_AGENT
ヘッダー値(例: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
オブジェクトを返します。 - フォームデザイン名を指定する文字列値で、ファイル名の拡張子も含まれます。Forms アプリケーションの一部であるフォームデザインを参照する場合は、必ず次のような完全なパスを指定します。
-
フォームデータストリームをクライアント 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 フォームのレンダリング
Web サービス API を使用してカスタムツールバーを含む HTML フォームをレンダリングする rendering-an-html-form-with-a-custom-toolbar-using-the-web-service-api
Forms サービス API(web サービス)を使用して、カスタムツールバーを含んだ HTML フォームをレンダリングします。
-
プロジェクトファイルを含める
- Forms Service WSDL を使用する Java プロキシクラスを作成します。
- クラスパスに Java プロキシクラスを含めます。
-
Forms Java API オブジェクトの作成
FormsService
オブジェクトを作成し、認証値を設定します。 -
カスタム fscmenu XML ファイルの参照
- コンストラクターを使用して
HTMLRenderSpec
オブジェクトを作成します。 - ツールバーを使用して HTML フォームをレンダリングするには、
HTMLRenderSpec
オブジェクトのsetHTMLToolbar
メソッドを呼び出して、HTMLToolbar
enum 値を渡します。例えば、縦の HTML ツールバーを表示するには、HTMLToolbar.Vertical
を渡します。 HTMLRenderSpec
オブジェクトのsetToolbarURI
メソッドを呼び出して XML ファイルの URI の場所を指定する文字列値を渡すことによって、fscmenuXML ファイルの場所を指定します。- 該当する場合は、
HTMLRenderSpec
オブジェクトのsetLocale
メソッドを呼び出してロケール値を指定する文字列値を渡すことによって、ロケール値を設定します。デフォルト値は英語です。
note note NOTE この節に関連するクイックスタートでは、この値を fr_FR
に設定します。 - コンストラクターを使用して
-
HTML フォームのレンダリング
FormsService
オブジェクトのrenderHTMLForm
メソッドを呼び出して、次の値を渡します。- フォームデザイン名を指定する文字列値で、ファイル名の拡張子も含まれます。Forms アプリケーションの一部であるフォームデザインを参照する場合は、必ず次のような完全なパスを指定します。
Applications/FormsApplication/1.0/FormsFolder/Loan.xdp
- HTML の環境設定タイプを指定する
TransformTo
enum 値。例えば、Internet Explorer 5.0 以降の動的 HTML と互換性のある HTML フォームをレンダリングするには、TransformTo.MSDHTML
を指定します。 - フォームと結合するデータを含んだ
BLOB
オブジェクト。データを結合しない場合は、null
を渡します。 - HTML の実行時オプションが格納されている
HTMLRenderSpec
オブジェクト。 HTTP_USER_AGENT
ヘッダー値を指定する文字列値(例: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 ブラウザーに書き込む必要のあるフォームデータストリームを入力します。 - フォームデザイン名を指定する文字列値で、ファイル名の拡張子も含まれます。Forms アプリケーションの一部であるフォームデザインを参照する場合は、必ず次のような完全なパスを指定します。
-
フォームデータストリームをクライアント web ブラウザーに書き込む
com.adobe.idp.services.holders.FormsResultHolder
オブジェクトのvalue
データメンバーの値を取得して、FormResult
オブジェクトを作成します。FormsResult
オブジェクトのgetOutputContent
メソッドを呼び出して、フォームデータを含むBLOB
オブジェクトを作成します。getContentType
メソッドを呼び出して、BLOB
オブジェクトのコンテンツタイプを取得します。setContentType
メソッドを呼び出し、BLOB
オブジェクトのコンテンツタイプを渡すことで、javax.servlet.http.HttpServletResponse
オブジェクトのコンテンツタイプを設定します。- フォームデータストリームをクライアント web ブラウザーに書き出すのに使用される
javax.servlet.ServletOutputStream
オブジェクトを、javax.servlet.http.HttpServletResponse
オブジェクトのgetOutputStream
メソッドを呼び出して作成します。 - バイト配列を作成し、
BLOB
オブジェクトのgetBinaryData
メソッドを呼び出して値を入力します。このタスクは、FormsResult
オブジェクトのコンテンツをバイト配列に割り当てます。 javax.servlet.http.HttpServletResponse
オブジェクトのwrite
メソッドを呼び出して、フォームデータストリームをクライアント web ブラウザーに送信します。バイト配列をwrite
メソッドに渡します。
関連トピック
Base64 エンコーディングを使用した AEM Forms の呼び出し