Jump to: navigation, search

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

(Add grid layout for a single row)
 
(14 intermediate revisions by 3 users not shown)
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]]
  
Line 6: Line 5:
 
|[[EDT:Tutorial: RUI With DataBase Lesson 3|< Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 5|Next >]]
 
|[[EDT:Tutorial: RUI With DataBase Lesson 3|< Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 5|Next >]]
 
|}
 
|}
= Lesson 4: Create the Rich UI handler =
+
= Lesson 4: Create the Rich UI handler =
  
Start to build the handler by using EGL wizards and then
+
Start to build the handler by using EGL wizards and then the Rich UI editor.  
the Rich UI editor.
+
  
You can add widgets to a web page by dragging content
+
You can add widgets to a web page by dragging content to the Design surface of the Rich UI editor. The drag-and-drop and subsequent interaction with the editor updates the source code for the Rich UI handler that you are developing.  
to the Design surface of the Rich UI editor. The drag-and-drop and
+
subsequent interaction with the editor updates the source code for
+
the Rich UI handler that you are developing.
+
  
Two sources of
+
Two sources of drag-and-drop content are available:  
drag-and-drop content are available:
+
  
<ul><li>A palette of widget types
+
*A palette of widget types  
<li>The EGL Data view, which provides data-type definitions such as
+
*The EGL Data view, which provides data-type definitions such as EGL Record types. You first drag content from this view and then choose from among the widget types that can display the type of data you selected.
EGL Record parts. You first drag content from this view and then choose
+
from among the widget types that can display the type of data you
+
selected.
+
</ul>
+
  
 +
<br>By default, the widget palette is at the right of the editor, and the Data view is at the lower left of the workbench.
  
By default, the widget palette is at the right of the
+
In this lesson, you create a Rich UI Handler and add a data grid to display all rows in the database. Later, you will add a grid layout to display the fields in a selected record.  
editor, and the Data view is at the lower left of the workbench.
+
  
In
+
== Create the initial layout ==
this lesson, you create a Rich UI Handler and add a data grid to display
+
all rows in the database. Later, you will add a grid layout to display
+
the fields in a selected record.
+
  
== Create the initial layout ==
+
To create the handler:
  
To create the handler:
+
#In the '''PaymentClient''' project, select the '''EGLSource''' folder and click '''New''' &gt; '''Handler'''.
 +
#In the New Rich UI Handler&nbsp;window, enter the following information:
 +
##In the '''EGL source file name''' field, enter the following name: PaymentFileMaintenance
 +
##In the '''Package''' field, enter the following name: handlers
 +
##Select the '''Rich UI Handler''' template
 +
##Click '''Finish'''.<br>[[Image:EDT Tutorial edt richui sql04 new handler.jpg|New EGL Handler]]
 +
The new Handler opens in Design view in the Rich UI editor. EGL creates the '''handlers''' package for you in the '''EGLSource''' folder.[[Image:EDT Tutorial edt richui sql07 initial rui editor.jpg|The Rich UI editor opens in Design view by default and shows a palette of widgets on the right.]]
  
<ol><li>In the '''PaymentClient''' project, select
+
EGL automatically created a grid layout as your initial UI. By default, this widget has four rows and three columns. Compare this layout with the sketch in lesson 1, which uses only four cells.
the '''EGLSource''' folder and click '''New''' &gt; '''Handler'''.  
+
<li>In the New Rich UI Handler part window,
+
enter the following information:
+
  
<ol><li>In the '''EGL source file name''' field,
+
#To reduce the size of the layout, click into it and go to the Properties view, which by default is one of several tabbed pages below the editor pane. On the General page, set the rows property to 2 and the columns property to 2, and then click the Design surface. [[Image:EDT Tutorial edt richui sql07 grid properties.jpg|The Rich UI editor opens in Design view by default and shows a palette of widgets on the right.]] A later step demonstrates a different way to change the number of rows and columns in a grid layout. The main layout of this Rich UI handler now has a first row, where the handler will display two sets of buttons, and a second row, where the handler will display the following content: &nbsp;on the left, a list of records, and on the right, a layout for displaying the details of one record.
enter the following name:  
+
  
PaymentFileMaintenance
+
== Create a data grid to hold a set of database rows  ==
  
<li>In the '''Package''' field, enter the
+
Create a data grid by dragging a record array variable onto the Rich UI editor.
following name:
+
  
handlers
+
To create the data grid:
  
<li>Select the '''Rich UI Handler''' template
+
#Create a record array variable.
<li>Click '''Finish'''.<br />[[Image:EDT_Tutorial_edt_richui_sql04_new_handler.jpg|New EGL Handler]]
+
##Click on '''Window &gt; Show View''' and select '''EGL &gt; EGL Data''' to bring up the EGL Data view. The EGL Data view, which is located by default in the lower left corner of the workbench, lists all of the primitive and record variables for the handler that is currently open in the editor. Right-click the empty space below the entry for the PaymentFileMaintenance file. Click '''New''' &gt; '''EGL Variable'''. [[Image:EDT Tutorial edt richui sql07 new var.jpg|The EGL Data view]]
 +
##In the New EGL Rich UI Data Fields wizard, request a new record variable based on the '''paymentRec''' record:
 +
##*Make sure '''Type Selection''' is set to '''Record'''.
 +
##*Select the '''paymentRec''' record. This record should be the only one in the list.
 +
##*In the '''Array Properties''' section, select the '''Array''' check box.&nbsp;
 +
##*For '''Enter the name of the field''', enter the following name: allPayments
 +
##*Click '''Finish'''.<br>[[Image:EDT Tutorial edt richui sql07 new var wiz.jpg|The New EGL Rich UI Data Fields wizard]]
  
</ol>
+
This process creates the following record declaration in the source code for the handler:  
The new Handler opens in Design view in the Rich UI editor.
+
EGL creates the '''handlers''' package for you in
+
the '''EGLSource''' folder.[[Image:EDT_Tutorial_edt_richui_sql07_initial_rui_editor.jpg|The Rich UI editor opens in Design view by default and shows a palette of widgets on the right.]]
+
  
EGL automatically created a grid
+
  allPayments paymentRec[];
layout as your initial UI. By default, this widget has four rows and
+
three columns. Compare this layout with the sketch in lesson 1, which
+
uses only four cells.
+
  
<li>To reduce the size of the layout, click into it and go
+
In the EGL Data view is now a record variable that you can drag the variable onto the editor.[[Image:EDT Tutorial edt richui sql07 data view.jpg|The EGL Data view shows the inputRec variable.]]  
to the Properties view, which by default is one of several tabbed
+
pages below the editor pane. On the General page, set the rows property
+
to 2 and the columns property to 2, and then click the Design surface. [[Image:EDT_Tutorial_edt_richui_sql07_grid_properties.jpg|The Rich UI editor opens in Design view by default and shows a palette of widgets on the right.]]
+
  
A later step demonstrates
+
#Drag the '''allPayments''' record variable from the EGL Data view to the lower left cell of the layout. [[Image:EDT Tutorial edt richui sql07 drag record.jpg|Dragging a record from the Data view to the layout widget.]]<br>EGL displays the Configure data widgets page of the Insert Data wizard. Use this page to configure the widgets that EGL creates. The widget types depend on the type of fields in the record array that you dragged onto the Design surface.
a different way to change the number of rows and columns in a grid
+
#Make the following changes in the Insert Data wizard:
layout.
+
##Under '''Create Widgets for''', leave the default value of '''Read-only data'''.
 +
##The check boxes under the '''allPayments''' variable indicate the fields that are to be used as columns in the display. Clear all the fields by clicking '''None'''.
 +
##Check the following fields:
 +
##*category
 +
##*description
 +
##*amount
 +
##Change the labels for those fields:
 +
##*Change '''category''' to '''Type'''.
 +
##*Change '''description''' to '''Description'''.
 +
##*Change '''amount''' to '''Amount due'''.
  
The main layout of this Rich UI handler
+
The wizard uses these labels as column headers for the grid.  
now has a first row, where the handler will display two sets of buttons,
+
and a second row, where the handler will display the following content:  on
+
the left, a list of records, and on the right, a layout for displaying
+
the details of one record.
+
</ol>
+
  
== Create a data grid to hold a set of database rows ==
+
##Clear '''Add support for formatting and validation'''. Here are the completed settings:[[Image:EDT Tutorial edt richui sql07 insert data.jpg|The completed Configure data widgets wizard]]
 +
##Click '''Finish'''. The empty grid is displayed:<br>[[Image:EDT Tutorial edt richui sql07 data grid.jpg|The empty grid has a header with three columns.]]
 +
#Click into the Properties view:
 +
##Ensure that the following title is displayed:&nbsp;'''DataGrid''' (allPayments_ui)'''. If not, click into the data grid, ensure''' that the title is displayed, and click back to the Properties view.
 +
##On the '''General''' page, change the '''selectionMode''' property to '''SINGLE'''. This property indicates that the user can select only one row of the grid at a time.
 +
##On the '''Layout''' page, change the '''verticalAlignment''' property to '''TOP'''.<br>[[Image:EDT Tutorial edt richui sql07 data grid prop.jpg|DataGrid Layout properties page]]<br>This property ensures that the allPayments_ui data grid will line up with the detail grid you will add later.
 +
#Click the '''Source''' tab at the bottom of the editor to see the code that you already created.
  
Create a data grid by dragging a record array variable onto
+
Take this opportunity to reduce the width of two columns in the data grid. Specifically, consider the DataGridColumn declarations for the '''category''' and '''amount''' columns and change the width property from the default 120 pixels to 90 pixels. Here is the data grid declaration after your change:<code></code>
the Rich UI editor.
+
  
To create the data grid:
+
    allPayments_ui DataGrid {
 +
    layoutData = new GridLayoutData
 +
        { row = 2, column = 1,
 +
            verticalAlignment = GridLayoutLib.VALIGN_TOP},
 +
            columns =[
 +
              new DataGridColumn{name = "category",
 +
                  displayName = "Type",
 +
                  width = 90},
 +
              new DataGridColumn{name = "description",
 +
                  displayName = "Description",
 +
                  width = 120},
 +
              new DataGridColumn{name = "amount",
 +
                  displayName = "Amount due",
 +
                  width = 90}
 +
            ],
 +
            data = allPayments as any[],
 +
            selectionMode = DataGridLib.SINGLE_SELECTION
 +
        };
  
<ol><li>Create a record array variable.
+
<br>  
  
<ol><li>Click on '''Window > Show View''' and select ''EGL > EGL Data''' to bring up the EGL Data view. The EGL Data view, which is located by default in the
+
Add prototype data in the '''start''' function, which is referenced in the '''onConstructionFunction''' property of the handler and which runs before the user first accesses the web page. Specifically, assign an array of records to the '''data''' property of the data grid:<code></code>
lower left corner of the workbench, lists all of the primitive and
+
record variables for the handler that is currently open in the editor.
+
Right-click the empty space below the entry for the PaymentFileMaintenance file.
+
Click '''New''' &gt; '''EGL Variable'''. [[Image:EDT_Tutorial_edt_richui_sql07_new_var.jpg|The EGL Data view]]
+
  
<li>In the New EGL Rich UI Data Fields wizard,
 
request a new record variable based on the <tt>paymentRec</tt> record:
 
 
<ul><li>Make sure '''Type Selection''' is set to '''Record'''.
 
<li>Select the <tt>paymentRec</tt> record. This record should
 
be the only one in the list.
 
<li>In the '''Array Properties''' section, select
 
the '''Array''' check box. Leave the '''Size''' field
 
blank.
 
<li>For '''Enter the name of the field''', enter
 
the following name:
 
 
allPayments
 
 
<li>Click '''Finish'''.<br />[[Image:EDT_Tutorial_edt_richui_sql07_new_var_wiz.jpg|The New EGL Rich UI Data Fields wizard]]
 
 
</ul>
 
 
</ol>
 
This process creates the following record
 
declaration in the source code for the handler:
 
 
allPayments paymentRec[];
 
 
In
 
the EGL Data view is now a record variable that you can drag the variable
 
onto the editor.[[Image:EDT_Tutorial_edt_richui_sql07_data_view.jpg|The EGL Data view shows the inputRec variable.]]
 
 
<li>Drag the '''allPayments''' record variable
 
from the EGL Data view to the lower left cell of the layout. [[Image:EDT_Tutorial_edt_richui_sql07_drag_record.jpg|Dragging a record from the Data view to the layout widget.]]
 
EGL displays the Configure data widgets page of the Insert
 
Data wizard. Use this page to configure the widgets that
 
EGL creates. The widget types depend on the type of fields in the
 
record array that you dragged onto the Design surface.
 
<li>Make the following changes in the Insert Data wizard:
 
 
<ol><li>Under '''Create Widgets for''', leave
 
the default value of '''Read-only data'''.
 
<li>The check boxes under the <tt>allPayments</tt> variable
 
indicate the fields that are to be used as columns in the display.
 
Clear all the fields by clicking '''None'''.
 
<li>Check the following fields:
 
 
<ul><li>category
 
<li>description
 
<li>amount
 
</ul>
 
 
<li>Change the labels for those fields:
 
 
<ul><li>Change '''category''' to <tt>Type</tt>.
 
<li>Change '''description''' to <tt>Description</tt>.
 
<li>Change '''amount''' to <tt>Amount due</tt>.
 
</ul>
 
The wizard uses these labels as column headers for the grid.
 
<li>Clear '''Add support for formatting and validation'''.  Here are the completed settings:[[Image:EDT_Tutorial_edt_richui_sql07_insert_data.jpg|The completed Configure data widgets wizard]]
 
 
<li>Click '''Finish'''. The empty grid
 
is displayed:<br />[[Image:EDT_Tutorial_edt_richui_sql07_data_grid.jpg|The empty grid has a header with three columns.]]
 
 
</ol>
 
 
<li>Click into the Properties view:
 
 
<ol><li>Ensure that the following title is displayed: '''DataGrid
 
(allPayments_ui)'''. If not, click into the data grid, ensure
 
that the title is displayed, and click back to the Properties view.
 
<li>On the '''General''' page, change the '''selectionMode''' property
 
to '''SINGLE'''. This property indicates that the
 
user can select only one row of the grid at a time.
 
<li>On the '''Layout''' page, change the '''verticalAlignment''' property
 
to '''TOP'''.<br />[[Image:EDT_Tutorial_edt_richui_sql07_data_grid_prop.jpg|DataGrid Layout properties page]]<br />
 
This property ensures that the allPayments_ui
 
data grid will line up with the detail grid you will add later.
 
</ol>
 
 
<li>Click the '''Source''' tab at the bottom
 
of the editor to see the code that you already created.
 
</ol>
 
 
Take this
 
opportunity to reduce the width of two columns in the data grid. Specifically,
 
consider the DataGridColumn declarations for the <tt>category</tt> and <tt>amount</tt> columns
 
and change the width property from the default 120 pixels to 90 pixels.  Here is the data grid declaration after your change:<code>
 
    allPayments_ui DataGrid {
 
      layoutData = new GridLayoutData
 
          { row = 2, column = 1
 
              verticalAlignment = GridLayoutLib.VALIGN_TOP},
 
              columns =[
 
                new DataGridColumn{name = "category",
 
                    displayName = "Type",
 
                    width = 90},
 
                new DataGridColumn{name = "description",
 
                    displayName = "Description",
 
                    width = 120},
 
                new DataGridColumn{name = "amount",
 
                    displayName = "Amount due",
 
                    width = 90}
 
              ],
 
              data = allPayments as any[],
 
              selectionMode = DataGridLib.SINGLE_SELECTION
 
          };
 
</code>
 
 
Add prototype data in the <tt>start</tt> function,
 
which is referenced in the '''onConstructionFunction''' property
 
of the handler and which runs before the user first accesses the web
 
page. Specifically, assign an array of records to the '''data''' property
 
of the data grid:<code>
 
 
   function start()
 
   function start()
      allPayments_ui.data =  
+
    allPayments_ui.data =  
        [
+
      [
            new paymentRec{category = 1, description = "test01", amount = 100.00},
+
          new paymentRec{category = 1, description = "test01", amount = 100.00},
            new paymentRec{category = 2, description = "test02", amount = 200.00},
+
          new paymentRec{category = 2, description = "test02", amount = 200.00},
            new paymentRec{category = 3, description = "test03", amount = 300.00}
+
          new paymentRec{category = 3, description = "test03", amount = 300.00}
        ];
+
      ];
  end
+
end
</code>
+
  
Now to preview the file,
+
<br>
  
<ol>
+
Now to preview the file,  
<li>To format the file, click Ctrl-Shift-F.
+
<li>Click the Preview tab.<br />[[Image:EDT_Tutorial_edt_richui_sql04_prototype.jpg|Web page with prototype data]]
+
  
<li>Save the file.
+
#To format the file, click Ctrl-Shift-F.  
</ol>
+
#Click the Preview tab.<br>[[Image:EDT Tutorial edt richui sql04 prototype.jpg|Web page with prototype data]]
 +
#Save the file.
  
== Add the first set of buttons ==
+
== Add the first set of buttons ==
  
To create the '''Add''', '''Delete''',
+
To create the '''Add''', '''Delete''', and '''Sample''' buttons on the Design surface:  
and '''Sample''' buttons on the Design surface:
+
  
<ol><li>Click the Design tab.
+
#Click the Design tab.  
<li>In the Palette view, go to the Layout drawer and find the
+
#In the Palette view, go to the Layout drawer and find the GridLayout widget type. Drag a new grid layout to the upper left corner of the main layout. Assign the following name to the new widget: buttonLayout [[Image:EDT Tutorial edt richui sql08 new grid.jpg|The new grid layout within the handler]]
GridLayout widget type. Drag a new grid layout to the upper left corner
+
#Click into the new layout, right click a cell, and notice that you can insert or delete content from the menu.
of the main layout. Assign the following name to the new widget:  
+
#Click '''Delete''' &gt; '''Row'''.
 +
#Click again into the new layout, right click a cell, and click '''Delete''' &gt; '''Row'''. A single row remains, with three columns.
 +
#Create the '''Add''' button:
 +
##In the Palette view, go to the Display and Input drawer and then to '''Button (Dojo)'''. Drag a Dojo Button widget to the leftmost cell of '''buttonLayout'''. [[Image:EDT Tutorial edt richui sql08 drag button.jpg|Dragging a button onto the new GridLayout widget]]
 +
##Assign the following name to the button: addButton
 +
##Go to the Properties view:
 +
##*On the '''General''' page, change the '''text''' property to '''Add'''.
 +
##*On the '''Events''' page, select the row for the '''onClick''' event. A plus sign (+) is displayed at the far right of the line. Click the plus sign and specify the following name for a function that will be invoked when the user clicks the '''Add''' button: addRow
 +
The Source view opens to display the '''addRow''' function. Rather than complete the function now, finish laying out this section of the web page. Click the Design tab to return to the Design surface.
  
buttonLayout
+
#Create the '''Delete''' button:
[[Image:EDT_Tutorial_edt_richui_sql08_new_grid.jpg|The new grid layout within the handler]]
+
##In the Palette view, go to the Display and Input drawer and then to '''Button (Dojo)'''. Drag a Dojo Button widget to the middle cell of '''buttonLayout'''.
 +
##Assign the following name to the button: deleteButton
 +
##Go the Properties view for the button:
 +
##*On the '''General''' page, change the '''text''' property to '''Delete'''.
 +
##*On the '''Events''' page, assign the following function name to the '''onClick''' event: deleteRow
 +
##When the '''deleteRow''' function is displayed, click the Design tab.
 +
#Using the same process as in previous steps, create a Dojo button in the rightmost cell of '''buttonLayout'''. Name the button '''sampleButton''', change the '''text''' property to '''Sample''', and use the following name for the '''onClick''' function: '''sampleData'''. The '''sampleData''' function is displayed.
 +
#Inspect the source code, noting the code that was provided for each of the buttons.
 +
#Click the Preview tab. [[Image:EDT Tutorial edt richui sql04 prototype and buttons.jpg|Web page with buttons and prototype data]]  
 +
#Save the file.
  
<li>Click into the new layout, right click a cell, and notice
+
== Add a variable to handle a single row ==
that you can insert or delete content from the menu.
+
<li>Click '''Delete''' &gt; '''Row'''.
+
<li>Click again into the new layout, right click a cell, and
+
click '''Delete''' &gt; '''Row'''.  A single row remains, with three columns.
+
<li>Create the '''Add''' button:
+
  
<ol><li>In the Palette view, go to the Display and Input drawer
+
You previously created an array to hold the database rows. You now declare a variable for a single row and then drag that variable onto the Design surface to create a layout for displaying the row.  
and then to '''Button (Dojo)'''. Drag a Dojo Button
+
widget to the leftmost cell of <tt>buttonLayout</tt>. [[Image:EDT_Tutorial_edt_richui_sql08_drag_button.jpg|Dragging a button onto the new GridLayout widget]]
+
  
<li>Assign the following name to the button:  
+
To create the variable:  
  
addButton
+
*Click the Design tab to display the Design surface.  
 
+
*Right-click the background of the EGL Data view, which is likely to be at the bottom left of the workbench. Click '''New''' &gt; '''Variable'''.  
<li>Go to the Properties view:
+
*In the Create a new EGL Data Variable wizard, request a new record variable based on the paymentRec record:  
 
+
*#Make sure that '''Type Selection''' is set to '''Record'''.  
<ul><li>On the '''General''' page, change the '''text''' property
+
*#Select the '''paymentRec''' record.  
to <tt>Add</tt>.
+
*#In the '''Array Properties''' section, make sure that the '''Array''' check box is cleared.  
<li>On the '''Events''' page, select the row for
+
*#For '''Enter the name of the field''', enter the following name: selectedPayment [[Image:EDT Tutorial edt richui sql08 new variable.jpg|The new variable wizard]]  
the '''onClick''' event. A plus sign (+) is displayed
+
*#Click '''Finish'''.
at the far right of the line. Click the plus sign and specify the
+
As noted in the Preview section of the page shown, the following record declaration is created in the source code for the handler:  
following name for a function that will be invoked when the user clicks
+
the '''Add''' button:
+
 
+
addRow
+
 
+
</ul>
+
 
+
</ol>
+
The Source view opens to display the <tt>addRow</tt> function.
+
Rather than complete the function now, finish laying out this section
+
of the web page. Click the Design tab to return to the Design surface.
+
<li>Create the '''Delete''' button:
+
 
+
<ol><li>In the Palette view, go to the Display and Input drawer
+
and then to '''Button (Dojo)'''. Drag a Dojo Button
+
widget to the middle cell of <tt>buttonLayout</tt>.
+
<li>Assign the following name to the button:
+
 
+
deleteButton
+
 
+
<li>Go the Properties view for the button:
+
 
+
<ul><li>On the '''General''' page, change the '''text''' property
+
to <tt>Delete</tt>.
+
<li>On the '''Events''' page, assign the following
+
function name to the '''onClick''' event:
+
 
+
deleteRow
+
 
+
</ul>
+
 
+
<li>When the <tt>deleteRow</tt> function is displayed,
+
click the Design tab.
+
</ol>
+
 
+
<li>Using the same process as in previous steps, create a Dojo
+
button in the rightmost cell of <tt>buttonLayout</tt>. Name
+
the button <tt>sampleButton</tt>, change the '''text''' property
+
to <tt>Sample</tt>, and use the following name for the '''onClick''' function: <tt>sampleData</tt>. The <tt>sampleData</tt> function is displayed.
+
<li>Inspect the source code, noting the code that was provided
+
for each of the buttons.
+
<li>Click the Preview tab. [[Image:EDT_Tutorial_edt_richui_sql04_prototype_and_buttons.jpg|Web page with buttons and prototype data]]
+
 
+
<li>Save the file.
+
</ol>
+
 
+
== Add a variable and layout to handle a single row ==
+
 
+
You previously created an array to hold the database rows.
+
You now declare a variable for a single row and then drag that variable
+
onto the Design surface to create a layout for displaying the row.
+
 
+
To create the variable:
+
 
+
<ol><li>Click the Design tab to display the Design surface.
+
<li>Right-click the background of the EGL Data view, which
+
is likely to be at the bottom left of the workbench. Click '''New''' &gt; '''Variable'''.
+
<li>In the Create a new EGL Data Variable wizard,
+
request a new record variable based on the paymentRec record:
+
 
+
<ol><li>Make sure that '''Type Selection''' is
+
set to '''Record'''.
+
<li>Select the <tt>paymentRec</tt> record.
+
<li>In the '''Array Properties''' section,
+
make sure that the '''Array''' check box is cleared.
+
<li>For '''Enter the name of the field''',
+
enter the following name:  
+
 
+
selectedPayment
+
[[Image:EDT_Tutorial_edt_richui_sql08_new_variable.jpg|The new variable wizard]]
+
 
+
<li>Click '''Finish'''.
+
</ol>
+
As noted in the Preview section of the page shown, the
+
following record declaration is created in the source code for the
+
handler:
+
 
+
selectedPayment paymentRec;
+
 
+
</ol>
+
  
 +
  selectedPayment paymentRec;
 +
== Add grid layout for a single row  ==
 
To create the grid layout:
 
To create the grid layout:
 +
*In the Palette view, go to the Layout drawer and find the TitlePane (Dojo) widget type. Drag a new title pane to the lower right cell of the main grid layout, next to the cell that holds the '''allPayments_ui''' grid. [[Image:EDT Tutorial edt richui sql09 drag title pane.jpg|The TitlePane widget drops in the last cell.]]
 +
*Assign the following name to the title pane: editPane Click '''OK'''.
 +
*Make the following changes to the properties for the '''editPane''' widget:
 +
*#On the '''General''' page, change the '''title''' property to '''Payment record'''
 +
*#On the '''Position''' page, change the '''width''' property to '''350'''. This value leaves room for error messages.
 +
*#On the '''Layout''' page, change the '''verticalAlignment''' property to '''TOP'''.
 +
The web page should now look like the following image:[[Image:EDT Tutorial edt richui sql09 title pane.jpg|The web page with the payment record pane]]
 +
*Save the file.
 +
*From the EGL Data view, drag the '''selectedPayment''' variable to the bracketed area inside the bracketed area in the payment record pane. [[Image:EDT Tutorial edt richui sql09 drag record.jpg|The bracketed area inside the pane.]]<br />The Configure data widgets wizard is displayed.<br /><br />
 +
:'''Note:''' If you cannot drop the record into the pane, select the '''source''' view of the Visual Editor.  Change the '''children''' attribute of '''editPane''' from:
 +
  children = [ new Div { } ]
 +
:to:
 +
  children = [ new Div {innerHTML = " "} ]
 +
:Then switch back to the '''design''' view and you should see that the bracketed area is displayed.  You should now be able to drop the record variable into the bracketed area and continue with the next step.
 +
*Make the following changes:
 +
*#Under '''Create Widgets for''', select '''Editable''' data'''.'''
 +
*#Make sure that the Widget Type for the selectedPayment record is GridLayout.
 +
*#Change the '''Label''' fields as shown in the following table. These labels are used to identify the fields in the display:
 +
:{| class="table" border="1" rules="all" cellspacing="0" summary="" cellpadding="4" frame="border"
 +
|+ Table 1. Revised names for selectedPayment fields
 +
|- class="row" valign="bottom"
 +
! id="d5443e862" class="entry" valign="bottom" width="45.83%" | Default name
 +
! id="d5443e864" class="entry" valign="bottom" width="54.16%" | Revised name
 +
|- class="row"
 +
| class="entry" valign="top" width="45.83%" headers="d5443e862" | paymentID
 +
| class="entry" valign="top" width="54.16%" headers="d5443e864" | Key:
 +
|- class="row"
 +
| class="entry" valign="top" width="45.83%" headers="d5443e862" | category
 +
| class="entry" valign="top" width="54.16%" headers="d5443e864" | Category:
 +
|- class="row"
 +
| class="entry" valign="top" width="45.83%" headers="d5443e862" | description
 +
| class="entry" valign="top" width="54.16%" headers="d5443e864" | Description:
 +
|- class="row"
 +
| class="entry" valign="top" width="45.83%" headers="d5443e862" | amount
 +
| class="entry" valign="top" width="54.16%" headers="d5443e864" | Amount:
 +
|- class="row"
 +
| class="entry" valign="top" width="45.83%" headers="d5443e862" | fixedPayment
 +
| class="entry" valign="top" width="54.16%" headers="d5443e864" | Fixed pmt:
 +
|- class="row"
 +
| class="entry" valign="top" width="45.83%" headers="d5443e862" | dueDate
 +
| class="entry" valign="top" width="54.16%" headers="d5443e864" | Due date:
 +
|- class="row"
 +
| class="entry" valign="top" width="45.83%" headers="d5443e862" | payeeName
 +
| class="entry" valign="top" width="54.16%" headers="d5443e864" | Payee:
 +
|- class="row"
 +
| class="entry" valign="top" width="45.83%" headers="d5443e862" | payeeAddress1
 +
| class="entry" valign="top" width="54.16%" headers="d5443e864" | Address 1:
 +
|- class="row"
 +
| class="entry" valign="top" width="45.83%" headers="d5443e862" | payeeAddress2
 +
| class="entry" valign="top" width="54.16%" headers="d5443e864" | Address 2:
 +
|}
  
<ol><li>In the Palette view, go to the Layout drawer and find the
+
:You must specify colons explicitly, as they are not added automatically to labels.
TitlePane (Dojo) widget type. Drag a new title pane to the lower right
+
cell of the main grid layout, next to the cell that holds the <tt>allPayments_ui</tt> grid. [[Image:EDT_Tutorial_edt_richui_sql09_drag_title_pane.jpg|The TitlePane widget drops in the last cell.]]
+
  
<li>Assign the following name to the title pane:  
+
*#For the '''category''' field, in the Widget Type column, click '''DojoTextField'''. A down arrow is displayed. Click the arrow, and then click '''DojoComboBox'''.
 +
*#For the '''amount''' field, in the Widget Type column, click '''DojoTextField'''. A down arrow is displayed. Click the arrow, and then click '''DojoCurrencyTextBox'''. This widget provides some basic formatting for currency.
 +
*#Ensure that '''Add support for formatting and''' validation'''is checked. The selection creates''' a Form Manager, which uses the EGL Rich UI Model-View-Controller (MVC) framework to manage Rich UI validation and formatting. Here are the settings: [[Image:EDT Tutorial edt richui sql09 config data widgets.jpg|The Configure data widgets wizard with the correct values.]]
 +
*#Click '''Finish'''.
 +
The new grid layout contains a form.<br>[[Image:EDT Tutorial edt richui sql09 new selected payment ui.jpg|The new selectedPayment grid has a row for each field in the record.]]
  
editPane
+
'''Note:''' You might need to click the Refresh button in the upper right corner of the Rich UI editor to see this change:<br>[[Image:EDT Tutorial edt richui sql09 refresh button.jpg|The refresh button shows two yellow arrows.]]
Click '''OK'''.
+
<li>Make the following changes to the properties for the <tt>editPane</tt> widget:  
+
  
<ul><li>On the '''General''' page, change the '''title''' property
+
*Make the Key field read-only:
to <tt>Payment record</tt>
+
*#Repeatedly click the Dojo text field next to the Key label until only that field is surrounded by a dotted line.<br>[[Image:EDT Tutorial edt richui sql09 key selected.jpg|The Category field is highlighted.]]
<li>On the '''Position''' page, change the '''width''' property
+
*#In the Properties view, '''General''' page, select the '''readOnly''' check box. [[Image:EDT Tutorial edt richui sql09 read only.jpg|The readOnly check box]]
to <tt>350</tt>. This value leaves room for error messages.
+
*For a more uniform appearance if the amount's field type is money(16,4) instead of decimal(10,2), do as follows:
<li>On the '''Layout''' page, change the '''verticalAlignment''' property
+
*#Click the DojoCurrencyTextBox widget for '''Amount''' until only that widget is surrounded by a dotted line.  
to <tt>TOP</tt>.
+
*#On the '''Position''' page of the Properties view, set the '''width''' property to '''166'''.
</ul>
+
The web page should now look like the following image:[[Image:EDT_Tutorial_edt_richui_sql09_title_pane.jpg|The web page with the payment record pane]]
+
  
<li>Save the file.
+
== Add the second set of buttons ==
<li>From the EGL Data view, drag the <tt>selectedPayment</tt> variable
+
to the bracketed area inside the payment record pane. [[Image:EDT_Tutorial_edt_richui_sql09_drag_record.jpg|The bracketed area inside the pane.]]
+
  The Configure
+
data widgets wizard is displayed.
+
<li>Make the following changes:
+
  
<ol><li>Under '''Create Widgets for''', select '''Editable
+
To add the '''Clear''' and '''Save''' buttons:  
data'''.
+
<li>Make sure that the Widget Type for the selectedPayment
+
record is GridLayout.
+
<li>Change the '''Label''' fields as shown
+
in the following table. These labels are used to identify the fields
+
in the display: <table cellpadding="4" cellspacing="0" summary="" class="table" rules="all" frame="border" border="1"><caption>Table 1. Revised names for selectedPayment
+
fields</caption><tr class="row" valign="bottom"><th class="entry" valign="bottom" width="45.83333333333333%" id="d5443e862">Default name</th>
+
<th class="entry" valign="bottom" width="54.166666666666664%" id="d5443e864">Revised name</th>
+
</tr>
+
<tr class="row"><td class="entry" valign="top" width="45.83333333333333%" headers="d5443e862 ">paymentID</td>
+
<td class="entry" valign="top" width="54.166666666666664%" headers="d5443e864 ">Key:</td>
+
</tr>
+
<tr class="row"><td class="entry" valign="top" width="45.83333333333333%" headers="d5443e862 ">category</td>
+
<td class="entry" valign="top" width="54.166666666666664%" headers="d5443e864 ">Category:</td>
+
</tr>
+
<tr class="row"><td class="entry" valign="top" width="45.83333333333333%" headers="d5443e862 ">description</td>
+
<td class="entry" valign="top" width="54.166666666666664%" headers="d5443e864 ">Description:</td>
+
</tr>
+
<tr class="row"><td class="entry" valign="top" width="45.83333333333333%" headers="d5443e862 ">amount</td>
+
<td class="entry" valign="top" width="54.166666666666664%" headers="d5443e864 ">Amount:</td>
+
</tr>
+
<tr class="row"><td class="entry" valign="top" width="45.83333333333333%" headers="d5443e862 ">fixedPayment</td>
+
<td class="entry" valign="top" width="54.166666666666664%" headers="d5443e864 ">Fixed pmt:</td>
+
</tr>
+
<tr class="row"><td class="entry" valign="top" width="45.83333333333333%" headers="d5443e862 ">dueDate</td>
+
<td class="entry" valign="top" width="54.166666666666664%" headers="d5443e864 ">Due date:</td>
+
</tr>
+
<tr class="row"><td class="entry" valign="top" width="45.83333333333333%" headers="d5443e862 ">payeeName</td>
+
<td class="entry" valign="top" width="54.166666666666664%" headers="d5443e864 ">Payee:</td>
+
</tr>
+
<tr class="row"><td class="entry" valign="top" width="45.83333333333333%" headers="d5443e862 ">payeeAddress1</td>
+
<td class="entry" valign="top" width="54.166666666666664%" headers="d5443e864 ">Address 1:</td>
+
</tr>
+
<tr class="row"><td class="entry" valign="top" width="45.83333333333333%" headers="d5443e862 ">payeeAddress2</td>
+
<td class="entry" valign="top" width="54.166666666666664%" headers="d5443e864 ">Address 2:</td>
+
</tr>
+
</table>
+
  
You must specify colons explicitly, as they are not added
+
#In the Palette view, go to the Layout drawer and find the GridLayout widget type. Drag a new grid layout to the upper right corner of the main layout and assign the following name: detailButtonLayout [[Image:EDT Tutorial edt richui sql11 drag button layout.jpg|Dragging a grid layout to the top-right corner of the web page]]
automatically to labels.
+
#With the new layout selected, update the number of rows and columns in whichever way you prefer: in the Properties view, or by deleting the rows and columns, or by changing the source code. In any case, ensure that the layout has 1 row and 2 columns.
<li>For the <tt>category</tt> field, in the Widget
+
#At the Design surface, create the '''Clear''' button:
Type column, click '''DojoTextField'''. A down arrow
+
##In the Palette view, go to the Display and Input drawer and then to '''Button (Dojo)'''. Drag a Dojo button to the first cell of the new layout.  
is displayed. Click the arrow, and then click '''DojoComboBox'''.
+
##Using the same process as was used earlier, name the button '''clearButton''', change the '''text''' property to '''Clear''', and use the following name for the '''onClick''' function: '''clearAllFields'''. The '''clearAllFields''' function is displayed.
<li>For the <tt>amount</tt> field, in the Widget
+
#Create the '''Save''' button:
Type column, click '''DojoTextField'''. A down arrow
+
##Click the Design tab.
is displayed. Click the arrow, and then click '''DojoCurrencyTextBox'''. This widget provides some basic formatting for currency.
+
##In the Palette view, go to the Display and Input drawer and then to '''Button (Dojo)'''. Drag a Dojo button to the second cell of the new layout.  
<li>Ensure that '''Add support for formatting and
+
##Name the button '''saveButton''' and change the '''text''' property to '''Save'''.
validation''' is checked. The selection creates
+
##On the '''Events''' page, select the '''onClick''' event and click the down arrow in the ''second'' column to display the available function names. Click '''selectedPayment_form_Submit''', which is a function that EGL created automatically when you dragged the '''selectedPayment''' record variable onto the user interface.  
a Form Manager, which uses the EGL Rich UI Model-View-Controller (MVC)
+
##Click the Preview tab.<br>[[Image:EDT Tutorial edt richui sql04 prototype and all.jpg|Web page with five buttons, prototype data, and a form]]
framework to manage Rich UI validation and formatting.
+
##Save the file, which should match the finished code in [[EDT:Tutorial: RUI With DataBase Lesson 4 Code|Code for PaymentFileMaintenance.egl after lesson 4]]
  
Here are
+
'''Related reference '''<br>
the settings:
+
[[Image:EDT_Tutorial_edt_richui_sql09_config_data_widgets.jpg|The Configure data widgets wizard with the correct values.]]
+
  
<li>Click '''Finish'''.
+
*Help topic: Overview of EGL Rich UI<br>
</ol>
+
*Help topic: Rich UI DataGrid and DataGridTooltip<br>
The new grid layout contains a form.<br />[[Image:EDT_Tutorial_edt_richui_sql09_new_selected_payment_ui.jpg|The new selectedPayment grid has a row for each field in the record.]]
+
*Help topic: Rich UI GridLayout<br>
 +
*Help topic: Rich UI validation and formatting<br>
 +
*Help topic: Form processing with Rich UI<br>
  
'''Note:''' You
+
== Lesson checkpoint  ==
might need to click the Refresh button in the upper right corner of
+
the Rich UI editor to see this change:<br />[[Image:EDT_Tutorial_edt_richui_sql09_refresh_button.jpg|The refresh button shows two yellow arrows.]]
+
  
<li>Make the Key field read-only:
+
In this lesson, you completed the following tasks:  
  
<ol><li>Repeatedly click the Dojo text field next to the Key
+
*Created a Rich UI handler.
label until only that field is surrounded by a dotted line.<br />[[Image:EDT_Tutorial_edt_richui_sql09_key_selected.jpg|The Category field is highlighted.]]
+
*Created variables in the EGL Data view.
 +
*Created a data grid by dragging a record array variable onto the editor.
 +
*Adjusted widgets in the Properties view and by using a menu.  
 +
*Worked in all three tabs of the Rich UI editor, updating the source and previewing the web page.
  
<li>In the Properties view, '''General''' page,
+
In the next lesson, you create the service that will access the database.  
select the '''readOnly''' check box. [[Image:EDT_Tutorial_edt_richui_sql09_read_only.jpg|The readOnly check box]]
+
  
</ol>
+
{| style="float: right" class="FCK__ShowTableBorders"
 
+
|-
<li>For a more uniform appearance, do as follows:
+
| [[EDT:Tutorial: RUI With DataBase Lesson 3|&lt; Previous]] &#124; [[EDT:Tutorial: RUI With DataBase Lesson 5|Next &gt;]]
 
+
<ol><li>Click the DojoCurrencyTextBox widget for '''Amount''' until
+
only that widget is surrounded by a dotted line.
+
<li>On the '''Position''' page of the Properties
+
view, set the '''width''' property to <tt>166</tt>.
+
</ol>
+
 
+
</ol>
+
 
+
== Add the second set of buttons ==
+
 
+
 
+
 
+
To add the '''Clear''' and '''Save''' buttons:
+
 
+
<ol><li>In the Palette view, go to the Layout drawer and find the
+
GridLayout widget type. Drag a new grid layout to the upper right
+
corner of the main layout and assign the following name:
+
 
+
detailButtonLayout
+
[[Image:EDT_Tutorial_edt_richui_sql11_drag_button_layout.jpg|Dragging a grid layout to the top-right corner of the web page]]
+
 
+
<li>With the new layout selected, update the number of rows
+
and columns in whichever way you prefer: in the Properties view, or
+
by deleting the rows and columns, or by changing the source code.
+
In any case, ensure that the layout has 1 row and 2 columns.
+
<li>At the Design surface, create the '''Clear''' button:
+
 
+
<ol><li>In the Palette view, go to the Display and Input drawer
+
and then to '''Button (Dojo)'''. Drag a Dojo button
+
to the first cell of the new layout.
+
<li>Using the same process as was used earlier, name the
+
button <tt>clearButton</tt>, change the '''text''' property
+
to <tt>Clear</tt>, and use the following name for the '''onClick''' function: <tt>clearAllFields</tt>.  The <tt>clearAllFields</tt> function is displayed.
+
</ol>
+
 
+
<li>Create the '''Save''' button:
+
 
+
<ol><li>Click the Design tab.
+
<li>In the Palette view, go to the Display and Input drawer
+
and then to '''Button (Dojo)'''. Drag a Dojo button
+
to the second cell of the new layout.
+
<li>Name the button <tt>saveButton</tt> and change
+
the '''text''' property to <tt>Save</tt>.
+
<li>On the '''Events''' page, select the '''onClick''' event
+
and click the down arrow in the <em class="ph i">second</em> column to display the
+
available function names. Click '''selectedPayment_form_Submit''',
+
which is a function that EGL created automatically when you dragged
+
the <tt>selectedPayment</tt> record variable onto the user
+
interface.
+
<li>Click the Preview tab.<br /> [[Image:EDT_Tutorial_edt_richui_sql04_prototype_and_all.jpg|Web page with five buttons, prototype data, and a form]]
+
 
+
<li>Save the file, which should match the finished code
+
in [finished_code/egl_richui_sql_code04.html Code for PaymentFileMaintenance.egl after lesson 4].
+
</ol>
+
 
+
</ol>
+
 
+
''' Related reference '''<br>
+
 
+
[../../com.ibm.egl.pg.doc/topics/pegl_richui_overview.html Overview of EGL Rich UI]
+
[../../com.ibm.egl.lr.doc/topics/regl_ui_richui_datagrid.html Rich UI DataGrid and DataGridTooltip]
+
[../../com.ibm.egl.lr.doc/topics/regl_ui_richui_gridlayout.html Rich UI GridLayout]
+
[../../com.ibm.egl.lr.doc/topics/regl_ui_richui_validation.html Rich UI validation and formatting]
+
[../../com.ibm.egl.lr.doc/topics/regl_ui_richui_forms.html Form processing with Rich UI]
+
 
+
== Lesson checkpoint ==
+
 
+
In this lesson, you completed the following tasks:
+
 
+
<ul><li>Created a Rich UI handler.
+
<li>Created variables in the EGL Data view.
+
<li>Created a data grid by dragging a record array variable onto the
+
editor.
+
<li>Adjusted widgets in the Properties view and by using a menu.
+
<li>Worked in all three tabs of the Rich UI editor, updating the source
+
and previewing the web page.
+
</ul>
+
 
+
In the next lesson, you create the service that will access
+
the database.
+
 
+
 
+
 
+
{| style="float: right"
+
|[[EDT:Tutorial: RUI With DataBase Lesson 3|&lt; Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 5|Next >]]
+
 
|}
 
|}
 
  
 
[[Category:EDT]]
 
[[Category:EDT]]

Latest revision as of 03:02, 12 March 2012

Access a database with EGL Rich UI


< Previous | Next >

Lesson 4: Create the Rich UI handler

Start to build the handler by using EGL wizards and then the Rich UI editor.

You can add widgets to a web page by dragging content to the Design surface of the Rich UI editor. The drag-and-drop and subsequent interaction with the editor updates the source code for the Rich UI handler that you are developing.

Two sources of drag-and-drop content are available:

  • A palette of widget types
  • The EGL Data view, which provides data-type definitions such as EGL Record types. You first drag content from this view and then choose from among the widget types that can display the type of data you selected.


By default, the widget palette is at the right of the editor, and the Data view is at the lower left of the workbench.

In this lesson, you create a Rich UI Handler and add a data grid to display all rows in the database. Later, you will add a grid layout to display the fields in a selected record.

Create the initial layout

To create the handler:

  1. In the PaymentClient project, select the EGLSource folder and click New > Handler.
  2. In the New Rich UI Handler window, enter the following information:
    1. In the EGL source file name field, enter the following name: PaymentFileMaintenance
    2. In the Package field, enter the following name: handlers
    3. Select the Rich UI Handler template
    4. Click Finish.
      New EGL Handler

The new Handler opens in Design view in the Rich UI editor. EGL creates the handlers package for you in the EGLSource folder.The Rich UI editor opens in Design view by default and shows a palette of widgets on the right.

EGL automatically created a grid layout as your initial UI. By default, this widget has four rows and three columns. Compare this layout with the sketch in lesson 1, which uses only four cells.

  1. To reduce the size of the layout, click into it and go to the Properties view, which by default is one of several tabbed pages below the editor pane. On the General page, set the rows property to 2 and the columns property to 2, and then click the Design surface. The Rich UI editor opens in Design view by default and shows a palette of widgets on the right. A later step demonstrates a different way to change the number of rows and columns in a grid layout. The main layout of this Rich UI handler now has a first row, where the handler will display two sets of buttons, and a second row, where the handler will display the following content:  on the left, a list of records, and on the right, a layout for displaying the details of one record.

Create a data grid to hold a set of database rows

Create a data grid by dragging a record array variable onto the Rich UI editor.

To create the data grid:

  1. Create a record array variable.
    1. Click on Window > Show View and select EGL > EGL Data to bring up the EGL Data view. The EGL Data view, which is located by default in the lower left corner of the workbench, lists all of the primitive and record variables for the handler that is currently open in the editor. Right-click the empty space below the entry for the PaymentFileMaintenance file. Click New > EGL Variable. The EGL Data view
    2. In the New EGL Rich UI Data Fields wizard, request a new record variable based on the paymentRec record:
      • Make sure Type Selection is set to Record.
      • Select the paymentRec record. This record should be the only one in the list.
      • In the Array Properties section, select the Array check box. 
      • For Enter the name of the field, enter the following name: allPayments
      • Click Finish.
        The New EGL Rich UI Data Fields wizard

This process creates the following record declaration in the source code for the handler:

  allPayments paymentRec[]; 

In the EGL Data view is now a record variable that you can drag the variable onto the editor.The EGL Data view shows the inputRec variable.

  1. Drag the allPayments record variable from the EGL Data view to the lower left cell of the layout. Dragging a record from the Data view to the layout widget.
    EGL displays the Configure data widgets page of the Insert Data wizard. Use this page to configure the widgets that EGL creates. The widget types depend on the type of fields in the record array that you dragged onto the Design surface.
  2. Make the following changes in the Insert Data wizard:
    1. Under Create Widgets for, leave the default value of Read-only data.
    2. The check boxes under the allPayments variable indicate the fields that are to be used as columns in the display. Clear all the fields by clicking None.
    3. Check the following fields:
      • category
      • description
      • amount
    4. Change the labels for those fields:
      • Change category to Type.
      • Change description to Description.
      • Change amount to Amount due.

The wizard uses these labels as column headers for the grid.

    1. Clear Add support for formatting and validation. Here are the completed settings:The completed Configure data widgets wizard
    2. Click Finish. The empty grid is displayed:
      The empty grid has a header with three columns.
  1. Click into the Properties view:
    1. Ensure that the following title is displayed: DataGrid (allPayments_ui). If not, click into the data grid, ensure that the title is displayed, and click back to the Properties view.
    2. On the General page, change the selectionMode property to SINGLE. This property indicates that the user can select only one row of the grid at a time.
    3. On the Layout page, change the verticalAlignment property to TOP.
      DataGrid Layout properties page
      This property ensures that the allPayments_ui data grid will line up with the detail grid you will add later.
  2. Click the Source tab at the bottom of the editor to see the code that you already created.

Take this opportunity to reduce the width of two columns in the data grid. Specifically, consider the DataGridColumn declarations for the category and amount columns and change the width property from the default 120 pixels to 90 pixels. Here is the data grid declaration after your change:

   allPayments_ui DataGrid {
    layoutData = new GridLayoutData
       { row = 2, column = 1,
           verticalAlignment = GridLayoutLib.VALIGN_TOP},
           columns =[
              new DataGridColumn{name = "category", 
                  displayName = "Type", 
                  width = 90},
              new DataGridColumn{name = "description", 
                  displayName = "Description", 
                  width = 120},
              new DataGridColumn{name = "amount", 
                  displayName = "Amount due", 
                  width = 90}
            ],
            data = allPayments as any[],
            selectionMode = DataGridLib.SINGLE_SELECTION 
        };


Add prototype data in the start function, which is referenced in the onConstructionFunction property of the handler and which runs before the user first accesses the web page. Specifically, assign an array of records to the data property of the data grid:

  function start()
    allPayments_ui.data = 
      [
         new paymentRec{category = 1, description = "test01", amount = 100.00},
         new paymentRec{category = 2, description = "test02", amount = 200.00},
          new paymentRec{category = 3, description = "test03", amount = 300.00}
      ];
end


Now to preview the file,

  1. To format the file, click Ctrl-Shift-F.
  2. Click the Preview tab.
    Web page with prototype data
  3. Save the file.

Add the first set of buttons

To create the Add, Delete, and Sample buttons on the Design surface:

  1. Click the Design tab.
  2. In the Palette view, go to the Layout drawer and find the GridLayout widget type. Drag a new grid layout to the upper left corner of the main layout. Assign the following name to the new widget: buttonLayout The new grid layout within the handler
  3. Click into the new layout, right click a cell, and notice that you can insert or delete content from the menu.
  4. Click Delete > Row.
  5. Click again into the new layout, right click a cell, and click Delete > Row. A single row remains, with three columns.
  6. Create the Add button:
    1. In the Palette view, go to the Display and Input drawer and then to Button (Dojo). Drag a Dojo Button widget to the leftmost cell of buttonLayout. Dragging a button onto the new GridLayout widget
    2. Assign the following name to the button: addButton
    3. Go to the Properties view:
      • On the General page, change the text property to Add.
      • On the Events page, select the row for the onClick event. A plus sign (+) is displayed at the far right of the line. Click the plus sign and specify the following name for a function that will be invoked when the user clicks the Add button: addRow

The Source view opens to display the addRow function. Rather than complete the function now, finish laying out this section of the web page. Click the Design tab to return to the Design surface.

  1. Create the Delete button:
    1. In the Palette view, go to the Display and Input drawer and then to Button (Dojo). Drag a Dojo Button widget to the middle cell of buttonLayout.
    2. Assign the following name to the button: deleteButton
    3. Go the Properties view for the button:
      • On the General page, change the text property to Delete.
      • On the Events page, assign the following function name to the onClick event: deleteRow
    4. When the deleteRow function is displayed, click the Design tab.
  2. Using the same process as in previous steps, create a Dojo button in the rightmost cell of buttonLayout. Name the button sampleButton, change the text property to Sample, and use the following name for the onClick function: sampleData. The sampleData function is displayed.
  3. Inspect the source code, noting the code that was provided for each of the buttons.
  4. Click the Preview tab. Web page with buttons and prototype data
  5. Save the file.

Add a variable to handle a single row

You previously created an array to hold the database rows. You now declare a variable for a single row and then drag that variable onto the Design surface to create a layout for displaying the row.

To create the variable:

  • Click the Design tab to display the Design surface.
  • Right-click the background of the EGL Data view, which is likely to be at the bottom left of the workbench. Click New > Variable.
  • In the Create a new EGL Data Variable wizard, request a new record variable based on the paymentRec record:
    1. Make sure that Type Selection is set to Record.
    2. Select the paymentRec record.
    3. In the Array Properties section, make sure that the Array check box is cleared.
    4. For Enter the name of the field, enter the following name: selectedPayment The new variable wizard
    5. Click Finish.

As noted in the Preview section of the page shown, the following record declaration is created in the source code for the handler:

  selectedPayment paymentRec;

Add grid layout for a single row

To create the grid layout:

  • In the Palette view, go to the Layout drawer and find the TitlePane (Dojo) widget type. Drag a new title pane to the lower right cell of the main grid layout, next to the cell that holds the allPayments_ui grid. The TitlePane widget drops in the last cell.
  • Assign the following name to the title pane: editPane Click OK.
  • Make the following changes to the properties for the editPane widget:
    1. On the General page, change the title property to Payment record
    2. On the Position page, change the width property to 350. This value leaves room for error messages.
    3. On the Layout page, change the verticalAlignment property to TOP.

The web page should now look like the following image:The web page with the payment record pane

  • Save the file.
  • From the EGL Data view, drag the selectedPayment variable to the bracketed area inside the bracketed area in the payment record pane. The bracketed area inside the pane.
    The Configure data widgets wizard is displayed.

Note: If you cannot drop the record into the pane, select the source view of the Visual Editor. Change the children attribute of editPane from:
  children = [ new Div { } ] 
to:
  children = [ new Div {innerHTML = " "} ] 
Then switch back to the design view and you should see that the bracketed area is displayed. You should now be able to drop the record variable into the bracketed area and continue with the next step.
  • Make the following changes:
    1. Under Create Widgets for, select Editable data.
    2. Make sure that the Widget Type for the selectedPayment record is GridLayout.
    3. Change the Label fields as shown in the following table. These labels are used to identify the fields in the display:
Table 1. Revised names for selectedPayment fields
Default name Revised name
paymentID Key:
category Category:
description Description:
amount Amount:
fixedPayment Fixed pmt:
dueDate Due date:
payeeName Payee:
payeeAddress1 Address 1:
payeeAddress2 Address 2:
You must specify colons explicitly, as they are not added automatically to labels.
    1. For the category field, in the Widget Type column, click DojoTextField. A down arrow is displayed. Click the arrow, and then click DojoComboBox.
    2. For the amount field, in the Widget Type column, click DojoTextField. A down arrow is displayed. Click the arrow, and then click DojoCurrencyTextBox. This widget provides some basic formatting for currency.
    3. Ensure that Add support for formatting and validationis checked. The selection creates a Form Manager, which uses the EGL Rich UI Model-View-Controller (MVC) framework to manage Rich UI validation and formatting. Here are the settings: The Configure data widgets wizard with the correct values.
    4. Click Finish.

The new grid layout contains a form.
The new selectedPayment grid has a row for each field in the record.

Note: You might need to click the Refresh button in the upper right corner of the Rich UI editor to see this change:
The refresh button shows two yellow arrows.

  • Make the Key field read-only:
    1. Repeatedly click the Dojo text field next to the Key label until only that field is surrounded by a dotted line.
      The Category field is highlighted.
    2. In the Properties view, General page, select the readOnly check box. The readOnly check box
  • For a more uniform appearance if the amount's field type is money(16,4) instead of decimal(10,2), do as follows:
    1. Click the DojoCurrencyTextBox widget for Amount until only that widget is surrounded by a dotted line.
    2. On the Position page of the Properties view, set the width property to 166.

Add the second set of buttons

To add the Clear and Save buttons:

  1. In the Palette view, go to the Layout drawer and find the GridLayout widget type. Drag a new grid layout to the upper right corner of the main layout and assign the following name: detailButtonLayout Dragging a grid layout to the top-right corner of the web page
  2. With the new layout selected, update the number of rows and columns in whichever way you prefer: in the Properties view, or by deleting the rows and columns, or by changing the source code. In any case, ensure that the layout has 1 row and 2 columns.
  3. At the Design surface, create the Clear button:
    1. In the Palette view, go to the Display and Input drawer and then to Button (Dojo). Drag a Dojo button to the first cell of the new layout.
    2. Using the same process as was used earlier, name the button clearButton, change the text property to Clear, and use the following name for the onClick function: clearAllFields. The clearAllFields function is displayed.
  4. Create the Save button:
    1. Click the Design tab.
    2. In the Palette view, go to the Display and Input drawer and then to Button (Dojo). Drag a Dojo button to the second cell of the new layout.
    3. Name the button saveButton and change the text property to Save.
    4. On the Events page, select the onClick event and click the down arrow in the second column to display the available function names. Click selectedPayment_form_Submit, which is a function that EGL created automatically when you dragged the selectedPayment record variable onto the user interface.
    5. Click the Preview tab.
      Web page with five buttons, prototype data, and a form
    6. Save the file, which should match the finished code in Code for PaymentFileMaintenance.egl after lesson 4

Related reference

  • Help topic: Overview of EGL Rich UI
  • Help topic: Rich UI DataGrid and DataGridTooltip
  • Help topic: Rich UI GridLayout
  • Help topic: Rich UI validation and formatting
  • Help topic: Form processing with Rich UI

Lesson checkpoint

In this lesson, you completed the following tasks:

  • Created a Rich UI handler.
  • Created variables in the EGL Data view.
  • Created a data grid by dragging a record array variable onto the editor.
  • Adjusted widgets in the Properties view and by using a menu.
  • Worked in all three tabs of the Rich UI editor, updating the source and previewing the web page.

In the next lesson, you create the service that will access the database.

< Previous | Next >