プライマリ・コンテンツに移動

Oracle® Application Expressアプリケーション・ビルダー・ユーザーズ・ガイド リリース5.1 E83810-03 |
| 目次 | 索引

前 | 次 |

# 10.1 カレンダの作成

アプリケーション・ビルダーには月次、週次、日次およびリスト表示のカレンダを生成するための組込みウィザードが含まれています。カレンダのベースとなる表を一度指定すると、特定の列に格納された情報へのドリルダウン・リンクを作成して、ドラッグ・アンド・ドロップ機能を有効化できます。

トピック:

- サポートされているカレンダについて
- サンプル・カレンダ
- 新しいページへのカレンダの追加
- ページ・デザイナでのカレンダの作成
- ページ・デザイナでのカレンダ属性の管理
- カレンダの動的アクションのサポートについて

関連項目:

レガシー・カレンダの管理およびGoogleカレンダとの統合

## 10.1.1 サポートされているカレンダについて

アプリケーション・ビルダーでは、次の2つのカレンダ・タイプがサポートされています。

- カレンダ - カレンダは、FullCalendar jQueryライブラリをベースにしており、CSSを介してのみカスタマイズできます。

- レガシー・カレンダ - レガシー・カレンダはテンプレートベースで、今後のリリースでは非推奨になる可能性があります。

ヒント:

以前のリリースでは、レガシー・カレンダはカレンダ(テンプレート)、クラシック・カレンダ、簡易カレンダおよびSQLカレンダと呼ばれていました。

両方のカレンダ・オプションで、指定した表またはSQL問合せをベースとするカレンダを作成できます。作成プロセス中、日付列と表示列を選択するプロンプトが表示されます。適切なユーザー・インタフェースと様々な追加機能が提供されるため、すべてのレガシー・カレンダを最新カレンダに変換することをお薦めします。

Calendar

カレンダ・オプションでは、次のことがサポートされます。

- 複数ビューでのカレンダ・イベントのレンダリング(「月」、「週」、「日」または「リスト」)。

- 期間ベース・イベントおよび期間ベースでないイベントのレンダリング。

- イベントを異なる日付にドラッグ・アンド・ドロップすることによって開始日および終了日を変更する機能。ドラッグ・アンド・ドロップは、ローカル・データ・ソース(つまり、参照されるデータベース・スキーマのデータベース・オブジェクト)でのみサポートされ、Googleカレンダなどの外部データ・ソースではサポートされません。

- イベントの長さをサイズ変更したり、終了日を変更することによって期間を変更する機能。

- フォームを使用し、イベントまたは空のカレンダ・セルのいずれかをクリックすることによって、カレンダの新規イベントを編集または追加する機能。

- Webサービス・コールまたはGoogleカレンダ・フィードを使用した外部ソースからのイベントのレンダリング。

- 単一または複数の行でイベント・タイトルをレンダリングする機能。

- 様々なCSSクラスを使用して、開発者は様々なイベント・タイプに様々なスタイルを選択できます。

- PDFの印刷可能な書式でイベントをダウンロードする機能

- イベントを共有する複数の形式(iCal、CSV、XML)のサポート。

- 各イベントの詳細を簡単に確認できるように、月次/週次/日次ビューにツールチップを追加する機能。

レガシー・カレンダ

レガシー・カレンダ・オプションでは、次のことがサポートされます。

- 1ページにつき1つのレガシー・カレンダの作成。

- 開始日のみのレンダリング。

- テンプレートによって定義されるルック・アンド・フィール。

- イベントのドラッグ・アンド・ドロップによる開始日の変更。

- 日次、週次、月次ビューを含むカレンダ。

- 日付列は、エントリが含まれるカレンダ上の日付を決定します。

- 表示列は、カレンダを表示する特定の行を定義します。

関連項目:

レガシー・カレンダの管理

## 10.1.2 サンプル・カレンダ

次に、サンプル・データベース・アプリケーションからのサンプル・カレンダを示します。

図GUID-93A79D72-4042-48CF-9893-64F985E6B114-default.pngの説明

このカレンダの機能は次のとおりです。

- 前へ - 前月にナビゲートします。

- 次へ - 翌月にナビゲートします。

- 月 - すべての順序の月次ビューを表示します。

- リスト - すべての順序のリストを表示します。

ヒント:

その他のカレンダの例を確認するには、サンプル・カレンダ・アプリケーションをインストールします。パッケージ・アプリケーションのインストールを参照してください。

## 10.1.3 新しいページへのカレンダの追加

アプリケーションの作成ウィザードを実行して、カレンダを新しいページに追加します。

アプリケーションのホームページからカレンダを作成するには、次のステップを実行します。

1. ページの作成ウィザードを実行します。

   1. 「ワークスペース」ホームページにナビゲートします。

   2. 「アプリケーション・ビルダー」アイコンをクリックします。

   3. アプリケーションを選択します。

   4. 「ページの作成」をクリックします。

      ページの作成ウィザードが表示されます。

2. 「ページの作成」で、次のステップを実行します。

   1. ユーザー・インタフェース: ページのユーザー・インタフェースを選択します。

   2. ページ・タイプの選択: 「カレンダ」を選択します。

   3. 「次へ」をクリックします。

3. 「ページ属性」は、次のようにします。

   ヒント:

   属性の詳細は、フィールドレベル・ヘルプを参照してください。フィールドレベル・ヘルプの表示を参照してください。

   1. ページ番号: 新しいページ番号を指定した場合、ウィザードによって新しいページが作成されます。既存のページ番号を指定した場合、ウィザードによってそのページにコンポーネントが追加されます。

   2. ページ名: 作成するページのタイトルを入力します。

   3. ページ・モード: ページ・モードを選択します。

   4. ブレッドクラム: ページでブレッドクラム・ナビゲーション・コントロールを使用するかどうか、およびどのブレッドクラム・ナビゲーション・コントロールを使用するかを選択します。

   5. 「次へ」をクリックします。

4. 「ナビゲーション・メニュー」で、このページに含めるナビゲーションのタイプを指定し、「次へ」をクリックします。表示されるナビゲート・オプションは、カレント・アプリケーション・テーマによって異なります。

5. 「ソース」で、カレンダ・ソースが表かSQL問合せかを選択します。

   カレンダ・ソースが表の場合:

   1. ソース・タイプ - 「表」を選択します。

   2. 表/ビューの所有者 - カレンダを作成している表の所有者を選択します。

   3. 表/ビューの名前 - カレンダの基になる表またはビューを選択します。

   4. 列の選択 - カレンダに含める1つ以上の列を選択します。

   5. 「次へ」をクリックします。

   カレンダ・ソースがSQL問合せの場合:

   1. ソース・タイプ - 「SQL問合せ」を選択します。

   2. リージョン・ソースの入力 - カレンダに使用するSQL SELECT文を入力します。SQL SELECT文には2列以上を含める必要があり、そのうち1つはDATE列にする必要があります。

   3. 「次へ」をクリックします。

6. 「設定」は、次のようにします。

   1. 表示列 - このカレンダのイベントに表示されるテキストを保持する列を選択します。

   2. 開始日列 - このカレンダに表示されるイベントの開始日を保持する列を選択します。

   3. 終了日列 - このカレンダに表示されるイベントの終了日を保持する列を選択します。この属性を指定すると、カレンダには期間ベース・イベントが表示されます。

   4. 時間の表示 - 日付の時間部分を表示するかどうかを選択します。

   5. 「作成」をクリックします。

## 10.1.4 ページ・デザイナでのカレンダの作成

ヒント:

ページ・デザイナでカレンダを作成するには、SQL問合せを指定する必要があります。表を選択してカレンダを作成するには、ページの作成ウィザードを使用します。新しいページへのカレンダの追加を参照してください。

ページ・デザイナでカレンダを作成するには、次のステップを実行します。

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 必要に応じて、中央ペインで「レイアウト」タブをクリックします。
3. ギャラリで、「リージョン」タブをクリックします。
4. 「カレンダ」を右クリックして、「追加先」をクリックして適切な位置を選択します。

   ヒント:

   または、マウスを使用して「カレンダ」を選択して、「レイアウト」タブの適切な位置までドラッグします。

   プロパティ・エディタにリージョン属性が表示されます。

   「メッセージ」タブに、対処が必要なメッセージを示す赤または黄色の印が表示されます。メッセージを選択すると、プロパティ・エディタに関連する属性が表示されます。赤いエラー・メッセージは、保存する前に対処する必要があります。

5. プロパティ・エディタですべての属性を表示するには、「すべて表示」をクリックします。
6. グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。
7. プロパティ・エディタで、該当するリージョン属性を編集します。

   - 指定、タイトル - リージョン・タイトルを入力します。

   - ソース、SQL問合せ: このカレンダに表示されるイベントのスタイルを設定するCSSクラスを保持する列を選択します。

     ヒント:

     デフォルト・クラスの詳細を参照したり、例を表示するには、プロパティ・エディタでSQL問合せ属性を選択して、中央ペインの「ヘルプ」タブをクリックします。

8. カレンダ属性を編集します。

   - 「レンダリング」タブで、「カレンダ」リージョンを探し、「属性」をクリックします。

     プロパティ・エディタにカレンダ属性が表示されます。

   - カレンダ属性を編集します。

     - 設定、表示列: このカレンダのイベントに表示されるテキストを保持する列を選択します。

     - 設定、開始日: このカレンダに表示されるイベントの開始日を保持する列を選択します。

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

   関連項目:

   ページ・デザイナでのカレンダ属性の管理

## 10.1.5 ページ・デザイナでのカレンダ属性の管理

作成したカレンダは、プロパティ・エディタで属性を編集することで表示を変更できます。各カレンダには、2セットの編集可能な属性(リージョン属性とカレンダ属性)があります。リージョン属性は、カレンダのコンテナとして機能するページの領域を定義します。カレンダ属性は、テンプレート、日付列および一般的なカレンダ書式設定を指定します。

トピック:

- プロパティ・エディタでのカレンダ属性の編集
- 追加および編集機能を含めるように既存のカレンダを編集
- カレンダ初期化JavaScriptコードの追加
- 既存のカレンダでのデータのドラッグ・アンド・ドロップの有効化

### 10.1.5.1 プロパティ・エディタでのカレンダ属性の編集

カレンダ属性を編集するには、次のステップを実行します。

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 「レンダリング」タブで、カレンダを探して選択します。

   プロパティ・エディタにリージョン属性が表示されます。

3. 「レンダリング」タブで、カレンダを探して「属性」ノードを選択します。

   プロパティ・エディタにカレンダ属性が表示されます。

4. プロパティ・エディタですべての属性を表示するには、「すべて表示」をクリックします。
5. グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。
6. カレンダ属性を編集します。

   ヒント:

   属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

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

### 10.1.5.2 追加および編集機能を含めるように既存のカレンダを編集

開発者は、追加および編集機能を含めるように既存のカレンダを編集できます。

ヒント:

デスクトップ・アプリケーションのカレンダのリンクの作成およびリンクの編集を定義する場合、2つの異なるページを定義することをお薦めします。リンクの編集を作成するには、カレンダ属性の主キー列としていずれかの表の列またはSQL問合せ列を選択します。

追加および編集機能を含めるように既存のカレンダを編集するには、次のステップを実行します。

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 「レンダリング」タブで、カレンダを探して選択します。

   プロパティ・エディタにリージョン属性が表示されます。

3. 「レンダリング」タブで、カレンダを探して「属性」ノードを選択します。

   プロパティ・エディタにカレンダ属性が表示されます。

4. プロパティ・エディタですべての属性を表示するには、「すべて表示」をクリックします。
5. グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。
6. 「設定」→「リンクの作成」を編集して、ユーザーが空のセルまたは既存のカレンダ・エントリをクリックしたときにコールされるターゲット・ページを指定します。

   1. 設定、リンクの作成: 「リンクが定義されていません」をクリックします。

      「リンク・ビルダー - リンクの作成」ダイアログが表示されます。

   2. タイプ: リンク・ターゲットのタイプを選択します。

   3. アプリケーション: 「別のアプリケーションのページ」を選択した場合、アプリケーションIDを入力します。

   4. ページ: ターゲット・ページ番号を指定します。

   5. アイテムの設定: カレンダからターゲット・ページに渡される値を構成します。カレンダで日付または日付範囲を選択した後、「リンクの作成」がコールされます。このため、選択した開始日と終了日が「ページの作成」に渡される必要があります。

      - 選択した日付または選択した日付範囲の開始日を渡すには、次のステップを実行します。

        - 名前: イベントの開始日を含むターゲット・ページ・アイテムの名前を指定します。フォームの場合、これを日付ピッカー要素にする必要があります。

        - 値: `&APEX$NEW_START_DATE`

      - 日付範囲が選択された場合は、次のように終了日を渡します。

        - 名前: イベントの終了日を含むターゲット・ページ・アイテムの名前を指定します。フォームの場合、これを日付ピッカー要素にする必要があります。

        - 値: `&APEX$NEW_END_DATE`

        追加の値は、アプリケーション・ページへの他のリンクと同じ方法で渡すことができます。

   ヒント:

   属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

7. 「設定」→「リンクの編集」を編集して、ユーザーが既存のエントリをクリックしたときにコールされるターゲット・ページを定義します。

   ヒント:

   リンクの編集を作成するには、フォームが表の行を参照するために、主キー値をターゲット・ページに渡す必要があります。

   1. 設定、リンクの編集: 「リンクが定義されていません」をクリックします。

      「リンク・ビルダー - リンクの作成」ダイアログが表示されます。

   2. タイプ: リンク・ターゲットのタイプを選択します。

   3. アプリケーション: 「別のアプリケーションのページ」を選択した場合、アプリケーションIDを入力します。

   4. ページ: ターゲット・ページ番号を指定します。

   5. アイテムの設定: カレンダからターゲット・ページに渡される値を構成します。カレンダで日付または日付範囲を選択した後、「リンクの作成」がコールされます。このため、選択した開始日と終了日が「ページの作成」に渡される必要があります。

      - 名前: 次のような主キー値を含むターゲット・ページ・アイテム(通常、非表示のアイテム)の名前を指定します。

        `PX_ID`

      - 値: 次のような主キー値を含む表の列またはSQL問合せ列を指定します。

        `&ID`

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

### 10.1.5.3 カレンダ初期化JavaScriptコードの追加

初期化JavaScriptコード属性を編集して、JavaScriptファンクションを追加して標準のjQuery FullCalendar初期化属性を上書きできます。このファンクションでは、パラメータとしてカレンダ初期化属性を含むJavaScriptオブジェクトが返される必要があります。

初期化JavaScriptコードを追加するには、次のステップを実行します。

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 「レンダリング」タブのカレンダ・タイトルの下で、「属性」ノードを選択します。

   プロパティ・エディタにカレンダ属性が表示されます。

3. プロパティ・エディタですべての属性を表示するには、「すべて表示」をクリックします。
4. グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。
5. 「詳細」を見つけて展開します。

   ヒント:

   グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。その用語を含むグループと属性が表示されます。

6. 初期化JavaScriptコードに対して、JavaScriptファンクションを入力して標準のjQuery FullCalendar初期化属性を上書きします。

   次に例を示します。

       function ( pOptions) {
           pOptions.titleFormat      = "[Conference Schedule]";                  // custom title
           pOptions.minTime          = "07:00:00";                               // hide slots before minTime
           pOptions.maxTime          = "18:00:00";                               // hide slots after maxTime
           pOptions.columnFormat     = {month: '', week: 'dddd', day: 'dddd'};   // week view column headings
           pOptions.slotDuration     = "00:15:00";                               // custom slot duration
           pOptions.weekNumbers      = true;                                     // show week numbers
           pOptions.weekNumberTitle  = "CW";
           return pOptions;
       }

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

注意:

この機能の例を確認するには、サンプル・カレンダ・サンプル・アプリケーションを実行します。ナビゲーション・メニューから、カスタム・カレンダ初期化を選択します。パッケージ・アプリケーションのインストールを参照してください。

### 10.1.5.4 既存のカレンダでのデータのドラッグ・アンド・ドロップの有効化

カレンダ・リージョンでは、ドラッグ・アンド・ドロップによるカレンダ・イベントの移動または変更をサポートしています。

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

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 「レンダリング」タブのカレンダ・タイトルの下で、「属性」ノードを選択します。

   プロパティ・エディタに、カレンダの属性が表示されます。

3. プロパティ・エディタですべての属性を表示するには、「すべて表示」をクリックします。
4. グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。
5. 「設定」を見つけて展開し、次の属性を編集します。

   1. 設定、主キー列: 表の列またはSQL問合せ列を選択します。

      「設定」に「ドラッグ・アンド・ドロップ」が表示されます。

   2. 設定、ドラッグ・アンド・ドロップ: 「はい」を選択します。

      「PL/SQLコードのドラッグ・アンド・ドロップ」が表示されます。

   3. 設定、PL/SQLコードのドラッグ・アンド・ドロップ: エンド・ユーザーがイベントのドラッグ・アンド・ドロップを完了したときに実行するPL/SQLコードを入力します。

      PL/SQLコード内では、次のように、ドラッグされたイベントのID、新しい開始日および終了日を参照できます。

      `:APEX$PK_VALUE, :APEX$NEW_START_DATE amd :APEX$_NEW_END_DATE`

      たとえば、エンド・ユーザーがイベントを新しい日付にドラッグした後は、次のコードで`PROJECTS`表のイベント行が変更されます。

          begin
               update projects
                  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;

      詳細は、中央ペインで「ヘルプ」タブをクリックします。

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

## 10.1.6 カレンダの動的アクションのサポートについて

動的アクションは、JavaScriptを必要としないで複雑なクライアント側の動作を宣言的に定義する方法を提供します。動的アクションの作成ウィザードを使用して、定義された条件セットが発生したときに実行されるアクションを指定します。また、アクションの影響を受ける要素や、影響を受ける時期と影響も指定できます。

動的アクションを使用するとき、ページに追加する動的アクションが多くなるほど全体のページ・サイズが大きくなることに注意する必要があります。これは、動的アクション・フレームワークでは、定義された各動的アクションについてクライアントへの追加コードを生成し、そのコードはクライアント内のフレームワークによってダウンロードおよび実行される必要があるためです。

動的アクションには、アクションを制御するために指定できる条件が含まれています。レポートやチャートなどのOracle Application Expressコンポーネントは、特定のカレンダ・イベントに対応できます。たとえば、カレンダを表示して、後続の月を表示するボタンをクリックしたときに、関連するレポートを自動的にリフレッシュする動的アクションを作成できます。

この機能を使用するには、開発者がページ・デザイナのカレンダ・ページで新しい動的アクションを作成します。ページ・デザイナの左ペインにある「動的アクション」タブで、新しい動的アクションを選択します。作成したら、新しい動的アクションが「新規」のラベルとともに赤色で表示されます。その後、開発者がプロパティ・エディタで動的アクション属性を編集します。プロパティ・エディタで、「時期」属性を見つけて展開します。「時期」属性の「イベント」で、次のいずれかのイベントを選択します。

- 日付の選択[カレンダ]

  このイベントは、ユーザーがマウスまたはキーボードを使用して空の日付または日付範囲を選択したときに起動します。開発者がカレンダ属性で「リンクの作成」を指定した場合、イベントは起動しません。

  現在のビューに関する情報は、データ・オブジェクトとして渡されます。

      { "newStartDate"::: "newEndDate"::: }

      { "newStartDate":{first day of selection} (YYYYMMDDHH24MISS),
       "newEndDate": {last day of selection} YYYYMMDDHH24MISS }

- イベントの選択[カレンダ]

  このイベントは、ユーザーがマウスを使用して既存のイベントをクリックしたとき、またはキーボードを使用して選択したときに起動します。開発者がカレンダ属性で「リンクの編集」を指定した場合、イベントは起動しません。データ・オブジェクトには、イベントのjQuery FullCalendarのJSON表現が含まれます。

  関連項目:

  FullCalendarドキュメントの「Event Data」、「Event Object」

- ビューの変更[カレンダ]

  このイベントは、ビュー・タイプが変更されたとき(日、週、月、リスト)、またはビューが前または次のビュー・ページに変更されたときに起動します。データ・オブジェクトには、次の情報が含まれます。

      { "viewType": {view type, day, week, month or list},
       "startDate": {first day of view} (YYYYMMDDHH24MISS),
       "endDate": {last day of view} (YYYYMMDDHH24MISS) }

注意:

この機能の例を確認するには、サンプル・カレンダ・サンプル・アプリケーションを実行します。ナビゲーション・メニューから、カレンダおよび動的アクションを選択してカレンダ・イベントを選択します。パッケージ・アプリケーションのインストールを参照してください。

関連項目:

動的アクションの管理および動的アクションのデバッグ(問題をデバッグする方法の詳細)