Estimated completion time = 20 minutes.

In this third practical session, you will add data entry objects to begin to fill out the user interface of the EASAP. Data entry objects are placed within a TABBED PANE. The data entry objects within your Stock Screener EASAP include:

• INPUTBOX's for selecting the stock exchange.

• INPUTBOX's for selecting the industry sector.

• Several data entry objects for building a query based on either stock price or company revenue

• BUTTON's to initiate a stock search and to create a report of the results

Please follow the instructions below to complete this practical session.

You are now ready to proceed with adding data entry objects to the user interface of your 'Stock Screener' EASAP.

• Return to the Tree tab.

• Then expand the USER INTERFACE branch by clicking on its . Expand the TABBED PANE LIST sub-branch by clicking on its . The first TABBED PANE tabbed_pane1, will already be present. Rename it tabbed_pane_Stock_Screener and set one of its parameters below:

Let's check our work.

• Click on the Test Web Browser button () at the far left of the 2nd toolbar.

The window should look like this:

Note: You will now start to add data entry objects to choose the 'Exchange' and 'Sector' of the stock you want to query and also perform a financial query either on the stock price or on the company’s revenue.

• Return to EASAP Builder.

• Right-click the tabbed_pane_Stock_Screener and select Child→Add SUB PANE. Rename it sub_pane_Container and then set:

Note: SUB PANE's are used to group objects and to control their layout within a TABBED PANE. The Layout: parameter specifies how objects are distributed within the SUB PANE. Objects can be laid out horizontally, vertically or in a grid formation.

• Right-click sub_pane_Container select Child→Add SUB PANE. Rename it sub_pane_Filters and set:

• Right-click sub_pane_Filters and select Child→Add INPUTBOX. Rename it inputbox_Exchange and set:

• Right-click inputbox_Exchange and select Child→Add DATA VALIDATION ( ) and set:

• Right-click inputbox_Exchange, Copy then Paste (sibling). Rename it inputbox_Sector and set:

• For inputbox_Sector's DATA VALIDATION Child set:

Note: For now, the values in the Source: parameter are being manually set to a sub-set of all 'Sector' choices in the database. Later, in Practical Session 5, you will change this so that the full list is read from the database.

• Save your work, click File→Save.

• Right-click on the sub_pane_Filters and select Sibling→Add SUB PANE. Rename it sub_pane_Query and set:

• Right-click sub_pane_Query and select Child→Add INPUTBOX. Rename it inputbox_Field_Name and set:

• Right-click inputbox_Field_Name and select Child→Add DATA VALIDATION ( ) and set:

• Right-click inputbox_Field_Name, Copy then Paste (Sibling). Rename it inputbox_Operator and set:

• For the DATA VALIDATION Child of inputbox_Operator set:

Note: You can enter logical expressions within the Enable If: parameter. In the instance above, you enable the inputbox_Operator only if the inputbox_Field_Name does not equal (!=) “” (or NULL) in the EASAP. Please see Expressions for a list of logical operators available for use in expressions.

• Right-click inputbox_Operator and select Sibling→Add INPUTBOX. Rename it inputbox_Value and set:

• Save your EASAP by clicking on the Save button in the toolbar ( ). Upon saving the Builder may display error messages pointing out problems with certain objects that will need to be fixed.

• After clicking on the Test Web Browser button (), the EASAP should look like this:

Now add a SUB PANE containing the 'Search Stock Data' and 'Create Report' BUTTON's.

• Right-click on sub_pane_Container and select Sibling→Add SUB PANE. Rename it sub_pane_Actions and set:

• Right-click sub_pane_Actions and select Child→Add BUTTON. Rename it button_Search_Stock_Data and set:

• Right-click button_Search_Stock_Data and select Sibling→Add BUTTON. Rename it button_Create_Report and set:

We want to give our new BUTTON's a uniform look-and-feel. Now we add rounded corners, centered text, uniform width, etc… (CSS is browser dependent, this tutorial uses Chrome). To achieve this we will create a USER INTERFACE STYLE to add the CSS to the two BUTTON's above.

• Right-click USER INTERFACE,
  • Select Child→Add USER INTERFACE STYLE LIST
• Right-click USER INTERFACE STYLE LIST
  • Select Child→Add USER INTERFACE STYLES
• Right-click USER INTERFACE STYLES
  • Select Child→Add USER INTERFACE STYLE
    • Rename it user_interface_style_button
• Right-click user_interface_style_button
  • Select Child→Add OTHER STYLE (named other_style1)

other_style1 has a single parameter, CSS Properties: Set it with a copy-and-paste of the CSS string below:

For each of our two BUTTON's: button_Search_Stock_Data and button_Create_Report, Set:

• Save your EASAP by clicking on the Save button or typing ‘Ctrl-S’

We have completed all the USER INTERFACE objects. The Tree should look like:

After clicking on the Test Web Browser button (), the EASAP should look like:

You have now completed Practical Session 3 and you can either proceed to the next session or take a break and exit out of EASAP Builder.

Practical Session 2 | Practical Session 4