Pyjamas Tutorial Part 1

I will post a tutorial series about Pyjamas the superb Python to Javascript compiler. This tutorial series will be based on the Getting Started tutorial for GWT. I will assume that you have Pyjamas correctly installed on your plattform (Linux, Mac, Win).

In this section, you’ll review the functional requirements and design the user interface.

  1. Examine the functional requirements.
  2. Identify the elements of the UI design.

1. Examining the functional requirements

Initially you want the StockWatcher application to do six things.

Stockwatcher Application Scribble
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.

What’s Next

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.

Coming soon:
Part 2: Building the User Interface

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 2.5 Attribution License.


One thought on “Pyjamas Tutorial Part 1

  1. Pingback: Pyjamas Tutorial Part 2 « Na Miezi

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s