| Oracle HTML DB 2日で開発者 リリース2.0 B25048-01 |
|
 戻る |
 次へ |
WebアプリケーションにJavaScriptを追加することは、Web環境の利点を損なうことなく、クライアント/サーバー・アプリケーションと同様の機能を追加するための優れた方法です。 Oracle HTML DBには、JavaScriptの追加に特化して設計された、複数の組込みインタフェースがあります。
ただし、JavaScriptは、データ集中型の検証には適していないことに注意してください。 たとえば、ある名前が大規模なデータベース表に格納されていることを検証するには、すべてのレコードをクライアントに取り出す必要があり、非常に大きなサイズのHTMLドキュメントを作成することになります。 一般に、JavaScriptよりもサーバーサイドのHTML DB検証の方が複雑な処理に適しています。
このチュートリアルでは、JavaScriptの使用例と、アプリケーションにそれらを実装する方法の詳細を説明します。
この付録の内容は次のとおりです。
JavaScriptファンクションを組み込む場所は、主に2つあります。
ページの「HTMLヘッダー」属性内。
ページ・テンプレートの.jsファイル内。
JavaScriptをアプリケーションに含める方法の1つとして、JavaScriptをページの「HTMLヘッダー」属性に追加する方法があります。 これは、ページに固有のファンクションに有効な方法で、ファンクションを.jsファイルに組み込む前にテストを行う有効な方法でもあります。
「ページ属性」ページの「HTMLヘッダー」属性にコードを入力すると、JavaScriptファンクションをページに追加できます。
HTMLヘッダー属性にJavaScriptコードを追加するには、次の手順を実行します。
「作業領域」ホームページの「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
ページを選択します。
「属性の編集」をクリックします。
「HTMLヘッダー」までスクロールします。
「HTMLヘッダー」に、コードを入力して「変更の適用」をクリックします。
たとえば、次のコードを追加すると、カレント・ページのすべての場所からアクセス可能なファンクションがテストされます。
<script language="JavaScript1.1" type="text/javascript">
function test(){
alert('This is a test.');
}
</script>
Oracle HTML DBでは、ページ・テンプレート内の.jsファイルを参照できます。この方法を使用すると、このファイル内のすべてのJavaScriptがアプリケーションにアクセスできるようになります。.jsファイルは、アプリケーションの最初のページ・ビューにロードされた後、ブラウザでキャッシュされるため、これが最も有効な方法となります。
次に、ページ・テンプレートのヘッダー・セクションに.jsファイルを組み込む方法を示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>#TITLE#</title>
#HEAD#
<script src="#APP_IMAGES#custom.js" type="text/javascript"></script>
</head>
<body #ONLOAD#>#FORM_OPEN#
|
参照: 『Oracle HTML DBユーザーズ・ガイド』の「テンプレートのカスタマイズ」 |
アイテムを参照する場合、最も有効な方法は、IDで参照する方法です。WebブラウザでOracle HTML DBページの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="javascript:displayValue('P1_FIRST_NAME');"
リクエストを確認する最も有効な方法は、ボタンからJavaScriptをコールする方法です。 Oracle HTML DBでは、ほぼすべてのオブジェクトの削除操作にこの方法を使用します。 たとえば、ボタンを削除する場合は、リクエストの確認を求めるJavaScriptメッセージが表示されます。次に例を示します。
<script language="JavaScript1.1" 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ターゲットを次のように指定します。
javascript:confirmDelete('Would you like to perform this delete action?');
クライアント側の検証では、フォームを使用するユーザーに即時フィードバックが提供されます。よく行われるJavaScript検証の1つに、フィールドがNULLではないことを検証するものがあります。たとえば、ページの「HTMLヘッダー」属性にファンクションを作成して、アイテムからそのファンクションをコールできます。
このタイプのJavaScript検証の作成では、次の手順を実行します。
EMP表で新しいアプリケーションを作成します。
ページ1に、P1_ENAMEという従業員名のラベルを持つアイテムを作成します。
ページ3の「HTMLヘッダー」属性にファンクションを追加します。
ファンクションをコールするようにページ3のP3_ENAMEアイテムを編集します。
このセクションの内容は次のとおりです。
EMP表で新しいアプリケーションを作成するには、次の手順を実行します。
「作業領域」ホームページの「アプリケーション・ビルダー」アイコンをクリックします。
「作成」をクリックします。
「方法」で、「アプリケーションの作成」を選択します。
「名前」で、次の手順を実行します。
「名前」に、アプリケーションを説明する名前を入力します。
「アプリケーションの作成」で、「最初から」を選択します。
「次へ」をクリックします。
空白ページを追加し、次の手順でレポートを含めます。
「ページ・タイプの選択」で、「レポートとフォーム」を選択します。
「表またはビュー」で、EMPを選択します。
「分析ページを含む」を選択します。
「ページの追加」をクリックします。
「分析ページ」で、次のように設定します。
「列ごとのサマリーを表示」で、[CTRL]キーを押しながら、列JOB、MGRおよびDEPTNOを選択して「次へ」をクリックします。
「列ごとの集計」で、「SAL」および「COMM」を選択して「次へ」をクリックします。
「チャート・タイプ」で、「円」を選択して「次へ」をクリックします。
選択内容を確認して、「分析ページの追加」をクリックします。
ページ上部のリストに、新しいページが表示されます。
「次へ」をクリックします。
「タブ」で「1レベルのタブ」を選択し、「次へ」をクリックします。
「共有コンポーネント」で、デフォルトの「いいえ」を受け入れて「次へ」をクリックします。
「属性」で、「認証スキーム」、「言語」、「ユーザー言語プリファレンスの派生元」にデフォルトを受け入れて、「次へ」をクリックします。
「ユーザー・インタフェース」でテーマを選択して「次へ」をクリックします。
「作成」をクリックします。
アプリケーションを表示するには、次の手順を実行します。
「アプリケーションの実行」をクリックします。
ユーザー名とパスワードを要求されたら、次の手順を実行します。
「ユーザー名」で、作業領域の名前を入力します。
「パスワード」で、作業領域のパスワードを入力します。
アプリケーションには、次のページが含まれています。
標準レポート
挿入フォーム
更新フォーム
成功フォーム（レコードが正常に挿入された時期を示す）
分析メニュー・ページ
分析レポート
分析チャート
ログイン・ページ
「開発者」ツールバーから「アプリケーションの編集」を選択します。
ページ2の「HTMLヘッダー」属性にファンクションを追加するには、次の手順を実行します。
ページ2のページ定義（EMPの挿入フォーム）にナビゲートします。
「リージョン」で、「EMP」を選択します。
「タイトル」を、Insert Formに変更して「変更の適用」をクリックします。
「属性の編集」をクリックします。
「ページ属性の編集」ページが表示されます。
「HTMLヘッダー」までスクロールします。
「HTMLヘッダー」で、次のように入力します。
<script language="JavaScript1.1" type="text/javascript">
function notNull(object){
if(object.value=="")
alert('This field must contain a value.');
}
</script>
「変更の適用」をクリックします。
次の手順では、ファンクションをコールするようにP2_ENAMEアイテムを編集し、「HTMLフォームの要素属性」属性にコードを追加します。
ファンクションをコールするようにP2_ENAMEアイテムを編集するには、次の手順を実行します。
ページ2（「フォームを挿入」）のページ定義にナビゲートします。
「アイテム」で、P2_ENAMEを選択します。
「要素」までスクロールします。
「HTMLフォームの要素属性」で、次のように入力します。
onBlur="javascript:notNull(this);"
「変更の適用」をクリックします。
ページを実行します。カーソルをEnameフィールドに位置付け、「作成」をクリックすると、次のメッセージが表示されます。
This field must contain a value.
Oracle HTML DBを使用すると、条件に応じてページ・アイテムを表示できますが、ページに対して変更を行った場合は、評価のためにページを送信する必要があります。次の例では、フォーム要素の無効化を別のフォーム要素の値に基づいて行うJavaScriptの使用方法について説明します。
最初に、ファンクションを記述し、更新フォームが含まれるページの「HTMLヘッダー」属性に配置します。次に、そのページのアイテムからファンクションをコールします。次の例では、ユーザーが、販売部門（deptno = 30）に属さない従業員に手数料を追加しないようにするJavaScriptファンクションの追加方法について説明します。
このセクションの内容は次のとおりです。
ページ2の「HTMLヘッダー」属性にファンクションを追加するには、次の手順を実行します。
ページ2のページ定義にナビゲートします。
ページ定義で、「属性の編集」をクリックします。
「ページ属性」が表示されます。
「HTMLヘッダー」までスクロールします。
「HTMLヘッダー」で、次のように入力します。
<script language="JavaScript1.1" type="text/javascript">
// This function takes in:
// 1. A string expression to evaluate. For example:
// 'document.getElementById(\'P2_DEPTNO\').value==\'0\'
// Notice the quotes are escaped using a "\"
// 2. One or more arguments which are item ID's as strings. For example:
// ...,'P2_ENAME','P2_SAL'...);
// Notice the ID's are the item names, NOT item labels
function disFormItems(testString,item1,item2,item3,item4,item5,item6,item7,item8,item9,item10){
if(theTest){
for(var i=1;i<12;i++){
if (arguments[i]){
disItem = document.getElementById(arguments[i]);
disItem.style.background = '#cccccc';
disItem.disabled = true;
}
}
}
else{
for(var i=1;i<12;i++){
if (arguments[i]){
disItem = document.getElementById(arguments[i]);
disItem.disabled = false;
disItem.style.background = '#ffffff';
}
}
}
}
</script>
「変更の適用」をクリックします。
次の手順では、ファンクションをコールするようにP2_DEPTNOアイテムを編集し、「HTMLフォームの要素属性」属性にコードを追加します。
ファンクションをコールするようにP2_DEPTNOアイテムを編集するには、次の手順を実行します。
ページ2のページ定義にナビゲートします。
「アイテム」で、P2_DEPTNOを選択します。
「要素」までスクロールします。
「HTMLフォームの要素属性」で、次のように入力します。
onChange="javascript:disFormItems('document.getElementById(\'P2_DEPTNO\').value!=\'30\'','P2_COMM');"
「変更の適用」をクリックします。
P2_DEPTNOを変更して、選択リストとして表示するには、次の手順を実行します。
ページ2のページ定義にナビゲートします。
「アイテム」で、P2_DEPTNOを選択します。
「表示形式」で、「選択リスト」を選択します。
「LOV」までスクロールします。
「LOV」で、次の手順を実行します。
「NULLを表示」で、「いいえ」を選択します。
「LOV定義」で、次のように入力します。
SELECT dname, deptno FROM dept
「変更の適用」をクリックします。
最後に、選択された従業員がSALESの担当者でない場合にP2_COMMを無効にするために、ページのレンダリング後、disFormItemsファンクションへのコールを作成する必要があります。このコールは、アイテムを含むリージョンの「リージョン・フッター」から実行することが最適です。
ページが最初にロードされた際にP2_COMMを無効にするには、次の手順を実行します。
ページ2のページ定義にナビゲートします。
「リージョン」で、「フォームを挿入」を選択します。
「ヘッダーおよびフッター」までスクロールします。
「リージョン・フッター」で、次のように入力します。
<script language="JavaScript1.1" type="text/javascript">
// This code calls the function when the page loads, thus setting the items state correctly.
disFormItems('document.getElementById(\'P2_DEPTNO\').value!=\'30\'','P2_COMM');
</script>
「変更の適用」をクリックします。
「ページの実行」アイコンをクリックして、ページを実行します。
図9-1に、完成したフォームを示します。
次の例では、リージョンに4つのテキスト・ボックスがあります。4つ目のテキスト・ボックスには、他の3つの合計が含まれます。この合計を計算するには、JavaScriptファンクションを「HTMLヘッダー」属性に追加して、最初の3つのアイテムからこのファンクションをコールします。
最初の3つのアイテムからファンクションをコールするには、次の手順を実行します。
該当するページ定義にナビゲートします。
ページ定義で、「属性の編集」をクリックします。
「ページ属性」が表示されます。
「HTMLヘッダー」で、次のように入力します。
<script language="JavaScript1.1" 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="javascript:sumItems();"
「変更の適用」をクリックします。
