Oracle ADFを使用したレスポンシブWebアプリケーションの構築

目的

このチュートリアルでは、従業員に関する情報を表示するWebアプリケーションを構築し、Oracle Alta UI設計システムの主要な概念の一部を利用した豊富なユーザー・インタフェースの開発に取り組みます。Oracle Alta UIの詳細については、http://bit.ly/oraclealtaを参照してください。

アプリケーションの開発には、Oracle JDeveloperとOracle ADFを利用します。Oracle ADFはオラクルのアプリケーション開発フレームワークです。Javaアプリケーションの開発を簡素化し、アプリケーション開発への視覚的、宣言的アプローチの実現に重点を置いています。

チュートリアルの間、多くの手動コードが表示されますが、作成する必要のあるコードはごくわずかです。ただし、ソース・タブをいつでもクリックして、アプリケーションの実際のコードを表示し、変更することができます。

チュートリアル終了時のアプリケーションは、次のようになります。

前提条件

このチュートリアルを完了するには、以下が必要です。

1：Oracle JDeveloper 12.2.1にアクセスできるか、Oracle JDeveloper 12.2.1をインストール済みであること。この製品は、Oracle Technology Networkからダウンロードできます。任意のディレクトリにファイルをインストールしてください。このチュートリアルでは、このディレクトリをJDEVELOPER_HOMEと呼びます。

2：AltaLab.zipをダウンロードして、ローカル・ドライブに保存します。

必要なファイル	ダウンロード・ファイル
作成するアプリケーションでは、部門と従業員に関する情報を表示します。「Dowload」リンクをクリックし、altalab.zipファイルをローカル・ハード・ドライブに保存します。次に、ファイルを解凍して場所のメモをとります。

データ・ソースへのアクセス権を作成する部分は今回省略し、すでに作成されたデータ・セットを使用します。データを公開するレイヤーの作成方法については、こちらのチュートリアル「Oracle ADF開発の概要」を実行することをお勧めします。

今回は、既存のプロジェクトだけを開きます。

1. 「Start」→「Programs」→「JDEVELOPER_HOME」→「OracleHome」→「Oracle JDeveloper Studio」→「Oracle JDeveloper Studio」を選択して、JDeveloperを起動します。

   以前のバージョンのJDeveloperからプリファレンスをインポートするかどうかを確認するダイアログ・ボックスが開いたら、「No」をクリックします。

2. Select Roleダイアログで、「Studio Developer (All Features)」を選択して、「OK」をクリックします。

   

   JDeveloper環境では、ユーザーのロールに基づくシェイピング機能を使用して環境を調整できます。具体的には、メニュー、プリファレンス、新規ギャラリ、およびダイアログ上の個々のフィールドから、それぞれのロールで不要な項目が削除されます。

   また、シェイピング機能を使用して、ツール内のダイアログ・フィールドのデフォルト値をコントロールすることもできます。JDeveloperを最初に起動する場合、ロールの選択を指示されます。このロールはJDeveloperの使用方法を表しています。"Java Developer"、"Database Developer"、"Customization Developer"のロールのいずれを選択するかによって、まったく異なる作業環境が得られます。

3. 以前のバージョンのJDeveloperからプリファレンスをインポートするかどうかを確認するダイアログ・ボックスが開いたら、「No」をクリックします。

   

4. Track Usageポップアップで「OK」をクリックします。

   

5. ロードが完了したら、JDeveloper IDEが表示されます。JDeveloperを初めて開いた場合、Start Pageが表示されます。後でStart Pageを再表示する場合は、「Help」→「Start Page」を選択します。

   JDeveloperについて学習するためのさまざまなオプションが用意されています。これらのオプションをいくつか確認したら、タブ上の「X」をクリックしてStart Pageを閉じます（タブにマウスを合わせると、「X」が表示されます）。

   

6. JDeveloperの内側で「Open Application…」を選択します。

   

7. AltaLab.zipファイルを解凍した場所に移動し、AltaLab.jwsファイルを選択します。

   

8. アプリケーションは、2つのプロジェクトで構成されています。Modelプロジェクトにはデータ・ソースが含まれます。ViewControllerプロジェクトでは、ユーザー・インタフェースを作成します。

   「ViewController」プロジェクトを右クリックして、「New」→「Page」を選択します。

   

   File Nameを「dashboard.jsf」に設定します。

   「Reference ADF Page Template」を選択してから、「Tablet First Template」を選択します。

   「OK」をクリックします。

   

9. JDeveloperのビジュアル・ページ・デザイナが表示されます。ページ・テンプレートがあるので、そのページ上で項目をドラッグして配置することによりページを設計できます。

   ページを設計しながら、JDeveloper IDEの主な領域に慣れてください。

   

10. 左側のStructureペインでaf:pageTemplateが選択されていることを確認し、テンプレートのプロパティに注目してください。

    

    endWidthプロパティを「0px」に変更します。showAppNavbarプロパティの値を「false」に変更します。

    

このセクションでは、従業員のリストをページに追加します。

1. Application Navigator領域の「Data Controls」パレット・アコーディオンを開き、「HRService」コントロールを開いて、「allEmployees」データ・コントロールを見つけて選択します。これは、この会社で働く従業員のコレクションです。

   

2. ビジュアル・エディタ領域のページの開始領域（またはStructureペインのf:facet-startエントリ）にこのデータ・コントロールをドラッグします。

   ポップアップ・メニューで「Table/List View」→「ADF List View…」オプションを選択します。

   

3. ウィザードのステップ1の「Panel Grid Layout」を選択し、「Next」をクリックします。

   

4. ステップ2で、Rowsを「1」に変更し、「Next」をクリックします。

   

5. ステップ3で、もう一度「Next」をクリックします。

   ステップ4で、Value Binding列の「firstName」と「lastName」を選択して、2つの列の値をバインディングします。「Finish」をクリックします。

   

6. これにより、従業員のリストがページに作成されます。ユーザーが、リストから従業員を選択できるようにします。それには、Structureペインでaf:listViewが選択されていて、プロパティ・インスペクタでSelectionプロパティがsingleに設定されていることを確認します。

   

7. プロパティの最後までスクロールしてSelectionListenerプロパティを見つけ、値フィールドの右に表示されている小さい青いホイールをクリックします。

   

8. ポップアップ・メニューから「Method Expression Builder…」を選択します。

   ツリーを展開して、「ADF Bindings」→「bindings」→「allEmployees」→「treeModel」→「makeCurrent」を選択し、「OK」をクリックします。

   

   （または、値#{bindings.allEmployees.treeModel.makeCurrent}をselectionListenerプロパティの値に入力することもできます）

   

9. ツールバーの「Save All」ボタンをクリックし、ページ・デザイナ内側を右クリックしてコンテキスト・メニューを表示し、「Run」オプション（緑の矢印）をクリックします。.

   

10. これでプロジェクトがパッケージ化されます。WebLogicを起動し、アプリケーションをWebLogicに展開します。数分後、ブラウザが開いてページが表示されます。

    従業員のリストが表示され、どの従業員でも選択できます。リストの最後には“Load More Items”オプションもあり、さらに多くの従業員の詳細をリストに追加できます。これは、ブラウザとサーバー間のトラフィックの量を最適化するADFです。

    

次に、ブラウザの幅の変更に対応できるレスポンシブ領域をページに作成します。レスポンシブ領域を作成すると、たとえば、タブレットの使用時に横モードと縦モードの両方できれいに表示される単一ページを作成できます。

ブラウザを開いたままにして、JDeveloperに戻ります。

ブラウザ・サイズの変更時にレスポンシブ動作を自動化するMasonry Layoutコンポーネントを使用します。

1. 「Structure」ペインでテンプレートの「f:facet-center」領域を選択し、右側のコンポーネント・パレットから「ADF Faces」アコーディオンを開いて「Masonry Layout」コンポーネントをクリックします。

   af:masonryLayoutコンポーネントがcenterファセットに追加されます。

   

   コンポーネント・パレットからビジュアル・デザイナまたはStructureペインにドラッグ・アンド・ドロップすることもできます。

   

2. 次に、masonryLayoutを入れる4つのセクションを定義します。

   コンポーネント・パレットの「Layout」セクションを展開し、Panel Group Layoutコンポーネントを見つけます。次に、このコンポーネントをStructureペインのaf:masonryLayoutにドラッグ・アンド・ドロップします。

   

   この手順をあと3回繰り返し、最終的にはaf:masonryLayoutに4つのaf:panelGroupLayoutコンポーネントが含まれるようにします。

3. [Shift]キーを押しながら4つすべてのコンポーネントを選択し、そのプロパティを確認します。

   次に、Layoutプロパティを「vertical」に設定します。

   

4. 次に、StyleClassプロパティを見つけて「AFMasonryTileSize2x1 tileStyle」に設定します。

   

5. 「Save All」をクリックしてから、Webブラウザに切り替えてページを再ロードします。

   ページの幅を操作して、ブラウザ・ウィンドウが小さくなると、領域がどのように再調整されるか確認します。

   

6. JDeveloperに戻り、2つの下位af:panelGroupLayoutコンポーネントを選択し、そのstyleClassを「2x1」から「2x2」に変更します。すると、これらのコンポーネントのサイズが大きくなります。

   

7. 「Save All」をクリックし、ブラウザのページを再ロードして変更を確認します。

   ブラウザ・ウィンドウを閉じ、JDeveloperのログ・ウィンドウを上方向にスクロールしてアプリケーションのURLを見つけます。そのURLをクリックすると、アプリケーションがブラウザで開かれます。

   

このセクションでは、ページの最初のボックスにデータを設定して、リストから選択した従業員のイメージ名と役割を表示します。panelGridLayoutを使ってボックスを2つのセクションに分割します。

1. まず、Structureペイン（またはビジュアル・エディタ）で「af:panelGroupLayout」を選択し、コンポーネント・パレットのlayoutで「Panel Grid Layout」を選択します。

   

2. 2つの列と2つの行の設定を維持して、「Next」をクリックします。

   

3. ウィザードの2つ目の手順では、「Spans」タブに切り替えて、gc1,1からgc2,1へのスパンを定義します。

   「Finish」をクリックします。

   

4. 右上の「gridCell」を選択し、Data Controlsパレットから「allEmployees」コレクションをそのgridCellにドラッグし、「Create」→「ADF Form…」を選択します。

   

5. Create Formダイアログで「Read-Only Form」チェック・ボックスを選択し、赤いXを使用してfirstName、lastName、title、email以外のすべてのフィールドを削除します（[Shift]キーを使って選択すると、すべてのフィールドを選択できます）。

   「OK」をクリックします。

   

6. データ・コントロール・パレットで「allEmployees」ノードを開き、image属性を見つけます。最初のgridCellにドラッグし、「Text」→「ADF Output Text」を選択します。

   

7. Structureペインの新しいフィールドを選択すると同時に、フィールド#{bindings.image.inputValue}のValueプロパティ内側に値をコピーします。

   

8. 次に、このテキスト・フィールドをイメージ・コンポーネントに変換します。

   「af:outputText」を右クリックし、ポップアップ・メニューから「Convert To…」を選択します。

   「Image」を選択して「OK」をクリックしてから、再び「OK」をクリックして値の削除を確定します。

   

9. イメージのソースを、イメージ・ディレクトリへのパスでフィールドからコピーした値に設定します。

   イメージ・コンポーネントのSourceプロパティを「resources/images/people/#{bindings.image.inputValue}」に設定します。

   

10. 「Save All」をクリックしてから「Rebuild」ボタンをクリックし、ブラウザでページを再ロードします。

    リストでさまざまな従業員を選択し、ボックスで詳細の変更を確認します。

    

このセクションでは、一部のデータ可視化をページに追加します。一枚の絵は1000語に匹敵する - そしてグラフは、Oracle Alta UIでデータを表示する優れた方法の1つです。

1. ここでは、2つ目のaf:panelGroupLayout（ページの2つ目のボックス）を操作するので、Structureペインまたはビジュアル・ページ・エディタでこのコンポーネントを選択します。

   

2. データ・コントロール・パレットで「allEmployees」データ・コントロールを開き、下にスクロールしてperfHistoryコレクションを見つけて選択し、2つ目のaf:panelGroupLayoutにドラッグして「Chart…」を選択します。

   

   ポップアップで「Line」タイプのグラフと2つ目の「Quick Start Layout」を選択します。

   「OK」をクリックします。

   

3. 折れ線グラフ作成ダイアログが表示されるので、グラフに表示するデータを定義します。

   「Lines」には「rating」フィールドを使用し、「X Axis」には「effective」フィールドを使用します。これらを適切な位置にドラッグするか、適切な位置で選択します。

   「OK」をクリックします。

   

4. Structureペインでdvt:lineChartが選択されていることを確認し、PropertiesウィンドウでAppearance - TimeAxisTypeプロパティを「enabled」に設定します。

   

5. Titleプロパティまで下にスクロールして「Ratings」に設定し、InlineStyleフィールドを見つけて「width:300px; height:150px;」と入力します。これでグラフのサイズがボックス内に収まります。

   

6. 「Save All」と「Rebuild」を選択してプロジェクトを保存、再構築し、ブラウザ・ウィンドウを再ロードします。

   

7. 次に、従業員の給与明細を示すグラフを追加します。

   ここでは、ページ上の3つ目のaf:panelGroupLayoutを使用します。

   pieCompデータ・コントロールを見つけて3つ目の「panelGroupLayout」にドラッグし、「Chart…」としてドロップします。

   

   「Pie」を選択し、「OK」をクリックします。

   

8. Pieドロップダウンリストで「itemValue」を選択し、itemLevelを「Slices」フィールドにドロップします。

   

9. 円グラフをドーナツチャートに変えるには、dvt:pieChartのプロパティのInnerRadiusを「0.5」に設定し、styleClassを「chartStyle」に設定し、「Title」を「Compensation」に設定します。

   

10. 「Save All」と「Rebuild」を選択してプロジェクトを保存、再構築し、ブラウザ・ウィンドウを再ロードします。

    

11. 次に、NBoxという特別なデータ可視化を追加します。NBoxを使用すると、複数の軸にまたがってデータ・ポイントを表示できます。従業員評価における同僚たちの将来性と評価がどのように査定されているのかを確認します。このコンポーネントを配置するため、3つ目のボックスを小さくし、4つ目のボックスを大きくします。

    3つ目の「af:panelGroupLayout」を選択し、スタイル・クラスを「AFMasonryTileSize1x2 tileStyle」に設定します。

    

    「pieChart」を選択し、InlineStyleプロパティで値を「width:150px; height:300px;」に変更します。

    

     

12. 4つ目のaf:panelGroupLayoutにはより大きいスペースが必要なため、「af:panelGroupLayout」をクリックし、styleClassを「AFMasonryTileSize3x2 tileStyle」に更新します。

    

13. colleaguesコレクションを見つけて4つ目の「af:panelGroupLayout」にドラッグし、「NBox…」を選択します。

    NBoxを定義する最初のセクションでは、ボックスの軸と値を定義する必要があります。RowsとColumnsの両方に「3」と入力し、行と列のタイトルにそれぞれ「Potential」、「Rating」と入力します。次に、左下隅をクリックし、Row1フィールドとColumn1フィールドに「low」と入力します。

    

14. 次に、右側の列をクリックし、空の列の値に「med」と入力します。

    それから、一番右にある列をクリックし、列の値として「high」と入力します。

    

15. 今度は、行に値を入力します。「middle row」をクリックし、Rowの値フィールドに「med」と入力してから、「top row」をクリックして行の値フィールドに「high」と入力します。

    ダイアログは、次のイメージのようになります。次に、「Next」をクリックしてウィザードの次の手順に進みます。

    

16. ダイアログの次の手順で、Rowには「nboxPotential」を、Columnには「nboxRating」を選択します。Labelには「empName」を選択します。

    「icon tab」をクリックし、ラジオ・ボタンを「Shape」に設定します。

    「green +」記号をクリックして、グループ化ルールを追加します。

    Group by Value列とLegend列の両方で「potential」を選択します。Iconはデフォルトの「color」の設定のままにします。

    「green +」記号をクリックして、さらにグループ化ルールを追加します。

    Group by Value列とLegend列の両方で「rating」を選択し、Iconを「Shape」に設定します。

    「Finish」をクリックします。

    

17. af:nBoxのInlineStyleプロパティを「width:500px;height:300px;」に設定します。

    

18. 「Save All」と「Rebuild」を選択してプロジェクトを保存、再構築し、ブラウザ・ウィンドウでページを再ロードします。