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

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

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

この項には、次の項目が含まれます。

JavaScriptを使用したアイテムの参照
JavaScriptファンクションの組込み
ボタンからのJavaScriptのコール

関連項目:

「検証の理解」

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

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

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

<script language="JavaScript1.1" type="text/javascript">
  function firstName(){    
    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ファンクションを組み込む場所は、主に2つあります。

ページのHTMLヘッダー属性内
ページ・テンプレートの.jsファイル内

関連項目:

JavaScriptリテラル文字列内部のショートカットの参照については、「エスケープされた一重引用符を持つJavaScriptのテキスト」を参照してください。

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

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

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

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

「ワークスペース」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
ページを選択します。
「ページ」で、「ページ属性の編集」アイコンをクリックします。
「HTMLヘッダー」までスクロールします。
「HTMLヘッダー」にコードを入力して、「変更の適用」をクリックします。

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

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

関連項目:

「HTMLヘッダー」

ページ・テンプレートによって参照される.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#

関連項目:

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

ボタンからの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?');

関連項目:

「ウィザードを使用したボタンの作成」