Try it. And catch it, finally.

Some time ago I wrote a requirements oriented post about controlling the lifecycle of persisted entities.

Today I want to step back a bit and start writing about a number of “temporal” issues and problems of business applications development. On my way of thinking about this stuff I want to discuss, develop and improve (one or more?) possible solutions for them. This rankles me since a longer time: it’s the kind of stuff that regularly nobody has time (sic!) to care about when a business application project starts and which (again: regularly) begins to hurt and cost (maybe lots of) time and money later on when the true business requirements are discovered. And regularly they are discovered piece by piece only.

Foto credits to monkeyc.net according Creative Commons BY-NC-SA 2.0

So, what do I mean with Lifecycle of Data? At some point in time our baby-data is born. Then, while growing-up and aging it keeps some properties while others will change with time. Until at some point later it will die and disappear from this world. When we compare this picture of life with the basic data manipulation mechanisms a typical database management system provides we find a similar pattern: at some point in time a new record is INSERTed into a database table. Then, when time goes by, some of it’s properties (columns) will be UPDATEd. Until at some point later somebody decides to DELETE it from the database and therefore remove all it’s tracks from this world.

Let’s investigate this simple fact of what’s actually happening here a little bit deeper by reconnecting the lifecycle of information about the world with the lifecycle of the data living in the database. Databases regularly don’t store arbitrary data, but try to reflect some aspects of the real world. As a sample, I suggest to think of a civil registry’s database storing the spouses, children and all their places of living for a certain countries citizens. Let’s e.g. focus on one of those persons – let’s call her Mrs. Sometimes – and her place of living: some (probably short) time after her birth this fact of birth will be reflected in the database by INSERTing information about herself and INSERTing her first place of living. Later on, Mrs Sometime’s place of living will potentially change several times. Maintaining this databases address table therefore means to try best to reflect the real status of this single aspect of the world: where do my fellow citizens actually live? If somebody moves we UPDATE, if somebody dies, we DELETE.

To sum it up until here:

The basic data manipulation operations provided by a typical relational database management system (INSERT, UPDATE, DELETE) reflect the natural lifecycle of the recorded aspects of the (ever changing) outside world. The database we maintain by applying those operations tries it’s best to reflect the current status of the outside world. But regularly, it will take some time until the information finds its way into the database. And sometimes this will never happen – and the data inside the database will for some reason be plain wrong, meaning: not correctly reflecting the true facts of the outside world.

I used some important terms in the last paragraph which will propably occupy me for a longer time: I said the database reflects the current status (because outdated information is UPDATEd or DELETEd). I also said there typically is a time gap between a status change in the outside world (e.g. somebody moves) and the status change in the database (here e.g. correctly reflecting this move). And I said some database data may be wrong data.

To finish this post I want to deduct from this some of the typical user questions our simple-sample-database cannot answer:

• Where did Mrs. Sometimes live five years ago?
• When did Mrs. Sometimes move the last time?
• From when on did the Database reflect this fact?
• What did we know about Mrs. Sometimes’s first place of living some weeks after her birth?
• And what do we know about it today? When was it discovered that the original information about Mrs Sometimes’s first place of living was manipulated by her father and therefore corrected later on?
• And where can we write down the fact that Mrs’ Sometimes just called us and told us that she will definitely move in two month and already wants to drop this information?

Unfortunately the necessity to ask such questions, such “use cases” are not uncommon at all. In fact they are strongly typical and appear in many flavours. But they are typically not thought of from the beginning of an average application development on. To be continued.

This is the simple and at the same time bold promise of Googles Web Toolkit (GWT) on it’s relatively decent web housing on Google Code:

Developers can spend 90% of their time working around browser quirks. In addition, building, reusing, and maintaining large JavaScript code bases and AJAX components can be difficult and fragile. Google Web Toolkit (GWT), especially when combined with the Google Plugin for Eclipse, eases this burden by allowing developers to quickly build and maintain complex yet highly performant JavaScript front-end applications in the Java programming language.

As a first step of my personal convergence to this technology, I want to play through the official “StockWatcher” Getting Started Tutorial at their Website. I’m really curious, what I will like and what I maybe won’t like at all, especially when comparing my then freshly developed GWT awareness with the still cloudy but at the same time already demanding requirements I have in my mind with respect to Best-Of-Breed UI Technologies.

I don’t want to use Eclipse as suggested and recommended overthere, but IntelliJ IDEA, so maybe I can even deliver some additional value compared to the “official” tutorial. As Information about IDEAs GWT Support I found their 1-2-3 Video GWT Tutorial.

Step 1: Creating a GWT Project (Please see the Official Tutorial, too.)

1. Install Google Web Toolkit
2. Right Click on your IntelliJ IDEA Java Project.
3. Select ‘Add Framework Support…’
4. Check ‘Google Web Toolkit’ and select proper Installation Path
5. Create a Java Package called ‘com.google.gwt.sample.stockwatcher’
6. Right click your Package, select ‘New…/Google Web Toolkit/GWT Module’ and enter ‘StockWatcher’ as Name.
7. Right click your Package, select ‘New…/Google Web Toolkit/GWT Remote Service’ and enter ‘Greeting’ as Name.
8. If you happen to use Mac OS X, you must edit the Project Settings to use a Java 1.5 runtime for GWT Hosted Mode.

Step 2: Designing the Application Please see the Official Tutorial

Step 3: Building the User Interface (Please see the Official Tutorial, too.)

1. Basically this Step consists of editing the StockWatcher Class (which means implementing an EntryPoint Interface):

   public class StockWatcher implements EntryPoint {
   
     private VerticalPanel mainPanel = new VerticalPanel();
     private FlexTable stocksFlexTable = new FlexTable();
     private HorizontalPanel addPanel = new HorizontalPanel();
     private TextBox newSymbolTextBox = new TextBox();
     private Button addStockButton = new Button("Add");
     private Label lastUpdatedLabel = new Label();
   
     /**
      * Entry point method.
      */
     public void onModuleLoad() {
       // Create table for stock data.
       stocksFlexTable.setText(0, 0, "Symbol");
       stocksFlexTable.setText(0, 1, "Price");
       stocksFlexTable.setText(0, 2, "Change");
       stocksFlexTable.setText(0, 3, "Remove");
       // Assemble Add Stock panel.
       addPanel.add(newSymbolTextBox);
       addPanel.add(addStockButton);
       // Assemble Main panel.
       mainPanel.add(stocksFlexTable);
       mainPanel.add(addPanel);
       mainPanel.add(lastUpdatedLabel);
       // Associate the Main panel with the HTML host page.
       RootPanel.get("stockList").add(mainPanel);
       // Move cursor focus to the input box.
       newSymbolTextBox.setFocus(true);
     }
   
   }
   

2. Once you have this you can already startup your “hosted” Test UI by right-clicking your StockWatcher Class and selecting ‘Run StockWatcher’. Once your ‘Hosted Mode Browser’ is running, it will reflect any Code Change you make after a Click on its ‘Refresh’ Button.
3. One Remark: I had to increase my JRE heap size setting to 256MB first, by editing the Run/Edit Configurations (-Xmx256M) to get the Hosted Mode running.

Step 4: Managing Events on the Client Please see the Official Tutorial

Step 5: Coding Functionality on the Client Please see the Official Tutorial

Step 6: Managing Events on the Client (Please see the Official Tutorial, too.)

After having successfully added the EventListeners (Step 4), the required Table Coding (Step 5) and played through the quite convincing Debugging Section (Section 6), my Class looks now looks like the following:

public class StockWatcher implements EntryPoint {

    private VerticalPanel mainPanel = new VerticalPanel();
    private FlexTable stocksFlexTable = new FlexTable();
    private HorizontalPanel addPanel = new HorizontalPanel();
    private TextBox newSymbolTextBox = new TextBox();
    private Button addStockButton = new Button("Add");
    private Label lastUpdatedLabel = new Label();

    private static final int REFRESH_INTERVAL = 5000; // ms
    private ArrayList<String> stocks = new ArrayList<String>();

    public void onModuleLoad() {
        // Create table for stock data.
        stocksFlexTable.setText(0, 0, "Symbol");
        stocksFlexTable.setText(0, 1, "Price");
        stocksFlexTable.setText(0, 2, "Change");
        stocksFlexTable.setText(0, 3, "Remove");
        // Assemble Add Stock panel.
        addPanel.add(newSymbolTextBox);
        addPanel.add(addStockButton);
        // Assemble Main panel.
        mainPanel.add(stocksFlexTable);
        mainPanel.add(addPanel);
        mainPanel.add(lastUpdatedLabel);
        // Associate the Main panel with the HTML host page.
        RootPanel.get("stockList").add(mainPanel);
        // Move cursor focus to the input box.
        newSymbolTextBox.setFocus(true);
        // Setup timer to refresh list automatically.
         Timer refreshTimer = new Timer() {
           @Override
           public void run() {
             refreshWatchList();
           }
         };
         refreshTimer.scheduleRepeating(REFRESH_INTERVAL);
        // Listen for mouse events on the Add button.
        addStockButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                addStock();
            }
        });
        // Listen for keyboard events in the input box.
        newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() {
            public void onKeyPress(KeyPressEvent event) {
                switch (event.getCharCode()) {
                    case KeyCodes.KEY_ENTER: addStock();
                }
            }
        });
    }

    private void addStock() {
        final String symbol = newSymbolTextBox.getText()
            .toUpperCase().trim();
        newSymbolTextBox.setFocus(true);
        // Stock code must be between 1 and 10 chars that
           are numbers, letters, or dots.
        if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) {
            Window.alert("'" + symbol + "' is not a valid symbol.");
            newSymbolTextBox.selectAll();
            return;
        }
        newSymbolTextBox.setText("");
        // Don't add the stock if it's already in the table.
        if (stocks.contains(symbol))
          return;
        // Add the stock to the table.
        int row = stocksFlexTable.getRowCount();
        stocks.add(symbol);
        stocksFlexTable.setText(row, 0, symbol);
        // Add a button to remove this stock from the table.
        Button removeStockButton = new Button("x");
        removeStockButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                int removedIndex = stocks.indexOf(symbol);
                stocks.remove(removedIndex);
                stocksFlexTable.removeRow(removedIndex + 1);
            }
        });
        stocksFlexTable.setWidget(row, 3, removeStockButton);
        // TODO Get the stock price.
        refreshWatchList();
    }

    private void refreshWatchList() {
        final double MAX_PRICE = 100.0; // $100.00
        final double MAX_PRICE_CHANGE = 0.02; // +/- 2%
        StockPrice[] prices = new StockPrice[stocks.size()];
        for (int i = 0; i < stocks.size(); i++) {
            double price = Random.nextDouble() * MAX_PRICE;
            double change = price * MAX_PRICE_CHANGE
                * (Random.nextDouble() * 2.0 - 1.0);
            prices[i] = new StockPrice(stocks.get(i), price, change);
        }
        updateTable(prices);
    }

    private void updateTable(StockPrice price) {
        // Make sure the stock is still in the stock table.
        if (!stocks.contains(price.getSymbol())) {
          return;
        }
        int row = stocks.indexOf(price.getSymbol()) + 1;
        // Format the data in the Price and Change fields.
        String priceText = NumberFormat.getFormat("#,##0.00")
            .format(price.getPrice());
        NumberFormat changeFormat = NumberFormat
            .getFormat("+#,##0.00;-#,##0.00");
        String changeText = changeFormat.format(price.getChange());
        String changePercentText = changeFormat
            .format(price.getChangePercent());
        // Populate the Price and Change fields with new data.
        stocksFlexTable.setText(row, 1, priceText);
        stocksFlexTable.setText(row, 2, changeText + " ("
            + changePercentText + "%)");
    }

    private void updateTable(StockPrice[] prices) {
        for (int i = 0; i < prices.length; i++) {
            updateTable(prices[i]);
        }
        // Display timestamp showing last refresh.
        lastUpdatedLabel.setText("Last update : " + DateTimeFormat
            .getMediumDateTimeFormat().format(new Date()));
    }

}

In addition to that I have some encapsulated functionality in a new StockPrice class:

public class StockPrice {

    private String symbol;
    private double price;
    private double change;

    public StockPrice() {
    }

    public StockPrice(String symbol, double price, double change) {
        this.symbol = symbol;
        this.price = price;
        this.change = change;
    }

    public String getSymbol() {
        return this.symbol;
    }

    public double getPrice() {
        return this.price;
    }

    public double getChange() {
        return this.change;
    }

    public double getChangePercent() {
        return 100.0 * this.change / this.price;
    }

    public void setSymbol(String symbol) {
        this.symbol = symbol;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public void setChange(double change) {
        this.change = change;
    }

}

Step 7: Applying Style (Please see the Official Tutorial, too.)

• CSS Stylesheets can be associated from within the HTML Host File or – preferably – from within the Module Definition XML:

  <module>
  ...
      <inherits name="com.google.gwt.user.theme.dark.Dark"/>
  ...
  </module>

• You can look up the name of the style rules (the CSS selector) for each widget by accessing the GWT API Reference via the Widget Gallery.
• Furthermore it’s possible to add custom HTML class names to the widgets and/or parts of it like e.g. Table Cells.

Step 8: Compiling a GWT Application (Please see the Official Tutorial, too.)