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:
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.
2. Let's test our work.
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.
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.
5. Add an INPUTBOX and a child DATA VALIDATION to select stock exchange.
6. Copy the INPUTBOX from the last step and Paste it as a Sibling.
7. Update the child DATA VALIDATION.
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.
9. Add an INPUTBOX and a child DATA VALIDATION to select between company revenue or stock price for the query.
10. Copy and Paste the INPUTBOX from the last step.
Update the INPUTBOX to be enabled if a User has selected Revenue or Price.
11. Allow the User a choice between 'greater than' or 'less than' for the financial query.
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.
The Tree should appear as below,
13. Save and test the EASAP.
14. Add a LAYOUT PANEL with two BUTTONs, 'Search Stock Data' and '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).
other_style1 has a single parameter, CSS Properties:
Let's set CSS Properties: using copy and paste instead of typing:
|CSS Properties:||width: 150px; border-radius: 8px; padding: 6px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px;|
2. Assign the USER INTERFACE STYLE from the last step to our two BUTTONs.
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.