Intro | Session 1 |Session 2 |Session 3 | Session 4 | Session 5 | Session 6 | Session 7 | Session 8

In this session we add data entry objects to create a basic user interface for our EASAP.

All our data entry objects will live in a parent TABBED PANE.

Stock Screener GUI objects include:

• INPUTBOXs to
  Select a stock exchange
  Select an industry sector
  Build a query to limit results based on stock price or company revenue values

• BUTTONs to
  Initiate a stock search
  Create an *.xls report of the results

The user interface at the end of this session will appear as below,

1. Login and open the Stock Screener in the EASAP Builder if it is not still open from last session.

• Select: EASA > Set Mode > Author
• Select: EASA > Authoring > My Applications > Stock Screener
• Click the link: EASAP Builder
• On the Tree tab expand the:
  USER INTERFACE branch by clicking on its
  TABBED PANE LIST sub-branch by clicking on its
• tabbed_pane1 will already be present rename it tabbed_pane_Stock_Screener
• Set Tab: Stock Screener

2. Let's test our work.

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

3. Add data entry objects to filter the stocks in StockData.

We want to show only stocks that match a User-specified stock exchange and/or business sector criteria.

We may also filter by the stock price or on the company’s revenue.

• Return to EASAP Builder
• Right-click tabbed_pane_Stock_Screener
• Select: Child > Add LAYOUT PANEL
• Rename it layout_panel_Container
• Set Layout: HORIZONTAL

This LAYOUT PANEL displays a number of objects according to Layout: within a tabbed_pane_Stock_Screener.

Layout: specifies if the objects are distributed horizontally, vertically or in a grid in a LAYOUT PANEL or SUB PANE.

In contrast to a LAYOUT PANEL, a SUB PANE displays text above and a border around its child objects.

4. Add a SUB PANE with options for an SQL statement to filter StockData.

• Right-click layout_panel_Container
• Select: Child > Add SUB PANE
• Rename it sub_pane_Filters
• Set
  Border: Filters
  Layout: HORIZONTAL

5. Add an INPUTBOX and a child DATA VALIDATION to select stock exchange.

• Right-click sub_pane_Filters
• Select: Child > Add INPUTBOX
• Rename it inputbox_Exchange
• Set
  Label: Exchange:
  Input Type: Text

• Right-click inputbox_Exchange
• Select: Child > Add DATA VALIDATION ( )
• Set
  Allow: List
  Source: NASDAQ, AMEX, NYSE

6. Copy the INPUTBOX from the last step and Paste it as a Sibling.

• Right-click inputbox_Exchange
• Select: Copy
• Right-click inputbox_Exchange
• Select: Paste (Sibling)
• Rename it inputbox_Sector
• Set Label: Sector:

7. Update the child DATA VALIDATION.

• Expand inputbox_Sector
• For its child DATA VALIDATION set Source: Basic Industries, Capital Goods
• Click: File > Save

Source: is manually set to a short list taken from the set of all business sector choices in the database.

In Session 5 we automate Source: so a full list of sectors is read from the database.

8. Add a SUB PANE to let the User build a financial query.

• Right-click on the sub_pane_Filters
• Select: Sibling > Add SUB PANE
• Rename it sub_pane_Query
• Set
  Border: Financial Query
  Layout: HORIZONTAL

9. Add an INPUTBOX and a child DATA VALIDATION to select between company revenue or stock price for the query.

• Right-click sub_pane_Query
• Select: Child > Add INPUTBOX
• Rename it inputbox_Field_Name
• Set
  Label: Field:
  Input Type: Text

• Right-click inputbox_Field_Name
• Select: Child > Add DATA VALIDATION ( )
• Set
  Allow: List
  Source: Revenue, Price

10. Copy and Paste the INPUTBOX from the last step.

Update the INPUTBOX to be enabled if a User has selected Revenue or Price.

• Right-click inputbox_Field_Name
• Select: Copy
• Right-click inputbox_Field_Name
• Select: Paste (Sibling)
• Rename it inputbox_Operator
• Set
  Label: Operator:
  Enable if: inputbox_Field_Name != "" (two double-quotes for the default, empty string)

11. Allow the User a choice between 'greater than' or 'less than' for the financial query.

• Expand inputbox_Operator
• For its child DATA VALIDATION
• Set Source: >,<

Logical expressions are allowed within the Enable If: parameter.

Above we enable inputbox_Operator only if the inputbox_Field_Name does not equal (!=) “” (or NULL) in the EASAP.

12. A final INPUTBOX provides a way for the User to set a cutoff value for Revenue or Stock price.

• Right-click inputbox_Operator
• Select: Sibling > Add INPUTBOX
• Rename it inputbox_Value
• Set
  Label: Value:
  Input Type: Number
  Default: 100
  Enable if: inputbox_Field_Name != "" (two double-quotes for the default, empty string)

The Tree should appear as below,

13. Save and test the EASAP.

• Save the EASAP by clicking on the 'Save' button in the toolbar ( )
  The EASAP Builder may display error messages pointing out problems with certain objects that will need to be fixed.
• Click the Test Web Browser button ():

14. Add a LAYOUT PANEL with two BUTTONs, 'Search Stock Data' and 'Create Report'.

• Right-click on layout_panel_Container
• Select: Sibling > Add LAYOUT PANEL
• Rename it layout_panel_Actions
• Set Layout: HORIZONTAL

• Right-click layout_panel_Actions
• Selec: Child > Add BUTTON
• Rename it button_Search_Stock_Data
• Set Label: Search Stock Data

• Right-click button_Search_Stock_Data
• Select: Sibling > Add SPACER
• Set Size: 10,10 (this creates a ten pixel square space between our buttons)

• Right-click spacer1
• Select: Sibling > Add BUTTON
• Rename it button_Create_Report
• Set Label: Create Report

1. Let's update the look-and-feel for our new BUTTONs.

We add a USER INTERFACE STYLE for rounded corners, centered text, uniform width, etc… (CSS is browser dependent, this tutorial uses Chrome).

• 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
  The default name other_style1 is fine

other_style1 has a single parameter, CSS Properties:

Let's set CSS Properties: using copy and paste instead of typing:

• Highlight the text in the box below with the mouse
• Type: CTRL-c (or Copy)
• In the EASAP Builder click in the parameter value box
• Type: CTRL-v (or Paste)

2. Assign the USER INTERFACE STYLE from the last step to our two BUTTONs.

• For each BUTTON
  button_Search_Stock_Data
  button_Create_Report
• Set Style: user_interface_style_button
• Click: File > Save (or type CTRL-s)

3. We have added all the USER INTERFACE objects we need, confirm the Tree looks like:

4. Click the 'Test Web Browser' button (), confirm the EASAP looks like:

We have now completed Session 3. Proceed to the next session or take a break and exit the EASAP Builder.

Introduction | Session 1 | Session 2 | Session 3 | Session 4 | Session 5 | Session 6 | Session 7 | Session 8