In this section, you’ll review the functional requirements and design the user interface.
1. Examining the functional requirements
Initially you want the StockWatcher application to do six things.
Stockwatcher Application Scribble
- Provide users with the ability to add stocks. (Supply simple validation on input for illegal characters or existing stock.)
- Display the following information for each stock: symbol, price, change since last refresh.
- Provide users with the ability to delete a stock from the list.
2. Identifying the elements of the UI design
After studying StockWatcher’s functional requirements, you decide you need these UI elements.
- a table: to hold the stock data
- two buttons: one to add stocks and one to remove them
- an input box: to enter the stock code
- a timestamp: to show the time and date of the last refresh
- a logo
- a header
- indicate whether the change in price was positive or negative using colors
Including Static Elements
Pyjamas does not dictate how you lay out your HTML page. A GWT application can take up the entire browser window, as it does in the startup application. Or it can be embedded in an existing page, as it is in the Getting Started page of this tutorial.
The StockWatcher application contains both static and dynamic elements. The logo and the header “StockWatcher” are static elements in the HTML host page. All the other elements are created programmatically using Pyjamas.
At this point you’ve reviewed StockWatcher’s functional requirements. You have a clear idea of what StockWatcher does. You know what UI elements you need to implement and how you want to lay them out.
Now you’re ready to build the user interface using GWT widgets and panels.
Part 2: Building the User Interface