レッスン 5：データ操作とナビゲーションの追加

このレッスンでは、アプリケーションにデータ操作論理とナビゲーション論理を追加する方法について説明します。

♦ テーブルの初期化

次のコードを tutorial.js の Connect 関数の末尾に追加することで、データベースの Customer テーブルを表す CustomerTable を初期化します。

try {
  CustomerTable = Connection.getTable( "customer", null );
  CustomerTable.open();
} catch( ex3 ) {
  alert("Error: " + ex3.getMessage() );
}

データベースと Web フォームの間でデータを移動するための変数を追加します。

顧客データ用の次の変数宣言を tutorial.js の先頭に追加します。

var GivenName = "";
var Surname = "";
var Street = "";
var City = "";
var Phone = "";
var ID = "";

顧客のデータをフェッチして表示するための関数を作成します。

次の関数を tutorial.js に追加します。この関数は、顧客データの現在のローをフェッチして、NULL カラムが空の文字列として表示されるようにします。

function Fetch() 
{
    if( CustomerTable.getRowCount() == 0 || CustomerTable.isBOF() ) {
 GivenName = "";
 Surname = "";
 Street = "";
 City = "";
 Phone = "";
 ID = "";
 return;
    } 
    ID = CustomerTable.getString( CustomerTable.schema.getColumnID( "ID" ) );
    GivenName = CustomerTable.getString( CustomerTable.schema.getColumnID( "GivenName" ) );
    Surname = CustomerTable.getString( CustomerTable.schema.getColumnID( "Surname" ) );
    Street = CustomerTable.getString( CustomerTable.schema.getColumnID( "Street" ) );
    if( CustomerTable.isNull( CustomerTable.schema.getColumnID( "City" ) ) ) {
 City = "";
    } else {
 City = CustomerTable.getString( CustomerTable.schema.getColumnID( "City" ) );
    }
    if( CustomerTable.isNull( CustomerTable.schema.getColumnID( "Phone" ) ) ) {
 Phone = "";
    } else {
 Phone = CustomerTable.getString( CustomerTable.schema.getColumnID( "Phone" ) );
    }
}

次のコードを main.htm の、<script> タグの直後に追加します。DisplayRow は、データベースから値を取得して、Web フォームに表示します。FetchForm は、Web フォームの現在の値を取得して、データベースコードで利用できるようにします。

<script>
function DisplayRow() {
    Fetch();
    document.form.ID.value = ID;
    document.form.GivenName.value = GivenName;
    document.form.Surname.value = Surname;
    document.form.Street.value = Street;
    document.form.City.value = City;
    document.form.Phone.value = Phone;
}

function FetchForm() {
    GivenName = document.form.GivenName.value;
    Surname = document.form.Surname.value;
    Street = document.form.Street.value;
    City = document.form.City.value;
    Phone = document.form.Phone.value;
}
</script>

アプリケーションのロード時に、現在のローを表示する DisplayRow を呼び出します。main.htm の先頭の <body> タグを次のように変更します。
<body onload="Connect(); DisplayRow();">

この時点ではまだチュートリアルデータベースにデータがありませんが、チャネルを同期して、アプリケーションが正しく稼働していることを確認するにはよいタイミングです。

♦ ローを挿入するコードの追加

顧客データを挿入するための関数を作成します。

次のプロシージャーでは、insertBegin を呼び出すと、アプリケーションが挿入モードになり、現在のローのすべての値がデフォルトに設定されます。たとえば、ID カラムは、次のオートインクリメント値を受け取ります。カラム値が設定されると、新しいローが挿入されます。

次の関数を tutorial.js に追加します。

function Insert()
{
    try {
 CustomerTable.insertBegin();
 CustomerTable.setString( CustomerTable.schema.getColumnID( "GivenName" ), GivenName );
 CustomerTable.setString( CustomerTable.schema.getColumnID( "Surname" ), Surname );
 CustomerTable.setString( CustomerTable.schema.getColumnID( "Street" ), Street );
 if( City.length > 0 ) {
     CustomerTable.setString( CustomerTable.schema.getColumnID( "City" ), City );
 }
 if( Phone.length > 0 ) {
     CustomerTable.setString( CustomerTable.schema.getColumnID( "Phone" ), Phone );
 }
 CustomerTable.insert();
 CustomerTable.moveLast();
    } catch( ex ) {
 alert( "Error: cannot insert row: " + ex.Message() );
    }
}

次の関数を main.htm の FetchForm 関数の後の </script> タグの前に追加します。

function ClickInsert()
{
    FetchForm();
    Insert();
    DisplayRow();
}

DocCommentXchange で意見交換できます