User Tools

Site Tools


Practical Session 2 | Practical Session 4

Practical Session 3: Building the User Interface

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:

  • CHOICE LIST's for selecting the stock exchange.
  • CHOICE LIST'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.

Adding Data Entry Objects

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:
Parameter Name Parameter Value
Tab:Stock Screener

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:
Parameter Name Parameter Value
Layout:Horizontal
Show Border:FALSE

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:
Parameter Name Parameter Value
Border:Filters
Layout:HORIZONTAL
  • Right-click sub_pane_Filters and select Child→Add INPUTBOX. Rename it choice_list_Exchange and set:
Parameter Name Parameter Value
Label:Exchange:
Input Type:Text
Default:All
  • Right-click choice_list_Exchange and select Child→Add DATA VALIDATION ( ) and set:
Parameter Name Parameter Value
Allow:List
Source:All, NASDAQ, AMEX, NYSE
  • Right-click choice_list_Exchange, Copy then Paste (sibling). Rename it choice_list_Sector and set:
Parameter Name Parameter Value
Label:Sector:
  • For choice_list_Sector's DATA VALIDATION Child set:
Parameter Name Parameter Value
Source:All, Basic Industries, Capital Goods

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:
Parameter Name Parameter Value
Border:Financial Query
Layout:HORIZONTAL
  • Right-click sub_pane_Query and select Child→Add INPUTBOX. Rename it choice_list_Field_Name and set:
Parameter Name Parameter Value
Label:Field:
Input Type:Text
Default:None
  • Right-click choice_list_Field_Name and select Child→Add DATA VALIDATION ( ) and set:
Parameter Name Parameter Value
Allow:List
Source:None, Revenue, Price
  • Right-click choice_list_Field_Name, Copy then Paste (Sibling). Rename it choice_list_Operator and set:
Parameter Name Parameter Value
Label:Operator:
Default:>
Enable if:choice_list_Field_Name != “None”
  • For the DATA VALIDATION Child of choice_list_Operator set:
Parameter Name Parameter Value
Source:>,<

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

  • Right-click choice_list_Operator and select Sibling→Add INPUTBOX. Rename it inputbox_Value and set:
Parameter Name Parameter Value
Label:Value:
Input Type:Number
Default:100
Enable if:choice_list_Field_Name != “None”

  • 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:
Parameter Name Parameter Value
Layout:HORIZONTAL
Show Border:FALSE
  • Right-click sub_pane_Actions and select Child→Add BUTTON. Rename it button_Search_Stock_Data and set:
Parameter Name Parameter Value
Label:Search Stock Data
  • Right-click button_Search_Stock_Data and select Sibling→Add BUTTON. Rename it button_Create_Report and set:
Parameter Name Parameter Value
Label:Create Report
  • 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


Page Tools