Jump to: navigation, search

Difference between revisions of "EDT:Tutorial: RUI With DataBase Lesson 9"

(New page: Access a database with EGL Rich UI {| style="float: right" |< Previous | [[EDT:Tuto...)
 
Line 1: Line 1:
 
  
 
[[EDT:Tutorial: Access a database with EGL Rich UI|Access a database with EGL Rich UI]]
 
[[EDT:Tutorial: Access a database with EGL Rich UI|Access a database with EGL Rich UI]]
 
  
 
{| style="float: right"
 
{| style="float: right"
Line 13: Line 11:
  
 
== Complete the layout that displays a single row ==
 
== Complete the layout that displays a single row ==
 
 
  
 
To complete the single-row layout:
 
To complete the single-row layout:
  
<ol><li>Click the Source tab, if necessary.
+
Click the Source tab, if necessary.
<li>Locate the <tt>selectedPayment_category_comboBox</tt> declaration.
+
Locate the '''selectedPayment_category_comboBox''' declaration.
 
In the set-values block, in place of the brackets for the '''values''' property,
 
In the set-values block, in place of the brackets for the '''values''' property,
specify the <tt>PaymentLib.categories</tt> array. The
+
specify the '''PaymentLib.categories''' array. The
list of values in the combo box will now be the values in the <tt>categories</tt> array
+
list of values in the combo box will now be the values in the '''categories''' array
 
that you created in the PaymentLib library. Here
 
that you created in the PaymentLib library. Here
is the changed declaration:  
+
is the changed declaration:
 
+
  selectedPayment_category_comboBox DojoComboBox{'''values = PaymentLib.categories ''',
selectedPayment_category_comboBox DojoComboBox{'''   values = PaymentLib.categories ''',
+
      layoutData = new GridLayoutData{row = 2, column = 2}};     
  layoutData = new GridLayoutData{row = 2, column = 2}};     
+
To set the value of that combo box to a category description
 
+
rather than an integer, update the '''cellClicked''' function
<li>To set the value of that combo box to a category description
+
to access a library function that you coded earlier:  
rather than an integer, update the <tt>cellClicked</tt> function
+
  function cellClicked(myGrid DataGrid in)
to access a library function that you coded earlier:
+
      selectedPayment = allPayments_ui.getSelection()[1] as paymentRec;
 
+
      selectedPayment_form.publish();
function cellClicked(myGrid DataGrid in)
+
      '''selectedPayment_category_comboBox.value =  
  selectedPayment = allPayments_ui.getSelection()[1] as paymentRec;
+
        PaymentLib.getCategoryDesc(selectedPayment.category); '''
  selectedPayment_form.publish();
+
  end
  ''' selectedPayment_category_comboBox.value =  
+
Save the file, but do not close it.  
      PaymentLib.getCategoryDesc(selectedPayment.category); '''
+
end
+
 
+
<li>Save the file, but do not close it.
+
</ol>
+
  
 
== Test the new code ==
 
== Test the new code ==
Line 51: Line 42:
 
single-record layout now displays the category name rather than an
 
single-record layout now displays the category name rather than an
 
integer.[[Image:EDT_Tutorial_edt_richui_sql10_test_ui.jpg|EDT_Tutorial_edt_richui_sql10_test_ui.jpg]]
 
integer.[[Image:EDT_Tutorial_edt_richui_sql10_test_ui.jpg|EDT_Tutorial_edt_richui_sql10_test_ui.jpg]]
 
 
</ol>
 
</ol>
  
Line 57: Line 47:
  
 
When the user clicks '''Clear''' to remove
 
When the user clicks '''Clear''' to remove
nondefault content from the single-record layout, the <tt>clearAllFields</tt> function
+
nondefault content from the single-record layout, the '''clearAllFields''' function
 
runs. The function sets up the layout so that when the user types
 
runs. The function sets up the layout so that when the user types
 
data and clicks '''Save''', the new typed data updates
 
data and clicks '''Save''', the new typed data updates
 
an existing database row.  
 
an existing database row.  
  
<ol><li>Click the Source tab.  
+
To implement this, first click the '''Source''' tab, if necessary.
<li>Find the <tt>clearAllFields</tt> function and make
+
Find the '''clearAllFields''' function and make it as follows:  
it as follows:  
+
  function clearAllFields(event Event in)
 
+
      saveID INT = selectedPayment.paymentID;  // retain the key
function clearAllFields(event Event in)
+
      selectedPayment = new PaymentRec{};
  saveID INT = selectedPayment.paymentID;  // retain the key
+
      selectedPayment.paymentID = saveID;
  selectedPayment = new PaymentRec{};
+
      selectedPayment_form.publish();
  selectedPayment.paymentID = saveID;
+
  end
  selectedPayment_form.publish();
+
The code retains the record key
end
+
  The code retains the record key
+
 
for use in a subsequent update of the database. The code then creates
 
for use in a subsequent update of the database. The code then creates
a record, assigns it to the <tt>selectedPayment</tt> variable,
+
a record, assigns it to the '''selectedPayment''' variable,
 
assigns the saved key value to that variable, and publishes the variable
 
assigns the saved key value to that variable, and publishes the variable
 
to the single-record layout.
 
to the single-record layout.
<li>Complete the function that is invoked when the user clicks '''Save''':
 
  
<ol><li>Find the function, which is named <tt>selectedPayment_form_Submit</tt>.
+
Now complete the function that is invoked when the user clicks '''Save'''.
<li>Make the function as follows:  
+
Find the function, which is named '''selectedPayment_form_Submit''' and
 
+
modify as follows:  
function selectedPayment_form_Submit(event Event in)
+
  function selectedPayment_form_Submit(event Event in)
   selectedPayment_category_comboBox.value  
+
    
      = PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);
+
      selectedPayment_category_comboBox.value  
     
+
        = PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);
  if (selectedPayment_form.isValid())
+
       
      selectedPayment_form.commit();
+
      if (selectedPayment_form.isValid())
      selectedPayment_category_comboBox.value =  
+
        selectedPayment_form.commit();
        PaymentLib.getCategoryDesc(selectedPayment_category_comboBox.value);
+
        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())
+
        // update allPayments with new version of selectedPayment
        if(allPayments[i].paymentID == selectedPayment.paymentID)
+
        for(i INT from 1 to allPayments.getSize())
            allPayments[i] = selectedPayment;
+
            if(allPayments[i].paymentID == selectedPayment.paymentID)
            exit for;
+
              allPayments[i] = selectedPayment;
 +
              exit for;
 +
            end
 
         end
 
         end
 +
     
 +
        call dbService.editPayment(selectedPayment)
 +
            returning to recordRevised
 +
            onException serviceExceptionHandler;
 
       end
 
       end
 
      call dbService.editPayment(selectedPayment)
 
        returning to recordRevised
 
        onException serviceLib.serviceExceptionHandler;
 
 
   end
 
   end
end
 
  
 
The following clause checks the validity of copying
 
The following clause checks the validity of copying
 
the widget content to the related field:
 
the widget content to the related field:
 
+
  if (selectedPayment_form.isValid())
if (selectedPayment_form.isValid())
+
A problem arises with the Dojo combo box for '''Description''',
 
+
 
+
A
+
problem arises with the Dojo combo box for '''Description''',
+
 
because the widget content is of type STRING and the related field
 
because the widget content is of type STRING and the related field
is <tt>selectedPayment.category</tt>, which is of type INT.
+
is '''selectedPayment.category''', which is of type INT.
 
The validation of the Dojo combo box requires that combo box include
 
The validation of the Dojo combo box requires that combo box include
either integers or strings, such as &quot;œ1&quot;? or &quot;œ20,&quot;? that can be converted
+
either integers or strings, such as &quot;1&quot; or &quot;20,&quot; that can be converted
 
to integers.
 
to integers.
  
Line 123: Line 107:
 
The previous code demonstrates the second option, and begins by assigning
 
The previous code demonstrates the second option, and begins by assigning
 
the integer:
 
the integer:
 
+
  selectedPayment_category_comboBox.value  
selectedPayment_category_comboBox.value  
+
 
       = PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);
 
       = PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);
 
 
 
The function thereafter checks the validity of
 
The function thereafter checks the validity of
 
the data in the single-record layout and, if the data is valid, does
 
the data in the single-record layout and, if the data is valid, does
 
as follows:
 
as follows:
 
+
<ol><li>Commits the validated data to the '''selectedPayment''' record.
<ol><li>Commits the validated data to the <tt>selectedPayment</tt> record.
+
This &quot;commit&quot; is part of MVC processing and has nothing to do with
This &quot;œcommit&quot;? is part of MVC processing and has nothing to do with
+
 
a database commit.
 
a database commit.
 
<li>Updates the Dojo combo box in the single-record layout so that
 
<li>Updates the Dojo combo box in the single-record layout so that
 
the value of that field is again a string.
 
the value of that field is again a string.
<li>Revises the <tt>allPayments</tt> array element that contains
+
<li>Revises the '''allPayments''' array element that contains
 
the saved key value. At that point, the array element includes a copy
 
the saved key value. At that point, the array element includes a copy
 
of the data that the user wants in the database.
 
of the data that the user wants in the database.
 
<li>Calls the service to update a single row in the database. The
 
<li>Calls the service to update a single row in the database. The
related callback function assigns the <tt>allPayments</tt> array
+
related callback function assigns the '''allPayments''' array
 
to the data array of the data grid, and that assignment re-renders
 
to the data array of the data grid, and that assignment re-renders
 
the grid with the updated data. The grid will be re-rendered with
 
the grid with the updated data. The grid will be re-rendered with
data assigned in the <tt>selectedPayment_form_Submit</tt> function,
+
data assigned in the '''selectedPayment_form_Submit''' function,
 
not with data retrieved from the database.
 
not with data retrieved from the database.
</ol>
+
</ol>  
 
+
Now save the file, but do not close it. If you see
</ol>
+
 
+
<li>Save the file, but do not close it. If you see
+
 
errors in your source file, compare your code to the file contents
 
errors in your source file, compare your code to the file contents
in [finished_code/egl_richui_sql_code09.html Finished code for PaymentFileMaintenance.egl].
+
in [[EDT:Tutorial: RUI With DataBase Lesson 9 Code|Code for PaymentFileMaintenance.egl after lesson 9]].
</ol>
+
  
 
== Test the new code ==
 
== Test the new code ==
Line 163: Line 139:
 
You created this record in a previous lesson. The Payment record grid
 
You created this record in a previous lesson. The Payment record grid
 
shows blank fields, with the following exceptions:  
 
shows blank fields, with the following exceptions:  
 
 
<ul><li>A key number is displayed.
 
<ul><li>A key number is displayed.
 
<li>The '''Amount''' field shows a zero value.
 
<li>The '''Amount''' field shows a zero value.
Line 173: Line 148:
 
<li>Complete the record with data such as the following:  
 
<li>Complete the record with data such as the following:  
  
<ul><li>For '''Category''', enter <tt>Automotive</tt>.
+
<ul><li>For '''Category''', enter '''Automotive'''.
<li>For '''Description''', enter <tt>Gas</tt>.
+
<li>For '''Description''', enter '''Gas'''.
<li>For '''Amount''', enter <tt>$80.00</tt>.
+
<li>For '''Amount''', enter '''$80.00'''.
 
<li>Leave the '''Fixed pmt''' check box clear.
 
<li>Leave the '''Fixed pmt''' check box clear.
 
<li>Click the current date in the '''Due Date''' field
 
<li>Click the current date in the '''Due Date''' field
 
and select a date from the displayed calendar.[[Image:EDT_Tutorial_edt_richui_sql11_calendar.jpg|A pop-up calendar is displayed when you click in the date entry field.]]
 
and select a date from the displayed calendar.[[Image:EDT_Tutorial_edt_richui_sql11_calendar.jpg|A pop-up calendar is displayed when you click in the date entry field.]]
 
 
<li>For '''Payee''', enter <kbd class="ph userinput">Corner Gas
 
<li>For '''Payee''', enter <kbd class="ph userinput">Corner Gas
 
Station</kbd>.
 
Station</kbd>.
Line 187: Line 161:
 
FL</kbd>.
 
FL</kbd>.
 
</ul>
 
</ul>
 
 
<li>Click '''Save'''. The
 
<li>Click '''Save'''. The
 
new data is stored in the database and is displayed in the data grid.[[Image:EDT_Tutorial_edt_richui_sql11_saved_record.jpg|The first grid shows three records, and the layout shows the details of the third.]]
 
new data is stored in the database and is displayed in the data grid.[[Image:EDT_Tutorial_edt_richui_sql11_saved_record.jpg|The first grid shows three records, and the layout shows the details of the third.]]
 
 
<li><br>
 
<li><br>
 
<li>Click '''Clear'''. The
 
<li>Click '''Clear'''. The
 
single-record layout is reset to initial values.
 
single-record layout is reset to initial values.
 
</ol>
 
</ol>
 
 
== Lesson checkpoint ==
 
== Lesson checkpoint ==
 
 
You learned how to complete the following tasks:
 
You learned how to complete the following tasks:
 
 
<ul><li>Assign a preset string array as the set of values that are provided
 
<ul><li>Assign a preset string array as the set of values that are provided
 
by a Dojo combo box.
 
by a Dojo combo box.
Line 206: Line 175:
 
<li>Use the Form Manager '''isValid''' and '''commit''' functions.
 
<li>Use the Form Manager '''isValid''' and '''commit''' functions.
 
</ul>
 
</ul>
 
 
In the next lesson, you install Apache Tomcat on your system
 
In the next lesson, you install Apache Tomcat on your system
 
so that you can run your application on a web server.
 
so that you can run your application on a web server.
 
 
  
 
{| style="float: right"
 
{| style="float: right"
 
|[[EDT:Tutorial: RUI With DataBase Lesson 8|&lt; Previous]] | [[EDT:Tutorial: RUI With Database Lesson 10|Next >]]
 
|[[EDT:Tutorial: RUI With DataBase Lesson 8|&lt; Previous]] | [[EDT:Tutorial: RUI With Database Lesson 10|Next >]]
 
|}
 
|}
 
  
 
[[Category:EDT]]
 
[[Category:EDT]]

Revision as of 15:06, 30 November 2011

Access a database with EGL Rich UI

< Previous | Next >

Lesson 9: Complete the code that supports the user interface

Next, you will complete the single-row layout, as well as the code that supports the Clear and Save buttons.

Complete the layout that displays a single row

To complete the single-row layout:

Click the Source tab, if necessary. Locate the selectedPayment_category_comboBox declaration. In the set-values block, in place of the brackets for the values property, specify the PaymentLib.categories array. The list of values in the combo box will now be the values in the categories array that you created in the PaymentLib library. Here is the changed declaration:

  selectedPayment_category_comboBox DojoComboBox{values = PaymentLib.categories ,
     layoutData = new GridLayoutData{row = 2, column = 2}};    

To set the value of that combo box to a category description rather than an integer, update the cellClicked function to access a library function that you coded earlier:

  function cellClicked(myGrid DataGrid in)
     selectedPayment = allPayments_ui.getSelection()[1] as paymentRec;
     selectedPayment_form.publish();
     selectedPayment_category_comboBox.value = 
        PaymentLib.getCategoryDesc(selectedPayment.category); 
  end

Save the file, but do not close it.

Test the new code

Review the effect of your last change.

  1. Click the Preview tab.
  2. Click the first line of sample data. The single-record layout now displays the category name rather than an integer.EDT_Tutorial_edt_richui_sql10_test_ui.jpg

Complete the code for the second set of buttons

When the user clicks Clear to remove nondefault content from the single-record layout, the clearAllFields function runs. The function sets up the layout so that when the user types data and clicks Save, the new typed data updates an existing database row.

To implement this, first click the Source tab, if necessary. Find the clearAllFields function and make it as follows:

  function clearAllFields(event Event in)
     saveID INT = selectedPayment.paymentID;  // retain the key
     selectedPayment = new PaymentRec{};
     selectedPayment.paymentID = saveID;
     selectedPayment_form.publish();
  end

The code retains the record key for use in a subsequent update of the database. The code then creates a record, assigns it to the selectedPayment variable, assigns the saved key value to that variable, and publishes the variable to the single-record layout.

Now complete the function that is invoked when the user clicks Save. Find the function, which is named selectedPayment_form_Submit and modify as follows:

  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 serviceExceptionHandler;
     end
  end

The following clause checks the validity of copying the widget content to the related field:

  if (selectedPayment_form.isValid())

A problem arises with the Dojo combo box for Description, because the widget content is of type STRING and the related field is selectedPayment.category, which is of type INT. The validation of the Dojo combo box requires that combo box include either integers or strings, such as "1" or "20," that can be converted to integers.

To handle the issue, use an EGL combo widget or ensure that the Dojo combo box includes a valid integer before validation. The previous code demonstrates the second option, and begins by assigning the integer:

  selectedPayment_category_comboBox.value 
     = PaymentLib.getCategoryNum(selectedPayment_category_comboBox.value);

The function thereafter checks the validity of the data in the single-record layout and, if the data is valid, does as follows:

  1. Commits the validated data to the selectedPayment record. This "commit" is part of MVC processing and has nothing to do with a database commit.
  2. Updates the Dojo combo box in the single-record layout so that the value of that field is again a string.
  3. Revises the allPayments array element that contains the saved key value. At that point, the array element includes a copy of the data that the user wants in the database.
  4. Calls the service to update a single row in the database. The related callback function assigns the allPayments array to the data array of the data grid, and that assignment re-renders the grid with the updated data. The grid will be re-rendered with data assigned in the selectedPayment_form_Submit function, not with data retrieved from the database.

Now save the file, but do not close it. If you see errors in your source file, compare your code to the file contents in Code for PaymentFileMaintenance.egl after lesson 9.

Test the new code

You can now test the completed application.

  1. Click the Preview tab. The sample data that you entered earlier is displayed.
  2. Select the blank record at the bottom of the sample data. You created this record in a previous lesson. The Payment record grid shows blank fields, with the following exceptions:
    • A key number is displayed.
    • The Amount field shows a zero value.
    • The current date is used as a default because the value of the DATE variable is null.

    The new blank record is displayed

  3. Complete the record with data such as the following:
    • For Category, enter Automotive.
    • For Description, enter Gas.
    • For Amount, enter $80.00.
    • Leave the Fixed pmt check box clear.
    • Click the current date in the Due Date field and select a date from the displayed calendar.A pop-up calendar is displayed when you click in the date entry field.
    • For Payee, enter Corner Gas Station.
    • For Address 1, enter 101 Main Street
    • For Address 2, enter Miami, FL.
  4. Click Save. The new data is stored in the database and is displayed in the data grid.The first grid shows three records, and the layout shows the details of the third.

  5. Click Clear. The single-record layout is reset to initial values.

Lesson checkpoint

You learned how to complete the following tasks:

  • Assign a preset string array as the set of values that are provided by a Dojo combo box.
  • Use conversion functions if you need to relate a field of type INT to a Dojo combo box that contains strings.
  • Use the Form Manager isValid and commit functions.

In the next lesson, you install Apache Tomcat on your system so that you can run your application on a web server.

< Previous | Next >