Estimated completion time → 20 min

In this third practical session, we add data entry objects to which create a basic user interface of the EASAP. Data entry objects are placed within a TABBED PANE. The data entry objects within the 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.

• Open the EASAP in the Builder if it not still open from last session
  • EASA→Set Mode→Author→My Applications→Stock Screener→EASAP Builder
• On the Tree tab.
  • Expand the USER INTERFACE branch by clicking on its
  • Expand the 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

• 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:

We now add data entry objects to filter all of the stocks in StockData and show only ones that match a User-specified 'Exchange' or 'Sector' criteria. We 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
    • 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.

Add a SUB PANE to offer a User options to create an SQL statement to filter StockData into a smaller result set.

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

Add two INPUTBOX's and for each configure a Child DATA VALIDATION.

• 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

• Right-click inputbox_Exchange,
  • Select Copy
    • Right-click inputbox_Exchange
      • Select Paste (Sibling)
        • Rename it inputbox_Sector
          • Set→ Label: Sector:
• Expand inputbox_Sector
  • For its Child DATA VALIDATION
    • Set→ Source: Basic Industries, Capital Goods
• Click File→Save

For now the Source: parameter is manually set to a short list taken from the set of all 'Sector' choices in the database.

In Session 5 we will change this so a full list of sectors is read from the database.

• Right-click on the sub_pane_Filters
  • Select Sibling→Add SUB PANE
    • Rename it sub_pane_Query
      • Set,
        • Border: Financial Query
        • Layout: HORIZONTAL
• 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
• 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|
• 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.

Please see Expressions for a list of logical operators available for use in expressions.

• Right-click inputbox_Operator
  • Select Sibling→Add INPUTBOX
    • Rename it inputbox_Value
      • Set,

The Tree should appear as below,

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

Let's add a LAYOUT PANEL containing the 'Search Stock Data' and 'Create Report' BUTTON's.

• Right-click on layout_panel_Container
  • Select Sibling→Add LAYOUT PANEL
    • Rename it layout_panel_Actions
      • Set → Layout: HORIZONTAL
• Right-click layout_panel_Actions
  • Select 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

We want to give our new BUTTON's a uniform look-and-feel.

Let's 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 the CSS Properties: parameter, below.
  • Instead of typing it manually,
    • highlight the text on this page with the mouse
    • type CTRL-c → Copy
    • in the Builder click the parameter value area
    • type CTRL-v → Paste

• For each of the following two BUTTON's:
  • button_Search_Stock_Data
  • button_Create_Report
• Set→Style: user_interface_style_button
• Click File→Save button or type 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:

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

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