プライマリ・コンテンツに移動
Oracle® Application Expressアプリケーション・ビルダー・ユーザーズ・ガイド
リリース5.0
E64891-02
  目次へ移動
目次
索引へ移動
索引

前
 
次
 

15.5 ボタンの作成

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

15.5.1 ボタンで実行できる操作

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

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

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

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

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

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

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

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

  1. ページ・デザイナでアイテムを含めるページを表示します。「ページ・デザイナでのページの表示」を参照してください。

  2. 必要に応じて、アイテムを含めるリージョンを作成します。「リージョンについて」を参照してください。

  3. ギャラリで、「ボタン」タブをクリックします。

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

  4. ボタンを選択して、グリッド・レイアウトの適切な場所にドラッグします。


    ヒント:

    アイテムを右クリックして「追加先」を選択し、適切な場所を選択することもできます。

    「プロパティ・エディタ - ページ・アイテム」が表示されます。

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

  5. プロパティ・エディタですべての属性を表示します。「プロパティ・エディタ・メニュー」から「すべて表示」を選択します。

  6. プロパティ・エディタで該当する属性を編集します。


    ヒント:

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

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

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

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

  1. ページ・デザイナでページを表示します。「ページ・デザイナでのページ・レベル・アイテムの表示」を参照してください。

    ページ・デザイナが表示されます。

  2. 「レンダリング」ツリーまたはグリッド・レイアウトのいずれかで、編集するボタンを選択します。

    プロパティ・エディタが、「プロパティ・エディタ - ボタン」を表示するように変わります。

  3. プロパティ・エディタですべての属性を表示します。「プロパティ・エディタ・メニュー」から「すべて表示」を選択します。

  4. 対象となる属性を編集します。

    ページ上の特定の属性の詳細を表示するには、属性ラベルをクリックします。「フィールドレベル・ヘルプの表示」を参照してください。

15.5.2.3 ボタンの条件付き表示

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

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

  1. ページ・デザイナでページを表示します。「ページ・デザイナでのページ・レベル・アイテムの表示」を参照してください。

    ページ・デザイナが表示されます。

  2. 「レンダリング」ツリーまたはグリッド・レイアウトのいずれかで、編集するボタンを選択します。

    プロパティ・エディタが、「プロパティ・エディタ - ボタン」を表示するように変わります。

  3. プロパティ・エディタですべての属性を表示します。「プロパティ・エディタ・メニュー」から「すべて表示」を選択します。


    ヒント:

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

  4. 「条件」を展開します。条件タイプを選択し、表示されたフィールドに適切な情報を入力します。

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

15.5.3 コンポーネント・ビューでのボタンの管理

この項では、コンポーネント・ビューでボタンを作成する方法について説明します。


関連項目:


15.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. 「ボタンの作成」をクリックします。

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

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

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

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

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

  3. コンポーネント・ビューで「ボタン」セクションを探し、「作成」アイコンをクリックします。

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

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

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

  5. 「リージョン」で、このボタンを含めるリージョンを選択します。

  6. 「テンプレート」からテンプレートを選択します。テンプレートを選択しない場合、HTMLスタイルのボタンが作成されます。

  7. 「HTML属性」で、これらのボタンのHTML属性を指定します。このテキストがHTML要素の定義に追加されます。たとえば、テキスト・ボタンのクラスを次のように設定できます。

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

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

15.5.3.3 コンポーネント・ビューでのボタンの編集

この項では、コンポーネント・ビューでボタンを編集する方法について説明します。

15.5.3.3.1 ボタン属性の編集

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

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

  2. 「ボタン」で、ボタン名を選択します。

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

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

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

15.5.3.3.2 「検証の実行」について

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

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

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

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

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

15.5.3.3.3 複数のボタンの同時編集

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

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

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

  2. 「ボタン」で、「すべて編集」アイコンをクリックします。「すべて編集」アイコンは、鉛筆が置かれた小さいグリッドの形をしています。

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

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

15.5.3.3.4 複数のボタンの削除

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

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

  2. 「ボタン」で、「すべて編集」アイコンをクリックします。「すべて編集」アイコンは、鉛筆が置かれた小さいグリッドの形をしています。

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

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

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

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

15.5.3.3.5 履歴

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

15.5.3.4 ボタンの条件付き表示

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

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

  1. ボタンを作成します。「コンポーネント・ビューでのボタンの作成」を参照してください。

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

  3. 「ボタン」で、ボタン名をクリックします。

  4. 「条件」までスクロールします。

  5. 「条件タイプ」リストから選択します。

  6. 表示されるフィールドに式を入力します。

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

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

15.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');">

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

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

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