LiveCycle Designer ES によるダイナミックフォーム作成の基礎
作成日
6 July 2009
ページ ツール |
必要条件
この記事に必要な予備知識
- XML の基本知識を習得していること。
- JavaScript などのスクリプト言語の基礎知識があり、コードを記述した経験があること。
ユーザーレベル
初級
サンプルファイル
- Form.zip (108 KB)
その他の要件
- LiveCycle Designer ES
体験版 - Adobe Reader 9 または Acrobat 9 以降
Adobe Reader
Acrobat 体験版
（※1）このZIPファイルを解凍すると、以下のフォルダが生成されます。
［lab］フォルダ ：このチュートリアルで使用するファイルが格納されています。
［solution］フォルダ：このチュートリアルの完成例です（ただし、実際の完成例よりも若干作り込んでいます）。
はじめに
本稿は、LiveCycle ESにおけるフォーム開発環境であるLiveCycle Designer ES（以下、Designer）を使用して、ユーザー操作などによってフォームレイアウトが変化するダイナミックフォームを作成するための基礎と要点をチュートリアル形式で紹介します。
繰り返しになりますが、LiveCycle ES サーバーのプロセスで使用するインタラクティブなダイナミックフォームを作成することを目的としています。しかし、LiveCycle サーバープロセスで使用しない、純粋にメールで送受信されるだけのフォームを作る方にとっても役立つ内容です。
本稿の内容
Designerのファーストステップとしては様々な要素がありますが、この手のツールの話でよくある一つ一つの描画ツールの意味や基本操作といったところは省きます（※0）。今後 Designer でフォームを開発するにあたり、「肝」となる以下の3点にフォーカスしてご紹介します。
- XML Schemaをベースとしたフォームの作成方法
正しく言うと、フォームに格納するデータ構造をXML Schemaで定義し、それをフォームオブジェクトと関連付けることです。特に、LiveCycleプロセスの中でフォーム中のデータに対して何らかの処理を行いたい場合、フォームのデータをプロセス変数に格納しますが、このために必要です。 - フォームスクリプト（JavaScript）の基礎
イベント処理などを行うインタラクティブなフォーム作成のために、フォーム内でのロジックを記述するために必要な知識です。FormCalc という言語と、JavaScript のいずれかで記述することができますが、今回はなじみ深い JavaScript による方法をご紹介します。 - サブフォームの取り扱い
動的にレイアウトが変更する「ダイナミックフォーム」を作成するために必要な知識です。特に「配列型データに連動してレイアウトが変化するサブフォームの取り扱い」が慣れるまで少々やっかいだと思います。しかし、サブフォームに関する2つのポイントと、コツを掴んでしまえば容易です。
（※0）その他の項目に関しては、Designerのヘルプ（特にチュートリアル）や、各種ドキュメント、トレーニングなどをご活用ください。
LiveCycle Designer で作成できるフォーム
フォームのカテゴリ
まず、Designer で作成できるフォームの種類を紹介します。
Designerで作成できるフォームは、その動作やレイアウトの変化に関する事項で以下の表の4つの要素で分類されます。表１の列はフォームのインタラクティブ性を表し、行はフォームのレイアウトが動的に変化するか否かを表します。
表1 Designer で作成できるフォームの分類
| インタラクティブなフォーム | 非インタラクティブなフォーム | |
|---|---|---|
| スタティックなフォーム | オンラインの応募書類 | ダウンロードして、印刷後記入してから郵送する紙の口座開設申込書など |
| ダイナミックなフォーム | 行が追加可能な表をもつ発注書など | 差し込み印刷する発送ラベルや送付状など |
以下、表の列と行の説明です。
- インタラクティブ性
- インタラクティブ：ユーザーが直接フォームにデータを入力でき、イベント処理を実装したフォーム。
- 非インタラクティブ：インタラクティブでないフォーム。紙に印刷をしてから利用することを目的としている。
- レイアウトの変化
- スタティック：レイアウトが常に固定のフォーム。
- ダイナミック：レイアウトがユーザーのイベントやフォームのデータ量によって変化するフォーム。
このチュートリアルでは、「インタラクティブでダイナミックなフォーム」を作成します。
フォームファイルの種類について
次に、フォームファイルの種類について紹介します。作成したフォームを保存する場合、フォームの動作や用途に合わせて以下のいずれかの形式で保存します。（※2）
- スタティックPDFフォーム（.pdf）：レイアウトが変化しないフォームの場合。正確には、ユーザーがAcrobatやAdobe Readerでフォームを開いたとき、その時点で一度だけレンダリングされるフォームのこと。
- ダイナミックXMLフォーム（.pdf）：レイアウトが、ユーザーイベントなどで変化するフォームの場合。正確には、ユーザーがAcrobatやAdobe Readerで開いて一度レンダリングされた後に再レンダリングするフォームのこと。
- Adobe XML フォーム（.xdp）：LiveCycle ESのソリューションコンポーネントForms ES を使用する場合。Forms ES を使用すると、フォームを変換することができます（HTML形式、SWF形式、PDF形式）。特に、HTML形式に変換するときはこの形式である必要があります。
（※2）一度保存したファイルでも、Designer で違うファイル形式に保存し直すことができます。
LiveCycle Designer の基本
Designerのユーザーインターフェース
簡単に Designer のユーザーインターフェースについて説明します。Designer をインストールされている場合は、実際に起動してください。
中央付近の編集領域を「レイアウトエディタ」、左右に見えるのが「パレット」です。デフォルトでは、表示されていないパレットもありますが、メニューの［ウィンドウ］で、開くパレットを指定することができます。
また、上部と下部に見える「小さな矢印」が付いた部分は、マウスで広げたり閉じたりできます。
新規にフォームオブジェクトを配置する場合は、右側の「オブジェクトライブラリ」パレットから「レイアウトエディタ」へドラック＆ドロップします。そして、必要に応じて、右下の「オブジェクト」パレットなどでそのプロパティを変更します。
［階層］パレットについて
いくつかフォームオブジェクトを配置した状態で、画面左側の「階層」パレットに注目します。
フォームに配置したオブジェクトが階層構造で表現されています。これは、フォームオブジェクトの親子関係（ネストの状態）と、フォームオブジェクトが手前に見えるか背面に見えるかという前後関係を示します。（※3）
また、それぞれの要素に付いている名前に注目してください。インスタンス名のようなものですが、普通に「名前」と呼びます。デフォルトの名前は「テキスト フィールド」のようにフォームオブジェクトを指す名前が自動的に付与されます。また、それぞれの要素で [F2]を押下するか、名前部分をクリックすることで変更できます。
（※3）LiveCycle のフォームは、XFA（XML Form Architecture）と呼ばれる DOM の仕様に則っています。XFA の詳細に関しては、以下をご参照ください。
XML スキーマを元にしてフォームデザインを行う方法
フォームデザインは、オブジェクトライブラリから直接レイアウトエディタにドラック＆ドロップして配置する、といった方法もありますが、次に説明する「フォームのデータ構造を元にしてフォームデザインを行う」ことも可能です。ここでは、XMLスキーマ（W3C XML Schema）をベースにして、フォームデザインを行う方法をご紹介します。
データ接続について
フォームに外部のデータソースのデータを取り込んで表示したり、あるいは、その逆で、フォームのデータを外部に送信したりすることがあるかと思います。というより、電子フォームを作る目的を考慮すると、多くの場合そのようなことを行うはずです。とりわけ、LiveCycleプロセスでフォームを使用する場合には、その処理で使用するデータをフォームから取得したり、あるいは、処理したデータをフォームに挿入する（※4）といったようなことが必要になります。
そのような目的で使用するデータソースとフォームを関連付けすることを「データ接続」といいます。
LiveCycle Designerでは、XMLスキーマ（W3C XML Schema）、OLEDBデータベース、サンプルXMLデータ、WSDLファイルの4種類のデータソースとのデータ接続が可能になっています。
(※4) LiveCycle では、「データをフォームにマージする」といいます。
データ連結について
データ接続をしてから、そのデータソースの要素と個々のフォームオブジェクトに関連付けすることを「データ連結」といいます。
データ連結を行う2つの方法
得られる結果は同じですが、データ連結を行う方法は2つあります。今回は、後者の方法で行います。
- オブジェクトを配置しフォームデザインを先に行っておいてから、データ接続を行い、そのデータの要素とフォームオブジェクトを関連付ける方法。
- 先にデータ接続を行い、それを元にしてフォームデザインを行う方法。読み込んだデータソースを表すツリーからデータ要素をレイアウトエディタにドラッグ＆ドロップします。この時点でデータソースとフォームオブジェクトの関連付けが自動的に行われます。
W3C XML Schema を元にしてフォームデザインする方法
今回はW3C XML Schemaを読み込んで、それを元にしてフォームデザインを行います。
W3C XML Schema におけるデータ接続の意味合いは、表示するデータそのものを読み込むということではなく、フォームに保持するデータ構造を決定する、ということです。これにより、前述のように、LiveCycleプロセスでフォームを使用する場合、その処理で使用するデータをフォームから取得したり、あるいは、処理したデータをフォームに挿入するといったことができるようになります。
まず、予めW3C XML Schema でフォームのデータ構造を定義しておきます（※5）。ここでは、W3C XML Schema と LiveCycleとの関係の解説は行いませんが、W3C XML Schema の規約に則り作成しておけば、Designer でデータ接続を行った際、スキーマの構造の解析を自動的に行い、要素や属性も一部のフォームオブジェクトに自動的に反映してくれるものもあります。自動的に認識しない要素や属性の値は、Designer 側で手作業によりプロパティを設定する必要があります。
（※5）XML にはなじんでいる方は多いと思いますが、XML スキーマにはなじみがない方もいらっしゃると思います。XMLデータをXML スキーマに変換するツールや、XML スキーマ の作成を支援するXML エディタがあるようですので、そちらを利用するのもよろしいかと思います。また、以下のページで、作成したフォームからXML Schemaを生成する裏技を紹介しておりますのでご参考ください（ただし、完全なXMLスキーマにはならないようです）。
ブログ LiveCycle Doc Team・How to generate an XML schema for an existing form
手順
- まず、今回データ接続する XML スキーマを確認します。ダウンロードしたサンプルファイルの Form¥lab¥schema¥rx_shopRequest.xsd をテキストエディタなどで開いて、軽く全体を眺めておいてください。
- Designer で、Forms¥lab¥forms¥rc_shipRequest.pdf を開きます。
全てのページに共通のデザイン要素となるマスターページや、いくつかのフォームオブジェクトがすでに配置されている状態になっています。 - 画面左側「データ表示」パレットのタブをクリックします。
「データ表示」パレットの右側の小さなボタンをクリックし、表示されるメニューから［新規データ接続．．．］を選択します。
- 「新規データ接続」ダイアログが表示されるので、以下の設定を行い、［次へ］ボタンをクリックします。
表２ 「新規データ接続」ダイアログの設定
| 設定項目名 | 設定値 | 説明 |
|---|---|---|
| 新規データ接続の名前： | 「DataConnection」と入力（デフォルトのまま） | 任意の名前をつけることができます。 |
| データ記述の取得先： | ［XML スキーマ］を選択 | データ接続するデータの形式を選択します。 |
- 次の画面「XMLスキーマファイルの選択」で、データ接続するXMLスキーマファイルを指定します。右隣の小さなフォルダマークのアイコンをクリックし、開いたファイル選択ダイアログから、Form¥lab¥schema¥rc_shipRequest.xsdファイルを選択します。そして、その他の設定項目はデフォルトのままにして、［完了］ボタンをクリックします。
- 「データ表示」パレットにXMLスキーマが自動的に解析され、その結果のツリーが表示されることを確認します。ここで、rc_shipRequest.xsd と 「データ表示」のツリー構造との対応関係も簡単に確認しておいてください。
- 「データ表示」パレットの［orderBy］要素をレイアウトエディタに直接ドラック＆ドロップします。
ドラック＆ドロップした位置によっては、エディタ領域からはみ出す可能性があるため、「フォームのスペースが足りないため、コンテンツを貼り付けられません。」というダイアログが表示される場合があります。この場合は、一旦［OK］ボタンをクリックします。
- レイアウトを整えます。まず、7つのテキストフィールドオブジェクトを囲う領域を下方向に十分に広げ、テキストフィールドをドラック＆ドロップして配置を変更します。
- テキストフィールドオブジェクトのキャプション部分を直接ダブルクリックして、図15のように変更してください。
- お好みに応じてテキストフィールドオブジェクトのサイズを変更し（※6）、7つのテキストフィールドオブジェクトを囲うオブジェクトごと「発注元」テキストフィールドオブジェクトの下に移動します。
（※6）サイズ変更に関しては、以下のヘルプを参照ください。
[LiveCycle Designer ESの使用] – [オブジェクトの使用] –［オブジェクトのサイズと調整］
[LiveCycle Designer ESの使用] – [オブジェクトの使用] –［キャプションの形式設定］
- 手順⑦～⑪を 「データ接続」パネルの［deliverTo］要素に対しても同様に行い、最終的に「配送先」テキストフィールドオブジェクト下部に配置してください。
この操作での注目点
以上の操作で、データ接続したデータソースの要素とフィールドオブジェクトとのデータ連結が済んだ状態になります。
「データ表示」パレットを確認してください。データ要素名の隣にアイコンがついているものと、そうでないものがあります。アイコンがついているものが、フィールドオブジェクトと連結されているという意味です。
また、データ連結されている様子は、パレットからも確認できます。
データ連結されているフィールドオブジェクトを選択して、画面右下「オブジェクト／連結」パレットを確認します。「デフォルトの連結（開く、保存、送信）：」が、データ連結の設定にあたります。
また、「デフォルトの連結（開く、保存、送信）：」の隣の小さなボタンをクリックすると、データ連結を変更することができます。
テスト用のXMLデータを使用してプレビューする
それでは、フォームのできばえをプレビューして確認してみましょう。そのままプレビューしてもよいのですが、今回は、予め用意しておいたテスト用のXMLデータをマージして表示してみます。
手順
- メニュー［ファイル］- [フォームのプロパティ] を選択します。
- 「フォームのプロパティ」ダイアログで、［プレビュー］タブを選択します。
- ［データファイル］右隣の小さなフォルダマークのアイコンをクリックして、Form¥lab¥forms¥test.xml ファイルを選択します。そして、［OK］ボタンをクリックします。
- エディタ上部の［PDF プレビュー］タブをクリックします。
- しばらくすると、［プレビュー］タブでフォームが表示されます（※7）。
この操作での注目点
テスト用のデータをマージして、プレビューしました。今回のテスト用のデータは、予め用意しておいたものを使用しましたが、「フォームのプロパティ」ダイアログ ー ［プレビュー］タブの［プレビューデータの生成］をクリックすると、テスト用のXMLデータを自動生成することもできます。
（※7）テキストフィールドオブジェクト「郵便番号」、「電話番号」、「FAX番号」で期待されない表示なっています。これは、フィールドオブジェクトの種類とテキストフィールドオブジェクトの表示パターン設定によるものです。この点に関しては、今回の説明では省略します。詳細は、以下のヘルプを参照ください。
［LiveCycle Designer ES の使用］― ［オブジェクトの使用］―［フィールド値の形式設定］
［LiveCycle Designer ES の使用］―［オブジェクトの使用］―［オブジェクトについて］―［オブジェクトのカテゴリ］
フォームスクリプトについて
JavaScript でフォームにロジックを加えていきます。フォームに記述するスクリプトのことを「フォームスクリプト」といいます。
Designer で使用できるフォームスクリプト言語
Designer で使用できるスクリプト言語は、以下の2種類です。それぞれに特徴があり、目的に合わせて使い分けることができます。
- FormCalc：一般的な表計算の機能をモデル化しており、多くの組込み関数を持つ、計算目的に適した言語。シンプルな言語であるが、独特である。
- JavaScript：標準的なJavaScriptであるため、すでに習得済みであれば新たな言語を習得する必要がない。FormCalcと比較すると、組込み関数の数が少ないが、柔軟に記述できるという利点を持つ。
今回は、JavaScriptによる記述で行います。
スクリプトエディタの概要
フォームスクリプトを記述する場所であるスクリプトエディタを紹介します。
前述しましたが、スクリプトエディタは画面上部に位置します。フォームスクリプトを指定したいフォームオブジェクトを選択すると、記述ができるようになります。スクリプトエディタ上部の選択項目について、以下に説明します。
表３ スクリプトエディタ上部の設定
| 項目名 | 説明 |
|---|---|
| 表示： | イベント名を選択します。選択すると、スクリプトエディタ編集領域にイベントが追加され、そのイベントに対応したスクリプトを記述することができます。なお、一つのフォームオブジェクトに対して、複数のイベントを追加することができます。 |
| 言語： | FormCalc または JavaScript で記述するかを設定します。 |
| 実行場所： | フォームスクリプトの実行場所を指定します。通常はクライアント側のAdobe Reader などで実行することになりますので［クライアント］となります。LiveCycle ES サーバー上で実行する必要もある場合は、［サーバ］または［クライアント／サーバ］を選択します。 |
手順・click イベントの処理
フォーム中の「発送先と同じ」チェックボックスをチェックすると、「発注元」に入力した文字列がそのまま「配送先」にコピーされる、という処理を入れてみましょう。
- 画面左側「階層」パレットを開きます。そして、「発送先と同じ」チェックボックスに相当する［sameAsOrderBy］を選択します。
- スクリプトエディタを開きます。そして、スクリプトエディタ上部の設定項目を、以下のように設定します。
表４ スクリプトエディタ上部の設定
設定項目 値 表示： ［click］ を選択 言語： ［JavaScript］ を選択 実行場所： ［クライアント］を選択 - スクリプトエディタの編集画面で、「shipRequest.Main.sameAsOrderBy::click – (JavaScript, client)」という記述の下に以下のスクリプトを加えます。
if(this.rawValue){
deliverTo.companyName.rawValue = orderdBy.companyName.rawValue;
deliverTo.postalCode.rawValue = orderdBy.postalCode.rawValue;
deliverTo.prefectures.rawValue = orderdBy.prefectures.rawValue;
deliverTo.address.rawValue = orderdBy.address.rawValue;
deliverTo.telNo.rawValue = orderdBy.telNo.rawValue;
deliverTo.faxNo.rawValue = orderdBy.faxNo.rawValue;
deliverTo.name.rawValue = orderdBy.name.rawValue;
}else{
deliverTo.companyName.rawValue = "";
deliverTo.postalCode.rawValue = "";
deliverTo.prefectures.rawValue = "";
deliverTo.address.rawValue = "";
deliverTo.telNo.rawValue = "";
deliverTo.faxNo.rawValue = "";
deliverTo.name.rawValue = "";
}
- プレビューの前に、［フォームのプロパティ］―[プレビュー]タブ －［データファイル］で、test.xml から Form¥forms¥test2.xml に変更します。
- プレビューをします。「発送先と同じ」チェックボックスにチェックを入れたり、外したりして、「発注元」の文字列が「発注先」にコピーされたり、削除されたりすることを確認してください。
この操作の注目点
このスクリプトに解説は必要ないでしょう。なぜならば、なじみ深いJavaScriptそのままだからです。このように既知のJavaScriptのスキルで、フォームスクリプトを記述することができます。
手順・calculateイベントの処理
次に計算イベントの処理を記述してみましょう。
今回のような発注書や見積書などで、「単価と数量を入力すると小計が計算される」というものと、「小計列の合計値が計算される」というものは、フォームに限らず一般的な表計算でもよく行われる話ですが、これを実装してみたいと思います。
まずは、対象の表（テーブル）を追加し、いくつかの変更を加えておいてから、フォームスクリプトを記述します。
- 「データ表示」パレットを開きます。そして、［orders］要素（[order]ではありません）をレイアウトエディタにドラック＆ドロップし、図24のようにレイアウトを変更してください。（※８）
（※8）セルの背景色は、「境界線」パレットの［背景の塗りつぶし］で変更します。フォント関連の設定は、「フォント」パレットで変更します。なお、非表示のパレットを表示するには、メニュー［ウインドウ］から表示したいパレット名を選択します。
- 次にテーブルに表示するデフォルトの行数を設定します。
「階層」パレットから［order］を選択します。そして、「オブジェクト／連結」パレットを開き、「各データアイテムについて行を繰り返す」の［初期値：］のチェックボックスにチェックを入れ、”6”と入力します。 - ここで一度プレビューします。ヘッダー行含め7行のテーブルが表示されることを確認してください。
- ［デザインビュー］タブをクリックし、編集画面に戻ります。
- 次にフッタ行を追加し、編集します。
「階層」パレットから［orders］を右クリックします。表示されるコンテキストメニューから、［挿入］-［下に行を挿入］を選択します。 - 「階層」パレットに “order[1]” が追加されたことを確認します。（また、既存の [order] が “order[0]” という名前に変更されます）
- 「階層」パレットの “order[1]” の名前部分をクリックし、”footer” と名称変更します。
- 「階層」パレットで［footer］を選択してから、「オブジェクト／行」パレットを開きます。そして、「種類：」から［フッタ行］を選択します。
- 「階層」パレットで［footer］配下の［(名称未設定テキスト)］の上から4つ分を Shiftキーを押下しながら同時選択します。そして、右クリックし、表示されるコンテキストメニューから［セルの結合］を選択します。
- 結合されたセルを図27のレイアウトになるよう変更します。
- ここでプレビューをして、フッタ行を含めたテーブルができていることを確認します。
- では、次に、小計の合計を計算するフォームスクリプトを記述します。
「階層」パレットの ［order］- ［subtotal］を選択し、スクリプトエディタを開きます。 - スクリプトエディタ上部の設定項目を、以下のように設定します。
表５ スクリプトエディタの設定
設定項目 値 表示： ［calculate］ を選択 言語： ［JavaScript］ を選択 実行場所： ［クライアント］を選択 - スクリプトエディタの編集画面で、「shipRequest.Main.orders.order.subtotal::calculate - (JavaScript, client)」という記述の下に以下のスクリプトを加えます。
this.rawValue = itemPrice.rawValue * quantity.rawValue
- プレビューして動作を確認します。「単価」列と「数量」列に半角で数値を入力して、［TAB］キーかマウスクリックでセルを選択します。全ての行で自動的に小計の計算が実行されます。
- 同様に小計の合計値を計算するフォームスクリプトを追加します。
デザインビューに戻ります。そして、「階層」パレットの［orders］- [footer] の 2つめの［（名称未設定テキスト）］を選択し、名前を[total]に変更します。 - 「オブジェクト／セル」パレットの「種類：」で［数値フィールド］を選択します。
- その状態のままスクリプトエディタを開き、スクリプトエディタ上部の設定項目を、以下のように設定します。
表６ スクリプトエディタの設定
設定項目 値 表示： ［calculate］ を選択 言語： ［JavaScript］ を選択 実行場所： ［クライアント］を選択 - スクリプトエディタの編集画面で、「shipRequest.Main.orders.fotter.total::calculate - (JavaScript, client)」という記述の下に以下のスクリプトを加えます。
var row = xfa.resolveNodes("shipRequest.Main.orders.order[*].subtotal");
var total = 0;
for(var i = 0; i < row.length; i++){
total += row.item(i).rawValue;
}
this.rawValue = total;
- プレビューして動作を確認します。
この操作の注目点
ここで注目したいのは、フィールドオブジェクトの「絶対参照」と「相対参照」についてです。
「階層」パレットを見ながら考えてみましょう。
たとえば、上記の図で［sameAsOrderBy］を基準（つまり、スクリプトを記述するところ）とすると、それが thisになります。そこから、[orderBy] 配下の[companyName]を参照すると以下のようになります。
- 相対参照
this.orderBy.companeyName
parent キーワードを使用すると、親階層を指定することができます。
- 絶対参照
xfa.form.shipRequest.Main.orderBy.companyName
先頭が必ず xfa.form となります。そして、「階層」パレットの階層をルートからたどる参照となります。
上記が基本ですが、手順⑲では少し特殊です。
var row = xfa.resolveNodes("shipRequest.orders.order[*].subtotal");
まず、テーブル行のような「繰り返し」のオブジェクトを参照するときは、order[0], order[1], order[2] ･･･のようにインデックス番号を使用してアクセスします（[*] は、全ての行の参照になります）。また、JavaScript の場合、このような「繰り返し」オブジェクトを参照する場合は、
shipRequest.Main.orders.order[*].subtotal
のように、単純に参照のみ記述をしてはダメで、
xfa.resolveNodes("shipRequest.Main.orders.order[*].subtotal");
とメソッドを使用して参照する必要があります。
「JavaScriptで、繰り返しのオブジェクトを参照するとき」の特殊ケースとして覚えておいてください。
サブフォーム
それでは、ダイナミックフォームに欠かせない要素である 「サブフォーム」 についてご紹介します。
まずは、これまでのチュートリアルで作成してきた発注書フォームから離れて、サブフォームの基本原理への理解を深めるための簡単なサンプルを作りながら進めていきます。
サブフォームとは
サブフォームは、フォームオブジェクトのまとまりをつくるものです。
- 単純なオブジェクトのグループではありません（単純なフォームオブジェクトのグループをつくるためであれば、［グループ化］というのがあります）。動的なレイアウト変化の単位と考えます。
- サブフォームは、入れ子にすることができます。
サブフォームの作り方
サブフォームの作り方は、2つの方法があります。
- サブフォームに含めたい既存のフォームオブジェクトを選択して右クリックし、表示されるコンテキストメニューから［サブフォームに含める］を選択する方法。
- 「オブジェクトライブラリ」パレットからエディタに配置して、先にサブフォーム領域を作ってしまう方法。
手順・サブフォームの作り方
- 画面左上［新規］アイコンをクリックし、［Acrobat ダイナミック XML フォーム（*.pdf）］で保存してください。（ファイル名は、デフォルトで構いません。）
この状態で、「階層」パレットを見ると「（名称未設定 サブフォーム）（ページ１）」が作成されていることがわかります。
- 「（名称未設定 サブフォーム）（ページ１）」を、”Main”に名称変更してください。
- 「オブジェクトライブラリ」パレットから、図33のようにいくつかボタンオブジェクトをドラック＆ドロップで配置します。
- 最初のボタン群を全て選択してから右クリックし、表示されたコンテキストメニューから［サブフォームに含める］を選択します。
- 「階層」パレットを確認します。そして、今作成したサブフォーム[（名称未設定 サブフォーム）]を、”Sub1”と名称変更します。
サブフォームの重要ポイント
さて、これからダイナミックフォームにおけるサブフォームの取り扱いに関して、重要な2つのポイントを示します。
- フローレイアウトが設定されたサブフォームは、その中のオブジェクトの数によってレイアウトが可変する。
- サブフォームに連結するデータが配列状のデータなら、それに従ってサブフォームを繰り返す。
- フローレイアウトについて
サブフォームを選択して、「オブジェクト／サブフォーム」パレットの「コンテンツ：」で設定します。
デフォルトでは、［配置済み］となっており、これは、サブフォーム内に配置したオブジェクトの絶対位置を保つという設定です。
これを［フローレイアウト］に設定することで、サブフォーム中のフォームオブジェクトの増減に合わせて動的にレイアウトが変化します。さらに、サブフォーム中のフォームオブジェクトが配置される方向を「フローの方向」で設定できます。
- サブフォームに配列状のデータを連結した場合
たとえば、同じ要素名で繰り返されているXMLのような「配列状態のデータ」をサブフォームに連結すると、そのデータの分だけサブフォームは繰り返されます。
手順・フローレイアウトの確認
それでは、先程のフォームファイルの続きで、フローレイアウトの確認をしてみましょう。
- 残りのボタンオブジェクト群をサブフォーム化し、それぞれ”Sub2”, “Sub3”と名称変更してください。
- ［Sub3］を選択してから、「オブジェクト／サブフォーム」パレットの「コンテンツ：」で［フローレイアウト］を選択します。「フローの方向：」が［上から下へ］となっているので、縦方向にボタンオブジェクト間の余白がなくなった状態で並べられます。
- 少し操作が難しいかもしれませんが、［Sub3］内の下部にボタンオブジェクトをドラック＆ドロップで追加します。サブフォームが下方向に拡大します。
- もう一度［Sub3］を選択してから、「フローの方向：」で、［欧文テキスト］を選択します。そして、横方向にサブフォームを拡大します。
するとボタンオブジェクトが「左から右へフローして、右端で折り返し」の配置になります。
- さらに［Main］サブフォームにおいて、「オブジェクト／サブフォーム」パレットで、「コンテンツ：」を［フローレイアウト］に設定します。
手順・サブフォームのデータ連結
サブフォームに対して、予め用意しておいたXMLデータ（XMLスキーマではありません）を連結してみましょう。
- 「階層」パレットで、［Sub1］および［Sub3］を削除します（対象を右クリックし、表示されるコンテキストメニューから［削除］を選択します）。
- Form¥lab¥forms¥subFormText.xml をテキストエディタで開いて確認します。これは、サブフォームに連結するデータです。<order>要素が繰り返されていることがわかります。
- 「データ表示」パレットを表示します。「新規データ接続」で、［サンプルXMLデータ］を選択し、次の画面の「サンプルXMLデータファイルの選択：」で、Form¥lab¥forms¥subFormText.xmlを選択します。
- 「階層」パレットで、［Sub2］を選択してから、「オブジェクト／連結」パレットを開きます。
- 「デフォルトの連結（開く、保存、送信）：」右側の小さなボタンをクリックして、図40のように選択します。
- さらに「各データアイテムについてサブフォームを繰り返す」にチェックを入れます。
- 「フォームのプロパティ」ダイアログの［プレビュー］タブの「データファイル」で、Form¥lab¥forms¥subFormText.xmlを指定します。
- フォームをプレビューします。
XMLには繰り返し要素が5つありましたが、サブフォームがその分だけ繰り返されます。
この操作での注目点
手順②でデータ接続したsubFormText.xmlは、<order>要素で「繰り返し」になっています。この「繰り返し要素」を「サブフォームにデータ連結」すると、「繰り返し要素の数だけ、サブフォームを繰り返し」ます。
なお、今回は、単純に上記の原理を確認するだけにしたかったので、XML要素の値をデータ連結し、表示することを行いませんでした。しかし、もちろんこれは可能です。
テーブル（表）の取り扱いについて
テーブルの行はサブフォーム
先の手順で作成した発注書フォームに話を戻します。ユーザーが［行を追加］というボタンをクリックすると行が増えていき、動的にテーブルのレイアウトが変更するようにします。
恐らくこの「ダイナミックレイアウトのテーブルの作成」が、はじめてのフォーム作成で悩みがちなところだと思います。しかし、以下の点を把握すれば大丈夫です。
- 動的にレイアウトが変化するテーブル全体を「フローするサブフォーム」と考える。
- 「テーブルの行は繰り返されるサブフォーム」と考える。
つまり、前述の考え方をそのままテーブル行に適用しながら進めていけばよいのです。
手順
- テーブルの左下周辺にボタンを追加し、ボタンのキャプションを「行を追加」、「階層」パレットでの名称を”addRowBtn”に変更します。
- 「階層」パレットで、[Ctrl]キーを押下しながら、[orders] と［addRowBtn］を同時選択します。そして、右クリックし、表示されるコンテキストメニューから［サブフォームに含める］を選択します。
- 「階層」パレットのサブフォーム名を、”OrderTable”に変更します。
- ［orderTable］をフローレイアウトにします。
- ［addRowBtn］を選択し、スクリプトエディタでclickイベント、JavaScriptで、以下の処理を記述します。
this.parent.orders.order.instanceManager.addInstance();
- フォームをプレビューします。
［行を追加］ボタンをクリックすると、テーブルの行が追加されていきますが、ページ下部まで行くとそれ以降行が追加されません。これは、ページ全体をまとめるMainサブフォームがフローレイアウトではないからです。
しかし、Mainサブフォームをフローレイアウトにすると、その中の他のフォームオブジェクトもフロー配置されることになるので、レイアウトが大きく崩れてしまいます。そこで、今回は、orderTableサブフォーム以外の画面上部に位置するフォームオブジェクトをまとめてサブフォーム化しておくことで、フォームレイアウトの崩れを防ぎたいと思います。 - 「階層」パレットで［Shift］キーを押下しながら、［CompanyInfo］から［deliverTo］を複数選択してから、サブフォーム化します。
- Mainサブフォームをフローレイアウトにします。（※9）
（※9）この時点で、Mainサブフォームのサイズを少し変更することで見た目が良くなるかもしれません。
- OrderTableサブフォームを選択し、「オブジェクト／サブフォーム」パレットで「コンテンツ内で改ページを許可する」にチェックを入れます。
- [footer]を選択し、「オブジェクト／ページ編集」パレットの「最終ページにフッタ行を含む」にチェックを入れます。
- フォームをプレビューします。
これでページ下部まで行が到達したときに、新規にページが追加され、さらに行が追加されていく状態ができました。今回は、作り込んでいないため、次ページ以降も同じマスターページが自動的に適用され少々見た目がよくありませんが、ご了承ください。
まとめ
今回のチュートリアルでは、「XMLスキーマベースのフォーム作成」、「JavaScriptによるフォームスクリプト」、「サブフォームの取り扱い」にフォーカスして、LiveCycle ES プロセスで利用するダイナミックフォーム作成の基礎を紹介しました。
- フォームの目的や動作でフォームファイルのカテゴリの分類と、ファイル形式の種類があります。
- 「階層」はフォームオブジェクトの階層を示します。
- データ接続でフォームのデータ構造が決定されます。また、データ連結によりデータソースとフォームオブジェクトの関連付けを行います。
- W3C XML Schema 規約に則り、XMLのスキーマファイルを予め作成しておく必要があります。
- プレビュー時にのテスト用XMLを読み込ませて表示できます。
- JavaScriptによるフォームスクリプトは、一般的なJavaScriptプログラミングの知識で作成することができます。
- サブフォームは、フローレイアウトと配列データで繰り返し表示する特性があります。
- テーブル全体は、「フローするサブフォーム」、テーブルの行は「繰り返されるサブフォーム」と考えます。
