テックブログ

Visualforceページとカスタムコンポーネントによるモーダルダイアログの実装

VBアプリケーションなどのローカルアプリケーションでは、モーダルダイアログを用いてエラーメッセージを表示したり、モーダルウインドウで選択した情報をメインウインドウに反映したりといったユーザーインターフェイスが度々用いられます。

これらをWebアプリケーションで実現しようとした場合、window.showModalDialogメソッドを使用する方法もありますが、HTML、CSS、Javascriptを組み合わせたモーダルダイアログを用いる方法が非常に有効だと考えます。(ちなみに、window.showModalDialogは、Chromeだとダイアログがモーダルになりません)

そこで今回は、Force.com上でjQueryUIを用いたモーダルダイアログをカスタムコンポーネントとして実装する方法をご紹介します。ダイアログとコントローラクラスをカスタムコンポーネントとして共通化し、メインとなる画面のロジックとダイアログ内のロジックを切り分け、汎用的に使用できるようにしたいと思います。

サンプルの概要は下記の通りです。

ダイアログを用いた掛け算

概要:メインとなる画面に被乗数を入力し、モーダルダイアログに乗数を入力して計算を行い、計算結果をメインの画面に戻す

今回使用するファイルの一覧

  • CalcDTO.cls – ダイアログの呼び出し元で入力された値と、ダイアログの計算結果を受け渡しするためのDTOクラス
  • Parent_Page.page – ダイアログの呼び出し元となる画面のVisualforceページ
  • Parent_Ctrl.cls – ダイアログの呼び出し元となる画面のコントローラクラス
  • Dialog_Comp.component - ダイアログのカスタムコンポーネント
  • Dialog_Ctrl.cls - ダイアログのカスタムコンポーネントで使用するコントローラクラス

処理の流れ

  1. 入力項目に掛けられる値(被乗数)を入力
  2. Visualforceページ内の[GO]ボタンのアクションとして、コントローラクラスのメソッドを呼び出す
  3. モーダルダイアログの表示(ダイアログコンポーネントエリアを再描画)
  4. ダイアログコンポーネント内の入力項目に掛ける値(乗数)を入力
  5. ダイアログコンポーネント内の[計算]ボタンのアクションとして、コントローラクラスのメソッドを呼び出す
  6. 「OK」ボタンでダイアログのクローズとメインページの復帰(計算結果エリアを再描画)

Visualforceページとカスタムコンポーネント間の値の受け渡しや、actionStatus、actionFunctionを相互に呼び出す方法を確認しながら、掛け算ダイアログのサンプルを作成していきたいと思います。

jQuery UIの登録
まず、jQueryをForce.com 上に静的リソースとして登録します。jQuery UIは、下記URLからダウンロード可能です。

http://jqueryui.com/download

ダウンロードしたファイル(jquery-ui-1.8.16.custom.zip)を展開し、jsフォルダ、cssフォルダを確認してください。さらに、コントローラクラスのメソッド呼び出し中にローディングアイコンを表示したいので、フリー素材などから用意して”loading.gif”という名前でimagesフォルダ内に格納してください。

  • js
  • css
  • images

の3フォルダをzip 形式でアーカイブし、静的リソースに "jQueryUI" という名前で登録します。

メインページの作成
今回の掛け算ダイアログの呼び出し元として、被乗数を入力し、ダイアログでの計算結果を表示する画面をForce.com 上に作成します。まず最初に、ダイアログの呼び出し元となるコントローラクラスとダイアログのカスタムコンポーネントで使用するコントローラクラスの間で入力値(被乗数)と計算結果を受け渡しするため、DTOクラスを作成します。

CalcDTO.cls

メイン画面の入力値(被乗数)を”param”、ダイアログでの計算結果を”answer”として定義し、初期化します。

Parent_Ctrl.cls

Parent_Page.page

Parent_Page.pageでは、掛け算の被乗数を入力し、[GO]ボタンでc:Dialog_Compを含めたエリアを再描画し、被乗数をパラメータとしたカスタムコンポーネントを呼び出す形になります。
また、[GO]ボタンのonClickで、ダイアログが呼び出されると同時に、コンポーネント内のactionStatus(loadComponent)を呼び出し、ローディングアイコンを表示するようにしています。
※Force.com上では、「$」が使用済みのため、衝突を回避するために”noConfrict”を実行しておきます。

ダイアログの作成
被乗数を受取り、ダイアログ内に入力された乗数との計算結果を表示するカスタムコンポーネントを Force.com 上に作成します。

Dialog_Ctrl.cls

Dialog_Comp.component

Dialog_Comp.componentでは、掛け算の乗数を入力し、[計算]ボタンでコントローラクラスのメソッド(culc)が呼び出されます。
culcメソッドでは、ダイアログに入力された乗数とパラメータとして受け取った被乗数を使用して掛け算を実行し、計算結果をCalcDTOの”answer”にセットします。同時に、ダイアログ内のPageBlock(b_comp)を再描画し、計算結果を表示します。

Parent_Page.pageで作成したダイアログの[確定]ボタンでダイアログを閉じると同時に、JavascriptのrefreshParent()が呼び出されます。Javascriptから、Visualfoceページ内のactionFunctionで指定された名称(name="refreshParent")をJavascript関数として呼び出すことで、コントローラクラスのメソッドにアクセスすることができます。
refreshParentメソッドを実行すると同時に、メインページ内のStatus(loadParent)を呼び出し、ローディングアイコンを表示するようにしています。
最後に、計算結果エリアを再描画して、処理は終了です。

Force.comで標準機能として提供されている検索ポップアップでは実現できない複雑な検索が必要になったときなどにもダイアログは非常に有効かと思います。是非ご活用ください。

 

Posted by Yoshida Tokuji (Appirio Japan)

 

 

About Appirio

Appirio

アピリオはクラウドコンサルティングのグローバル企業で、ITサービスを提供するウィプロの一員です。お客様の次世代のワーカー・エクスペリエンスおよびカスタマー・エクスペリエンスの実現を、最新のクラウドテクノロジーを活用して支援します。アピリオの自由な発想を持つコンサルタントは、実用的な戦略の立案、迅速な成果の提供、そして消費者のエクスペリエンス主導で急速に変化する今日のビジネス状況において企業がいかに早く適応できるかを支援することで、比類のない顧客価値を提供します。これは、世界最大級のクラウドソーシングコミュニティであるTopcoderのパワーと、数千からなるプリビルトされたソリューションを駆使することで実現します。アピリオはYP, Cardinal Health, Coca-Cola, eBay, Facebook, Home Depot, Sony PlayStation, Moen, IBMなどの世界最大ブランドから信頼されるパートナーです。

Appirio