このセクションでは、スタータ・アプリケーションを開いて、作成予定の追加ページに使用するページ・テンプレートを作成します。ページ・テンプレートを作成するには、以下の手順を実行します。
ページ・テンプレートを使用して、ページ・レイアウト全体(ページの特定の属性値を含む)を定義できます。詳細表示
-
Applicationsウィンドウで「Open Application」をクリックします。
-
Open Application(s)ダイアログで、アプリケーションの解凍先フォルダを見つけて「ADF_Faces_Tutorial.jws」を選択します。「Open」をクリックします。
-
Applicationsウィンドウで、「View Controller」プロジェクトを右クリックして、コンテキスト・メニューから「New」→「ADF Page Template」を選択します。
-
Create ADF Page Templateダイアログで、テンプレート・ファイル名にstoretemplate.jsfと入力します。「Next」をクリックします。
「Next」を再度クリックして、空のテンプレートからテンプレートを作成します。 -
Facet DefinitionsタブでAdd「」ボタンをクリックし、ファセットのNameにcenterを入力します。
-
「Attributes」セクションでAdd「」ボタンをクリックして、Nameにtitle、Default ValueにDefault Titleを入力します。
「Next」、「Finish」の順にクリックしてテンプレートの作成を完了します。設計エディタでstoretemplate.jsfテンプレート・ページが開きます。
-
ADF Faces Componentsウィンドウの「Layout」ノードを開いて、「Decorative Box」を設計ビューの空のページにドラッグします。
PropertiesウィンドウのStyle and Themeカテゴリで、Themeプロパティを「light」に設定します。
-
Decorative Boxには2つのファセットがあり、設計ビュー内では破線と'top'、'center'という単語で表示されます。ComponentsウィンドウのLayoutカテゴリから、「Panel Grid Layout」をtopファセットにドラッグ・アンド・ドロップします。
-
Panel Grid Layoutダイアログ・ボックスで、列を「2」、行を「1」に設定して「Next」をクリックします。
-
列1のグリッド幅を250ピクセル(px)、列2のグリッド幅を100ピクセル(px)に設定して「Finish」をクリックします。
-
Applicationsウィンドウで、「Web Content」ノードと「images」ノードを展開します。「branding_logo.jpg」をパネル・グリッド・レイアウトの最初のセルにドラッグします。
-
ComponentsウィンドウのText and Selectionセクションから、パネル・グリッド・レイアウトの2番目のグリッド・セルに「Output Text」コンポーネントをドロップします。
-
これは、レイアウト内のコンポーネントの配置場所が正確にわからない場合です。出力テキスト・コンポーネントの配置を確認するには、「Structure」ウィンドウを展開し、af:outputTextコンポーネントを見つけます。
必要に応じてStructureウィンドウ内でドラッグ・アンド・ドロップし、af:outputTextコンポーネントが2番目のaf:gridCellコンポーネント内に配置されていることを確認します。
-
Structureウィンドウまたはビジュアル・エディタで、「outputText」コンポーネントを選択します。PropertiesウィンドウでValueプロパティを見つけます。「Property Menu」アイコンをクリックして、「Expression Builder...」を選択します。
-
Expression Builderダイアログで「Scoped Variables」と「attrs」を展開し、「title」を選択して式を「#{attrs.title}」に設定します。
「OK」をクリックします。
-
Componentsウィンドウで「Layout」ノードを展開し、Core Structureセクションまでスクロール・ダウンします。「Facet Definition」をcenterファセットにドラッグ・アンド・ドロップします。
Insert Facet Definitionダイアログで、ファセット名として「center」を選択し、「OK」をクリックします。
-
JDeveloperメニュー・バーのSave All「」アイコンをクリックするか、メニューから「File」→「Save All」を選択してページを保存します。
Applicationsウィンドウにアプリケーションがロードされます。
メニューで、「ADF Faces Image」を選択します。
テンプレートを作成したら、新しいページを作成し、ページのデフォルト構造としてテンプレートを使用できます。次のステップを実行します。
-
「ViewController」プロジェクトを右クリックして、「New」→「Page...」を選択します。
-
Create JSF Pageダイアログで、ファイル名を「products.jsf」に変更し、Document Typeが「Facelets」に設定されていることを確認します。「Reference ADF Page Template」ラジオ・ボタンを選択して、「Storetemplate」テンプレートを選択します。「OK」をクリックします。
-
Applicationsウィンドウに新規ノードとしてproducts.jsfが表示され、storetemplate.jsfテンプレートを使用するDesignエディタが開きます。
-
Componentsウィンドウから、「Layout」ライブラリを展開し、「Panel Splitter」コンポーネントをcenterファセットにドラッグ・アンド・ドロップします。
ADF Facesには、Panel Splitterの他にも、ページ上のその他のコンポーネントの配置に使用できるレイアウト・コンポーネントが多数あります。詳細表示 -
「Panel Accordion」レイアウト・コンポーネントを、パネル・スプリッタの左側の'first'ファセットにドラッグ・アンド・ドロップします。
-
構造ビューまたは設計ビューで「showDetailItem」を選択し、PropertiesウィンドウのCommon領域でshowDetailItemのTextを「My Cart」に設定します。
-
他のペインをアコーディオンに追加します。この操作を実行するには、構造ビューまたは設計ビューで「My Cart showDetailItem」を右クリックして「Insert After Show Detail Item」→「Show Detail Item」を選択するか、構造ビューまたは設計ビューで「panelAccordion」を右クリックし、「Insert Inside Panel Accordion」→「Show Detail Item」を選択します。
-
Propertiesウィンドウで、Textプロパティを「Recommendations」に変更します。
-
別の「Panel Splitter」コンポーネントを、パネル・スプリッタのsecondファセットにドラッグ・アンド・ドロップします。Structureウィンドウを使用して、このアクションを実行したい場合もあるかもしれません。
-
Propertiesウィンドウを使用して、このネストされたパネル・スプリッタのOrientationを「vertical」に設定します。
-
「Panel Collection」コンポーネントを、ネストされた垂直パネル・スプリッタのfirstファセットにドラッグ・アンド・ドロップします。ADF Faces Componentsウィンドウでコンポーネントが見つからない場合は、ウィンドウ上部の検索ボックスを使用して検索できます。
-
「Panel Tabbed」コンポーネントを、パネル・スプリッタのsecondファセットにドラッグ・アンド・ドロップします。このコンポーネントは、LayoutカテゴリのInteractive Containers and Headersグループに表示されます。
-
Structureウィンドウで、Panel Tabbedコンポーネントに自動的に追加された「af:showDetailItem」コンポーネントを選択し、PropertiesウィンドウのTextプロパティにProduct Detailsと入力します。
-
「Product Details」タブを右クリックし、ビジュアル・エディタで、コンテキスト・メニューから「Insert After Show Detail Item」→「Show Detail Item」を選択します。
新しいaf:showDetailItemコンポーネントが選択された状態で、PropertiesウィンドウのTextプロパティにRatingを入力します。
-
「products.jsf」タブをダブルクリックして、設計ビューを最大化します。ページは次のイメージのように表示されます。
-
すべての作業内容を保存します。次にページの設計ビューの任意の場所を右クリックし、コンテキスト・メニューから「Run」を選択します。最大化されたビューを切り替えるには、「products.jsf」タブを再度ダブルクリックします。
-
このページは、統合されたOracle WebLogic Serverにデプロイされると、ブラウザにロードされます(統合されたWebLogic Serverは、JDeveloperからアプリケーションを初めて実行している場合に、インストールおよび構成されます)。タブを選択したり、Recommendationsパネルを開いたりして、操作を試します。終了したら、ブラウザを開いたままJDeveloperに戻ります。
-
次のステップでは、ページ・タイトルをカスタマイズして、既存ページでどのように使用されるかを確認します。このプロセスを開始するには、設計エディタでstoretemplate.jsfテンプレート・ページを開きます。
-
設計ビューまたは構造ウィンドウで、タイトルが含まれる「outputText」コンポーネントを選択します。PropertiesウィンドウのStyleノードで、Font Colorプロパティを任意の色(例ではオレンジ色)に設定します。
-
Font Sizeプロパティで、ドロップダウン・リストから「large」を選択します。
-
すべての作業内容を保存します。ブラウザに戻り、ページを再ロードして新しい特性を表示します。
JDeveloperアプリケーションを保存した後、ブラウザ・ウィンドウをリフレッシュすると、バインディング・コンポーネントを更新していない限り、アプリケーションに加えた新しい変更内容が反映されます。ブラウザに変更内容を反映させるには、JDeveloperから、そのページを再実行する必要があります。
-
設計エディタで「products.jsf」ページを開きます。Structureウィンドウで「af:pageTemplate」タグを選択し、PropertiesウィンドウでTitleプロパティを「Store Front」に設定します。
-
すべての作業内容を保存します。次にブラウザにページを再ロードして、新しい特性を表示します。
設計エディタで視覚的にレンダリングされず、一連のネストされたボックスが表示される場合は、ワークスペースを閉じてもう一度開きます。
Panel Accordionコンポーネントがファセットに追加され、ネスト化されたShow Detail Itemも作成されて、アコーディオンの最初のペインのコンテンツが保持されます。
ページ・レイアウトが完了したら、データを追加します。このプロセスの最初のステップは、Products POJO(Plain Old Java Object)からのデータ・コントロールの作成です。次のステップを実行します。
-
ADFデータ・バインディング機能を使用して、既存のPOJOクラスからデータ・コントロールを作成します。
Applicationsウィンドウで「Model」プロジェクトを展開します。「Application Sources」ノードと「model」ノードを展開します。「Products.java」を右クリックして、コンテキスト・メニューから「Create Data Control」を選択します。
-
Bean Data Controlダイアログの最初のページで、データ・コントロール名を「StoreProducts」に変更して「Next」をクリックします。
-
Choose ADF Data Control Featuresページで、「Transactions」と「Custom CRUD」の機能を選択し、「Finish」をクリックします。
-
DataControls.dcxファイルが作成され、エディタで開かれます。このレイヤーでUIのヒントと検証を定義できますが、ここではデフォルトのままにして引き続きユーザー・インタフェースを作成します。
「products.jsf」タブをクリックして、エディタの前面に移動します。
-
Applicationsウィンドウで、「Data Controls」アコーディオンを展開し、「StoreProducts」ノードを展開します。Data Controlsパネルの更新アイコンをクリックして、StoreProductsノードを有効化することが必要な場合もあります。
-
StoreProductsデータ・コントロールの「products」コレクションを、設計エディタのaf:panelCollectionの中央領域にドラッグ・アンド・ドロップします。ポップアップ・メニューから「ADF Table...」を選択します。
-
Create Tableダイアログで、「Row Selection (Single Row) 」オプションを選択し、「Enable Sorting」と「Read-Only Table」のオプションをクリックします。
「OK」をクリックします。
-
Structureウィンドウで「af:table」コンポーネントを選択し、Propertiesウィンドウで「Behavior」ノードを展開します。EdtingModeプロパティを「clickToEdit」に設定します。Appearanceノードで、ColumnStretchingプロパティを「last」に設定します。
ヒント:プロパティを名前で簡単に見つけるには、Propertiesウィンドウの上部にある検索フィールドにプロパティ名を入力します。
作業内容を保存します。 -
products.jsfページの設計ビューで、「Product Details」タブを選択して前面に表示します。StoreProductsデータ・コントロールからProduct Detailsタブ・コンポーネントに、「products」コレクションをドラッグ・アンド・ドロップします。ポップアップ・メニューで「ADF Form ...」を選択します。
-
Create Formダイアログで「Submit」チェック・ボックスを選択して、送信アクションのコントロールを含めます。
「OK」をクリックします。 -
ここで、ADF List Viewコンポーネントを追加します。ListViewコンポーネントでは、oracle.adf.view.rich.model.CollectionModelを使用して基盤となるリストのデータにアクセスします。他のモデル・インスタンス(java.util.List、配列、javax.faces.model.DataModelなど)も使用する場合があります。listViewでは、インスタンスが自動的にCollectionModelに変換されます。
設計ビューの「Recommendations」アコーディオン・ペインを展開します。Data ControlsウィンドウからRecommendationsアコーディオンに、「products」ノードをドラッグ・アンド・ドロップします。ポップアップ・メニューで「Table/List View」→「ADF List View...」を選択します。
-
Create List Viewダイアログで、「Panel Grid Layout」レイアウトを選択して「Next」をクリックします。
-
Columnsの行あたりのセル数を「2」に、Rowsの数を「1」に設定します。
「Next」をクリックします。
-
Column 1の幅を「auto」、Column 2の幅を「50 px(ピクセル)」に設定します。
「Next」をクリックします。
-
最初の列の値バインディングをクリックして、「name」項目を選択します。2番目の列の値バインディングを「rating」に設定します。
「Finish」をクリックします。 -
このページには、productsデータ・コントロールからのデータが3つの異なるバインディング・スタイルで表示されています。すべての行を使用可能にして、3つのバインディングすべてが同期されるようにするには、productsIteratorの範囲サイズを変更します。products.jsfページの「Bindings」タブをクリックします。Executablesセクションで、「productsIterator」を選択します。
-
Propertiesウィンドウで、RangeSizeプロパティを「-1」に設定します。
-
すべての作業を保存し、ページを右クリックして「Run」を選択し、ページを再デプロイして再実行します。
ページには、Recommendationsアコーディオン、表、フォームに商品データが次のように表示されます。
-
表の列ヘッダーの1つを選択して、表の他の場所に移動します。
-
「shortdesc」列を使用して、表で列のサイズ変更を試します。「Detach」メニュー・オプションをクリックして、パネルのコンテンツをブラウザ内に独立表示します。
「Detach」オプションを再度クリックして元の表示に戻します。
-
Viewメニュー・オプションで一部の列を非表示にします。
この列は、再表示するまで非表示のままとなります。非表示列の数が、表の下のメッセージに表示されます。列の並べ替えとサイズ変更はADF Faces表コンポーネントの機能で、Viewメニューとその機能、およびDetachボタンはPanel Collectionコンポーネントの一部です。
-
次のいくつかのステップでは、ページにイメージやグラフィカル項目をいくつか追加します。
Product Detailsタブで、フォーム中の「cost」inputText項目を右クリックし、コンテキスト・メニューから「Convert To...」を選択します。
-
Convertダイアログで、「Input Number Spinbox」を選択して、「OK」をクリックします。
Confirm Convertボックスで「OK」を再度クリックして、不要な属性を削除します。 -
imageLocation属性がinputTextコンポーネントとしてレンダリングされていることを確認します。イメージを表示するには、コンポーネント・スタイルを変更します。Product Detailsタブで、「imageLocation」項目を右クリックし、コンテキスト・メニューから「Convert To...」を選択します。Convertダイアログで、「Image」を選択して、「OK」をクリックします。
-
新しいimageコンポーネントを選択したまま、Propertiesウィンドウに移動し、sourceプロパティの横でプロパティ・メニュー・アイコンをクリックして、ドロップダウン・リストから「Expression Builder」を選択します。
-
Expression Builderダイアログで、Expressionテキスト領域にimages/products/と入力します。残りの式を作成するには、「ADF Bindings」、「bindings」、「imageLocation」を展開します。「inputValue」を選択して式を生成し、「OK」をクリックします。
-
Product Detailsタブで「rating」コンポーネントを右クリックし、コンテキスト・メニューから「Convert To...」を選択します。Convertダイアログで、「Slider (Number)」を選択して、「OK」をクリックします。
「Confirm Convert」ボックスで再度「OK」をクリックします。
-
Product Detailsタブで「shortDesc」コンポーネントを右クリックし、コンテキスト・メニューから「Convert To...」を選択します。Convertダイアログで、「Rich Text Editor」を選択して、「OK」をクリックします。
「Confirm Convert」ボックスで再度「OK」をクリックします。
-
StructureウィンドウのProduct Detailsタブで、「panelFormLayout」を選択します。Propertiesウィンドウで、Rowsプロパティに6と入力し、7番目の行項目(imageLocation)がpanelFormLayoutの2番目の列にラップされるようにします。Product Detailsタブは次のように表示されます。
-
すべての作業内容を保存します。ブラウザに戻ってページを再ロードします。
-
ratingスライダとcostスピンボックスの移動、およびRich Text Editorの使用を試します。商品表のいずれかの行を選択すると、Product Detailsタブの行の通貨が自動的に変わります。これは、ADF Data Bindingレイヤーによって処理されます。
Confirm Convertボックスで「OK」を再度クリックして、不要な要素と属性を削除します。
操作コンポーネントとは、アプリケーションに操作機能を提供するコンポーネントです。このセクションでは、メニュー、ポップアップ、および印刷可能なページを作成し、ユーザーがショッピング・カート領域に商品をドラッグ・アンド・ドロップできるようにします。このタイプの機能を実装するには、次の手順を実行します。
-
アプリケーションにメニューを実装するには、表のパネル・コレクションにメニューを追加します。products.jsfページの設計エディタで、パネル・コレクションの「menu」ファセット内を右クリックし、コンテキスト・メニューから「Insert inside Facets menus」→「Menu」を選択します。
-
Propertiesウィンドウで、メニューのTextプロパティを「My Options」に設定します。
-
「My Options」メニューを右クリックして、コンテキスト・メニューから「Insert inside Menu」→「Menu Item」を選択します。
-
Propertiesウィンドウで、Textプロパティを「Export to Excel」に設定します。
-
Structureウィンドウで「af:commandMenuItem」コンポーネントを右クリックして、コンテキスト・メニューから「Insert after Menu Item」→「Menu Item」を選択します。
-
Propertiesウィンドウで、このメニュー項目のTextプロパティを「Show Specials」に設定します。
-
Componentsウィンドウで「Operations」ノードを展開し、Listenersカテゴリを検索します。「Export Collection Action Listener」コンポーネントを、Structureウィンドウのメニュー項目Export to Excelにドラッグします。
-
すべての作業を保存し、ブラウザに戻ってページを再ロードします。「My Options」メニュー・オプションをクリックし、メニュー・バーからメニュー・オプションを分離できることを確認します。
-
「Export to Excel」メニュー・オプションを選択します。
-
ブラウザによっては、ダイアログが表示され、このファイルをどうするかを尋ねられます。ファイルをExcelで開くか、保存することができます。
「Open with 」を選択してExcelで表を表示し(Excelがインストールされている場合)、「OK」をクリックします。
表がエクスポートされていることを確認し、必要に応じてExcelを閉じます。 -
ここで、products.jsfページにポップアップ・ウィンドウを作成します。Structureウィンドウで、一番上の「af:form」コンポーネントを選択します。
/
-
Componentsウィンドウで「Layout」カテゴリを展開し、Secondary Windowsセクションを見つけます。Structureウィンドウで「Popup」コンポーネントをformコンポーネントにドラッグします。設計ビューが変更され、ポップアップを視覚的に編集できるようになります。
-
Designビューでポップアップ内を右クリックし、コンテキスト・メニューから「Insert inside Popup」→「Dialog」を選択します。
-
Componentsウィンドウで「General Controls」カテゴリを展開して、「Image」コンポーネントを「Dialog」にドラッグします。
-
Insert Imageダイアログで、ソース・プロパティの横の「Property」メニュー・アイコンをクリックし、「Edit」を選択します。イメージ・ディレクトリを展開して、ソースとして「JDeveloper.gif」イメージを選択します。
「OK」をクリックします。「Yes」をクリックしてアプリケーションのリソース・ディレクトリでgifイメージを再配置し、「Save」をクリックしてデフォルトの場所に保存します。
再度「OK」をクリックします。
-
ダイアログの外側の灰色の領域をクリックして、メイン・ページの設計ビューに戻ります。Designビューで「My Options」メニュー項目を選択し、Structureウィンドウでコンポーネントを前面に表示します。
-
Propertiesウィンドウで、PopupIdプロパティの横の「Property Menu」アイコンをクリックし、「Edit」を選択します。
-
Edit Propertyダイアログで、「document」ノードと「form」ノードを展開します。「popup - p1」コンポーネントを選択して「OK」をクリックします。
-
ファイルを右クリックして「Run」を選択し、ページを再実行します。
「My Options」メニューをクリックし、「Show Specials」を選択します。JDeveloperイメージが含まれるポップアップ・ダイアログが表示されます。
-
ここで、Product DetailsタブとMy Cartアコーディオンの間にドラッグ・アンド・ドロップ機能を追加し、簡単なドラッグ・アンド・ドロップ操作で、Product Detailsから商品を効率的にカートに入れられるようにします。
Componentsウィンドウで、ADF FacesライブラリからOutput Textコンポーネントを見つけます。このコンポーネントをMy Cartアコーディオン・ペインにドラッグします。Propertiesウィンドウで、Valueプロパティを「No Items」に設定します。
-
商品表で「name」出力テキスト・コンポーネントを選択し、設計ビューの前面に表示します。Componentsウィンドウで「Operations」カテゴリを展開し、Drag and Dropセクションを見つけます。「Attribute Drag Source」コンポーネントを選択してname出力テキスト・コンポーネントにドロップします。Attribute Drag Sourceが、列ではなくname出力テキストにドロップされていることを確認します。確認できない場合は、Structureウィンドウを使用します。
-
Componentsウィンドウから、「Attribute Drop Target」コンポーネントをNo Items出力テキスト・コンポーネントにドラッグ・アンド・ドロップします。
Insert Attribute Drop Targetダイアログで、Attributeプロパティの「value」を選択します。
「OK」をクリックします。 -
すべての作業を保存し、ブラウザでページを再ロードします。商品表で名前の値を選択し、My CartのNo Itemsテキストにドラッグ・アンド・ドロップします。
商品名がカートに追加されます。
-
ここで、メニュー・オプションを追加して最新の表情報を取得し、印刷可能なページに表示します。JDeveloperでは、他の「Menu Item」をMy Optionsメニューに追加して、Textプロパティを「Printable Page」に設定します。
-
これで、Componentsウィンドウでコンポーネントを見つけて設計ウィンドウやStructureウィンドウにドラッグし、ページの正しい場所にコンポーネントを追加する方法がおわかりになったと思います。また多くの場合、設計ウィンドウやStructureウィンドウでコンポーネントを選択して、コンポーネントを追加する場所を明確にするのが最善であることも理解できたと思います。
作成したメニュー・コンポーネントにShow Printable Page Behaviorコンポーネントをドロップします。
-
次のいくつかのステップでは、ポップアップ・ページを追加してカルーセルを使用して商品を表示します。
回転するカルーセルにイメージを表示できます。詳細表示
「Popup」コンポーネントを、ComponentsウィンドウからStructureウィンドウの最初のaf:formコンポーネントにドラッグします。
-
新しい「af:popup」を右クリックして、「Insert Inside Popup」→「Dialog」を選択します。
-
Propertiesウィンドウで、Typeプロパティを「ok」に設定します。
-
Data Controlsウィンドウで「StoreProducts」を展開し、「products」コレクションを設計ビューのダイアログにドロップします。メニューから「Carousel」を選択します。
-
「Image」コンポーネントをカルーセル項目コンポーネント内にドラッグします。
Insert Imageダイアログで、Sourceプロパティの値として/images/products/#{item.imageLocation}と入力します。
「OK」をクリックします。
-
ポップアップの外側の灰色の領域をクリックして、products.jsfのメイン設計ビューに戻ります。
Structureウィンドウで、panelCollectionの「viewMenu」ファセットを見つけます(panelCollectionは商品表コンポーネントの親コンポーネント)。
「viewMenu」ファセットを右クリックして、「Insert inside f:facet - viewMenu」→「Menu Item」を選択します。
-
Propertiesウィンドウで、Textプロパティを「View As Carousel」に設定します。
-
「Show Popup Behavior」コンポーネントをView As Carouselメニュー項目にドロップします。
-
Propertiesウィンドウで、PopupIdプロパティ・メニューから「Edit」を選択します。
-
Edit Propertyダイアログで「document」ノードと「form」ノードを展開し、「popup - p2」コンポーネントを選択します。
「OK」をクリックします。
-
すべての作業を保存し、ページを再実行します。ブラウザに表示されたら、「My Options」→「Printable Page」メニューをクリックします。ページの表コンポーネントがブラウザの別タブに表示され、プリンタに送信できる状態になります。
-
印刷可能なビューを閉じて、Viewメニューから「View As Carousel」を選択します。
Behaviorカテゴリで、Detachableプロパティを「true」に設定します。
Insert Export Collectionダイアログで、ExportedIdにt1(t1は表のID)を入力し、Typeの「excelHTML」を選択します。
「OK」をクリックします。
Componentsウィンドウで「Operations」カテゴリを展開し、Behaviorセクションで「Show Popup Behavior」コンポーネントをStructureウィンドウの「commandMenuItem」→「Show Specials」コンポーネントにドラッグします。
Insert Attribute Drag Sourceダイアログで、ドロップダウン・リストから「value」を選択します。
「OK」をクリックします。
ゲージを追加して特定の商品の評価を表示します。このゲージを作成するには、次の手順を実行します。
ADFデータ可視化コンポーネントには、データの表示/分析用の優れたグラフィカル/表形式機能があります。詳細表示
-
products.jsfページの設計ビューで、「Rating」タブをクリックします。
-
データ・コントロール・ウィンドウで「StoreProducts」と「products」を展開し、「rating」属性を設計エディタの「Rating」タブにドラッグします。ポップアップ・メニューから「Gauge...」を選択します。
-
Component Galleryダイアログで「Dial」カテゴリを選択し、ゲージ・タイプとして「Dial with Thresholds」を選択します。一番左の「Quick Start Layouts」を選択します。
「OK」をクリックします。
-
Create Dial Gaugeダイアログで、Maximum Valueフィールドを「10」に設定します。
最小しきい値(threshold1)を「1」に設定します。
中間しきい値(threshold2)を「5」に設定します。
最高しきい値(threshold3)は「Maximum」のままにします。 -
Propertiesウィンドウで、GaugeコンポーネントのShortDescプロパティを「rating gauge」に変更します。
-
作業を保存し、ブラウザでページを更新します。ゲージに、現在(最初)の商品の現在の評価値が表示されます。
-
「Product Details」タブをクリックし、スライダを移動して、評価値を変更します。
-
「Submit」をクリックしてから「Rating」タブをクリックし、新しい値が表とゲージに反映されていることを確認します。表で別の評価の商品が選択されている場合、ゲージは変更されません。次の手順でこれを修正します。
表の行の選択時にゲージを更新するには、Partial Page Renderingの操作を明示的に定義する必要があります。このためには、次の手順を実行します。
部分ページ・レンダリングの目的は、Webページのインタラクティビティ、速度、ユーザビリティの向上です。詳細表示-
JDeveloperで、設計ビューの評価ゲージ・コンポーネントを選択します。Propertiesウィンドウで、「Behavior」カテゴリを展開します。PartialTriggersプロパティの「Property」メニュー・アイコンをクリックし、「Edit」を選択します。
-
Edit Propertyダイアログで、「document」、「form」、「pageTemplate」、「facet (center)」、「panelSplitter - ps1」、「facet (second)」、「panelSplitter - ps2」、「facet (first)」、および「panelCollection」コンポーネントを選択します。「table* - t1」コンポーネントを選択し、「Selected」ペインに移動します。これで、ゲージの更新をトリガーするものが定義されます。
「OK」をクリックします。
-
すべての作業を保存し、ブラウザでページを再ロードします。「ratings」タブをクリックし、表の別の行を選択してゲージを更新します。
-
「OK」をクリックします。
最後に、別のスキンを使用して、アプリケーション全体のルック・アンド・フィールを変更する方法について説明します。この機能を実装するには、以下の手順に従います。
-
Applicationsウィンドウで「Web Content」→「WEB-INF」ノードを展開し、「trinidad-config.xml」ファイルをダブルクリックしてエディタで開きます。
-
このファイルでは、スキン・ファミリー要素で使用されるスキンが定義されます。skin-familyを「simple.desktop」に変更します。カスタム・スキン作成を最初に始める際には、simpleスキンがよく選択されます。
-
すべての作業を保存し、ブラウザでページを更新します。アプリケーションのルック・アンド・フィールが変更されたことに注意してください。
終了したら、ブラウザ・ウィンドウを閉じます。これでこのチュートリアルは完了です。
- ページ・テンプレートの作成
- ページ・テンプレートを使用したページの設計
- 入力コンポーネントと出力コンポーネントの使用
- 操作コンポーネントの使用
- Oracle ADFデータ可視化コンポーネントの使用
- 部分ページ・レンダリングの実装
- スキンを使用したアプリケーションのルック・アンド・フィールの変更
- Oracle Application Development FrameworkによるFusion Webアプリケーションの開発
- Oracle ADF FacesによるWebユーザー・インタフェースの開発
- ADF Insider Recorded Sessions