Oracle Application Express 5.0を使用したアプリケーションの開発: パート2 (拡張)

目的

このチュートリアルでは、「Oracle Application Express 5.0を使用したアプリケーションの開発: パート1 (作成)」で構築したアプリケーションを拡張する方法について説明します。新しいテーマの作成、チャートの追加、動的アクションの作成、プラグインの使用、表形式フォームの作成および操作の方法を調べます。

所要時間

約90分。

概要

Oracle Application Express (Oracle APEX)は、Oracle Database用の迅速なWebアプリケーション開発ツールです。Webブラウザと限られたプログラミングの経験のみを使用して、高速かつセキュアなプロフェッショナル用のアプリケーションを開発およびデプロイできます。Oracle Application Expressは、完全にサポートされたOracle Database Cloud Service (Oracle Database Cloud Service - Database Schema Serviceと呼ばれます)です。

このチュートリアルでは、Oracle Application Expressリリース5.0を使用して、「Oracle Application Express 5.0を使用したアプリケーションの開発: パート1 (作成)」で構築したアプリケーションを改良します。

このチュートリアルの実行時には、次の各事項に注意してください。

• Oracle Application Expressワークスペースへのログイン: Oracle Application Expressワークスペースは、オンプレミスのOracle Database内またはOracle Database Cloud Service - Database Schema Service内にある場合があります。
  ログイン資格証明は、ワークスペースが格納されている場所によって異なります。
  • Oracle Database Cloud - Multitenant ServiceでのOracle Application Expressワークスペースへのログイン: ブラウザで、ようこそ電子メールに記載されているサービスURL、またはサービス管理者から提供されたサービスURLに移動します。
  • オンプレミスのOracle Application Expressへのログイン: ブラウザで、ワークスペース管理者から提供されたOracle Application Expressワークスペースのオンプレミス・インストールの場所に移動します。
• アプリケーションID: このチュートリアルのスクリーンショットでは、ぼやけたアプリケーションIDが表示されます。自分のアプリケーションIDは、アプリケーションの作成時に自動的に割り当てられる任意の値です。
• スキーマ: Database Schema Service内のOracle Application Expressワークスペースにアクセスしている場合、変更できないスキーマ名を持つスキーマが1つ割り当てられています。オンプレミスのOracle Database内のワークスペースにアクセスしている場合、Oracle Application Expressインスタンス管理者からワークスペースに複数のスキーマが割り当てられている場合があります。

必要なもの

このチュートリアルを始める前に次の用意をする必要があります。

• オンプレミスまたはDatabase Cloud Service内のOracle Database 11g以上のリリースにアクセスできること。
• Oracle DatabaseにOracle Application Expressリリース5.0がインストールされていること(オンプレミスの場合のみ)。
• files.zipがダウンロードされて作業ディレクトリに解凍されていること。
• 「Oracle Application Express 5.0を使用したアプリケーションの開発: パート1 (作成)」チュートリアルが実行されているか、files.zipに含まれるlab1_app_export.sqlアプリケーションがインポートされていること。

このトピックでは、新しいテーマを作成します。このチュートリアルでは、新しいテーマに切り替える手順については説明しませんが、これは、前のチュートリアルでユニバーサル・テーマを使用してプロジェクト・タスク・アプリケーションを作成したからです。

注意: ユニバーサル・テーマなどの最新のテーマを持つアプリケーションは他の任意の最新のテーマにのみ切り替えることができ、既存のタブベースの(レガシー)テーマに切り替えることはできません。ユニバーサル・テーマはOracle Application Express 5.0で使用可能な唯一の最新のテーマであるため(現時点)、他の任意のテーマに切り替えることはできません。

最新のテーマは、応答性に優れるグリッドベースのレイアウトとリストベースのナビゲーション・メニューを使用するテーマとして定義できます。現時点では、ユニバーサル・テーマ以外のOracle APEX 5.0によってサポートされているすべてのテーマはタブベースのテーマであり、新しい最新のテーマは現在開発中で、近い将来にはOracle Application Expressに追加できます。そのとき初めて、ユニバーサル・テーマを持つアプリケーションが別の最新のテーマへの切替えをサポートできるようになります。

1. 前の演習「Oracle Application Express 5.0を使用したアプリケーションの開発: パート1 (作成)」で作成したアプリケーションを実行します。演習全体を実行できなかった(またはこの演習の環境をリセットする)場合は、次を実行できます。

   • 作業ディレクトリに移動し、deinstall.sql (C:\Downloads\files\deinstall.sqlなど)を実行し、サポート・データベース・オブジェクトを削除します。
   • lab1_script.sqlをアップロードおよびインストールし、これらの演習で使用する表とデータを作成します。
   • 作業ディレクトリ内のlab1_app_export.sqlを使用し、アプリケーションをインポートします。サポート・オブジェクトがインストールされていることを確認してください。

   アプリケーションを実行し、タブのルック・アンド・フィールをレビューします。新しいテーマを作成します。開発者ツールバーの「Application<n>」ボタンをクリックします。

   

2. 「Shared Components」をクリックします。

   

3. 「User Interface」の下で、「Themes」を選択します。

   

4. 「Create >」をクリックします。

   

5. デフォルトのままにして「Next >」をクリックします。

   

6. デフォルトのままにして「Next >」をクリックします。

   

7. 「Theme Type」として「All Themes」、「Theme」として「Bluejay (Theme 22)」を選択します。「Next >」をクリックします。

   

8. 「Create」をクリックします。

   

9. アプリケーション内で新しいテーマが正常に作成されます。次のトピックでは、チャートを作成します。「Application<n>」ブレッドクラムをクリックします。

   

このトピックでは、プロジェクト当たりのタスクの数を表示する2D円グラフを作成します。その後、この2D円グラフを3D円グラフに変換し、表示設定をいくつか変更します。

1. アプリケーション・ページで、「Create Page >」をクリックします。

   

2. 「Chart」ページ・タイプを選択します。

   

3. 「Chart Rendering」として「Flash Chart」が選択されていることを確認します。「Pie & Doughnut」チャート・タイプを選択し、「Next >」をクリックします。

   

4. 「2D Pie」を選択し、「Next >」をクリックします。

   

5. 「Page Name」と「Region Name」の両方として「Tasks per Project Chart」を入力し、「Next >」をクリックします。

   

6. 「Create a new navigation menu entry」を選択し、「New Navigation Menu Entry」として「Tasks per Project Chart」を入力し、「Next >」をクリックします。

   

7. 「Chart Title」として「Tasks per Project Chart」を入力し、「chart Animation」として「Side From Left」を選択し、「Background Type」として「Solid Color」を選択し、「Background Color 1」として「#FFFFFF」を入力し、「Show Legend」として「Bottom」を選択し、「Next >」をクリックします。

   

8. 次のSQL問合せを入力します。次に、「Next >」をクリックします。

   select null link,
       p.project_name label,
       t.task_count value
from (select project_id,
             count(*) task_count
      from tasks
      group by project_id) t,
      projects p
where t.project_id = p.project_id

   

9. 「Create」をクリックします。

   

10. チャート・ページが作成されます。「Save and Run Page」アイコンをクリックします。

    

11. チャートが表示されます。円グラフ内のスライスの1つにカーソルを置くと、ポップアップが表示されます。円スライスの1つをクリックします。

    

12. クリックしたスライスが分割されています。追加の変更を行います。開発者ツールバーの「Edit Page<n>」ボタンをクリックします。

    

13. 「Rendering」タブ内の「Tasks per Project Chart」の下の「Attributes」をクリックします。

    

14. 「3D Mode」として「Yes」、「Marker」として「Diamond」を選択します。

    

15. 「Background Color」の下の「Color」として選択肢から「#FFCC00」を選択します。

    

16. 「Save and Run Page」アイコンをクリックします。

    

17. チャートに対する変更が表示されます。開発者ツールバーの「Application<n>」ボタンをクリックします。次のトピックでは、動的アクションを作成および使用します。

    

動的アクションを使用すると、開発者がJavaScriptに関する知識なしにクライアント側の動作を宣言で定義できるようになります。開発者は、簡単なウィザードを使用して、ページ・アイテムや条件の選択、値の入力、アクション(表示、非表示、有効化および無効化など)の選択を行うことができます。以前は、このような作業を行うにはJavaScriptおよびAJAXを自作する必要がありましたが、現在、多くの動的アクションでは組込みウィザードを使用するため、コーディングは必要ありません。

このトピックでは、ジョブが販売ジョブである場合にコミッション率アイテムを有効にする動的アクションを作成します。販売ジョブでない場合、コミッション率アイテムは無効になります。

1. アプリケーションのホーム・ページから、「Run Application」をクリックします。

   

2. 販売担当である従業員のみをフィルタで選択します。「Job Id」ヘッダーを選択し、検索フィールドに「sa」を入力し、「SA_REP」を選択します。

   

3. 行の1つの前にある「edit」アイコンをクリックします。

   

4. ジョブIDがSA_REPまたはSA_MANであるときに「Commission Pct」を有効にするための動的アクションを作成します。開発者ツールバーの「Edit Page<n>」ボタンをクリックします。

   

5. 「Rendering」の下で、「P2_JOB_ID」を右クリックし、「Create Dynamic Action」を選択します。

   

6. 「Identification」の下で、「Name」として「Job is Sales」を入力します。「When」の下で、「Event」が「Change」であることを確認し、「Condition」として「in list」を選択します。
   動的アクションはアイテム・レベルで作成されるため、デフォルトでは「When」の下で、「Selection Type」が「Item(s)」に設定されており、「Item(s)」として「P2_JOB_ID」が選択されています。

7. 

8. 「When」の下で、「Values」として「SA_REP,SA_MAN」を入力します。

   

9. 「Job is Sales」動的アクションの「True」イベントの下で「Show」をクリックします。

   

10. Trueイベントのプロパティ・エディタで、「Identification」の下の「Action」として「Enable」を選択します。

    

11. 「Affected Elements」の下の「Selection Type」が「Item(s)」に設定されていることを確認します。「Affected Elements」の下の「Item(s)」の横にある「List of Values」アイコンをクリックします。

    

12. 「P2_COMMISSION_PCT」を選択します。

    

13. ジョブIDがSA_REPまたはSA_MANでない場合に「Commission Pct」値を無効にするために同等のFalseアクションも作成する必要があります。「Job is Sales」動的アクションの下の「False」イベントを右クリックし、「Create FALSE Action」を選択します。

    

14. 「False」の下の「Show」をクリックします。
    

    

15. 下記に示すようにFalseアクションのプロパティを選択します。

    プロパティ・グループ	プロパティ	値
    Identification	Action	Disable
    Affected Elements	Selection Type	Item(s)
    Affected Elements	Item(s)	P2_COMMISSION_PCT
    Execution Options	Fire On Page Load	Yes

    

16. 「Save and Run Page」アイコンをクリックします。

    

17. 「Job Id」が「Sales Representative」(または「SA_REP」)に設定されているため、「Commission Pct」フィールドが有効になっています。「Job Id」として「Programmer」などの販売以外の値を選択します。

    

18. 「Job Id」フィールドの値が「Programmer」に変更されると同時に「Commission Pct」フィールドが無効になっています。

    

19. 開発者ツールバーの「Edit Page<n>」をクリックします。次のトピックでは、新しいリージョンを作成し、動的アクションを使用してこのリージョンの表示/非表示を切り替えます。

    

このトピックでは、ページ・アイテムが含まれるリージョンを作成し、コミッション率がnullでない場合にこのリージョンのみを表示する動的アクションを作成します。

1. 「Edit EMPLOYEES」リージョンの下にサブリージョンを作成します。「Edit EMPLOYEES」を右クリックし、「Create Sub Region」を選択します。

   

2. サブリージョンが正常に作成されます。「Identification」の下で、「Title」として「Sales Specific Information」を入力し、「Type」として「Static Content」を選択します。

   

3. 新しいサブリージョンの下でページ・アイテムをいくつか作成します。これを行うには、必要なアイテム・タイプをアイテム・ギャラリからグリッド・レイアウト内の目的の位置にドラッグします。アイテム・ギャラリから「Number Field」をドラッグし、グリッド・レイアウト内の「Sales Specific Information」サブタブ内の「ITEMS」の下にドロップします。

   

4. 「Type」として「Number Field」が選択された新しいアイテムが作成されます。「Identification」の下で、「Name」として「P2_SALES_AMOUNT」を入力します。
   「Layout」の各プロパティはデフォルトでは、この新しいアイテムがグリッド・レイアウト内に配置された位置に基づいて適切な値で設定されています。

   

5. 「Appearance」の下の「Template」が「Optional」に設定されており、「Validation」の下の「Value Required」が「No」に設定されていることを確認します。

   

6. 「Source」の下で、「Type」として「Null」、「Used」として「Only when current value in session」を選択します。

   

7. 別のページを作成し、P2_SALES_AMOUNT値に基づいてボーナス情報を表示します。ツリー・ビューから新しいページ・アイテムを作成することもできます。
   「Rendering」の下の「Sales Specific Information」を右クリックし、「Create Page Item」を選択します。

   

8. この新しいアイテムに対して次のプロパティを入力または選択します。

   プロパティ・グループ	プロパティ	値
   Identification	Name	P2_BONUS
   Identification	Type	Display Only
   Label	Label	Sales Bonus
   Settings	Save Session State	No

   

9. 「Source」の下で、「Type」として「Null」、「Used」として「Only when current value in session」を選択します。

   

10. サブリージョンは、従業員のジョブIDが販売ジョブに設定されている場合のみ表示します。前に作成した「Job is Sales」動的アクションに別のTrueおよびFalseアクションを追加することのみが可能です。「Job is Sales」動的アクションを右クリックし、「Create TRUE Action」を選択します。

    

11. 新しく作成したTrueイベントの下で「Show」を選択し、プロパティ・エディタで次のプロパティを設定します。

    プロパティ・グループ	プロパティ	値
    Identification	Action	Show
    Affected Elements	Selection Type	Region

    

12. 「Affected Elements」の下の「Region」として「..Sales Specific Information」を選択します。
    「Region」プロパティが表示されるのは「Affected Elements」の下で「Selection Type」として「Region」を選択した後のみです。

    

13. ここで、従業員のジョブIDが販売ジョブに設定された場合は常にこのサブリージョンが表示されないように同等のFalseアクションを作成します。ツリー・ビュー内の「Job is Sales」動的アクションの下の「False」を右クリックし、「Create FALSE Action」を選択します。

    

14. 新しく作成したFalseイベントの下で「Show」を選択し、プロパティ・エディタで次のプロパティを設定します。

    プロパティ・グループ	プロパティ	値
    Identification	Action	Hide
    Affected Elements	Selection Type	Region
    Affected Elements	Region	..Sales Specific Information

    

15. 「Save and Run Page」アイコンをクリックします。

    

16. 前回の実行時の選択した従業員が選択された状態で「Edit EMPLOYEES」ページが開きます。ジョブIDが販売関連であるこの従業員について、「Commission Pct」が有効であり、「Sales Specific Information」が表示されています。

    

17. ジョブIDを販売以外のジョブに変更すると、「Commission Pct」ページ・アイテムが無効であり、「Sales Specific Information」リージョンが非表示になります。開発者ツールバーの「Edit Page<n>」ボタンをクリックします。次のトピックでは、「Sales Amount」の値が変更されたときに販売ボーナスを表示および計算する動的アクションを作成します。

    

このトピックでは、「Sales Amount」の値がnullでないか変更されたときに販売ボーナスを表示する動的アクションを作成します。

1. ツリー・ビュー内の「Dynamic Actions」タブをクリックします。

   

2. 「Events」の下の「Change」を右クリックし、「Create Dynamic Action」を選択します。

   

3. 「Identification」の下の「Name」として「Calculate Bonus」を入力し、「When」の下の「Selection Type」として「Item(s)」を選択します。「List of Values:Item(s)」アイコンをクリックします。
   動的アクションをイベント・レベルで作成したため、「When」の下の「Event」が自動的に「Change」に設定されています。

   

4. 「P2_SALES_AMOUNT」リンクをクリックします。

   

5. P2_SALES_AMOUNTが0より大きい任意の値に変更された場合のみこの動的アクションが実行されるようにします。「When」の下で、「Condition」として「greater than」、「Value」として「0」を選択します。
   

   

6. 「Calculate Bonus」動的アクションの「True」イベントの下で「Show」をクリックします。

   

7. 「Identification」の下の「Action」として「Execute PL/SQL Code」を選択し、「Settings」の下にある「PL/SQL Code」の「code editor」アイコンをクリックします。

   

8. 次のPL/SQLコードを入力し、「Validate」アイコンをクリックします。検証が成功したら、「OK」をクリックします。
   begin
  :P2_BONUS := :P2_SALES_AMOUNT*:P2_COMMISSION_PCT;
end;

   

9. 「Settings」の下の「Page Items to Submit」の「List of Value」アイコンをクリックします。

   

10. 「P2_SALES_AMOUNT」リンクを選択します。

    

11. P2_COMMISSION_PCTアイテムはPL/SQLコードで参照されているため、このアイテムも送信する必要があります。「Settings」の下の「Page Items to Submit」の「List of Value」アイコンを再度クリックし、「P2_COMMISSION_PCT」リンクを選択します。

    

12. この動的アクションによって実行されるPL/SQLコードで計算されるP2_BONUSを返す必要があります。「Settings」の下の「Page Items to Return」の「List of Value」アイコンをクリックし、「P2_BONUS」リンクを選択します。

    

13. 「Calculate Bonus」動的アクションのTrueイベントのプロパティがすべて設定されています。この動的アクションのFalseイベントは必要ありません。

    

14. P2_SALES_AMOUNTのデフォルト値を設定します。グリッド・レイアウト内の「P2_SALES_AMOUNT」ページ・アイテムをクリックします。

    

15. 「Default」の下で、「Type」として「Static Value」を選択し、「Static Value」として「0」を入力します。

    

16. この従業員の「Commission Pct」は定義されていません。「Cancel」をクリックし、「Employees」レポートを表示します。

    

17. 販売ジョブを担当しており「Commission Pct」が0より大きい人物の前にある「edit」アイコンをクリックします。

    

18. 「Sales Amount」に「2000」を入力し、[Enter]キーを押します。「Commission Pct」が0.2として定義されているため、「Sales Bonus」にすぐに「400」が表示されます。

    

プラグインを使用すると、カスタム・アイテム・タイプ、リージョン・タイプ、アプリケーション・プロセスおよび動的アクションを使用してOracle Application Expressフレームワークを簡単に拡張できます。いったん定義すると、プラグインベースのコンポーネントをOracle Application Expressの標準コンポーネントと非常に似た方法で作成および更新できるようになります。開発者はプラグインを使用することにより、高度にカスタマイズしたコンポーネントを作成し、アプリケーションの機能、外観および使いやすさを改良できます。

このトピックでは、スライダ・プラグインをインポートし、フォーム内の給与ページ・アイテム用として使用します。

1. ウィンドウの右上領域内の「Shared Components」アイコンをクリックします。

   

2. 「Other Components」の下で、「Plug-ins」をクリックします。

   

3. スライダ・プラグインとともにファイルをインポートします。「Import >」をクリックします。

   

4. 「Choose File」をクリックし、ダウンロード・ディレクトリから「item_type_plugin_com_oracle_slider.sql」を選択します。

   

5. 「Next >」をクリックします。

   

6. 「Next >」をクリックします。

   

7. 「Install Into Application」として「Project Tasks Application」が選択されているを確認し、「Install Plug-in」をクリックします。

   

8. プラグインが正常にインストールされます。プラグインを使用するためにページを編集します。「Edit Page<n>」アイコンをクリックします。

   

9. 「Rendering」タブ内の「Items」の下の「P2_SALARY」をクリックします。

   

10. 「Identification」の下の「Type」を「Slider[Plug-In]」に変更します。

    

11. プロパティ・エディタで「Settings」グループを探します。このグループは、スライダ・プラグインに固有のものです。「Maximum Value」を「50000」、「Step」を「0」に設定し、「Save and Run Page」アイコンをクリックします。

    

12. 「Salary」ページ・アイテム用のスライダが表示されています。スライダの値を少し大きくします。スライドに合わせて給与が変更されます。開発者ツールバーの「Edit Page<n>」ボタンをクリックします。次のトピックでは、表形式フォームを作成します。

    

このトピックでは、DEPARTMENTS表の表形式フォームを作成します。

1. 新しいページを作成します。ページのツールバー上の「+」という名前のドロップダウン・リストから「Page」を選択します。

   

2. 「Form」ページ・タイプを選択します。

   

3. 「Tabular Form」フォーム・タイプを選択します。

   

4. 「Table/View Name」として「DEPARTMENTS(table)」を選択します。右側のボックス内にすべての列があることを確認し、「Next >」をクリックします。

   

5. 「Select Primary Key Column(s)」ラジオ・ボタンを選択し、「Primary Key Column1」として「DEPARTMENT_ID(Number)」を選択し、「Next >」をクリックします。

   

6. 「Existing Sequence」ラジオ・ボタンを選択し、「Sequence」として「DEPARTMENTS_SEQ」を選択し、「Next >」をクリックします。

   

7. 「Updatable Columns」の下にある右側のボックス内にすべての列があることを確認し、「Next >」をクリックします。

   

8. 「Page Name」と「Region Title」として「Update Departments」を入力し、「Next >」をクリックします。

   

9. 「Navigation Preference」として「Create a new navigation menu entry」を選択し、「Next >」をクリックします。

   

10. デフォルトのボタン・ラベルと分岐ページのままにして「Next >」をクリックします。

    

11. 「Create」をクリックします。

    

12. 「Save and Run Page」アイコンをクリックします。

    

13. DEPARTMENTSデータとともに表形式フォームが表示されます。

    

14. データを変更できます。「Department Id」の「60」について、「Department Name」を「Information Technology」に変更し、「Apply Changes」をクリックします。

    

15. 行が更新されます。新しい行を追加することもできます。「Add Row」をクリックします。

    

16. 「Department Name」として「Security」を入力し、「Apply Changes」をクリックします。

    

17. 行が追加されます。行の番号は1ずつ増分しています。開発者ツールバーの「Edit Page <n>」ボタンをクリックします。次のトピックでは、表形式フォームの検証を追加します。

    

このトピックでは、1人の管理者が1つの部門のみに割り当てられていることを確認する検証を表形式フォームに追加します。

1. ツリー・ビュー内の「Processing」タブをクリックします。

   

2. 「Validations」を右クリックし、「Create Validation」を選択します。

   

3. 「Identification」の下の「Name」として「Manager only assigned to one department」を入力します。「Validation」の下で、「Tabular Form」として「Update Departments」、「Type」として「No Rows returned」を選択し、「SQL Query」の「Code Editor」アイコンをクリックします。

   

4. 次のSQL問合せを入力し、「validate」アイコンをクリックします。検証が成功したら、「OK」をクリックします。
   select manager_id from departments

   

5. 次のように、新しい検証の他のプロパティに値を設定し、「Save and Run Page」アイコンをクリックします。

   プロパティ・グループ	プロパティ	値
   Validation	Always Execute	Yes
   Error	Error Message	Manager already assigned to another department !
   Error	Display Location	Inline with Field and in Notification
   Error	Associated Column	Manager ID

   

6. 「Department Id」の「110」の「Manager ID」を上の行に指定されている値と同じ値に変更し、「Apply Changes」をクリックします。

   

7. エラー・メッセージがインラインで、かつ通知として表示されます。エラー・メッセージには、エラーのある対応行に対するクリック可能なリンクが含まれています。

   

このチュートリアルでは、次の操作方法を学びました。

• 新しいテーマを作成する
• チャートを作成する
• 動的アクションを使用してページ・アイテムを有効/無効にする
• 動的アクションを使用してリージョンの表示/非表示を切り替える
• 動的アクションを使用してページ・アイテムの値を計算および表示する
• 値のリストを作成および適用する
• プラグインをインポートおよび使用する
• 表形式フォームを作成する
• 表形式フォームの検証を追加する

• Oracle Cloudの「Home」ページ

• Oracle Database Cloud Service - Database Schema Serviceに関する他のチュートリアル

• カリキュラム開発者: Anjani Pothula

• 他の貢献者:Drue Swadener