User Tools

Site Tools

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

Session 3: Building the User Interface

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.

Adding Data Entry Objects

  • 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,
Parameter Name Parameter Value
Input Type:Number
Enable if:inputbox_Field_Name != "" ←two double-quotes for the default, empty string

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 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-cCopy
      • in the Builder click the parameter value area
      • type CTRL-vPaste
Parameter Name Parameter Value
CSS Properties:width: 150px; border-radius: 8px; padding: 6px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px;
  • 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

Page Tools