10 「カレンダ」ページの開発

「カレンダ」ページの機能を展開すると、ユーザーがプロジェクトを表示、管理できます。

このレッスンについて

アプリケーションの作成ウィザードを使用してカレンダ・ページを作成した場合、DEMO_TASKS表にカレンダが作成されます。現時点では「カレンダ」ページは基本的に表示専用です。タスクとスケジュールの名前の表示のみ可能です。

このレッスンでは、ドラッグ・アンド・ドロップ機能を構成し、タスク名を「Maintain Project」フォーム内の対応するエントリにリンクすることで、カレンダに表示されたプロジェクトを対話モードにする方法を学習します。

ここから開始:

Basic Projects App Export - Topic 8.sql

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

10.1 ランタイムでのカレンダのヘッダーと境界線の非表示

まずビューからカレンダのヘッダーと境界線部分を非表示にして表示を最適化します。

アプリケーションのホームページで、「6 - カレンダ」をクリックして、ページをページ・デザイナで開きます。
次のいずれかを行います:
- ランタイムの「カレンダ」ページに移動します。
- ページ・デザイナで、「ページの保存と実行」ボタンをクリックして、ページをランタイムで表示します。

ライブ・テンプレート・オプションでカレンダのヘッダーと境界線を非表示にするには、次のステップを実行します。

開発者ツールバーで、「クイック編集」をクリックします。
「カレンダ」リージョンにマウス・カーソルを合せ、右上隅にあるレンチのアイコンをクリックします。
「ライブ・テンプレート・オプション」ダイアログが表示されます。
「ライブ・テンプレート・オプション」で次のように操作します。
1. ヘッダー - 「非表示だがアクセス可能」を選択します
2. スタイル - 「境界線の削除」を選択します
「保存」をクリックします。

10.2 個別プロジェクトのドラッグ・アンド・ドロップの有効化

DEMO_TASKS表のキー列でドラッグ・アンド・ドロップを有効化すると、ユーザーがカレンダ内でプロジェクトを再配置できます。

カレンダでプロジェクトのドラッグ・アンド・ドロップを有効化するには、次のステップを実行します。

開発者ツールバーで「ページ6の編集」をクリックしてページ・デザイナに戻ります。
「レンダリング」ツリーで、「コンテンツ本体」フォルダの下にある「カレンダ」リージョンを見つけます。
「レンダリング」ツリーで、「カレンダ」の下にある「属性」を選択します。
Property Editorで、次のように操作します。
1. 設定: 主キー列 - 「ID」を選択します
2. 設定: ドラッグ・アンド・ドロップ: 「はい」を選択します
3. 設定: PL/SQLコードのドラッグ・アンド・ドロップ - 現在のコンテンツを削除し、次のコードをコピーして貼り付けます。
```
begin   update demo_tasks
  set start_date = to_date(:APEX$NEW_START_DATE, 'YYYYMMDDHH24MISS')
  , end_date = to_date(:APEX$NEW_END_DATE, 'YYYYMMDDHH24MISS')
  where id = :APEX$PK_VALUE;
end;
```
  ヒント:
  このPL/SQLコードは「ヘルプ」タブのコード例からコピーされ、適切な表名を使用して更新されました。

10.3 カレンダ・ページへのリンクの追加

ドラッグ・アンド・ドロップに加えて、ユーザーがプロジェクトをクリックすると、クイック編集のためにアプリケーションがそのアイテムの「Maintain Project」ページに移動するリンクに、すべてのプロジェクトを変換できます。

カレンダのすべてのアイテムに「Maintain Project」へのリンクを追加するには、次のステップを実行します。

「レンダリング」ツリーで、「カレンダ」の下にある「属性」を選択します。
Property Editorで「設定」グループを展開し、「リンクの表示/編集」ボタンをクリックします(「リンクが定義されていません」)。
「リンク・ビルダー」ダイアログが表示されます。
Link Builderの「リンクの表示/編集」ダイアログで、次のように操作します。
1. ページ - 5を選択または入力します
2. 名前 - 「P5_ID」を選択します
3. 値- 「PROJECT_ID」を選択するか、「&PROJECT_ID」と入力します。
4. 「キャッシュのクリア」に、5と入力します
図GUID-A4046D3F-3178-49B5-91F3-C83E01CA6E00-default.pngの説明
「OK」をクリックします。
「ページの保存と実行」をクリックします。

「カレンダ」の変更と新しい機能を確認します。

それらの機能を試用してページの反応を確認します。

カレンダ・エントリに合せると、ツールチップにタスク名、開始日、終了日が表示されます。
既存のカレンダ・エントリをクリックして、カレンダ・エントリの詳細にデータが移入された「Maintain Task」ページの表示を確認します。
カレンダ・エントリをクリックしたままカレンダ上の新しい日付に動かし、選択したタスクの開始日と終了日がどのように更新されるか確認してください。
カレンダ・エントリの端をクリックしたまま左右に移動して、選択したタスクの終了日が更新されるのを確認してください。
現在の月のイベントのリストを参照するには、「リスト」ボタンをクリックします。
ドラッグ・アンド・ドロップ操作の実行後、カレンダ・エントリをクリックして、そのタスクの日付が変更されたことを確認します。

お疲れ様でした。アプリケーションはこれで完成です。