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

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

前 | 次 |

# 13.5 ボタンの作成

アプリケーションを設計する際、ボタンを使用して、特定のページまたはURLを表示したり、情報をポストまたは処理するようにできます(たとえば、「作成」、「取消」、「次へ」、「前へ」または「削除」ボタンを作成します)。

トピック:

- ボタンで実行できる操作
- ページ・デザイナでのボタンの管理
- レガシー・コンポーネント・ビューでのボタンの管理
- ボタンからのJavaScriptのコールについて
- ボタン名とREQUESTの関係について
- ボタンを使用したブランチ処理について

関連項目:

ボタンのURLからのページのコールおよびページ固有のユーティリティへのアクセス

## 13.5.1 ボタンで実行できる操作

ボタンでは、様々なタイプの操作を実行できます。次の操作を実行できます。

- ページの送信(フォーム・ページに対する変更の保存など)

- 異なるページまたはカスタムURLのいずれかへのリダイレクト

- 実行しない(ボタンの動作が「動的アクション」で定義されていない場合など)。

## 13.5.2 ページ・デザイナでのボタンの管理

この項では、ページ・デザイナでボタンを管理する方法について説明します。

トピック:

- ページ・デザイナでのボタンの作成
- ページ・デザイナでのボタンの編集
- ボタンの条件付き表示
- 保存されていない変更についてユーザーに警告するためのボタン属性の構成

関連項目:

レガシー・コンポーネント・ビューでのボタンの管理

### 13.5.2.1 ページ・デザイナでのボタンの作成

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

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 必要に応じて、アイテムを含めるリージョンを作成します。
3. ギャラリで、「ボタン」タブをクリックします。

   ボタンにカーソルをあわせると、ボタンを説明するツールチップが表示されます。

4. ボタンを右クリックして「追加先」を選択し、適切な位置を選択します。

   ヒント:

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

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

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

   ヒント:

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

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

関連項目:

リージョンについて

### 13.5.2.2 ページ・デザイナでのボタンの編集

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

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 「レンダリング」タブまたは「レイアウト」タブのいずれかで、編集するボタンを選択します。

   プロパティ・エディタの右ペインにボタン属性が表示されます。

   プロパティ・エディタでは、属性が機能グループに編成されます。これらのグループを展開または縮小するには、「共通の表示」、「すべて表示」、「すべて閉じる」および「すべて開く」アイコンをクリックします。

3. 属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。

   属性が表示されます。

4. ボタン属性を編集します。

   ページが保存されるまで、編集した属性の属性名の左側に青色のマーカーが表示されます。

   注意:

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

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

### 13.5.2.3 ボタンの条件付き表示

ボタンを条件付きで表示するには、「ページ・ボタンの編集」ページの属性を編集します。

ボタンを条件付きで表示するには、次のステップを実行します。

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 「レンダリング」タブまたは「レイアウト」タブのいずれかで、編集するボタンを選択します。

   プロパティ・エディタが変更されてボタン属性が表示されます。

   属性は、機能グループに編成されます。これらのグループを展開または縮小するには、「共通の表示」、「すべて表示」、「すべて閉じる」および「すべて開く」アイコンをクリックします。

3. グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。
4. 「サーバー側の条件」を見つけて展開します。タイプを選択し、表示されたフィールドに適切な情報を入力します。

   ヒント:

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

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

関連項目:

バインド変数構文を使用したセッション・ステートの参照

### 13.5.2.4 保存されていない変更についてユーザーに警告するためのボタン属性の構成

開発者は、「保存されていない変更の警告」ボタンを使用して、ユーザーがボタンをクリックしてページから移動しようとしたときに、保存されていない変更について警告できます。

「保存されていない変更の警告」属性を構成するには、次のステップを実行します。

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. 「レンダリング」タブまたは「レイアウト」タブのいずれかで、編集するボタンを選択します。

   プロパティ・エディタが変更されてボタン属性が表示されます。

3. 「動作」を見つけて展開します。

   ヒント:

   属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。属性が表示されます。

4. 「保存されていない変更の警告」で、次のいずれかを選択します。

   - ページのデフォルトc「保存されていない変更の警告」がページ・レベルで有効化されている場合に、ボタンがクリックされたときに保存されていない変更をチェックします。

   - チェックしない: 保存されていない変更のチェックは、ボタンがクリックされたときに実行されません。この設定は、「取消」、「削除」および「変更の適用」ボタンで使用します。

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

ヒント:

「保存されていない変更の警告」属性は、`apex.page.warnOnUnsavedChanges` APIを使用して実装されます。

関連項目:

保存されていない変更についてユーザーに警告するためのページ属性の構成およびOracle Application Express APIリファレンス

## 13.5.3 レガシー・コンポーネント・ビューでのボタンの管理

開発者は、コンポーネント・ビューでボタンを作成および編集します。

トピック:

- コンポーネント・ビューでのボタンの作成
- コンポーネント・ビューでの複数のボタンの作成
- レガシー・コンポーネント・ビューでのボタンの編集
- ボタンの条件付き表示

関連項目:

レガシー・コンポーネント・ビューでのページの管理

### 13.5.3.1 コンポーネント・ビューでのボタンの作成

コンポーネント・ビューでリージョン・ボタンを作成するには、次のステップを実行します。

1. 適切なページにナビゲートします。レガシー・コンポーネント・ビューでのページの表示を参照してください。

2. 必要に応じて、リージョンを作成します。リージョンについてを参照してください。

3. 「ボタン」で、「作成」アイコンをクリックします。

4. 「ボタン・リージョン」で、ボタンのリージョンを選択して「次へ」をクリックします。

5. 「ボタン位置」で、次のステップを実行します。

   1. 位置 - このボタンの位置を選択します。

      - リージョン位置にボタンの作成: リージョン位置にボタンを配置する場合は、このオプションを選択します。リージョン位置は、リージョン・テンプレートで定義された位置です。

      - このリージョン・アイテムで表示されるボタンの作成: ページ・アイテム内またはページ・アイテム間にボタンを表示する場合は、このオプションを選択します(たとえば、フォーム・フィールドの横にボタンを直接追加する場合)。

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

6. 「ボタン属性」は、次のようにします。

   ヒント:

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

   1. ボタン名: 対象のボタンの名前を入力します。「ページの送信」のアクションを行うボタンでは、ボタンの名前がページ・リクエストの値になります。たとえば、ボタンに`FLOW_RESET_BUTTON`という名前を付けると、送信を行わずにカレント・ページをリセットすることがボタンの目的になります。

   2. ラベル: ボタンに表示するラベルを入力します。

   3. ボタン・テンプレート: どのテンプレートでボタンの表示を制御するかを定義します。ボタン・テンプレートは、テンプレート・ページで定義します。少なくとも1つのボタン・テンプレートを定義しておかないと、ボタン・テンプレートを使用できません。

   4. ボタン・タイプ: この属性を使用して、ボタン・テンプレートの「標準」または「ホット」いずれかのテンプレートを選択します。

      「ホット」を選択すると、ボタン・テンプレートの「ホット・テンプレート」属性に格納されたテンプレートを使用してボタンがレンダリングされます。値が定義されない場合、標準のボタン・テンプレートが使用されます。

   5. ボタン属性: 入力したテキストは、HTML要素の定義に追加されます。次の例では、テキスト・ボタンのクラスを設定しています。

          class="myclass"

      テンプレートに基づくボタンの場合、テンプレートに`#BUTTON_ATTRIBUTES#`置換文字列を含める必要があります。これを使用してタブの停止を制御できます。次に例を示します。

          tabindex="3"

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

   「表示プロパティ」が表示されます。「表示プロパティ」に表示されるオプションは、選択されたリージョン位置によって決まります。

7. 「表示プロパティ」で、次のステップを実行します。

   - ボタン位置が「リージョン位置にボタンの作成」の場合は、次の項目を指定します。

     - 順序: このコンポーネントの順序を入力します。これによって評価の順序が決まります。

     - 位置: このボタンの位置を選択します。

     - 位置合せ: 「右」または「左」を選択します。

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

   - ボタン位置が「このリージョン・アイテムで表示されるボタンの作成」の場合は、次の項目を指定します。

     - 順序: このコンポーネントの順序を入力します。これによって評価の順序が決まります。

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

8. 「クリックされたときのアクション」で、次のステップを実行します。

   1. ヒント:

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

      アクション: ボタンがクリックされたときの動作を選択します。

   2. 検証の実行: 「検証の実行」では、ページ送信時の検証の実行を制御します。たとえば、ユーザーがレコードを削除しているときに、「削除」ボタンに無関係な検証エラー・メッセージを表示しないようにする場合に使用できます。

      この設定に関係なく特定の検証を常に実行する場合、検証属性の「常に実行」を「はい」に設定します。詳細は、検証の実行タイミングの決定についてを参照してください。

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

9. 「条件付き表示」で、対象のコンポーネントをレンダリングするうえで満たす必要がある条件タイプをリストから選択します。

10. 「ボタンの作成」をクリックします。

関連項目:

ボタン名とREQUESTの関係について

### 13.5.3.2 コンポーネント・ビューでの複数のボタンの作成

コンポーネント・ビューでは、複数のボタンの作成ウィザードを使用して、同じリージョン内に複数の「ページの送信」ボタンを一度に作成できます。

一度に複数のボタンを作成するには、次のステップを実行します。

1. 適切なページにナビゲートします。レガシー・コンポーネント・ビューでのページの表示を参照してください。
2. 必要に応じて、リージョンを作成します。リージョンについてを参照してください。
3. コンポーネント・ビューで「ボタン」セクションを探し、「作成」アイコンをクリックします。

   ボタンの作成ウィザードが表示されます。

4. 「複数のボタンの作成」リンクをクリックします。

   「複数のボタンの作成」ウィザードが表示されます。

5. 「リージョン」で、このボタンを含めるリージョンを選択します。
6. 「テンプレート」からテンプレートを選択します。テンプレートを選択しない場合、HTMLスタイルのボタンが作成されます。
7. 「HTML属性」で、これらのボタンのHTML属性を指定します。このテキストがHTML要素の定義に追加されます。たとえば、テキスト・ボタンのクラスを次のように設定できます。

       class="myclass"

8. 残りのフィールドに迅速に移入するには、ページの右側にある「クイック・ボタン」リストから選択します。
9. 「ボタンの作成」をクリックします。

### 13.5.3.3 レガシー・コンポーネント・ビューでのボタンの編集

開発者は、コンポーネント・ビューでボタンを編集できます。

トピック:

- ボタン属性の編集
- 「検証の実行」について
- 複数のボタンの同時編集

#### 13.5.3.3.1 ボタン属性の編集

既存のボタンの属性を編集するには、次のようにします。

1. 適切なページにナビゲートします。レガシー・コンポーネント・ビューでのページの表示を参照してください。
2. 「ボタン」で、ボタン名を選択します。
3. ボタン属性を編集します。

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

4. 「変更の適用」をクリックします。

#### 13.5.3.3.2 「検証の実行」について

ページ・ボタンの編集ページの「ボタンがクリックされたときのアクション」、「検証の実行」属性は、ページを送信するときの検証の実行を制御します。たとえば、ユーザーがレコードを削除しているときに、「削除」ボタンに無関係な検証エラー・メッセージを表示しないようにする場合に使用できます。

「検証の実行」では、次を選択できます。

- はい: ページが送信され、この属性が「はい」に設定されている場合、そのページに定義されているすべての検証とすべての組込みの検証が実行されます(たとえば、必須の値が設定されていることを確認するためや、その値が有効な数値や日付であるかどうかを判別するため)。

- いいえ: 「いいえ」に設定すると、定義済の検証と組込みの検証はいずれも実行されません。

この設定に関係なく特定の検証を常に実行する場合、検証属性の「常に実行」を「はい」に設定します。

関連項目:

検証の実行タイミングの決定について

#### 13.5.3.3.3 複数のボタンの同時編集

ボタン・ページを使用して、複数のボタンを削除したり、最近の変更の履歴を表示します。

一度に複数のボタンを編集するには、次のステップを実行します。

1. 適切なページにナビゲートします。レガシー・コンポーネント・ビューでのページの表示を参照してください。
2. 「ボタン」で、「すべて編集」アイコンをクリックします。「すべて編集」アイコンは、鉛筆が置かれた小さいグリッドの形をしています。

   ボタン・ページが表示されます。ボタン・ページには、リージョン内のボタンのリストを示す表が含まれています。

3. 属性を編集し、「変更の適用」をクリックします。

トピック:

- 複数のボタンの削除
- 履歴

##### 13.5.3.3.3.1 複数のボタンの削除

一度に複数のボタンを削除するには、次のステップを実行します。

1. 適切なページにナビゲートします。レガシー・コンポーネント・ビューでのページの表示を参照してください。
2. 「ボタン」で、「すべて編集」アイコンをクリックします。「すべて編集」アイコンは、鉛筆が置かれた小さいグリッドの形をしています。

   ボタン・ページが表示されます。ボタン・ページには、リージョン内のボタンのリストを示す表が含まれています。

3. 「複数のボタンの削除」をクリックします。

   複数のボタンの削除ページが表示されます。

4. 削除するボタンを選択して、「ボタンの削除」をクリックします。

##### 13.5.3.3.3.2 履歴

履歴ページを使用して、ボタンの最近の変更のサマリーを表示します。

### 13.5.3.4 ボタンの条件付き表示

ボタンを条件付きで表示するには、「ページ・ボタンの編集」ページの属性を編集します。

ボタンを条件付きで表示するには、次のステップを実行します。

1. ボタンを作成します。コンポーネント・ビューでのボタンの作成を参照してください。
2. 適切なページにナビゲートします。レガシー・コンポーネント・ビューでのページの表示を参照してください。
3. 「ボタン」で、ボタン名をクリックします。
4. 「条件」までスクロールします。
5. 「条件タイプ」リストから選択します。
6. 表示されるフィールドに式を入力します。
7. 「変更の適用」をクリックします。

関連項目:

バインド変数構文を使用したセッション・ステートの参照

## 13.5.4 ボタンからのJavaScriptのコールについて

リクエストを確認する最も有効な方法は、ボタンからJavaScriptをコールする方法です。実際、Oracle Application Expressでは、ほぼすべてのオブジェクトの削除操作にこの方法を使用します。たとえば、ボタンを削除する場合は、リクエストの確認を求めるJavaScriptメッセージが表示されます。次に例を示します。

      function deleteConfirm(msg)
      {
    var confDel = msg;
    if(confDel ==null)
      confDel= confirm("Would you like to perform this delete action?");
    else
      confDel= confirm(msg);

    if (confDel== true)
      doSubmit('Delete');
      }

この例では、削除操作を確認するファンクションを作成した後、ボタンからそのファンクションをコールします。このファンクションは、オプションでページを送信し、内部変数`:REQUEST`の値を`Delete`に設定するため、リクエストの値に基づいて条件付きで実行されるプロセスを使用して削除を実行します。

ボタンを作成する際に、「URLにリダイレクト」を選択する必要があります。その後、URLターゲットを次のように指定します。

    javascript:confirmDelete('Would you like to perform this delete action?');

JavaScriptコードを実行する場合は、動的アクションを使用することをお薦めします。次に例を示します。

1. 「動的アクションで定義」のアクションを実行するボタンを作成します。コンポーネント・ビューでのボタンの作成を参照してください。

2. 動的アクションを作成し、アクション・タイプ「JavaScriptコードの実行」を使用して前述のコードを実行します。たとえば、次のようにします。

       if (confirm("Would you like to perform this delete action?")) {
         apex.submit('Delete');
       }

この例ではJavaScriptを使用していますが、JavaScriptを使用しなくても、この例を簡単に実装できます。かわりに、同様に翻訳可能な宣言的アクションの「確認」と「ページの送信」を使用できます。詳細は、動的アクションの管理を参照してください。

## 13.5.5 ボタン名とREQUESTの関係について

「送信」ボタン(送信ページのアクションが指定されたボタン)に付けた名前によって、ページの送信時に組込み属性`REQUEST`の値が決まります。バインド変数`:REQUEST`を使用して、PL/SQL内の`REQUEST`の値を参照できます。このバインド変数を使用して、ユーザーがクリックするボタンに応じてプロセス、検証またはブランチを条件付きで実行できます。ユーザーがボタンをクリックした際に実行されるプロセスを作成することもできます。また、より複雑な条件も使用できます。次に例を示します。

    If :REQUEST in ('EDIT','DELETE') then ...
    If :REQUEST != 'DELETE' then ...

これらの例では、「EDIT」および「DELETE」という名前のボタンが存在すると想定します。この構文は、PL/SQL式の条件にも使用できます。ただし、ボタン名の大/小文字が保持されることに注意してください。ボタン名をLOGINに指定した場合、名前「Login」を検索するリクエストは失敗します。次に例を示します。

    <input type="BUTTON" value="Finish" onclick="apex.submit('Finish');">

この例では、Finishは`REQUEST`の名前で、大/小文字が区別されます。

## 13.5.6 ボタンを使用したブランチ処理について

各ページには、任意の数のブランチを含めることができます。ブランチは、アプリケーションの他のページまたはURLにリンクします。Application Expressでは、ページ・プロセス中の異なる時点でブランチが検討されます。プロセス前、計算前、検証前およびプロセス後のどの時点でブランチするかを選択できます。アプリケーション・ビルダーの他のコントロールと同様に、ブランチ処理には条件を設定できます。たとえば、ユーザーがボタンをクリックした場合にブランチできます。ブランチを作成する場合は、ブランチを特定のボタンに関連付けます。ブランチは、ユーザーがボタンをクリックした場合にのみ検討されます。

関連項目:

ブランチを使用したナビゲーションの制御