5 ホームページの開発

ページ・デザイナを使用して、プロジェクト・タスクのチャートと、アプリケーションのホームページにある未処理タスクについて詳しく説明したレポートを作成します。

このレッスンについて

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

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

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

一度作成して、作成後にアプリケーション内の複数のページに追加できる要素がある「共有コンポーネント」セクションを使用して、ナビゲーション・メニューのプレースホルダ・アイコンをアップデートできます。

ここから開始:

Basic Projects App Export - Topic 3.sql

前のレッスンを完了していない場合、付録「作業領域へのアプリケーションのインストール」を使用して上述のSQLスクリプトを作業領域にインポートし、このレッスンから先に学習を続けられます。このスクリプトは、このチュートリアル付属の.zipファイルを解凍した場所の/filesサブディレクトリにあります。

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

前のレッスンの最後で、ページ・デザイナからアプリケーションを実行しました。それにより、Webブラウザのウィンドウにアプリケーション・ランタイムの「カレンダ」ページが開きました。

アプリケーション・ビルダーからデスクトップ・アプリケーションを実行すると、すべての編集可能な実行ページの最下部にランタイム開発者ツールバーが表示されます。

GUID-F94050CA-633D-4A5D-B310-0DA71943DBAB-default.pngの説明が続きます

図GUID-F94050CA-633D-4A5D-B310-0DA71943DBAB-default.pngの説明

開発者ツールバーを使用すると、現在のアプリケーションまたは現在実行しているページをすぐに編集できます。開発者ツールバーは、開発者レベルの権限を持つユーザーに対してのみ表示されます。

ホームページの開発を開始するには、ページ・デザイナに戻ってアプリケーション・ビルダーのホームページを検索します。ランタイムの開発者ツールバーにあるショートカットを使用することもできます。

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

アプリケーション・ランタイムの左上で、次のいずれかを実行します。
- アプリケーションの名前Demo Projectsをクリックします。
- サイドバーのHomeリンクをクリックします。(開発者ツールバーの「ホーム」をクリックしないでください。)
空白のホームページが表示されます。
開発者ツールバーで、「ページの編集 1」をクリックします。
注意:
「ページの編集 #」ボタンの番号は、ページ・デザイナで割り当てられたページ番号に対応します。

ブラウザは、ページ・デザイナのウィンドウに自動的に切り替わります。

5.2 ホームページへのタスク概要チャートの追加

ページ・デザイナで見ているのは、ホームページの骨組みです。ユーザーがログイン時にすぐに目にするように、すべてのプロジェクトの残りのタスクのチャートを作成します。

「ギャラリ」の「レイアウト」タブの下には、「リージョン」、「アイテム」および「ボタン」の3つのタブがあります。各「ギャラリ」タブにはアプリケーション・ページに追加できる要素があり、要素を右クリックして「追加先」機能を選択することで配置できます。

ページ・デザイナでは、「レイアウト」タブでマウスでオブジェクトをドラッグするなど、いくつかの方法でページ・コンテンツを対話的に操作できます。

グラフをページに追加する手順:

ページ・デザイナで、「ギャラリ」の「リージョン」タブをクリックします。
チャート要素を見つけます。
「チャート」を右クリックして「追加先」を選択し、「コンテンツ本体」を選択します。
ヒント:
「ギャラリ」から「レイアウト」にコンテンツをドラッグ・アンド・ドロップすることもできます。リージョンを上へドラッグして「コンテンツ本体」の下の小さな黄色のセクションに合せると、黄色のセクションが展開します。黒い四角がついた濃い黄色のセクションは、リージョンが表示される位置を示します。

ヒント:

前のアクションを元に戻すには、「元に戻す」ボタンをクリックします。

5.3 プロパティ・エディタでのチャート・リージョンの編集

次に、名前などの更新されるアイテムがあるチャート・リージョンを構成する必要があります。

新しいリージョンを構成するごとに、プロパティ・エディタでいくつかの属性フィールドを更新する必要があります。リージョンが複雑であるほど、多くのフィールドを構成する必要があります。一部のフィールドには、「タイトル - 新規」など、デフォルトのプレースホルダ・コンテンツがすでに含まれています。

チャート・リージョンを選択してプロパティ・エディタでデフォルト値を編集します。

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

「コンテンツ本体」の下の「レンダリング」ツリーで、「新規」チャートをクリックして選択します。
プロパティ・エディタで「指定」グループを見つけます。
ヒント:
属性は、機能グループに編成されます。これらのグループを展開または縮小するには、「共通の表示」、「すべて表示」、「すべて閉じる」および「すべて開く」アイコンをクリックします。

属性を検索するには、「フィルタ・プロパティ」フィールドにキーワード検索を入力します。その用語を含むグループと属性が表示されます。
タイトルに「Project Tasks」と入力して[Enter]を押します。
「レンダリング」タブと「レイアウト」のリージョンの名前が更新されます。

また、変更したグループ名の近くにはマーカー(青い三角形)が表示されます。これらのマーカーは、保存されていない変更があるフィールドの横に表示されます。まだリージョンに対して行うべき追加の変更があるので、保存の前にそれらを完了します。

注意:
ページ・デザイナ内で他のどこかをクリックすると、プロパティ・エディタのフィールドも自動的に更新されます。

次に、プロパティ・エディタで外観テンプレートを編集して、チャートのサイズを変更します。

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

プロパティ・エディタで「外観 - テンプレート・オプション」を見つけます。

図GUID-A467D99E-6BEA-49F7-B010-8922966FC5E1-default.pngの説明
ヒント:

「グループに移動」アイコンをクリックすると、プロパティ・エディタに現在リストされているすべてのグループが表示されます。リストにあるグループの名前を選択すると、プロパティ・エディタでそこにジャンプします。

プロパティ・エディタ最上部の検索フィルタを使用して表示されるフィールドを絞り込むか、[Ctrl] + [F]または[Cmd] + [F]でブラウザの検索機能を使用してページ・デザイナのアイテムを検出します。
「テンプレート・オプション」ボタンをクリックします(テンプレート・デフォルトの使用, スクロール - デフォルト)。

図GUID-87D6D68B-D04D-4132-A892-9BBCAF2577EE-default.pngの説明
「テンプレート・オプション」ダイアログが表示されます。
「共通 - 本体高さ」には480pxを選択し、「OK」をクリックします。
「テンプレート・オプション」ボタンが、現在の構成を反映して「テンプレート・デフォルトの使用, 480px, スクロール - デフォルト」に更新されます。

次に、チャートを構成するために「レンダリング」タブで属性アイテムを選択してプロパティ・エディタで編集します。

ここまでは、プロパティ・エディタでリージョンのプロパティを構成しました。これらのプロパティは、ページ上のリージョンが、ページの残りのリージョンと関連してどう表示されるかを制御します。

次に、リージョンの属性を変更するために「レンダリング」ツリーで「属性」フォルダを選択します。属性はリージョン・タイプ(ここではチャート・リージョン)に固有で、リージョンの内部特性を制御します。たとえば、「属性」でチャート・タイプ(棒グラフ)、向き(縦)および軸ラベルを選択します。

チャートのリージョン属性を編集するには、次のステップを実行します。

「レンダリング」タブで、「属性」フォルダを選択します。

図GUID-8679450C-7A0F-4DB8-834D-BF2222EDEDF5-default.pngの説明
Property Editorで、次のように操作します。
- 外観: 向き - 「横」を選択します
- 外観: 積上げ - 「はい」を選択します
- レイアウト: 高さ - 「480」と入力します
注意:
プロパティ・エディタ内の属性はグループに整理されています。プロパティ・エディタの箇条書きリストで「グループ: 属性 - アクション」を指定すると、指定の属性を簡単に見つけられます。

次に、必要なSQL問合せを追加してチャートのデータを入力します。

5.4 チャートのSQL問合せの定義

最後に、チャートのSQL問合せを定義して、データベースのDEMO_PROJECTS表からデータを導入する必要があります。

SQL問合せはチャートの動的部分です。ユーザーがアプリケーションで進捗を更新すると、チャートに変更が反映されてユーザーがページをリフレッシュするたびに更新されます。

このチャートに対して2つの問合せを定義します。いずれもDEMO_TASKS表のIS_COMPLETE_YN列を問い合せますが、1つ目はY (= yes)とマークされたアイテムを表示し、2つ目はN (= no)とマークされたアイテムを表示します。ユーザーがタスクが完了したかどうかをアプリケーションで示すと、IS_COMPLETE_YN列にデータが移入されます。

ヒント:

データ系列は、「レンダリング」ペインの「シリーズ」フォルダにあります。現時点では、赤いXが横についた「新規」系列が表示されています。

GUID-099ABFE2-FAD0-47BD-BEB8-8BD1707CA3A1-default.pngの説明が続きます

図GUID-099ABFE2-FAD0-47BD-BEB8-8BD1707CA3A1-default.pngの説明

これは、必須要素が不適切に定義されていることを示すエラー・メッセージです(この場合、まだ問合せを入力していないため)。また、中央ペインの「メッセージ」タブに、3つのシステム・メッセージが現在表示されていることが示されます。「メッセージ」タブをクリックすると、特定のエラーと、ページ・デザイナのどこに表示されているかが表示されます。この事例では、すべてのメッセージが、チャートのデータ系列の必須要素が存在しないことを示しています。

「レンダリング」ペインの「シリーズ」アイテムに対してSQL問合せ「Yes」を定義するには、次のステップを実行します。

「レンダリング」タブの「シリーズ」の下にある「新規」をクリックします。
Property Editorで、次のように操作します。
1. 指定: 名前 - 「Completed Tasks」と入力します
2. 「ソース: SQL問合せ」フィールドを見つけます。次のコードをコピーして貼り付けます。
```
select p.created
, p.id
, p.name
, count(t.id) tasks
from demo_projects p
, demo_tasks t
where p.id = t.project_id
and nvl(t.is_complete_yn,'N') = 'Y'
group by p.created, p.id, p.name
order by p.created
```
3. 列のマッピング: ラベル - 「NAME」を選択します
4. 列のマッピング: 値 - 「TASKS」を選択します

次に、2つ目の系列を追加して2つ目の問合せを適用します。問合せが非常に類似しているため、ゼロから定義しなくとも、この系列を複製していくつか細かく修正することができます。

SQL問合せを複製して再構成するには、次のステップを実行します。

「レンダリング」ツリーで、「Completed Tasks」系列を右クリックします。
「複製」を選択します。
系列「Completed Tasks_1」が、「シリーズ」フォルダの下に、選択された状態で表示されます。
Property Editorで、次のように操作します。
1. 指定: 名前 - 「Incomplete Tasks」と入力します
2. 「ソース: SQL問合せ」フィールドを見つけます。次のコードをコピーして貼り付け、現在のコンテンツを上書きします。
```
select p.created
, p.id
, p.name
, count(t.id) tasks
from demo_projects p
, demo_tasks t
where p.id = t.project_id
and nvl(t.is_complete_yn,'N') = 'N'
group by p.created, p.id, p.name
order by p.created
```
注意:
各プロジェクト・レコードに対してDEMO_TASKSを数え、適切なWHERE条件を使用することで、2つの系列(「Completed Tasks」と「Incomplete Tasks」)が定義されます。

最後に、適切なラベルで軸を更新します。

軸フォルダの下にネストされている「レンダリング」ツリーで、x軸をクリックします。
「指定: タイトル」に「Projects」と入力します。
y軸をクリックします。
「指定: タイトル」に「Tasks」と入力します。
ページ・デザイナ・ツールバーの「保存」をクリックします。

タスク概要に対するチャートの追加が完了しました。

5.5 レポート・ホームページへの未処理タスクの追加

追加したチャートはすべてのチーム・メンバーのすべてのタスクの概要を提供しているため、個人でなくすべてのユーザーに適用される情報のみを提供します。ユーザーが自分の未処理タスクを表示するスペースを追加するために、クラシック・レポートを追加できます。

Oracle Application Expressでは、レポートは書式が設定されたSQL問合せの結果であり、Application Expressがデータベースから最新情報を導入し、人間が読み取れる表にそれを移入することを意味します。読取り専用のレポートもあれば、エンド・ユーザーがデータを操作、編集できる対話的なものもあります。

クラシック・レポート・リージョンを追加するには、次のステップを実行します。

「レンダリング」ツリーで、「コンテンツ本体」を右クリックして「リージョンの作成」を選択します。
新しいリージョンが表示されます。
プロパティ・エディタで、リージョン・プロパティを編集します。
1. 指定: タイトル - 「My Outstanding Tasks」と入力します
2. 指定: タイプ - 「クラシック・レポート」を選択します
3. SQL問合せ - 次をコピーして貼り付けます。
```
select p.name project
, t.name task
, t.end_date
from demo_tasks t
, demo_projects p
, demo_milestones m
, demo_team_members tm
where p.id = t.project_id
and m.id = t.milestone_id (+)
and tm.id = t.assignee and nvl(t.is_complete_yn, 'N') = 'N'
and upper(tm.username) = upper(:APP_USER)
order by t.end_date
```
  ヒント:
  username = :APP_USERのwhere条件は、レコードを、アプリケーションを実行する人に割り当てられているものに制限します。
「ページの保存と実行」をクリックします。求められたら、アプリケーションにログインします。

5.6 開発者ツールバーを使用したリージョン外観の変更

ページ・デザイナでは、プロパティ・エディタで「外観: テンプレート・オプション」ボタンをクリックしてテンプレート・オプションを更新できます。

別の方法として、開発者であれば、開発者ツールバーでライブ・テンプレート・オプションを呼び出すことで、ランタイム環境でのリージョンの表示特性を更新することもできます。

開発者ツールバーで「クイック編集」オプションをクリックしてオプションを変更すると、基礎になるリージョンにすぐに影響が反映されます。クイック編集を使用して個別のページ・コンポーネント(たとえばリージョン、アイテム、列またはボタン)を編集します。

クイック編集をクリックすると、マウス・カーソルがあるコンポーネントの右上隅にレンチのアイコンが表示されます。次の2つのオプションがあります。

コンポーネント内でクリックすると、選択したコンポーネントにフォーカスがある状態で、すぐにページ・デザイナに戻ります。
レンチのアイコンをクリックすると、コンポーネントの「ライブ・テンプレート・オプション」ダイアログが起動しますが、ランタイム内にとどまります。

ヒント:

クイック編集をキャンセルするには、コンポーネント外をクリックするか、[Esc]を押します。

開発者ツールバーを使用してランタイム内でページ要素を編集するには、次のステップを実行します。

ランタイム開発者ツールバーで、「クイック編集」をクリックします。

図GUID-6C862D4B-A0F0-49FC-822B-10EA1C482A20-default.pngの説明
「My Outstanding Tasks」リージョン(ページ最下部)にカーソルを合せてレンチのアイコンをクリックします。

「ライブ・テンプレート・オプション」ダイアログが表示されます。

図GUID-24EFA060-F8F0-4319-AB43-61123ED347CB-default.pngの説明
「リージョン」タブで、次を入力します。
1. 一般: 本体パディングの削除 - 有効化するには、チェック・ボックスをクリックします
2. 本体高さ - 「480px」を選択します
リージョンが各々のオプションにより変更されます。

リージョンのテンプレート・オプション(「本体高さ」、「ヘッダー」、スタイルなど)は、リージョンの全体的な表示を変更します。リージョンのプロパティは、リージョンがどう表示されるかを決定します。

一部のリージョン・タイプには、属性プロパティ(クラシック・レポート、チャートなど)も含まれます。リージョンの属性は、リージョンのコンテンツがどう表示されるかを指定します。

「ライブ・テンプレート・オプション」ダイアログで、「属性」タブをクリックします。
次のように入力します。
1. 一般: ストレッチ・レポート - 有効化するには、チェック・ボックスをクリックします
2. レポート境界線 - 「外部境界線なし」を選択します
「保存」をクリックします。
設定が保存されます。

これでタスク・ブレークダウン・レポート・リージョンの更新を完了しました。

5.7 ホームページ・サイドバーへのアイコンの追加

ページ左上のサイドバーにあるナビゲーション・リンクの横のアイコンは、空のプレースホルダです(サイドバーを展開するためにメニュー・アイコンをクリックする必要があることがあります)。このサイドバーは、「ナビゲーション・メニュー」という名前のリストです。開発者には、アプリケーションのフォームと機能への関心が必要です。ナビゲーション・メニューのアイコンとリンクは技術的に機能しますが、関連グラフィックへの各リンクに対応するプレースホルダ・アイコンを更新するとアプリケーションの操作性を向上させます。

Oracle Application Expressのすべてのインスタンスには、この目的ですぐに使用できる多数のアイコン・セットが付属しています。

アプリケーション・ビルダーの「共有コンポーネント」セクションでリストを編集することで、ナビゲーション・メニューに関連したアイコンを更新できます。共有コンポーネントは、アプリケーション全体で使用できるオブジェクトです。ベスト・プラクティスとして、可能なかぎり共有コンポーネントに一度コードを定義して、様々なページでそのコンポーネントを参照することをお薦めします。

共有コンポーネントで「ナビゲーション・メニュー」アイコンを更新するには、次のステップを実行します。

アプリケーション・ランタイムの開発者ツールバーで、「アプリケーション####」(####がアプリケーションIDを表す)をクリックします。
アプリケーションのホームページが表示されます。
「共有コンポーネント」をクリックします。
「ナビゲーション」で、「リスト」をクリックします。
「リスト」レポートで、「デスクトップ・ナビゲーション・メニュー」を選択します。
「リスト詳細」レポートで、「ホーム」を選択します。
「イメージ/クラス」アイテムを見つけます。フィールド末尾の上矢印アイコン(^)をクリックします。
「イメージ」ライブラリが別ウィンドウで開きます。

「フォントAPEX」ライブラリ(短縮形は接頭辞「fa-」を使用)に用意されているイメージを確認します。これらのイメージはアプリケーション全体で使用でき、見映えを改善し、テキストのみの場合よりも見てわかりやすい目印を提供します。
fa-homeを見つけてクリックします。
ヒント:
ブラウザの検索機能([Ctrl] + [F]または[Cmd] + [F])を使用してページを検索できます。

イメージの名前(fa-home)は、「イメージ/クラス」フィールドに表示されます。

これが唯一の変更だった場合は、変更を保存するために「変更の適用」ボタンをクリックしてかまいませんが、まだ残りの「ナビゲーション・メニュー」エントリを更新する必要があります。

毎回イメージ・ライブラリを参照するのでなく、「イメージ/クラス」のイメージの名前を入力することもできます。

「ナビゲーション・メニュー」で残りのエントリを更新します。
1. 画面の左上で「次へ」アイコン(>)をクリックして次のエントリ(Team Members)に移動します。
2. Team Membersリスト・エントリで、「イメージ/クラス」に「fa-users」と入力します
3. 「次へ」アイコン(>)をクリックします。
4. Projectsリスト・エントリで、「イメージ/クラス」に「fa-folder」と入力します
5. 「次へ」アイコン(>)をクリックします。
6. 「カレンダ」リスト・エントリで、「イメージ/クラス」に「fa-calendar」と入力します
「変更の適用」をクリックします。
「リスト詳細」ページの右上で、「ページの実行 1」アイコン(再生ボタン)をクリックします。
ホームページがリロードされます。
画面左のナビゲーション・メニューにある新しいアイコンを確認します。
完了したら、「共有コンポーネント - リスト詳細」ウィンドウに戻り、ページ・ブレッドクラムの「アプリケーション####」をクリックしてアプリケーションのホームページに戻ります。

これでホームページは完成です。

このレッスンでは、ページ・デザイナを使用して、ページ上のページ・コンポーネントを追加および拡張する方法を学習しました。また、ライブ・テンプレート・オプションを使用してリージョンの外観を改善しました。最後に、共有コンポーネントを使用して、すべてのページ(ナビゲーション・メニュー)に表示されるコンポーネントを更新しました。

次のレッスンに進みます。