< 前へ | 次へ >

演習 9: ユーザー・インターフェースをサポートするコードの完成

次に、単一行レイアウトを完成させ、さらに「クリア」ボタンと「保存」ボタンをサポートするコードも完成させます。

単一行を表示するレイアウトの完成

単一行レイアウトを完成させるには、以下のステップを実行します。

  1. 必要に応じて、「ソース」タブをクリックします。
  2. selectedPayment_category_comboBox 宣言を見つけます。 値の設定ブロックで、values プロパティーの大括弧の代わりに、PaymentLib.categories 配列を指定します。これで、コンボ・ボックスの値リストは、PaymentLib ライブラリーに作成した categories 配列の値になります。 変更後の宣言を以下に示します。
    selectedPayment_category_comboBox DojoComboBox{   values = PaymentLib.categories,
       layoutData = new GridLayoutData{row = 2, column = 2}};    
  3. このコンボ・ボックスの値を、整数ではなくカテゴリー説明に設定するには、以前コーディングしたライブラリー関数にアクセスするように cellClicked 関数を以下のように更新します。
    function cellClicked(myGrid DataGrid in)
       selectedPayment = allPayments_ui.getSelection()[1] as paymentRec;
       selectedPayment_form.publish();
       selectedPayment_category_comboBox.value = 
          PaymentLib.getCategoryDesc(selectedPayment.category);
    end
  4. ファイルを保存しますが、ファイルは閉じないでください。

新規コードのテスト

最後に行った変更内容の結果を確認します。
  1. 「プレビュー」タブをクリックします。
  2. サンプル・データの先頭行をクリックします。 単一レコード・レイアウトには、整数ではなくカテゴリー名が表示されます。

2 番目のボタン・セットのコードの完成

単一レコード・レイアウトから非デフォルト・コンテンツを削除するために、ユーザーが「クリア」をクリックすると、clearAllFields 関数が実行されます。この関数は、ユーザーがデータを入力し「保存」をクリックしたときに、この新しく入力したデータで既存のデータベース行が更新されるように、レイアウトをセットアップします。
  1. 「ソース」タブをクリックします。
  2. clearAllFields 関数を見つけ、以下のように変更します。
    function clearAllFields(event Event in)
       saveID INT = selectedPayment.paymentID;  // retain the key
       selectedPayment = new PaymentRec{};
       selectedPayment.paymentID = saveID;
       selectedPayment_form.publish();
    end
    コードは、今後のデータベース更新で使用するためのレコード・キーを保持します。その後コードはレコードを作成し、このレコードを selectedPayment 変数に割り当て、さらに保存したキー値をこの変数に割り当てて、この変数を単一レコード・レイアウトに公開します。
  3. ユーザーが「保存」をクリックしたときに呼び出される関数を、以下のようにして完成させます。
    1. selectedPayment_form_Submit という名前の関数を見つけます。
    2. この関数を以下のように変更します。
      function selectedPayment_form_Submit(event Event in)
         selectedPayment_category_comboBox.value 
            = PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);
            	
         if (selectedPayment_form.isValid())
            selectedPayment_form.commit();
            selectedPayment_category_comboBox.value = 
               PaymentLib.getCategoryDesc(selectedPayment_category_comboBox.value);
      
            // update allPayments with new version of selectedPayment
            for(i INT from 1 to allPayments.getSize())
               if(allPayments[i].paymentID == selectedPayment.paymentID)
                  allPayments[i] = selectedPayment;
                  exit for;
               end
            end
      
            call dbService.editPayment(selectedPayment) 
               returning to recordRevised
               onException serviceLib.serviceExceptionHandler;
         end
      end
      以下の節は、ウィジェット・コンテンツを関連フィールドにコピーすることについての妥当性を検査します。
       if (selectedPayment_form.isValid())

      「Description」の Dojo コンボ・ボックスで問題が発生します。なぜなら、ウィジェット・コンテンツは STRING 型であるのに対し、関連フィールドである selectedPayment.category の型は INT だからです。 Dojo コンボ・ボックスの検査では、コンボ・ボックスに整数、または整数に変換できるストリング (「1」または「20,」など) が含まれている必要があります。

      この問題に対処するために、EGL コンボ・ウィジェットを使用するか、検査の前に Dojo コンボ・ボックスに有効な整数が含まれているようにします。前述のコードでは 2 つ目のオプションを示しており、以下のように開始時に整数を割り当てます。
      selectedPayment_category_comboBox.value 
            = PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);
      関数はその後、単一レコード・レイアウトのデータの妥当性を検査し、データが有効であれば以下の処理を実行します。
      1. 検証したデータを selectedPayment レコードにコミットします。 「コミット」とは MVC 処理の一部であり、データベースのコミットとは関係ありません。
      2. 単一レコード・レイアウトの Dojo コンボ・ボックスを更新し、このフィールドの値が再びストリングになるようにします。
      3. 保存したキー値を含む allPayments 配列要素を変更します。この時点で、配列要素には、ユーザーがデータベースで必要なデータのコピーが含まれています。
      4. サービスを呼び出して、データベースの単一行を更新します。関連するコールバック関数が allPayments 配列をデータ・グリッドのデータ配列に割り当て、この割り当てにより、更新されたデータでグリッドが再レンダリングされます。グリッドは、データベースから取得されたデータではなく、selectedPayment_form_Submit 関数に割り当てられたデータで再レンダリングされます。
  4. ファイルを保存しますが、ファイルは閉じないでください。 ソース・ファイルにエラーがある場合は、そのコードと完成した PaymentFileMaintenance.egl のコードのファイル内容を比較してください。

新規コードのテスト

次に、完成したアプリケーションをテストします。
  1. 「プレビュー」タブをクリックします。 以前入力したサンプル・データが表示されます。
  2. サンプル・データの下部で、ブランク・レコードを選択します。 このレコードは前の演習で作成したものです。「Payment record」グリッドに、以下の項目以外はブランク・フィールドが表示されます。
    • キー番号が表示されます。
    • 「Amount」フィールドに値 0 が表示されます。
    • DATE 変数の値が NULL なので、現在日付がデフォルトとして使用されます。
    新規ブランク・レコードが表示されます
  3. 以下のようなデータを使用して、レコードを完成させます。
    • 「Category」には、「Automotive」と入力します。
    • 「Description」には、「Gas」と入力します。
    • 「Amount」には、「$80.00」と入力します。
    • 「Fixed pmt」チェック・ボックスはクリア状態のままにします。
    • 「Due Date」フィールドの現在日付をクリックし、表示されるカレンダーから日付を選択します。
      日付入力フィールドをクリックすると、ポップアップ・カレンダーが表示されます。
    • 「Payee」には、「Corner Gas Station」と入力します。
    • 「Address 1」には、「101 Main Street」と入力します。
    • 「Address 2」には、「Miami, FL」と入力します。
  4. 「保存」をクリックします。 新規データがデータベースに格納され、データ・グリッドに表示されます。
    最初のグリッドには 3 件のレコードが表示され、レイアウトには 3 件目のレコードの詳細が表示されています。


  5. 「クリア」をクリックします。 単一レコード・レイアウトが初期値にリセットされます。

演習のチェックポイント

以下のタスクの実行方法を学習しました。
  • 事前設定されているストリング配列を、Dojo コンボ・ボックスによって提供される値のセットとして割り当てる。
  • INT 型のフィールドを、ストリングを含む Dojo コンボ・ボックスと関連させる必要がある場合に、変換関数を使用する。
  • 書式マネージャーの isValid 関数と commit 関数を使用する。

次の演習では、アプリケーションを Web サーバーで実行できるように、Apache Tomcat をシステムにインストールします。

< 前へ | 次へ >

フィードバック