ヘッダーをスキップ
Oracle Database Application Express 2日で開発者ガイド
リリース2.2
B31495-01
  目次
目次

戻る
戻る
 
次へ
次へ
 

10 アプリケーションへのJavaScriptの組込み方法

Web配置のすべてのメリットを失わずに、クライアント/サーバー・アプリケーションと同等の機能を追加する最も有効な方法は、JavaScriptをWebアプリケーションに追加する方法です。 Oracle Application Expressには、JavaScript追加専用に設計された複数の組込みインタフェースが含まれています。

ただし、JavaScriptは、データ集中型の検証には適していないことに注意してください。 たとえば、名前が大規模データベース表内に含まれていることを検証するには、大容量のHTMLドキュメントを作成して、すべてのレコードをクライアントにプルダウンする必要があります。 通常、複雑な操作には、JavaScriptではなくサーバー・サイドApplication Express検証の方がより適しています。

このチュートリアルでは、JavaScriptの使用例と、アプリケーションにそれらを実装する方法の詳細を説明します。

内容は次のとおりです。

JavaScriptファンクションの組込み方法の理解

JavaScriptファンクションを組み込む場所は、主に2つあります。

このセクションの内容は次のとおりです。

「HTMLヘッダー」属性へのJavaScriptの統合

JavaScriptをアプリケーションに含める方法の1つとして、JavaScriptをページのHTMLヘッダー属性に追加する方法があります。これは、ページに固有のファンクションに有効な方法で、ファンクションを.jsファイルに組み込む前にテストを行う有効な方法でもあります。

「ページ属性」ページの「HTMLヘッダー」属性にコードを入力すると、JavaScriptファンクションをページに追加できます。

HTMLヘッダー属性にJavaScriptコードを追加するには、次のステップを実行します。

  1. 「作業領域」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。

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

    「アプリケーション」ホームページが表示されます。このページには、一連の関連ページが表示されます。

  3. ページをクリックします。

    そのページのページ定義が表示されます。

  4. 「ページ」で、「ページ属性の編集」アイコンをクリックします。

    「ページ属性」ページが表示されます。

  5. 「HTMLヘッダー」までスクロールします。

  6. 「HTMLヘッダー」に、コードを入力して「変更の適用」をクリックします。

たとえば、次のコードを追加すると、カレント・ページのすべての場所からアクセス可能なファンクションがテストされます。

<script type="text/javascript">
  function test(){
    window.alert('This is a test.');
  }
</script>

ページ・テンプレートによって参照される.jsファイルへのJavaScriptの挿入

Oracle Application Expressでは、ページ・テンプレート内の.jsファイルを参照できます。 この方法を使用すると、このファイル内のすべてのJavaScriptがアプリケーションにアクセスできるようになります。 .jsファイルは、アプリケーションの最初のページ・ビューにロードされた後、ブラウザでキャッシュされるため、これが最も有効な方法となります。

次のコードは、ページ・テンプレートのヘッダー・セクションに.jsファイルを組み込む方法を示しています。 太字で示されている行script src=に注意してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>#TITLE#</title>
    #HEAD#
    <script src="http://myserver.myport/my_images/custom.js" type="text/javascript"></script>
</head>
<body #ONLOAD#>#FORM_OPEN#


参照:

『Oracle Database Application Expressユーザーズ・ガイド』の「テンプレートのカスタマイズ」

JavaScriptを使用したアイテムの参照

アイテムを参照する場合、最も有効な方法は、IDで参照する方法です。WebブラウザでOracle Application ExpressページのHTMLソースを表示すると、すべてのアイテムにID属性が含まれていることがわかります。このIDは、アイテム・ラベルではなく、アイテム名に対応します。 たとえば、P1_FIRST_NAMEという名前で、First Nameというラベルを持つアイテムを作成した場合、IDはP1_FIRST_NAMEになります。

アイテムIDによって、JavaScriptメソッドgetElementById()を使用してアイテムの属性および値を取得および設定できます。次に、IDでアイテムを参照する方法およびアラート・ボックスにその値を表示する方法の例を示します。

<script type="text/javascript">
  function firstName(){
    window.alert('First Name is ' + document.getElementById('P1_FIRST_NAME').value );
  }
 // or a more generic version would be
  function displayValue(id){
    alert('The Value is ' + document.getElementById(id).value );
  }
</script>

  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue('P1_FIRST_NAME');"

ボタンからのJavaScriptのコール

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

<script type="text/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');
  }
</script>

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

ボタンの作成時に、「ページを送信せずにURLにリダイレクト」アクションを選択する必要があります。 その後、URLターゲットを次のように指定します。

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

クライアント側のJavaScript検証の作成

クライアント側の検証では、フォームを使用するユーザーに即時フィードバックが提供されます。よく行われるJavaScript検証の1つに、フィールドがNULLではないことを検証するものがあります。たとえば、ページの「HTMLヘッダー」属性にファンクションを作成して、アイテムからそのファンクションをコールできます。

これを行うには、架空の人事部門のデータベース・オブジェクトを作成するスクリプトを実行する必要があります。詳細は、「HRデータベース・オブジェクトのインストール」を参照してください。

このタイプのJavaScript検証の作成では、次のステップを実行します。

このセクションの内容は次のとおりです。

EMPLOYEES表でのアプリケーションの作成

EMPLOYEES表で新しいアプリケーションを作成するには、次のステップを実行します。

  1. 「作業領域」ホームページで、「アプリケーション・ビルダー」をクリックします。

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

  3. 「方法」で、「アプリケーションの作成」を選択して「次へ」をクリックします。

  4. 「名前」で、次のステップを実行します。

    1. 「名前」に、アプリケーションを説明する名前を入力します。

    2. 「アプリケーション 」で、デフォルトを受け入れます。

    3. 「アプリケーションの作成」で、「最初から」を選択します。

    4. 「スキーマ」で、デフォルトを受け入れます。

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

  5. 空白ページを追加し、次のステップでレポートを含めます。

    1. 「ページ・タイプの選択」で、「レポートとフォーム」を選択します。

    2. 「表名」から、「EMPLOYEES」を選択します。

    3. ページの追加」をクリックします。

    ページ上部のリストに、新しいページが表示されます。 次に、ページ2の名前をUpdate Formに変更します。

  6. ページ2の名前を変更するには、次のステップを実行します。

    1. 図10-1に示すように、ページ上部の「アプリケーションの作成」で、ページ2のページ名「EMPLOYEES」をクリックします。

      図10-1 新しく作成されたページ

      図10-1の説明が続きます。
      「図10-1 新しく作成されたページ」の説明

      ページ定義が表示されます。

    2. 「ページ名」に、Update Formと入力して「変更の適用」をクリックします。

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

  7. 「タブ」で「1レベルのタブ」を選択し、「次へ」をクリックします。

  8. 「共有コンポーネント」で、デフォルトの「いいえ」を受け入れて「次へ」をクリックします。

  9. 「属性」で、「認証スキーム」、「言語」、「ユーザー言語プリファレンスの派生元」にデフォルトを受け入れて、「次へ」をクリックします。

  10. 「ユーザー・インタフェース」で、「テーマ2」を選択して「次へ」をクリックします。

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

    「アプリケーション」ホームページが表示されます。 新しいアプリケーションに次の3つのページが含まれていることに注意してください。

    • 1 - EMPLOYEES

    • 2 - Update Form

    • 101 - ログイン

アプリケーションを表示するには、次のステップを実行します。

  1. 図10-2に示すように、「アプリケーションの実行」アイコンをクリックします。

    図10-2 「アプリケーションの実行」アイコン

    図10-2の説明が続きます。
    「図10-2「アプリケーションの実行」アイコン」の説明

  2. ユーザー名およびパスワードを入力するように要求されたら、作業領域のユーザー名およびパスワードを入力して、「ログイン」をクリックします。

    標準レポートが表示されます。 更新フォームを表示するには、「作成」ボタンまたは「編集」アイコンのいずれかをクリックします。

  3. 「開発者」ツールバーの「アプリケーションの編集」をクリックして、「アプリケーション」ホームページに戻ります。

「HTMLヘッダー」属性へのファンクションの追加

次に、「姓」フィールドに値が含まれていない場合にメッセージを表示するファンクションをページ2の「HTMLヘッダー」属性に追加する必要があります。

ページ2の「HTMLヘッダー」属性にファンクションを追加するには、次のステップを実行します。

  1. 「アプリケーション」ホームページで、「2 - Update Form」をクリックします。

    ページ定義が表示されます。

  2. 「ページ」で、「ページ属性の編集」アイコンをクリックします。

    「ページ属性」ページが表示されます。

  3. 「HTMLヘッダー」までスクロールします。 「HTMLヘッダー」にすでにスクリプトが含まれていることに注意してください。

  4. 「HTMLヘッダー」で、スクロールして最後の</script>タグの後にカーソルを置きます。

  5. 最後の</script>タグの後に、次のスクリプトを入力します。

    <script type="text/javascript">
      function notNull(object){
        if(object.value=="")
       alert('This field must contain a value.');
      }
    </script>
    
    
  6. ページ上部の「変更の適用」をクリックします。

ファンクションをコールするためのアイテムの編集

次に、ファンクションをコールするようにP2_LAST_NAMEアイテムを編集する必要があります。 実行中のフォームでは、P2_LAST_NAMEが「姓」フィールドとして表示されます。

ファンクションをコールするようにP2_LAST_NAMEアイテムを編集するには、次のステップを実行します。

  1. ページ2(Update Form)のページ定義にナビゲートします。

  2. 「アイテム」で、「P2_LAST_NAME」をクリックします。

  3. 「要素」までスクロールします。

  4. 「HTMLフォームの要素属性」で、次のように入力します。

    onblur="notNull(this);"
    
    
  5. ページ上部の「変更の適用」をクリックします。

    ページ定義が表示されます。

  6. 「ページ」フィールドに、1と入力して「実行」をクリックします。

  7. 右上にある「ページの実行」アイコンをクリックします。

  8. アプリケーションが表示されたら、「作成」をクリックします。

    「Update Form」が表示されます。

  9. 「姓」フィールド内にカーソルを置き、「作成」をクリックします。 次のメッセージが表示されます。

    This field must contain a value.
    
    

フォーム要素の有効化および無効化

Oracle Application Expressを使用すると、条件に応じてページ・アイテムを表示できますが、ページに対して変更を行った場合は、評価のためにページを送信する必要があります。次の例では、フォーム要素の無効化を別のフォーム要素の値に基づいて行うJavaScriptの使用方法について説明します。

最初に、ファンクションを記述し、更新フォームが含まれるページの「HTMLヘッダー」属性に配置します。次に、そのページのアイテムからファンクションをコールします。 次の例では、ユーザーが、販売部門(P2_DEPARTMENT_ID = 80)に属さない従業員に手数料を追加しないようにするJavaScriptファンクションの追加方法について説明します。

このセクションの内容は次のとおりです。

「HTMLヘッダー」属性へのファンクションの追加

ページ2の「HTMLヘッダー」属性にファンクションを追加するには、次のステップを実行します。

  1. ページ2のページ定義にナビゲートします。

  2. 「ページ」で、「ページ属性の編集」アイコンをクリックします。

    「ページ属性」ページが表示されます。

  3. 「HTMLヘッダー」までスクロールします。

  4. 「HTMLヘッダー」で、スクロールして最後の</script>タグの後にカーソルを置きます。

  5. 最後の</script>タグの後に、次のスクリプトを入力します。

    <script language="JavaScript1.1" type="text/javascript">
    function html_disableItem(nd,a){
         var lEl = document.getElementById(nd);
         if (lEl && lEl != false){
           if(a){
             lEl.disabled = false;
              lEl.style.background = '#ffffff';
            }else{
            lEl.disabled = true;
              lEl.style.background = '#cccccc';
             }}
         return true;}
    
     function disFormItems(){
      var lOptions = document.getElementById('P2_DEPARTMENT_ID').options
      var lReturn;
      for(var i=0;i<lOptions.length;i++){
         if(lOptions[i].selected==true){lReturn = lOptions[i].value;}
      }
      var lTest = lReturn == '80';
      html_disableItem('P2_COMMISSION_PCT',lTest); }
    
     </script>
    
    
  6. 変更の適用」をクリックします。

ファンクションをコールするためのアイテムの編集

次のステップでは、ファンクションをコールするようにP2_DEPARTMENT_IDアイテムを編集し、「HTMLフォームの要素属性」属性にコードを追加します。

ファンクションをコールするようにP2_DEPARTMENT_IDアイテムを編集するには、次のステップを実行します。

  1. ページ2のページ定義にナビゲートします。

  2. 「アイテム」で、「P2_DEPARTMENT_ID」をクリックします。

  3. 「要素」までスクロールします。

  4. 「HTMLフォームの要素属性」で、次のように入力します。

    onchange="disFormItems()"
    
    
  5. 変更の適用」をクリックします。

選択リストへのP2_DEPARTMENT_IDの変更

P2_DEPARTMENT_IDを変更して、選択リストとして表示するには、次のステップを実行します。

  1. ページ2のページ定義にナビゲートします。

  2. 「アイテム」で、「P2_DEPARTMENT_ID」をクリックします。

  3. 「名前」セクションの「表示形式」リストから、「選択リスト」を選択します。

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

  5. 「LOV」で、次のステップを実行します。

    1. 「NULLを表示」で、「いいえ」を選択します。

    2. 「LOV定義」で、次のように入力します。

      SELECT department_name, department_id FROM departments
      
      
  6. 変更の適用」をクリックします。

disFormItemsファンクションへのコールの作成

最後に、選択された従業員が販売担当者でない場合にP2_COMMISSION_PCTを無効にするために、ページのレンダリング後、disFormItemsファンクションへのコールを作成する必要があります。 このコールは、「ページのHTMLボディ属性」から実行することをお薦めします。

disFormItemsファンクションへのコールを作成するには、次のステップを実行します。

  1. ページ2のページ定義にナビゲートします。

  2. 「ページ」で、「ページ属性の編集」アイコンをクリックします。

    「ページ属性」ページが表示されます。

  3. 「ロード時」までスクロールします。

    次に、このオプションの設定を解除してフォーカスを設定します。

  4. 「ページのHTMLボディ属性」に、次のように入力します。

    onload="disFormItems(); first_field();"
    
    
  5. 変更の適用」をクリックします。

  6. ページを実行します。

図10-3に、完成したフォームを示します。 「Department ID」が選択リストとして表示されていることに注意してください。 また、「Department ID」が「Administration」であるため、「Commission Pct」フィールドは使用できないことにも注意してください。

図10-3 更新されたUpdate Form

図10-3の説明が続きます。
「図10-3 更新されたUpdate Form」の説明

フォーム要素の値の変更

次の例では、リージョンに4つのテキスト・ボックスがあります。4つ目のテキスト・ボックスには、他の3つの合計が含まれます。 この合計を計算するには、JavaScriptファンクションを「HTMLヘッダー」属性に追加して、最初の3つのアイテムからこのファンクションをコールします。

「HTMLヘッダー」属性にファンクションを追加するには、次のステップを実行します。

  1. 該当するページ定義にナビゲートします。

  2. 「ページ」で、「ページ属性の編集」アイコンをクリックします。

    「ページ属性」ページが表示されます。

  3. 「HTMLヘッダー」で、次のように入力します。

    <script type="text/javascript">
      function sumItems(){
        function getVal(item){
       if(document.getElementById(item).value != "")
         return parseFloat(document.getElementById(item).value);
       else
         return 0;
        }
        document.getElementById('P1_TOTAL').value =
      getVal('P1_ONE') + getVal('P1_TWO') + getVal('P1_THREE');
      }
    </script>
    
    
  4. 変更の適用」をクリックします。

3つすべてのアイテムからファンクションをコールするには、次のステップを実行します。

  1. 該当するページ定義にナビゲートします。

  2. 各アイテムに対して、次のステップを実行します。

    1. アイテム名をクリックして選択します。

    2. 「要素」までスクロールします。

    3. 「HTMLフォームの要素属性」で、次のように入力します。

      onchange="sumItems();"
      
      
    4. 変更の適用」をクリックします。