5 「Projects」ページの開発

ページの作成ウィザードおよびページ・デザイナを使用して、「Projects」レポート用の高度なフォーム・ページを追加します。

このレッスンについて

このレッスンでは、ページ・デザイナとアプリケーション・ランタイム(略して「ランタイム」)という2つの主要な開発手段を紹介します。

ページ・デザイナで、「レンダリング」タブおよび「レイアウト」タブを使用して、新しいリージョンを「Projects」ページに追加します。続いてプロパティ・エディタを使用して、SQL文や外観オプションなど、リージョンとページ・コンポーネントの様々な属性を編集します。

ランタイムでは、実行時開発者ツールバーを使用して、ページに即座に変更を加えたり、ページ・デザイナにすぐに戻ったりできます。

ここから開始:

5 - Projects.sql

前のレッスンを完了していない場合、付録「作業領域へのアプリケーションのインストール」を使用して上述のSQLスクリプトを作業領域にインポートし、このレッスンから先に学習を続けられます。

5.1 アプリケーション・ランタイムからページ・デザイナへの移動

前のレッスンの最後に、アプリケーション・ビルダーのアプリケーション・ホーム・ページからアプリケーションを実行し、アプリケーションのホーム・ページを開きました。

アプリケーション・ビルダーからアプリケーションを実行しても、ウィンドウの下部に実行時開発者ツールバーが表示されます。

図runtime_developer_toolbar.pngの説明

実行時開発者ツールバーを使用すると、ページ(およびアプリケーションの一部)を簡単に編集できます。このツールバーは、開発者権限または管理者権限を持つユーザーにのみ表示されます。

実行時開発者ツールバーを使用してページ・デザイナでホーム・ページを表示するには、次のステップを実行します。

1. アプリケーション・ランタイムの左上で、次のいずれかを実行します。
   • アプリケーションの名前Demo Projectsをクリックします。
   • サイドバーのHomeリンクをクリックします。(開発者ツールバーの「ホーム」をクリックしないでください。)
   ランタイム・ホーム・ページが表示されます。
2. 実行時開発者ツールバーで、「ページ1の編集」をクリックします。

   注意:

   「ページの編集 #」ボタンの番号は、ページ・デザイナで割り当てられたページ番号に対応します。
   ページ・デザイナにページ1が表示されます。

ヒント:

ページ・デザイナは、Application Expressの開発者の主要アセットです。アプリケーションの構築、管理および拡張に使用する強力なツール群を備えた強力なIDE (統合開発環境)です。ここまでは、アプリケーションの作成ウィザードおよびSQLワークショップを主に使用してきました。

図page_designer_annotated.pngの説明

このチュートリアルの残りの部分では、ページ・デザイナを主に使用します。

ページ・デザイナの詳細は、Oracle Application Expressアプリケーション・ビルダー・ユーザーズ・ガイドを参照してください。

5.2 ページの作成ウィザードを使用したフォーム・ページの作成

ページの作成ウィザードを使用してアプリケーションに新しいページを追加します。新しいページの追加に関しては、アプリケーションの作成ウィザードより強力なインタフェースがあります。

フォームを「Projects」レポートに追加すれば、ユーザーが情報を自分で編集できるようになります。

ページ・デザイナでページの作成ウィザードを開くには、次のステップを実行します。

1. 「作成」アイコン(右上)をクリックし、「ページ」を選択します。
   
   

   
   図page_designer_shared_components_icon_context.pngの説明

   
   
   ページの作成ウィザードが表示されます。
2. 「フォーム」を選択します。
3. 再度「フォーム」を選択します。
4. 次のように入力します。
   1. 「ページ番号」に、4と入力します
   2. ページ名 - 「Maintain Project」と入力します
   3. ページ・モード - 「モーダル・ダイアログ」を選択します
   4. 「次」をクリックします。
5. 「ナビゲーションのプリファレンス」で、次のように入力します。
   1. 「このページとナビゲーション・メニュー・エントリを関連付けない」を選択します。
   2. 「次」をクリックします。
6. 「データ・ソース」で、次のように入力します。
   1. 表/ビューの名前 - 「LOV」アイコンをクリックして「SAMPLE$PROJECTS (table)」を選択します
   2. 「次」をクリックします。
7. 「フォームの作成 - 列と主キー」に次のように入力します。
   1. 主キーのタイプ - 「データベースで管理(ROWID)」を選択します
   2. 「作成」をクリックします。

ページ・デザイナが再ロードされて、ページ4: 「Maintain Project」が表示されます。

5.3 プロジェクト・カードと「Maintain Project」フォームのリンク

これで、「Projects」レポートのSQL問合せを更新して、「Maintain Project」フォームをコールできます。

クリックすると「Maintain Project」フォームが表示されるように、「Projects」ページのカードを再構成します。

ページ・デザイナで「Projects」ページ(ページ3)に移動するには、次のステップを実行します。

1. ツールバーで、「ページ・ファインダ」領域を見つけます。
   
   

   
   図page_designer_page_finder_area.pngの説明

   
   
2. 次のいずれかを行います:
   • 「ページ・ファインダ」アイコンをクリックし、リストから「3」を選択します。
   • ページ番号を「3」に変更して、[Enter]を押します。
   • 「前のページにナビゲート」アイコン(下矢印)をクリックします。
   ページ・デザイナに、ページ3:「Projects」がロードされます。

「Projects」リージョンのSQL問合せを更新するには、次のステップを実行します。

3. 次のいずれかを実行して「Projects」リージョンを選択します。
   • 「レンダリング」タブ(左ペイン)の「リージョン」-「コンテンツ本体」で、「Projects」を選択します。
   • 「レイアウト」タブ(中央ペイン)で下にスクロールし、「Projects」リージョンをクリックします。
   
   

   
   図page_designer_projects_region.pngの説明

   
   
4. プロパティ・エディタ(右ペイン)の「ソース」グループで、「SQL問合せ」属性を見つけます。
   
   

   
   図property_editor_projects_sql.pngの説明

   
   
5. コード・エディタ: 「SQL問合せ」アイコンをクリックすると、コードをより簡単に読み込むことができます。

   SQL問合せを確認すると、CARD_MODIFIERSやCARD_LINKなどの別名がSQLで使用されていることがわかります。正しい出力を生成するためには、これらの特定の別名がカード・リージョンに必要です。別名CARD_LINKを更新して、先ほど作成した新しいページにリンクできます。

6. 「SQL問合せ」フィールドの内容を次のコードで置き換えます。

   select ' ' card_modifiers
     , apex_util.prepare_url( 'f?p=&APP_ID.:4:&SESSION.:::4:P4_ROWID:'|| rowid ) card_link
     , ' ' card_color
     , ' ' card_icon
     , apex_string.get_initials(name) card_initials
     , name card_title
     , description card_text
     , 'Budget '|| to_char(budget,'L99G999') card_subtext
   from sample$projects

   
   図code_editor_projects_sql.pngの説明
7. 「検証」アイコンをクリックして確認します。

   ウィンドウの上部に「検証成功」というメッセージが表示されます。

8. 「OK」をクリックします。
9. 「ページの保存と実行」をクリックします
   1. 警告ダイアログが表示された場合は、「再試行」をクリックします。

      ヒント:

      また、「保存」ボタン、「ページの保存と実行」の順にクリックして、この警告を回避することもできます。

   「Projects」ページがランタイムにロードされます。
10. プロジェクトをクリックして、そのプロジェクトの「Maintain Project」フォームを表示します。

    アクセスを制限するために、いくつかのフィールドを非表示にしてください。たとえば、プロジェクトIDまたはタイムスタンプへの完全なアクセス権があるユーザーは、不注意または故意にデータベースを容易に侵害できます。

ページ・デザイナで「Maintain Project」フォームにすばやく戻るには、次のステップを実行します。

11. 画面の下部にある実行時開発者ツールバーで、「ページ4の編集」をクリックします。

    ページ・デザイナに、ページ4:「Maintain Project」がロードされます。

5.4 ページ・デザイナでの「Maintain Project」フォームの更新

有用性とセキュリティを向上させるために、ページ・デザイナを使用して「Maintain Project」フォーム(ページ4)を次のように更新します。

• タイプを非表示に変更して列を非表示にします
• 既存のリージョン内でのアイテムを移動します
• 選択リストへのアイテムの変更
• 複数のアイテムをテキスト・フィールドに変更します
• サブリージョンを作成して、読取り専用の拡張可能なグループにアイテムを整理します。

リージョン名を変更するには、次のステップを実行します。

1. 「レンダリング」または「レイアウト」タブで、「フォームの作成」をクリックします。
2. プロパティ・エディタで、次のように操作します。
   1. 識別: タイトル - 「Maintain Project」と入力します

エンド・ユーザーは、フォームのID列を表示する必要はありません。「P4_ID」を非表示の列に変更して、アプリケーションでレンダリングしないようにします。

ページ・デザイナで列を非表示にするには、次のステップを実行します。

3. 「レイアウト」タブで、「P4_ID」アイテムをクリックします。
4. プロパティ・エディタで、次のように操作します。
   1. 指定: タイプ - 「非表示」を選択します。

リージョン内のアイテムを移動するには、次のステップを実行します。

5. 「レイアウト」タブで、次のようにします。
   1. 「P4_STATUS_ID」アイテムを右クリックします。
   2. 「移動先」、「Maintain Project」、「アイテム」、「P4_BUDGET」および「後」を選択します。

      ヒント:

      マウスを使用して、「レンダリング」タブおよび「レイアウト」タブの要素をドラッグ・アンド・ドロップすることもできます。
   
   

   
   図page_designer_moved_status.pngの説明

   
   
6. 「保存」をクリックします。

アイテムを選択リストに変換するには、次のステップを実行します。

7. 「P4_STATUS_ID」が選択されたままであることを確認します。
8. Property Editorで、次のように操作します。
   1. 指定: タイプ - 「選択リスト」を選択します。
   2. ラベル: ラベル - 「Status」と入力します
   3. List of Values: タイプ - 「SQL問合せ」を選択します。
   4. LOV: SQL問合せ - 次のように入力します。

      select description d, id r
      from SAMPLE$PROJECT_STATUS
      order by display_order

   5. LOV: 追加値の表示 - 「いいえ」を選択します。
   6. LOV: NULL表示値 - 次のように入力します。

      - Select Status -

   
   

   
   図page_designer_status_id_property_editor.pngの説明

   
   

   注意:

   前述のSQLでは、「display_order」という列を含む実表SAMPLE$PROJECT_STATUSを使用して、レコードが正しい順序で表示されるようにしています。
9. 「保存」をクリックします。

複数のアイテムを同時に変更するには、次のステップを実行します。

10. [Ctrl]キーを押したまま次のアイテムをクリックして、両方とも選択します。
    1. P4_NAME
    2. P4_PROJECT_LEAD
11. Property Editorで、次のように操作します。
    1. 指定: タイプ - 「テキスト・フィールド」を選択します。
    
    

    
    図page_designer_multiple_regions.pngの説明

    
    

    注意:

    複数の要素を選択すると、プロパティ・エディタには、選択した要素すべてに共通の属性のみが表示されます。

折りたためるサブ・リージョンを作成するには、次のステップを実行します。

12. 「レンダリング」タブで、「Maintain Project」リージョンを右クリックして「サブ・リージョンの作成」を選択します。

    「新規」サブ・リージョンが、「サブ・リージョン」フォルダに表示されます。

    
    

    
    図illustration page_designer_new_subregion.pngの説明

    
    
13. Property Editorで、次のように操作します。
    1. 指定: タイトル - 「Audit Details」と入力します
    2. 外観: テンプレート - 折りたたみ可能を選択します。
    3. サーバー側の条件: タイプ - 「アイテムはNULLではない」を選択します。
    4. サーバー側の条件: アイテム - 「P4_ROWID」と入力します(ポップアップ・リストからページを選択することもできます)。

    注意:

    「サーバー側の条件」を設定すると、Rowidがnullではないことがチェックされ、ユーザーがレコードを更新するときにのみリージョンが表示されます。

14. 「外観: テンプレート・オプション」ボタンを見つけます(「テンプレート・デフォルトの使用, スクロール - デフォルト」を使用)。
    
    

    
    図property_editor_maintain_project_subregion_template_options_button_initial.pngの説明

    
    
15. 「テンプレート・オプション」で、次のように操作します。
    1. 一般: 縮小可能な状態を記憶 - チェック・ボックスを選択します
    2. デフォルト状態 - 折りたたみを選択します
    3. スタイル - 「境界線の削除」を選択します
       
       

       
       図property_editor_maintain_project_subregion_template_options_button_window.pngの説明

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

    「テンプレート・オプション」ボタンには、現在の構成(「テンプレート・デフォルトの使用」、縮小可能状態の保存、「縮小済」、「境界線の削除」、スクロール - デフォルト)が反映されます。

    
    

    

    
    
16. 「保存」をクリックします。

ドラッグ・アンド・ドロップを使用するかわりに、プロパティ・エディタを使用して、複数のアイテムを「Audit Details」サブ・リージョンに移動し、これらを「表示のみ」に変換すれば、外観テンプレートを一度にまとめて切り替えることができます。

プロパティ・エディタを使用してアイテムをサブ・リージョンに移動するには、次のステップを実行します。

17. [Ctrl]キーを押したまま次のアイテムを選択します。

    • P4_CREATED

    • P4_CREATED_BY

    • P4_UPDATED

    • P4_UPDATED_BY

18. Property Editorで、次のように操作します。
    1. 指定: タイプ - 「表示のみ」を選択します
    2. レイアウト: リージョン - 「..Audit Details」を選択します
    3. 外観: テンプレート - オプション - 浮動を選択します

       注意:

       2つの終止符は、インタフェースにおけるサブ・リージョンの名前の短縮機構です。実際には「サブ・リージョン「Audit Details」の意味だと思ってください。

    アイテムがサブ・リージョンに移動します。
19. 「保存」をクリックします。

「Maintain Project」フォームはモーダル・ページです。モーダル・ページは、他のページのようにページ・デザイナから直接実行できません。関連付けられている非モーダル・ページ(この場合はページ3「Projects」)にランタイムにナビゲートし、そこからモーダル・ページを開く必要があります。

モーダル・ページ「Maintain Project」を実行するには、次のステップを実行します。

20. ランタイムに、「Projects」ページを再ロードします。(ブラウザのリフレッシュまたは再ロード・ボタンをクリックします。)
21. プロジェクト・カードをクリックします。
    
    

    
    図runtime_maintain_project_form_collapsed_subregion.pngの説明

    
    

    変更された「Status」フィールドと展開可能な「Audit Details」リージョンに注目してください。それぞれをクリックしてみて、ページがどのように反応するかを確認してください。

22. 終了したら、ツールバーの「ページ4の編集」をクリックして、ページ・デザイナの「Maintain Project」に戻ります。

5.5 動的アクションの作成

「P4_STATUS_ID」アイテム選択リストに動的アクションを追加し、ユーザーがプロジェクト・ステータスを「完了」に変更すると、完了日が表示されるようにします。

Application Expressの動的アクションは、JavaScriptやAJAXを使用しないで宣言的にクライアント側動作を定義するために使用します。そのかわり、Application Expressエンジンは、宣言に基づいて必要なコードを実装します。

動的アクションを作成するには、次のステップを実行します。

1. 「レンダリング」タブで、「P4_STATUS_ID」アイテムを右クリックして「動的アクションの作成」を選択します。

   「動的アクション」要素が子として「P4_STATUS」に移入されます。

   
   

   
   図page_designer_dynamic_action_new.pngの説明

   
   
2. Property Editorで、次のように操作します。
   1. 指定: 名前 - 「Show Completed Date」と入力します
   2. クライアント側の条件: タイプ - 「アイテム = 値」を選択します
   3. クライアント側の条件: 値 - 「3」を入力します

      注意:

      「値」フィールドに「3」(status_ID=3)と入力すると、選択リストの3番目のアイテム(この場合は「完了」ステータス)がターゲットになります。

3. 「レンダリング」タブの完了日の表示動的アクションで、「表示」要素を選択します。
   
   

   
   図page_designer_dynamic_action_show.pngの説明

   
   
4. Property Editorで、次のように操作します。
   1. 影響を受ける要素: アイテム - 「LOV」アイコンをクリックし、「P4_COMPLETED_DATE」を選択します(「P4_COMPLETED_DATE」と入力することもできます)。

一部のタイプの動的アクション(「表示」、「有効化」、「ツリーを開く」など)では、対応する反対のアクションも作成する必要があります。反対のアクションでは、True When条件が一方向の影響を要素に与える場合に、False When条件が反対方向の影響を要素に与えます。

反対のアクションを追加するには、次のステップを実行します。

5. 「レンダリング」タブの完了日の表示で、「表示」を右クリックします。
6. 反対のアクションの作成を選択します。

   「非表示」動的アクションが移入されます(「非表示」は「表示」の反対です)。

   
   

   
   図page_designer_dynamic_action_hide.pngの説明

   
   

   ここでは、「P4_STATUS_ID」が「完了」の場合に、「P4_COMPLETED_DATE」アイテムが表示されます。他のステータスが選択されると、「P4_COMPLETED_DATE」は非表示になります。

7. 「保存」をクリックします。

5.6 完了日に対する検証の追加

ページ検証では、エンド・ユーザーが入力したデータが正しいことが確認されます。検証に失敗すると、エラー・メッセージが表示され、値はデータベースに保存されません。

次の目的で、「完了日」アイテムに2つの検証を追加します。

• ユーザーがステータスを「完了」に変更した場合は、日付もユーザーが追加する必要があります。
• ユーザーは将来の日付を入力できません。

新しい検証を作成するには、次のステップを実行します。

1. ページ・デザイナの「Maintain Project」ページで、「レンダリング」タブの上部にある「プロセス」タブ(回転矢印)をクリックします。
   
   

   
   図page_designer_processing_tab.pngの説明

   
   
2. 「検証」要素を右クリックして「検証の作成」を選択します。

   新しい検証が表示されます。

   
   

   
   図page_designer_validation_new.pngの説明

   
   
3. Property Editorで、次のように操作します。
   1. 指定: 名前 - 「Completed Date is Not Null」と入力します
   2. 検証: タイプ - 「アイテムはNULLではない」を選択します
   3. 検証: アイテム - 「P4_COMPLETED_DATE」と入力します
   4. エラー: エラー・メッセージ - 「#LABEL# must have some value」と入力します。
   5. エラー: 関連付けられたアイテム - P4_COMPLETED_DATEを選択します
   6. サーバー側の条件: タイプ - 「アイテム = 値」を選択します
   7. サーバー側の条件: アイテム - 「P4_STATUS_ID」と入力します。
   8. サーバー側の条件: 値 - 「3」と入力します

      この条件は、「ステータス」アイテムが「完了」のときのみ検証が起動することを保証します。

      注意:

      関連付けられたアイテムのラベルによって、エラー・メッセージの#LABEL#のテキストが置換されます。アイテム・ラベルを更新すると、エラー・メッセージも自動的に更新されます。これにより整合性が改善されて、現在のラベル参照がメッセージが確実に反映されます。

      ヒント:

      プロパティ・エディタで属性内をクリックするときに、「レイアウト」タブの上部にある「ヘルプ」タブをクリックすれば、その属性のコンテンツ(エラー・メッセージなど)の例を表示できます。
   9. 「保存」をクリックします。

検証をコピーするには、次のステップを実行します。

4. 「プロセス」タブで、完了日がNULLでないを右クリックして複製を選択します。

   アイテム「完了日がNULL_1ではありません」が選択されます。

5. Property Editorで、次のように操作します。
   1. 指定: 名前 - 「Completed Date is not Forward Dated」と入力します
   2. 検証: タイプ - 「PL/SQL式」を選択します
   3. 検証: PL/SQL式 - 「:P4_COMPLETED_DATE <= SYSDATE」と入力します

      ヒント:

      コロン(:)を必ず含めてください。PL/SQLでページ・アイテムを参照するには、:ITEM_NAME構文を使用します。SYSDATEは、Oracle Databaseの現在の日付を返します。

   4. エラー: エラー・メッセージ - 「#LABEL# cannot be a future date」と入力します
   5. サーバー側の条件: タイプ - 「アイテムはNULLではない」を選択します
   6. サーバー側の条件: アイテム - 「P4_COMPLETED_DATE」と入力します
6. 「保存」をクリックします。
7. 実行時に、「Projects」ページを再ロード(ブラウザのタブを再ロード)し、プロジェクト・カードをクリックして「Maintain Project」を表示します。

フォームが完成しました。

図runtime_maintain_project_form_validations.pngの説明

次のタスクを試して、アプリケーションの動作を確認してください。

• 「ステータス」を変更して、完了日がどのように表示または非表示になるかを見てください。
• 進行中のプロジェクトを検索し、ステータスを「完了」に変更しますが、完了日は空のままにして、「変更の適用」をクリックします。(エラー・メッセージが表示されます。)
• 将来の完了日を入力して、「変更の適用」をクリックします。(エラー・メッセージが表示されます。)

完了したら、開発者ツールバーの「アプリケーション#####」をクリックしてアプリケーションのホーム・ページに戻ります。