10.11 アプリケーションへのJavaScriptの組込み

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

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

内容は次のとおりです。

JavaScriptを使用したアイテムの参照
JavaScript属性を利用したJavaScriptの組込み
HTMLヘッダー属性からのJavaScriptファイルのコール
ページ・テンプレートからのJavaScriptファイルのコール
ボタンからのJavaScriptのコール
動的アクションを使用したJavaScriptのコール

関連項目:

「JavaScriptにより一重引用符がエスケープされたテキスト」(JavaScriptリテラル文字列内のショートカットの参照の詳細)、「検証の理解」および「プラグインでのJavaScriptコードの使用」

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

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

JavaScriptファンクション$v('P1_FIRST_NAME')と$s('P1_FIRST_NAME', 'Joe');を使用して、アイテム属性と値を取得および設定できます。次に例を示します。

function showFirstName(){
  alert('First Name is ' +$v('P1_FIRST_NAME'))
};
function setFirstName(pFirstName){
  $s('P1_FIRST_NAME', pFirstName);
};

これらのファンクションは、他のJavaScriptファンクションにより、またはJavaScriptコードの実行動的アクションを使用してコールできます。

関連項目:

『Oracle Application Express APIリファレンス』のAPEX_JAVASCRIPTに関する説明

10.11.2 JavaScript属性を利用したJavaScriptの組込み

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

次の例では、コードを追加することによって、カレント・ページの任意の場所からtestファンクションにアクセスできるようにしています。

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

ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。
編集ページにアクセスするには、次の操作を実行します。
- ツリー・ビュー: 「ページ・レンダリング」で、ツリーの上部のページ・タイトルをダブルクリックします。
- コンポーネント・ビュー: 「ページ」で、「編集」アイコンをクリックします。
「JavaScript」までスクロールします。
次の場所にコードを入力します。
- ファンクションおよびグローバル変数の宣言: 対象のページで使用するコード用のJavaScriptコード(たとえば、ファンクションまたはグローバル変数宣言)を入力します。コードを複数のページで使用する場合は、そのコードを外部のJavaScriptファイルに追加して重複を避けることを検討してください。
  
  ここに入力したコードによって、ページ・テンプレート内の#JAVASCRIPT_CODE#置換文字列が置き換えられます。
- ページ・ロード時に実行: ページのロード時に実行するJavaScriptコードを入力します。このコードはOracle Application Expressによって生成されたJavaScriptコードの後に実行されます。
たとえば、次のコードを追加すると、カレント・ページのすべての場所からアクセス可能なファンクションをテストします。
```
  function test(){
    alert('This is a test.');
  }
```
変更を適用します。

10.11.3 HTMLヘッダー属性からのJavaScriptファイルのコール

HTMLヘッダー属性から.jsファイルをコールするには、次のステップを実行します。

ページ定義にナビゲートします。「ページ定義へのアクセス」を参照してください。
編集ページにアクセスするには、次の操作を実行します。
- ツリー・ビュー: 「ページ・レンダリング」で、ツリーの上部のページ・タイトルをダブルクリックします。
- コンポーネント・ビュー: 「ページ」で、「編集」アイコンをクリックします。
「HTMLヘッダーおよびボディ属性」までスクロールします。
「HTMLヘッダー」で、次の構文を使用してJavaScriptファイルをコールします。
```
<script src="/my_images/custom.js" type="text/javascript"></script>
```
変更を適用します。

10.11.4 ページ・テンプレートからの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="/my_images/custom.js" type="text/javascript"></script>
</head>
<body #ONLOAD#>#FORM_OPEN#

関連項目:

「ページ・テンプレート」

10.11.5 ボタンからの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コードを実行する場合は、動的アクションを使用することをお薦めします。次に例を示します。

「動的アクションで定義」のアクションを実行するボタンを作成します。詳細は、「ウィザードを使用したボタンの作成」を参照してください。
動的アクションを作成し、アクション・タイプ「JavaScriptコードの実行」を使用して前述のコードを実行します。たとえば、次のようにします。
```
if (confirm("Would you like to perform this delete action?")) {
  apex.submit('Delete');
}
```

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

10.11.6 動的アクションを使用したJavaScriptのコール

動的アクションを作成することによっても、JavaScriptコードを実行できます。JavaScriptコードは、JavaScriptの実行と「値の設定」タイプで実行できます。条件タイプを「JavaScript式」に設定することにより、動的アクションの条件に対してJavaScriptコードを使用することもできます。詳細は、「動的アクションの実装」を参照してください。