| Oracle® Application Expressアドバンスト・チュートリアル リリース3.2 B53796-03 |
|
 前 |
 次 |
Webデプロイメントのすべてのメリットを失わずに、クライアント/サーバー・アプリケーションと同等の機能を追加する最も有効な方法は、JavaScriptをWebアプリケーションに追加する方法です。Oracle Application Expressには、JavaScript追加専用に設計された複数の組込みインタフェースが含まれています。
ただし、JavaScriptは、データ集中型の検証には適していないことに注意してください。たとえば、名前が大規模データベース表内に含まれていることを検証するには、大容量のHTMLドキュメントを作成して、すべてのレコードをクライアントにプルダウンする必要があります。通常、複雑な操作には、JavaScriptではなくサーバー・サイドOracle Application Express検証の方がより適しています。
このチュートリアルでは、JavaScriptの使用例と、アプリケーションにそれらを実装する方法の詳細を説明します。
この項には、次の項目が含まれます。
このトピックに関するその他の例は、次に示すOracle by Examples (OBE)を参照してください。
アプリケーションへのJavaScriptの組込み
http://www.oracle.com/technology/obe/hol08/apexweb20/javascript_otn.htm
アプリケーションでのAJAXの使用
http://www.oracle.com/technology/obe/hol08/apexweb20/ajax_otn.htm
JavaScriptファンクションを組み込む場所は、主に2つあります。
ページの「HTMLヘッダー」属性内
ページ・テンプレートで参照される.jsファイル内
この項の内容は次のとおりです。
JavaScriptをアプリケーションに含める方法の1つとして、JavaScriptをページのHTMLヘッダー属性に追加する方法があります。これは、ページに固有のファンクションに有効な方法で、ファンクションを.jsファイルに組み込む前にテストを行う有効な方法でもあります。
「ページ属性」ページの「HTMLヘッダー」属性にコードを入力すると、JavaScriptファンクションをページに追加できます。
HTMLヘッダー属性にJavaScriptコードを追加するには、次のステップを実行します。
「ワークスペース」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「アプリケーション」ホームページが表示されます。このページには、一連の関連ページが表示されます。
ページをクリックします。
そのページのページ定義が表示されます。
「ページ」セクションで、「ページ属性の編集」アイコンをクリックします。
「ページの編集」が表示されます。
「HTMLヘッダー」セクションまでスクロールします。
「HTMLヘッダー」に、コードを入力して「変更の適用」をクリックします。
たとえば、次のコードを追加すると、カレント・ページのすべての場所からアクセス可能なファンクションがテストされます。
<script type="text/javascript">
function test(){
window.alert('This is a test.');
}
</script>
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ユーザーズ・ガイド』の「テンプレートのカスタマイズ」 |
アイテムを参照する場合、ページ内に定義されたアイテム名を参照するのが最もよい方法です。アイテム名はアイテム・ラベルとは異なることに注意してください。アイテム名はページ定義に表示されるもので、ラベルは実行中のページに表示されるものです。たとえば、P1_FIRST_NAMEという名前で、First Nameというラベルを持つアイテムを作成した場合、このアイテムを参照するにはP1_FIRST_NAMEを使用します。
アイテム名でアイテムを参照すると、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をコールする方法です。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?');
次の例では、リージョンに4つのテキスト・ボックスがあります。4つ目のテキスト・ボックスには、他の3つの合計が含まれます。この合計を計算するには、JavaScriptファンクションを「HTMLヘッダー」属性に追加して、最初の3つのアイテムからこのファンクションをコールします。
「HTMLヘッダー」属性にファンクションを追加するには、次のステップを実行します。
該当するページ定義に移動します。
「ページ」セクションで、「ページ属性の編集」アイコンをクリックします。
「ページの編集」が表示されます。
「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>
「変更の適用」をクリックします。
3つすべてのアイテムからファンクションをコールするには、次のステップを実行します。
該当するページ定義に移動します。
各アイテムに対して、次のステップを実行します。
アイテム名をクリックして選択します。
「要素」までスクロールします。
「HTMLフォームの要素属性」で、次のように入力します。
onchange="sumItems();"
「変更の適用」をクリックします。
クライアント側の検証では、フォームを使用するユーザーに即時フィードバックが提供されます。よく行われるJavaScript検証の1つに、フィールドがNULLではないことを検証するものがあります。この種の検証は非常にページに特化しているため、.js内で使用するよりもページ・ヘッダー内で使用するほうが有効に機能します。
チュートリアルを始める前に、必要なサンプル・データベース・オブジェクトにアクセスできるように、OEHR Sample Objectsアプリケーションをインポートしてインストールする必要があります。詳細は、「サンプル・オブジェクトのロード方法の概要」を参照してください。
この項の内容は次のとおりです。
OEHR_EMPLOYEES表で新しいアプリケーションを作成するには、次のステップを実行します。
「ワークスペース」ホームページで、「アプリケーション・ビルダー」をクリックします。
「作成」をクリックします。
「方法」で、「アプリケーションの作成」を選択して「次へ」をクリックします。
「名前」で、次の各項目を指定します。
「名前」に、JavaScript Exampleと入力します。
「アプリケーション」で、デフォルトを受け入れます。
「アプリケーションの作成」で、「最初から」を選択します。
「スキーマ」で、OEHR Sample Objectsをインストールしたスキーマを選択します。
「次へ」をクリックします。
「ページの追加」セクションで次のように指定して、レポートを含むページを追加します。
「ページ・タイプの選択」で、「レポートとフォーム」を選択します。
「表名」で、「OEHR_EMPLOYEES」を選択します。
「ページの追加」をクリックします。
ページ上部のリストに、新しいページが表示されます。次に、ページ2の名前をUpdate Formに変更します。
ページ2の名前を変更するには、次のステップを実行します。
図10-1に示すように、ページ上部の「アプリケーションの作成」で、ページ2のページ名「OEHR_EMPLOYEES」をクリックします。
ページ定義が表示されます。
「ページ名」に、Update Formと入力します。
「変更の適用」をクリックします。
「次へ」をクリックします。
「タブ」で、デフォルトの「1レベルのタブ」を受け入れて「次へ」をクリックします。
「共有コンポーネント」で、デフォルトの「いいえ」を受け入れて「次へ」をクリックします。
「属性」で、「認証スキーム」、「言語」、「ユーザー言語プリファレンスの派生元」にデフォルトを受け入れて、「次へ」をクリックします。
「ユーザー・インタフェース」で、「テーマ2」を選択して「次へ」をクリックします。
「作成」をクリックします。
「アプリケーション」ホームページが表示されます。新しいアプリケーションに次の3つのページが含まれていることに注意してください。
1 - OEHR_EMPLOYEES
2 - Update Form
101 - ログイン
アプリケーションを表示するには、次のステップを実行します。
図10-2に示すように、「アプリケーションの実行」アイコンをクリックします。
ユーザー名およびパスワードを入力するように要求されたら、ワークスペースのユーザー名およびパスワードを入力して、「ログイン」をクリックします。詳細は、「アプリケーション認証の概要」を参照してください。
標準レポートが表示されます。更新フォームを表示するには、「作成」ボタンまたは「編集」アイコンのいずれかをクリックします。
「開発者」ツールバーの「アプリケーション」をクリックして、「アプリケーション」ホームページに戻ります。
次に、「Last Name」フィールドに値が含まれていない場合にメッセージを表示するファンクションをページ2の「HTMLヘッダー」属性に追加する必要があります。
ページ2の「HTMLヘッダー」属性にファンクションを追加するには、次のステップを実行します。
「アプリケーション」ホームページで、「2 - Update Form」をクリックします。
ページ2のページ定義が表示されます。
図10-3に示すように、「ページ」で「ページ属性の編集」アイコンをクリックします。
「ページの編集」が表示されます。
「HTMLヘッダー」までスクロールします。
「HTMLヘッダー」にすでにスクリプトが含まれていることに注意してください。ユーザーが「削除」ボタンをクリックすると、このスクリプトによって次のメッセージが表示されます。
Would you like to perform this delete action?
「HTMLヘッダー」で、スクロールして最後の</script>タグの後にカーソルを置きます。
最後の</script>タグの後に、次のスクリプトを入力します。
<script type="text/javascript">
function notNull(object){
if(object.value=="")
alert('This field must contain a value.');
}
</script>
ページ上部の「変更の適用」をクリックします。
ページ2(Update Form)のページ定義が表示されます。
次に、ファンクションをコールするようにP2_LAST_NAMEアイテムを編集する必要があります。
ファンクションをコールするようにP2_LAST_NAMEアイテムを編集するには、次のステップを実行します。
「アイテム」で、「P2_LAST_NAME」をクリックします。
「要素」までスクロールします。
「HTMLフォームの要素属性」で、次のように入力します。
onblur="notNull(this);"
ページ上部の「変更の適用」をクリックします。
ページ定義が表示されます。次に、ページを実行します。
次に、ページ1にナビゲートしてページを実行します。
検証テストを行うには、次のステップを実行します。
ページ定義の「ページ」フィールドに1と入力して、「実行」をクリックします。
ページ1のページ定義が表示されます。
右上にある「ページの実行」アイコンをクリックします。
アプリケーションが表示されたら、「作成」をクリックします。
「Update Form」が表示されます。
「Last Name」フィールド内にカーソルを置き、「作成」をクリックします。図10-4に示すように、「This field must contain a value.」というメッセージが表示されます。
Oracle Application Expressを使用すると、条件に応じてページ・アイテムを表示できますが、ページに対して変更を行った場合は、評価のためにページを送信する必要があります。次の例では、フォーム要素の無効化を別のフォーム要素の値に基づいて行うJavaScriptの使用方法について説明します。
最初に、ファンクションを記述し、更新フォームが含まれるページの「HTMLヘッダー」属性に配置します。次に、そのページのアイテムからファンクションをコールします。次の例では、ユーザーが、販売部門(P2_DEPARTMENT_ID = 80)に属さない従業員に手数料を追加しないようにするJavaScriptファンクションの追加方法について説明します。
この項の内容は次のとおりです。
ページ2の「HTMLヘッダー」属性にファンクションを追加するには、次のステップを実行します。
ページ2のページ定義に移動します。
「ページ」で、「ページ属性の編集」アイコンをクリックします。
「ページの編集」が表示されます。
「HTMLヘッダー」までスクロールします。
「HTMLヘッダー」で、スクロールして最後の</script>タグの後にカーソルを置きます。
最後の</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>
「変更の適用」をクリックします。
次のステップでは、ファンクションをコールするようにP2_DEPARTMENT_IDアイテムを編集し、「HTMLフォームの要素属性」属性にコードを追加します。
ファンクションをコールするようにP2_DEPARTMENT_IDアイテムを編集するには、次のステップを実行します。
「アイテム」で、「P2_DEPARTMENT_ID」をクリックします。
「要素」までスクロールします。
「HTMLフォームの要素属性」で、次のように入力します。
onchange="disFormItems()"
「変更の適用」をクリックします。
P2_DEPARTMENT_IDを変更して、選択リストとして表示するには、次のステップを実行します。
「アイテム」で、「P2_DEPARTMENT_ID」をクリックします。
「名前」セクションの「表示形式」リストから、「選択リスト」を選択します。
「LOV」までスクロールします。
「LOV」で、次のように指定します。
「NULLを表示」で、「いいえ」を選択します。
「LOV定義」で、次のように入力します。
SELECT department_name, department_id FROM oehr_departments
「変更の適用」をクリックします。
|
ヒント: 簡単にするため、このチュートリアルではアイテム・レベルのLOVを作成します。ただし、名前付きLOVを作成して参照させることをお薦めします。 |
|
関連項目: 『Oracle Database Application Expressユーザーズ・ガイド』の「LOVの作成」 |
最後に、選択された従業員が販売担当者でない場合にP2_COMMISSION_PCTを無効にするために、ページのレンダリング後、disFormItemsファンクションへのコールを作成する必要があります。このコールは、「ページのHTMLボディ属性」から実行することをお薦めします。
disFormItemsファンクションへのコールを作成するには、次のステップを実行します。
ページ2のページ定義に移動します。
「ページ」で、「ページ属性の編集」アイコンをクリックします。
「ページの編集」が表示されます。
「表示属性」セクションに移動します。
「カーソル・フォーカス」で、「フォーカスなし」を選択します。
「フォーカスなし」を選択すると、生成されたJavaScriptとカスタムJavaScriptの競合を回避できます。
「HTMLボディ属性」セクションまでスクロールします。
「ページのHTMLボディ属性」に、次のように入力します。
onload="disFormItems(); first_field();"
「変更の適用」をクリックします。
ページを実行します。
図10-5に、完成したフォームを示します。「Department ID」が選択リストとして表示されていることに注意してください。また、「Department ID」が「Administration」であるため、「Commission Pct」フィールドは使用できないことにも注意してください。
