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>.

−

<li>Make the function 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

+

Now complete the function that is invoked when the user clicks '''Save'''.

−

for(i INT from 1 to allPayments.getSize())

+

Find the function, which is named '''selectedPayment_form_Submit''' and

−

if(allPayments[i].paymentID == selectedPayment.paymentID)

+

modify as follows:

−

allPayments[i] = selectedPayment;

+

function selectedPayment_form_Submit(event Event in)

−

exit for;

+

+

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

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 106:

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 138:

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 169:

Line 143:

DATE variable is null.

DATE variable is null.

</ul>

</ul>

−

[[Image:EDT_Tutorial_edt_richui_sql11_blank_record.jpg|The new blank record is displayed]]

+

<br />[[Image:EDT_Tutorial_edt_richui_sql11_blank_record.jpg|The new blank record is displayed]]

<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.<br />[[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 '''Corner Gas Station'''.

−

<li>For '''Payee''', enter <kbd class="ph userinput">Corner Gas

+

<li>For '''Address 1''', enter '''101 Main Street'''

−

Station</kbd>.

+

<li>For '''Address 2''', enter '''Miami, FL'''.

−

<li>For '''Address 1''', enter <kbd class="ph userinput">101 Main

+

−

Street</kbd>

+

−

<li>For '''Address 2''', enter <kbd class="ph userinput">Miami,

+

−

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.<br />[[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>Click '''Clear'''. The

<li>Click '''Clear'''. The

single-record layout is reset to initial values.

single-record layout is reset to initial values.

Line 197:

Line 164:

== 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

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. Then 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:

Test the new code

Click the first line of sample data. The
single-record layout now displays the category name rather than an
integer.

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:

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:

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:

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

Commits the validated data to the selectedPayment record.
This "commit" is part of MVC processing and has nothing to do with
a database commit.

Updates the Dojo combo box in the single-record layout so that
the value of that field is again a string.

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.

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.