|
|
| Line 1: |
Line 1: |
| − | [[EDT:Tutorial: Access a database with EGL Rich UI|Access a database with EGL Rich UI]]
| + | Please go to [[EDT:Tutorial: RUI With DataBase Lesson 4]]. |
| − | | + | |
| − | | + | |
| − | {| style="float: right"
| + | |
| − | |[[EDT:Tutorial: RUI With DataBase Lesson 3|< Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 5|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:
| + | |
| − | | + | |
| − | <ul><li>A palette of widget types
| + | |
| − | <li>The EGL Data view, which provides data-type definitions such as
| + | |
| − | 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>
| + | |
| − | | + | |
| − | | + | |
| − | 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:
| + | |
| − | | + | |
| − | <ol><li>In the '''PaymentClient''' project, select
| + | |
| − | the '''EGLSource''' folder and click '''New''' > '''Handler'''.
| + | |
| − | <li>In the New Rich UI Handler part window,
| + | |
| − | enter the following information:
| + | |
| − | | + | |
| − | <ol><li>In the '''EGL source file name''' field,
| + | |
| − | enter the following name:
| + | |
| − | | + | |
| − | PaymentFileMaintenance
| + | |
| − | | + | |
| − | <li>In the '''Package''' field, enter the
| + | |
| − | following name:
| + | |
| − | | + | |
| − | handlers
| + | |
| − | | + | |
| − | <li>Select the '''Rich UI Handler''' template
| + | |
| − | <li>Click '''Finish'''.<br />[[Image:EDT_Tutorial_edt_richui_sql04_new_handler.jpg|New EGL Handler]]
| + | |
| − | | + | |
| − | </ol>
| + | |
| − | 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
| + | |
| − | 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
| + | |
| − | 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: 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 ==
| + | |
| − | | + | |
| − | Create a data grid by dragging a record array variable onto
| + | |
| − | the Rich UI editor.
| + | |
| − | | + | |
| − | To create the data grid:
| + | |
| − | | + | |
| − | <ol><li>Create a record array variable.
| + | |
| − | | + | |
| − | <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
| + | |
| − | 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'''. [[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()
| + | |
| − | 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
| + | |
| − | </code>
| + | |
| − | | + | |
| − | Now to preview the file,
| + | |
| − | | + | |
| − | <ol>
| + | |
| − | <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.
| + | |
| − | </ol>
| + | |
| − | | + | |
| − | == Add the first set of buttons ==
| + | |
| − | | + | |
| − | To create the '''Add''', '''Delete''',
| + | |
| − | and '''Sample''' buttons on the Design surface:
| + | |
| − | | + | |
| − | <ol><li>Click the Design tab.
| + | |
| − | <li>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]]
| + | |
| − | | + | |
| − | <li>Click into the new layout, right click a cell, and notice
| + | |
| − | that you can insert or delete content from the menu.
| + | |
| − | <li>Click '''Delete''' > '''Row'''.
| + | |
| − | <li>Click again into the new layout, right click a cell, and
| + | |
| − | click '''Delete''' > '''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
| + | |
| − | 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:
| + | |
| − | | + | |
| − | addButton
| + | |
| − | | + | |
| − | <li>Go to the Properties view:
| + | |
| − | | + | |
| − | <ul><li>On the '''General''' page, change the '''text''' property
| + | |
| − | to <tt>Add</tt>.
| + | |
| − | <li>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
| + | |
| − | | + | |
| − | </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''' > '''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>
| + | |
| − | | + | |
| − | To create the grid layout:
| + | |
| − | | + | |
| − | <ol><li>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 <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:
| + | |
| − | | + | |
| − | editPane
| + | |
| − | 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
| + | |
| − | to <tt>Payment record</tt>
| + | |
| − | <li>On the '''Position''' page, change the '''width''' property
| + | |
| − | to <tt>350</tt>. This value leaves room for error messages.
| + | |
| − | <li>On the '''Layout''' page, change the '''verticalAlignment''' property
| + | |
| − | to <tt>TOP</tt>.
| + | |
| − | </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.
| + | |
| − | <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
| + | |
| − | 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
| + | |
| − | automatically to labels.
| + | |
| − | <li>For the <tt>category</tt> field, in the Widget
| + | |
| − | Type column, click '''DojoTextField'''. A down arrow
| + | |
| − | is displayed. Click the arrow, and then click '''DojoComboBox'''.
| + | |
| − | <li>For the <tt>amount</tt> 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.
| + | |
| − | <li>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.]]
| + | |
| − | | + | |
| − | <li>Click '''Finish'''.
| + | |
| − | </ol>
| + | |
| − | 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.]]
| + | |
| − | | + | |
| − | '''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.]]
| + | |
| − | | + | |
| − | <li>Make the Key field read-only:
| + | |
| − | | + | |
| − | <ol><li>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>In the Properties view, '''General''' page,
| + | |
| − | select the '''readOnly''' check box. [[Image:EDT_Tutorial_edt_richui_sql09_read_only.jpg|The readOnly check box]]
| + | |
| − | | + | |
| − | </ol>
| + | |
| − | | + | |
| − | <li>For a more uniform appearance, do as follows:
| + | |
| − | | + | |
| − | <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 [[EDT:Tutorial: RUI With DataBase Lesson 4 Code|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|< Previous]] | [[EDT:Tutorial: RUI With DataBase Lesson 5|Next >]]
| + | |
| − | |}
| + | |
| − | | + | |
| − | | + | |
| − | [[Category:EDT]]
| + | |
