GUI, GWT, GXT, SmartGWT, GWT-Ext, JAVA SWING, C++/C#

EJS Charts parameters

2011-05-20T20:40:00.005+02:00

EJS Chart may be a solution, if you need a JavaScript charting to put it on your web application. It means that you don't need to install any plugin, like Adobe Flash Player; you just need to enable the JS scripts for your browser.

This particular library is a little obsolete, it seems that the last touch was in 2009 -- so I wouldn't recommend it, if you start a brand new application. But for the older ones, which are already using it, I have some tips:

Configuration of the chart (create, choose settings, formatters etc) is done strictly in JavaScript. So if you use the GWT, you need to write your JSI native wrappers, like I did :)

Data can be passed to the chart in 3 formats:

JSON objects
XML format
CSV format

JSON and XML are pretty simple and easy to understand, but the CSV documentation is poor. So, if you need for example to format your balloon tips (tooltip) you have access to some variables, which are defined in the data structure, like it's shown below.

CSV formats are the following (where the separators are | and , with these meaning: | for the separating the attributes for one point, and comma for separating the points):

Pie: x | label

Example: 12|point 1|,13|point2 will define the slices (12, point 1) and (13, point 2).

Bar vertical: x | y | label

Example: point 1|12|label1,point2|13|label2 will define the bars (12, point 1, label 1) and (13, point 2, label 2).

Bar horizontal: x | y | label

Example: 12|point 1|label1,13|point2|label2 will define the bars (12, point 1, label 1) and (13, point 2, label 2).

Line: x | y | label

Example: x_val1|y_val1|label1,x_val2|y_val2|label2 will define the points (x1, y1, label1) and (x2, y2, label2).

Note that the string values which are components of the CSV data must be sure that are escaped, in order to don't break the parsing of it. Also, there is something called "userdata", if you need to configure some URL links, to follow when you click on a slice, bar or line point. I haven't use it, so I'm not talking about it.

Escaping the separator characters is done like this:

, = & # 44 ;

| = & # 124 ;

Also the labels support simple HTML tags, like <label>, , , , .

So, if you need custom tooltips, then use the "label" variable, which can be passed through attribute hint_string for the bar and line, but not for the pie (perhaps because of some bug, whatever you put here it's ignored).

Anyways, In pie case there is a workaround, you have to define the function onShowHint(), like this:

var chart = new EJSC.Chart (...);

...

chart.onShowHint = function() {

return '<label>[parent_title]</label> [series_title]: [x] [label] ([percent]%) ';

};

For the other chart types (bar and line) you can do it like below, set the hint_string in the definition of the series:

hint_string='[label] ([percent]%)'

The known variables are, which can be used in formatting the tooltips:

pie: [x], [label], [percent], [total], [series_title], [parent_title], [min], [max]
bar: [x], [y], [label], [percent], [total], [series_title], [parent_title], [min], [max], [xaxis], [yaxis]
line: [x], [y], [label], [percent], [total], [series_title], [parent_title], [min], [max], [xaxis], [yaxis]

So, having said these, I hope you are better informed about EJS Charts!

Happy charting!

How to Use GWT for Large Scale Applications

2011-03-06T18:13:00.004+01:00

<><>News

How to Use GWT for Large Scale Applications Cameron McKenzie Google Web Toolkit is great for creating Ajax enabled content spots on your web pages. But what about creating large web applications with GWT? The DayZipping tech blog asserts that there are benefits to be had from using GWT, including a reduced server load, social integration and some SEO help through the history manager.

Site Highlights

Snapshots in the cloud: The Developer's friend What's the best tasting part of the cloud, especially if you're working on a Java development team? Cheap storage space and snapshots that cost very little to administer or produces make life much easier for the enterprise developer.

Optimizing your mobile website for all devices Should UI testing be automated or exploratory? Learn when each type of testing is appropriate and how, when used together, they can provide the most comprehensive UI test coverage.

REST: Preferred architecture and infrastructure for Web applications Explore REST as a primary design pattern for cloud computing architecture in this new tip with insight from Gartner analyst Anne Thomas Manes.

TSSJS Spotlight

Session Spotlight: Do You Really Get Class Loaders? Class loaders are at the core of the Java language. Java EE containers, OSGi, NetBeans modules, Tapestry 5, Grails and many others use class loaders heavily. Yet when something goes wrong, would you know how to solve it? Jevgeni's session explores the Java class loading mechanism, both from JVM and developer point of view covering: • How different delegation systems are built • How synchronization works • The difference between finding classes and resources • Which incorrect assumptions have been made and are now supported Find out more about Do You Really Get Class Loaders? at TheServerSide Java Symposium 2011.

Key Headlines

Bean Definitions for Spring Framework Spring framework's core features are around dependency injection and beans lifecycle management. What this means is that programmers don't write code to inject bean definitions. Instead, Spring framework injects the dependency to beans.

Get started with JDK 7 and Netbeans 7.0 Beta 2 In order help early adopters explore Java 7 we've put up a series of blog posts starting with installing the latest JDK 7 binary build, followed by installing NetBeans 7.0 (Beta 2). Regular blog posts featuring code samples and the weekly state of Java 7 progress will commence starting from this week.

Chronon "time travel debugger" now in open beta and available for download Chronon is a new technology that consists of a a??flight data recordera?? for Java programs which can record every line of code executed inside a program and save it to a file on the disk. The file can be shared among developers and played back in a special time traveling debugger (which is a plugin To Eclipse) to instantly find the root cause of an issue.

ZK 5.0.6 Released - a new SEO content generator among other features This latest ZK release introduces a new custom SEO content generator, a more intelligent mechanism that fits layout to content, a new interactive tree model, additional built in jQuery effects and others.

About this Newsletter

This e-newsletter is published by TheServerSide.com, part of the TechTarget network. TechTarget provides IT professionals with the resources they need to perform their jobs: Web sites, newsletters, forums, blogs, white papers, webcasts, events and more.

Copyright 2011 TechTarget. All rights reserved. Designated trademarks and brands are the property of their respective owners.

Contact Us: TechTarget, Member Services, 275 Grove Street, Newton, MA 02466, Contact: Webmaster@techtarget.com

GWT-Ext: How to show tooltips for the ColumnTree (tree-grid, tree-column) widget

2011-01-30T17:07:00.010+01:00

One day, a friend of ours has asked this:

"Hi, how to set the tooltip on the columns of a ColumnTree ? The structure is as follows:

ColumnTree.Column cols[] = new ColumnTree.Column[9]; 
cols[0] = columnTree.new Column("header", 290, "dataIndex");
cols[1] = columnTree.new Column("",50,"dataIndex");
cols[2] = columnTree.new Column("",100,"dataIndex");
cols[3] = columnTree.new Column("",170 , "dataIndex");
cols[4] = columnTree.new Column("",170,"dataIndex");
cols[5] = columnTree.new Column("", 70, "dataIndex"); 
cols[6] = columnTree.new Column("", 120, "dataIndex"); 
cols[7] = columnTree.new Column("", 70, "dataIndex"); 
cols[8] = columnTree.new Column("", 70, "dataIndex");

Columns are valued with the TreeLoader ."

The answer cannot be that simple, due to the defunct library GWT-Ext, which isn't under dev for long time. Anyhow, because I used this library first time, and I really like it, I found a way to solve this problem.

The column tree is the implementation of the very known tree-column, or tree-grid widget. This can be editable as well.

So the solution contains 2 files:
- 1. an updated ColumnNodeUI.js that sets the title DOM attribute for each cell with the value of the cell.
- 2. a Java class, called SccColumnTreeEditor.java that updates the title attribute of the cell element, after the completion of the edit action.

You can download these files from here:
- ColumnNodeUI.js
- SccColumnTreeEditor.java
- GWTExt_TreeColumn.java -- a test class, where you can see how everything is used.

Cheers!

Here's the solution found by our friend Faber:

Hi SCC, I wanted to post my solution on a tooltip using the TreeLoader. I did not want to change the javascript so I did the following:

- a function:

private String getToolTip (Integer value, String tooltip) {
   StringBuilder text = new StringBuilder ();
   text.append ("<div ext:qtitle = \"\" " + "ext:qtip = \"");
   text.append (tooltip);
   text.append ("\"/> "+ value + "</div>");
   return text.toString();
}

and then inside the JSONObject build my tooltip with data that I want.

StringBuilder tooltip = new StringBuilder ();
MyJSon JSONObject = new JSONObject (); / / JsonObject data
tooltip.append ("Label");
tooltip.append (myBean.getValue ()+"  ");
myJSon.put ("value", getToolTip (myBean.getValue (), tooltip.toString ()));

This obviously is server-side.

Thanks Faber!

Java Swing - Date Picker dialog to select a date

2011-01-21T23:34:00.004+01:00

This is addressed to the few Java Swing developers, who may still be out there and looking for cool widgets.

How many times did you need a date picker widget? you know, like the one from the GWT for example, and there are many others available.

Unfortunatelly the Java Swing library doesn't have a built-in one. Anyways, I found a good starting point here, http://sourceforge.net/projects/datepicker/ -- which is a very nicely done example, a little incomplete, but still good to go.

Because I wanted this widget to be perfect, I've updated and enhanced and it can do the followings:

automatic extract the name of the days and months from the Java locale (not like the original from a properties file).
automatic detects and display the first day of the week according with the used locale (not like the original that uses hard-coded only US style).
correct the coloring in red of the weekend days (not like original that had only Sundays on red, and Saturdays on gray).
corrected the button images to have all the same size (better header than the original)
implemented the "close on away click" feature to easily close the picker dialog when click away.

These are the results of the Java Swing widget:

The first image is a read-only text-field and a button, which will open the date-picker dialog, as seen in the second image.

We can fast scroll though months and years, or quickly select from the 2 combos, and for the days just press on the date, which you want to select.

Hope you like it -- the source code is available here.

Cheers!

PS: you can see this widget at work, in my free application Money On Thread.

IBM - Recommended reading list: Java EE and WebSphere Application Server

2010-12-21T22:53:00.000+01:00

Sree Anand Ratnasinghe (sreer@us.ibm.com), Certified IT Specialist, IBM　　

Summary: Learn about using Java™ Enterprise Edition (Java EE) and IBM® WebSphere® Application Server with this list of essential reading, compiled for customers, consultants, and other technical specialists by IBM Software Services for WebSphere. Updated with resources for new related products, technologies, and feature packs.

Introduction

This list of recommended reading connects you to documents that contain essential information that practitioners should know and understand before diving into Java™ EE application design and implementation using IBM® WebSphere® Application Server.
This list is intended for anyone interested in using or learning more about WebSphere Application Server.

About versions: Unless otherwise noted, the items in this list contain information that is generally applicable to all currently-supported versions of WebSphere Application Server, even though the information might be discussed in the context of older releases. When an item pertains only to one or more specific versions of WebSphere Application Server (or other IBM software), the applicable versions are noted after the title.

About other products: Although this list provides some starting points for learning about Web application development using other IBM products and related technologies, the focus here is on the WebSphere Application Server product family. Check the IBM developerWorks Rational® zone for more comprehensive reference material on Web development and IBM Rational products, the SOA and Web services zone for Service Oriented Architecture articles and design tips, and the Project Zero development community for information about using IBM WebSphere sMash to build rich Internet applications.

The list

The items in this list are organized into these categories:

More you can find here >>>

Cheers!

How to make GWT - GXT applications testable with Selenium?

2010-12-16T00:09:00.000+01:00

As you are working on your WEB application, you have learnt to use the GWT, then you wanted nicer UI controls (if you are a Java developer at core) from another framework, 'cause you have not time and interest to tweak (play) with .CSS styles. So, eventually you may end up, like many of us, with the GXT library from Sencha (fromer ExtJS).

And as long as you kept the development within the pure GWT, you managed the IDs and names of your controls. Doing this (all manually hard work) it pays back, because you can easily use the Selenium for testing your application.

"Selenium is a portable software testing framework for web applications. Selenium provides a record/playback tool for authoring tests without learning a test scripting language. Selenium provides a test domain specific language (DSL) to write tests in a number of popular programming languages, including C#, Java, Ruby, Groovy, Python, PHP, and Perl. Test playback is possible in most modern web browsers. Selenium deploys on Windows, Linux, and Macintosh platforms." from Wikipedia, the free encyclopedia.

Now if you use the GXT (official name is called Ext GWT, not to be confused with the old dead framework GWT-Ext) you'll see that all controls have an automatic generated ID (i.e. "x-auto-234") in the class "Component", which is the base of all GXT UI widgets, using the helper function XDOM.getUniqueId().

Now the problem is simple, because the UI widgets have these IDs auto-increment generated, depending of the workflow of your application (which dialogs, windows you open first) you'll have for sure different IDs for the same controls. You can say, "no problem, we can always overide the IDs, or set the names of the controls" (which is true), but what about the built-in dialogs like MessageBox, which are very "enclosed", and you cannot override or set anything from its implementation?

I found not solution yet, but I'm still digging, so if you have any ideas or solutions, please don't be shy to share them with everybody here, in a small comment !

Cheers and happy testing!

Web Frameworks Comparison

2010-11-25T00:18:00.005+01:00

Matt Raible posted a slideshow from his preso at Devoxx, comparing web frameworks. Spring MVC won, although GWT and Ruby on Rails were right there with it. He's a struts snob so it wasn't even considered, and struts 2 was only okay; he posted the actual ratings on google docs.

Things that stand out from the spreadsheet:

Each grading point was equal. Developer perception gets one point. Same for risk, same for published books, same for REST support, and all the opinions were subjective.
Tapestry got a 13.5. Struts 2 got a 14.5. Grails got 16.5, and Wicket got 14.5. (GWT, Ruby on Rails, and Spring MVC all got 17.) I know I'm subjective too, but Tapestry would have gotten like a 3 based on the people I've talked to, and Wicket would have gotten a 24 or so, because its fanboys would have stuffed the ballot boxes like wolverines.

Check out this SlideShare Presentation: Comparing JVM Web Frameworks

View more presentations from Matt Raible.

Similar articles:
* Best GWT Libraries: Ext GWT (GXT) vs GWT-Ext vs SmartGWT

JavaSpecialists.EU - Interlocker - Interleaving Threads

2010-10-31T14:07:00.002+01:00

by Heinz Kabutz 2010

A few months ago, one of my subscribers sent me an interesting question. How can you alternately call a method from two threads? Imagine you have two threads, first thread 1 calls a method, then thread 2, then thread 1 again, and so on. One thread should never call the method twice in a row.

Mohammed sent me several different solutions to this puzzle. My first step was to make our testing a bit more robust, so that we could catch any mistakes early. I also spent a while renaming the classes, to make our intentions clearer. Lastly, I marked up the classes with the new jpatterns annotations to indicate where we were using which design patterns. Thejpatterns.org annotations are a new project started by The Java Specialist Club. You are welcome to participate in the project if you would like to.

Disclaimer: I cannot think of a practical application of where such an "interlocker" would be useful. However, some of the discoveries might be useful in highly communicative systems. such as the lock-free approach to solving the problem. Only use if you know exactly what you are doing :-)

As a first class, we define Interlocker, which uses the template method to start threads that will call the Runnables. The execute() method will block until all the threads have finished. The Runnable objects returned by the getRunnable() method should guarantee that the InterlockTask is called interleaved by the threads. They do not have to guarantee which thread starts, but the total call count must be correct.

package interlock;

import org.jpatterns.gof.*;

/**
 * This special executor guarantees that the call() method of the
 * task parameter is invoked in turns by two threads.  There is
 * probably no practical application for this class, except as a
 * learning experience.
 */
@TemplateMethodPattern.AbstractClass
public abstract class Interlocker {
  @TemplateMethodPattern.PrimitiveOperation
  protected abstract Runnable[] getRunnables(InterlockTask task);

  @TemplateMethodPattern.TemplateMethod
  public final  T execute(InterlockTask task)
      throws InterruptedException {
    Runnable[] jobs = getRunnables(task);
    Thread[] threads = new Thread[jobs.length];
    for (int i = 0; i < threads.length; i++) {
      threads[i] = new Thread(jobs[i]);
      threads[i].start();
    }
    for (Thread thread : threads) {
      thread.join();
    }
    return task.get();
  }
}

Before we look at some possible solutions, let us view the InterlockTask interface. It is self explanatory.

package interlock;

import org.jpatterns.gof.*;

@StrategyPattern.Strategy
public interface InterlockTask {
  boolean isDone();

  /**
   * The call() method is called interleaved by the the threads
   * in a round-robin fashion.
   */
  void call();

  /**
   * Returns the result after all the call()'s have completed.
   */
  T get();

  void reset();
}

In the first test case, we want to simply increment a value. Since we are accessing the field from multiple threads, we need to declare it as volatile, but since only one thread is invoking the call() method, we do not need to synchronize. Since this test does very little, we can also use it to measure the overhead of our thread coordination mechanism.

package interlock.test;

import org.jpatterns.gof.*;
import interlock.*;

@StrategyPattern.ConcreteStrategy

public class EmptyInterlockTask implements
    InterlockTask {
  public final int upto;
  private volatile int count;

  public EmptyInterlockTask(int upto) {
    this.upto = upto;
  }

  public boolean isDone() {
    return count >= upto;
  }

  public void call() {
    count++;
  }

  public Integer get() {
    return count;
  }

  public void reset() {
    count = 0;
  }
}

The next test verifies that the call() method was invoked by alternating threads. We do this by inserting the current call number into a LinkedHashMap, with the number as key and the thread as a value. Afterwards, when we call get(), we verify that the result is correct. This is returned in the VerifyResult object.

package interlock.test;

import org.jpatterns.gof.*;

import java.util.*;

import java.util.concurrent.atomic.*;

import interlock.*;

@StrategyPattern.ConcreteStrategy
public class InterleavedNumberTestingStrategy implements
    InterlockTask {
  public final int upto;
  private final Map numbers =
      new LinkedHashMap();
  private final AtomicInteger count = new AtomicInteger(0);

  public InterleavedNumberTestingStrategy(int upto) {
    this.upto = upto;
  }

  public boolean isDone() {
    return count.get() >= upto;
  }

  public void call() {
    int next = count.getAndIncrement();
    numbers.put(next, Thread.currentThread());
  }

  public VerifyResult get() {
    if (numbers.size() < upto) {
      return new VerifyResult("Only " + numbers.size() +
          " numbers were entered");
    }
    Object previous = null;
    int i = 0;
    for (Map.Entry entry : numbers.entrySet()) {
      if (i != entry.getKey()) {
        return new VerifyResult("numbers out of sequence");
      }
      if (entry.getValue() == previous) {
        return new VerifyResult("Did not alternate threads");
      }
      previous = entry.getValue();
      i++;
    }
    Set values = new HashSet(numbers.values());
    if (values.size() != 2) {
      return new VerifyResult(
          "More than two threads were inserting values");
    }
    return new VerifyResult();
  }

  public void reset() {
    numbers.clear();
    count.set(0);
  }
}


package interlock.test;

public class VerifyResult {
  private final boolean success;
  private final String failReason;

  private VerifyResult(boolean success, String failReason) {
    this.success = success;
    this.failReason = failReason;
  }

  public VerifyResult(String failReason) {
    this(false, failReason);
  }

  public VerifyResult() {
    this(true, null);
  }

  public boolean isSuccess() {
    return success;
  }

  public String getFailReason() {
    return failReason;
  }

  public String toString() {
    return success ? "Success" : "Failure - " + failReason;
  }
}

Another task could print the threads, for example:

// *snip*
  public boolean isDone() {
    return row.get() >= upto;
  }

  public void call() {
    System.out.println(Thread.currentThread().getName());
    row.incrementAndGet();
  }

Interlocker Solutions

The easiest solution is to use semaphores. We start with two semaphores. The first has 1 barrier, the second zero. From thread 1, we acquire semaphore 1, do the call(), then release semaphore 2. From thread 2, we acquire semaphore 2, do the call(), then release semaphore 1. The reason this works is that you can release a semaphore from a thread that has not acquired it. This is quite different to locks, where only the thread that acquired the lock can release it.

package interlock.impl;


import interlock.*;

import java.util.concurrent.*;

public class SemaphoreInterlocker extends Interlocker {
  private static class Job implements Runnable {
    private final InterlockTask task;
    private final Semaphore first;
    private final Semaphore second;

    public Job(InterlockTask task,
               Semaphore first, Semaphore second) {
      this.task = task;
      this.first = first;
      this.second = second;
    }

    public void run() {
      while (!task.isDone()) {
        first.acquireUninterruptibly();
        if (task.isDone()) return;
        task.call();
        second.release();
      }
    }
  }

  protected Runnable[] getRunnables(InterlockTask task) {
    Semaphore even = new Semaphore(1);
    Semaphore odd = new Semaphore(0);
    return new Runnable[]{
        new Job(task, even, odd),
        new Job(task, odd, even)
    };
  }
}

When running this code, I noticed that it was rather slow. For example, to increment an int one million times took 4 seconds on my machine, of which most was context switching:

InterlockTask task = new EmptyInterlockTask(1000 * 1000);
Interlocker generator = new SemaphoreInterlocker();

long time = System.currentTimeMillis();
generator.execute(task);
time = System.currentTimeMillis() - time;
System.out.println(time);

The other solutions that we developed, using wait-notify and Java 5 Condition, were similar in performance characteristic. We will leave those Interlockers as an exercise for the reader :-) If you want to attempt them, remember the effects that spurious wakeups can have on your Object.wait() and Condition.await().

Lock Free Interlocker

I wanted to write a fast Interlocker implementation, ideally not locking at all and using a volatile field as a communication mechanism. Here is what I did:

package interlock.impl;

import interlock.*;

public class LockFreeInterlocker extends Interlocker {
  private volatile boolean evenHasNextTurn = true;

  private class Job implements Runnable {
    private final InterlockTask task;
    private final boolean even;

    private Job(InterlockTask task, boolean even) {
      this.task = task;
      this.even = even;
    }

    public void run() {
      while (!task.isDone()) {
        while (even ^ evenHasNextTurn);
        if (task.isDone()) {
          return;
        }
        task.call();
        evenHasNextTurn = !even;
      }
    }
  }

  protected Runnable[] getRunnables(InterlockTask task) {
    return new Runnable[]{
        new Job(task, true), new Job(task, false)
    };
  }
}

This approach to thread communication is faster when the call() method completes quickly. Since we are doing a busy wait, we will burn up CPU cycles in the waiting thread. For a long call() method, one of your CPUs would be running at 100% polling a field value. This is not a good idea unless you have lots of spare CPUs that you do not know what to do with. However, if you want to just do a very task inside call(), then this approah is substantially faster.

Where this might be handy is if you have a lot of thread communication that you need to speed up. Some financial applications might find this information useful.

Caveat: Livelock (or "unbreakable hard spin")

If we modify the LockFreeInterlocker slightly to use a boolean XOR instead of bitwise, then we can cause the JVM to hang up. I called this a livelock, for want of a better term. When I demonstrated this to Doug Lea, he named it an "unbreakable hard spin". Cliff Click also had a look at it and thinks it might be because the server hotspot compiler is not inserting a safepoint at the right place. This problem occurs in OpenJDK / Sun JDK server HotSpot compilers running on at least 2 physical cores and from JDK 1.6.0_14 onwards. Code available on request.

GWT 2.1 RC1 is now available

2010-10-12T08:23:00.003+02:00

Posted by Chris Ramsdale - Monday, October 11, 2010 at 6:50:00 PM

Building on the three previous milestones, we're happy to announce the first release candidate (RC1) of GWT 2.1. While we're still focused on the overall theme of making it easier to build cloud portable business apps via some help from our friends at VMware and Spring, there are more than a few aspects that make this milestone a RC.

First we've rounded out the list of components and features that will ship with GWT 2.1. One of these components is a new Editor framework that allows you to bind your DTOs to a customizable UI which handles all of necessary grunt work of validating and syncing change sets. Another is the availability of theSafeHTML component and its integration within the cell-based widgets. After all, we've optimized these new widgets by injecting HTML, we better do it in a secure manner.

Along with the new components and features, we've solidified the Activities/Places, RequestFactory, Editor framework, and Cell-based widget APIs. So, if you're looking to start a project with GWT 2.1, you can feel confident that your team won't have to refactor code because we've switched out interfaces between now and the final release.

Also, if you're looking to get started with GWT 2.1 we have an initial draft of the new Developer Guides. These can be found at the links below (the Editor framework Developer Guide is coming soon).

As with previous milestones, there will be an associated Spring Roo RC1 and SpringSource Tool Suite RC1, that will be available in the next few days. Keep your eye on the SpringSource blog, as Christian and Ben are active contributors.

GWT 2.1 RC is available on our Google Code download site and as version 2.1-SNAPSHOT in the Google Maven Snapshot Repository. We’d love to hear your feedback and thoughts on this release, and our GWT Developer Forum would be the best place to post this information.

New features:

Data Presentation Widgets

Data Presentation Widgets (Cell Widgets) allow developers to to create highly efficient views on top of large data sets. These widgets have two unique design strengths. One, they're able to render subsets of a dataset in the same way they would if they had fetched the entire dataset. For your end-users this means the initial load of a view is fast, even if that view is tied to millions of records on the backend. Secondly, cell widgets use a 'flyweight' design. Rather than being a container of other widgets, which can tend to be heavy, they build up chunks of HTML that is injected into the DOM. This not only speeds up initialization, but also reduces the event handling overhead that can slow down user experience when there are hundreds of widgets in a view.

MVP Framework (Activities and Places)

The MVP framework is an application framework that supports development of large scale GWT applications with the Model - View - Presenter pattern. The MVP framework provides a client-side EventBus, manages Activities, and synchronizes Places with browser history.

To make developing apps of this style easier, Spring Roo, though not required, can generate and maintain the boilerplate code associated with connecting your app's components with GWT's MVP Framework.

RequestFactory

RequestFactory is an alternative to GWT-RPC for creating data-oriented services. RequestFactory and its related interfaces (RequestContext and EntityProxy) make it easy to build data-oriented (CRUD) apps with an ORM-like interface on the client. It is designed to be used with an ORM layer like JDO or JPA on the server, although this is not required.

Server-side Speed Traces

We've mentioned before that Speed Tracer is a tool that helps you identify and fix performance problems in web applications. Until now the problems it can help you fix have be limited to client-side code.

With Speed Tracer, you can now view sever-side timing data for apps running on Google App Engine and SpringSource's TC Server Developer Edition. With this integration, you'll be able to view metrics for database calls, memcache hits, resources fetches, as well as other server-side service calls. The new metrics views are integrated into the existing Speed Tracer UI, all you need to do is navigate to the Network (resources) and you'll start see your server-side traces.

Logging

Logging of client-side code in GWT applications is new. Logging helps you understand how the application executes and make it easier to troubleshoot issues encountered by developers and users. In GWT, you can log client-side code directly to handlers on the client side, or you can use remote logging to log client-side code to handlers on the server side.

The logging framework emulates java.util.logging, so it uses the same syntax and has the same behavior as server side logging code. This allows you to share logging code between the client and server side code.

Safe HTML

SafeHtml provides a library that, when used with the coding guidelines, supports the development of GWT applications that are free from a large class of XSS vulnerabilities. It provides this benefit while minimizing overhead in runtime and development effort. This class of potential XSS vulnerabilities in GWT apps arises from the use of methods that cause the browser to evaluate their argument as HTML, for example, setInnerHTML and setHTML, as well as the constructors of HTML-containing widgets such as HTML.

Cool development tools from Google

2010-10-10T19:59:00.005+02:00

The classic GWT tools:

SDK

The Google Web Toolkit SDK contains the core libraries and compiler that you need to write web applications. See the Release Notes for this latest version.

Speed Tracer

Speed Tracer is a Chrome Extension that allows you to pinpoint performance problems in your
web applications.

Plugin for Eclipse

The Google Plugin for Eclipse provides IDE support for Google Web Toolkit and App Engine web projects.

New tools:

GWT Designer

Create rich web applications with GWT Designer, a powerful set of Eclipse-based development tools that enables Java developers to quickly create Ajax web applications using the Google Web Toolkit (GWT). -- ex-Instantiations --

WindowTester Pro

Streamline testing of Java rich client applications with WindowTester Pro, including tools for automated recording, test generation, code coverage and playback of GUI interactions that can occur within an application. WindowTester Pro includes support for SWT and Swing.

CodePro AnalytiX

Employ the comprehensive automated software code quality and security analysis toolkit CodePro AnalytiX to automatically improve software quality, reliability, and maintainability in developer applications.

Cloud portability from Google and VMware

Develop and deploy rich web apps for your enterprise, across multiple environments and devices.

Google and VMware have enhanced our open source Java development tools, allowing enterprise developers to rapidly build rich web apps, run them on multiple devices, and deploy them on-premise or in the cloud of your choice. Familiar tools turn Java developers into cloud developers, and standard APIs avoid cloud lock-in.

Spring Roo
With Spring Roo, a next-generation rapid application development tool, Java developers can easily build full Java applications in minutes, using the Java Persistence API (JPA) to connect them to new or existing databases. Roo outputs standard Java code, so it’s easy to refine the back end with the SpringSource Tool Suite and the front end with the Google Web Toolkit SDK, using Roo as much or as little as desired.
SpringSource Tool Suite
Using the Eclipse-based SpringSource Tool Suite, developers can now choose to deploy their application on Google App Engine for Business, a VMware environment (your vSphere infrastructure, your choice of vCloud partners, or VMforce), or other infrastructure such as Amazon EC2. We call this cloud portability.
Google App Engine for Business
Google App Engine for Business enables organizations to build and host web apps on the same systems that power Google applications and includes new enterprise-level features, a 99.9% uptime SLA, support and flat-rate pricing. Google App Engine for Business is a first-class choice for deploying enterprise apps to the cloud as part of a cloud portability strategy, whether for seasonal apps, bursty apps, disaster recovery, or simply for friction-free deployment of new apps.

I don't know about you regarding the GWT Designer, but I tried it some time ago, and it worked very well with the standard GWT widgets, supported pretty well the widgets from GWT-Ext library, with small bugs, which were fixed along ... and now we can use the ones from GXT (ext-ExtJs or Scencha nowadays). It's a good prototype-maker though.

The tester tool seems a good alternative to FireFox plugin called Selenium (http://seleniumhq.org/) -- need to have a careful look at it.

What's more interesting is the CodePro tool, which helps you to clean up your code of potential bugs or bad coding habits. It's very very good tool.

So, we need to used them daily to improve the result of our work -- the software application.

Cheers!

Cool Movie Browser

2010-10-09T04:06:00.001+02:00

Cool Movie Browser is discovering and gathering all your video files, which are distributed on different computers and hard-drives, into a single place. After that, you can play them in your favorite (you choose) media player application (VLC Player, Windows Media Player, QuickTime Player etc.)

The last version 1.2.101005 has added the online sport TV panel, which gives you all the live streams from net with the games of the day.

As said, it allows you to play each movie with its own media player (i.e. you can set .avi files to be played with VLC Player, and all .mpg movies with Windows Media Player).

For each discovered movie it will bring the poster image from the "cloud" (Internet), so you don't have to worry about identifying quickly your preferred TV show.

Also, you can create and manage (create, edit, delete, reorder, play) your own playlists.

Buzz: This application can centralize different kind of files, not only movies. Because it's flexible and configurable, we can choose the extension of the file, which we need to see (.doc), and instead of setting the command line for WMPlayer, we can put the one for Office Word. Doing this you can easily manage all Word documents from your different hard-drives, in one single place. Indeed it's cool!

See more:

What is the difference between User Interface and User Experience design?

2010-09-17T00:31:00.001+02:00

I've found an interesting exchange of ideas about GUI on http://www.linkedin.com

Kedron Rhodes • There is an unfortunate trend to use the two titles interchangeably, but I assure you, they are not the same. A UX professional is the storyteller, where as the UI professional would be the editor. They often work hand-in-hand, but they see the project from entirely different perspectives.

Karl D'Souza • Even though they are two seperate skillsets, in todays world of UI design, all UI designers need to start integrating UX into their design. They aren't interchangeable but they definitely need to start getting integrated.

Jamie Lemon • If the UI designer doesn't have an appreciation of UX then they are going to be less able to implement the "correct" design. I've seen UX fail because the UI people weren't in the loop. I believe one person with both UX and UI ability is more valuable than 2 separate people with those skill sets.

Gavin Lew • The provided references do a good job of making the distinction betweeen UX and UI, but I believe that the user experience of a product goes beyond the interaction and really impacts all the touch points for service or product delivery.

Geof Harries • I think only on big teams do most people have the luxury of two distinct roles. As others have mentioned, we're starting to get to the point, if we're not there already, where UI designers need to have serious UX skills to be proficient and effective. In my mind, there's no seperation of the skillsets if you consider yourself a well-rounded professional.

Christen Williams • User Interface (UI) design is the act of laying out the information architecture of an application or website including, but not limited to, the layout of the information on each screen. You can design a UI solely based on business needs or can design a UI with the users as the focus - User Centered [UI] Design or UCD.

User Experience (UEX) design is the act of designing a UI always with a focus on the user and ease of use concepts and best practices to ensure the overall "experience" of using the application or website is a good one.

That said, UEX professionals almost always will design the UI, but add the value of a UCD focus. UCD or UEX helps save time and money by consulting with the users during design phases which ultimately avoids costs associated with redesign due to designs that don't take the user into consideration as much.

In summary, if you're looking to hire someone with either skillset, your best bet is to find a UI Designer with a UEX or UCD background.

Sean Pook • Christen has answered the question superbly. The UI is a part of the overall user experience and good User Experience should always be user-centred.

Job titles can be confusing and I often see UX Designer and UI Designer meaning the same thing. They shouldn't though.

If you have a role in mind but are not sure of the job title, let me know. I'm a specialist UX recruiter and am happy to advise (no strings attached) :-)

Adrian Mendoza • As a UX professional I tell clients that the Big distinction is that UX designers must respond to ROI. ROI and business rules must always be in the mind of a good user experience. Sometimes a good UI design might not be the right solution for business rules.

Sean Pook • UI can be wholly independant of UX design (but shouldn't be) and UX Design can certainly be wholly indpendant from UI Design (because if we're talking a digital UI, the Product / service, may not even have one).

However, how often do we see the term UX when it's not associated with a digital user interface?

User centred design can also be independant of business needs and focus exclusivly on the users. But logically a user base is also a customer base and this comes back to business ROI. So they are definitely interlinked.

Simon Rohrbach • I usually refer to User Experience Design as the science of looking at and designing the touchpoints a (potential) customers interacts with over time. These can include both digital touchpoints (website, mobile apps, etc) but also offline entities such as high street shops, customer service, etc.

User Interface Design to me is much more about designing a digital interface, e.g. the web service, the app, etc.

A good UI can only influence the overall UEX to a certain extent - if, say, Brand XYZ's web app provides an excellent UI, the high street shop can still be crowded and noisy, so that the customer will walk away with a "negative" user experience and a negative impression of Brand XYZ.

A smart company will always try to look at the overall user experience and try to map out strategies and guidelines for each of the touchpoints - both online and offline - to provide an excellent, consistent experience in their respective field.

Bipin Daftardar • UI and UXD should be working together. Many a times UI designers / developers 'assume' about the user and not consider the end-users, as in the case of UXDesigner, the basic need is to understand the business objectives and study user behavior, expectations and tasks and then move ahead with strategic interaction design. Technical aspect of prototyping may be lacking in UXDesigners, which is also important.

References:

So, you can add more comments to the above ones -- Cheers!

JavaScript - Regular Expressions

2010-09-09T21:32:00.003+02:00



A regular expression is a pattern that uses a special syntax to describe the content of a text field. It can be used either to validate that the string contains a valid value or alternatively it can be used to format a value entered so that it matches the specified format. Regular expressions were introduced into Javascript in version 1.2 and so can be used to perform field validations in all modern browsers. While the actual syntax of regular expressions is quite complex compared to most other Javascript commands, once you have the code for a particular regular expression using that expression to perform validation on an input field is very easy. Here are a couple of regular expressions : emailRe = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)\.(\w{2}\|(com\|net\|org\|edu\|int\|mil\|gov\|arpa\|biz\|aero\|name\|coop\|info\|pro\|museum))$/ phoneRe = /^((\+\d{1,3}(-\| )?$?\d$?(-\| )?\d{1,5})\|($?\d{2,6}$?))(-\| )?(\d{3,4})(-\| )?(\d{4})(( x\| ext)\d{1,5}){0,1}$/ Note that the expressions are fairly long and that in order for them to work correctly they each need to be coded completely on one line (if you select the code in the above box and paste it into a text editor you should get the code set out correctly). These examples define valid formats for email addresses and phone numbers respectively. The email address regular expression accepts email addresses in the format username @ domain name. There are a couple of other valid email address formats (eg. username @ [ip address]) but this regular expression only accepts the more common format. The phone number regular expression accepts phone number in both local format (eg. 02 1234 5678 or 123 123 4567) or international format (eg. +61 (0) 2 1234 5678 or +1 123 123 4567). It also accepts an optional extention of up to five digits prefixed by x or ext (eg. 123 123 4567 x89). Rather than performing a whole series of validations to validate that a given field contains an email address or phone number you can perform one test using the appropriate regular expression instead. For example, the following code could be used with the above regular expressions to validate two fields on your form. if (!emailRe.test(myform.replyemail.value)) alert(myform.replyemail.value + ' is invalid'); if (!phoneRe.test(myform.phone.value)) alert(myform.phone.value + ' is invalid'); Note that like any other validations that you perform against form fields using Javascript, you cannot validate that the entered value actually exists and is correct. All you can do is to check that it matches to an expected pattern. Any more substantial validation would require server side processing as Javascript does not have access to anything that allows it to perform that additional validation.

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

Web: Polymorphic JavaScript Functions

2010-08-30T22:44:00.001+02:00

by Stephen Chapman

One aspect that not many people ever think about with JavaScript is that if you define multiple functions with the same name then the last one defined will be the one that actually runs. JavaScript functions are not polymorphic the way that functions in many other languages are in that JavaScript doesn't care if the actual arguments defined for the functions are different as it can't distinguish between them on that basis. Where in other languages you might have myfunc(oneparm) and myfunc(parmone, parmtwo) as two separate functions with the one that gets run depending on the number of parameters passed, in JavaScript the last one defined will always be the one run regardless of the number of parameters.

The only time most people will ever even think about this aspect of how JavaScript works is when they accidentally create two functions of the same name (perhaps by incorprating two different scripts into the same page) and then wondering why their code doesn't work properly.

Instead of being a failing in the JavaScript language though, this way of handling duplicated function names actually provides us with a way to make JavaScript even more polymorphic with its function processing. To start with, it is relatively simple to recode our multiple functions so that they will behave polymorphically, we just need to give each a separate nale and then set up one extra function that will be the one that we call which itself examines the number and types of the parameters passed in order to decide which of those other functions to call.

Doing that is not as efficient in terms of the required code as languages that do that selection automatically are but it does make available to us a way to make our JavaScript functions even more polymorphic than is possible in other languages. Instead of the parameters passed to the function being polymorphic we can set things up in JavaScript so that the function itself is polymorphic and changes itself.

A good example of this was included in the presentation given by Dan Webb at the @media Ajax 2007 conference. In his presentation he used the following example.

This function effectively rewrites itself the first time it is called by creating another function having the same name as the original function. As this new function has been added to the page after the original function, it will be the one that is used for all subsequent calls to that function name but because the second function by that name has not yet been added to the page the first time the function is called, te original function (the one that recreates itself) will be the one called the first time that the function is called.

This allows us to dramatically reduce the feature sensing code that we would otherwise need in our scripts in order to determine what code we need to run based on the features supported.

This particular example uses feature sensing to add event processing to the web page. If the browser is running JavaScript that supports addEventListener() then the addEvent() function will replace itself with a function that calls addEventListener. If the browser is running JScript which supports attachEvent() then the function will replace itself with a function that calls attachEvent. In effect there are three different addEvent() functions in our web page. The first is called the first time the function is called. That function works out which of the two features that the browser supports and replaces itself with a function that uses that feature to do the processing. It then calls that replacement function in order to perform that task. Subsequent calls to the function will reference the added function directly as it has been added to the page after the original function. Since this function does not perform the feature sensing it will run more efficiently. As it is impossible for a browser to suddenly stop supporting one feature and start supporting another in the middle of processing a script we do not need to perform feature sensing tests more than once in processing the page and so a polymorphic function like this is way more efficient than the more conventional approach of testing the feature every time would be.

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

Web: Drawing with Stylesheets and Javascript

2010-08-30T22:33:00.002+02:00

by Stephen Chapman

1. Introduction and Sample

Join the Discussion

Questions? Comments?

More of this Feature

Stylesheet HTML Javascript Generated Animate the Drawing

Did you know that you can place animated drawings on your web page using nothing more than a few simple stylesheet entries and a few lines of javascript? Most people know that Javascript can animate things on your page. Not so many people realize that you can use just a few simple stylesheet commands to produce quite complex drawings and then use javascript to reduce the amount of code required to place them on your page.

Well now I am going to explain to you how you can do it. Here's the example animated drawing that we are going to use - a keyboard where the keys light up when the mouse moves over them.

Now if you had seen this on some other page you would probably think it was created using images and perhaps has them laid out in a complicated table in order to get them laid out correctly. Well the entire drawing is actually created using nothing more than 12 stylesheet commands and about 15 lines of Javascript and that includes the animated effect.

Of course the drawing that you want to include in your page will probably look completely different from this example but the description of how I created and animated this drawing should provide you with a reasonable idea of how you can go about creating and animating a drawing of your own using nothing more than a few stylesheet commands and a few lines of Javascript.

We'll start by looking at the stylesheet commands that I used.

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

Lady Java Music Video for JavaZone (High quality)

2010-08-26T20:37:00.003+02:00

This is very cool song dedicated to the Java programming language ... good job!

Cheers

GWT - How to draw in the browser with GWTCanvas

2010-07-20T22:41:00.013+02:00

It's time to have better graphics and drawing capabilities in the Web applications. The big guys are working to support HTML5, but until then, we can use the GWTCanvas widget from the GWT.

Here is a sample of how to extends the base GWTCanvas with more nicer and simpler features, like the mouse and keys events.

/**
 * The class SccCanvas extends GWTCanvas with mouse event listeners.
 *
 * @author SCC
 */
public class SccCanvas extends GWTCanvas {
   /** graphics helper */
   private final SccGraphics graphics_;

   /** Default constructor */
   public SccCanvas() {
      super();
      graphics_ = new SccGraphics(this);
      sinkEvents(Event.MOUSEEVENTS);
   }

   /** Creates a canvas with specified sizes for drawing and pixels */
   public SccCanvas(int coordX, int coordY, int pixelX, int pixelY) {
      super(coordX, coordY, pixelX, pixelY);
      graphics_ = new SccGraphics(this);
      sinkEvents(Event.MOUSEEVENTS);
   }

   /** Creates a canvas with specified size */
   public SccCanvas(int coordX, int coordY) {
      super(coordX, coordY);
      graphics_ = new SccGraphics(this);
      sinkEvents(Event.MOUSEEVENTS);
   }

   public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) {
      return addDomHandler(handler, MouseDownEvent.getType());
   }

   public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) {
      return addDomHandler(handler, MouseMoveEvent.getType());
   }

   public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
      return addDomHandler(handler, MouseOutEvent.getType());
   }

   public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
      return addDomHandler(handler, MouseOverEvent.getType());
   }

   public HandlerRegistration addMouseUpHandler(MouseUpHandler handler) {
      return addDomHandler(handler, MouseUpEvent.getType());
   }

   public HandlerRegistration addMouseWheelHandler(MouseWheelHandler handler) {
      return addDomHandler(handler, MouseWheelEvent.getType());
   }

   /**
    * @return the graphics_;
    */
   public SccGraphics getGraphics() {
      return graphics_;
   }
}

We have defined a helper class, called SccGraphics, similar with the "Graphics" context from Swing to implement the drawing primitives:

/** helper class for the simple drawing primitives */
public class SccGraphics {
   private final SccCanvas canvas_;


   public SccGraphics(final SccCanvas canvas) {
      canvas_ = canvas;
   }


   /** draws a line between 2 points (x1,y1) and (x2,y2) */
   public void drawLine(int x1, int y1, int x2, int y2) {
      canvas_.beginPath();
      canvas_.moveTo(x1, y1);
      canvas_.lineTo(x2, y2);
      canvas_.closePath();
      canvas_.stroke();
   }


   /** draws a rectangle, top corner (x,y) and size (w,h) */
   public void drawRect(int x, int y, int w, int h) {
      canvas_.beginPath();
      canvas_.rect(x, y, w, h);
      canvas_.closePath();
      canvas_.stroke();
   }


   /**
   * Draw an arc.
   * 
   * @param x
   * int value for centre X
   * @param y
   * int value for centre Y
   * @param r
   * int value for radius
   * @param startAngle
   * int value of start angle in degree 0 - 360
   * @param endAngle
   * int value of end angle in degree 0 - 360
   * @param antiClock
   * true value for antiClockwise sense
   */
   public void drawArc(int x, int y, int r, int startAngle, int endAngle,
         boolean antiClock) {
     canvas_.beginPath();
     final double start = Math.PI * startAngle / 180;
     final double end = Math.PI * endAngle / 180;
     canvas_.arc(x, y, r, start, end, antiClock);
     canvas_.closePath();
     canvas_.stroke();
  }
}

And this is the testing code, which allow us to mark the mouse position with a hair-cross lines, and also basic shape of rectangle and circle.

private int startX_;
private int startY_;


public void testGWTCanvas() {
   final SccCanvas c = new SccCanvas(350, 350);
   c.setBackgroundColor(Color.WHITE);


   final SccGraphics g = c.getGraphics();


   RootPanel.get().add(c);
   final Label lbl = new Label();


   c.addMouseMoveHandler(new MouseMoveHandler() {
      @Override
      public void onMouseMove(final MouseMoveEvent event) {
         c.clear();
         int mx = event.getX();
         int my = event.getY();
         lbl.setText(mx + "," + my);


         c.setLineWidth(.20);
         c.setStrokeStyle(Color.BLACK);
         g.drawLine(mx, 0, mx, 350);
         g.drawLine(0, my, 350, my);


         if (startX_ > 0) {


            c.setLineWidth(.65);
            c.setStrokeStyle(Color.RED);
            g.drawRect(startX_, startY_, mx - startX_, my - startY_);
         }
      }
   });


   c.addMouseUpHandler(new MouseUpHandler() {
      @Override
      public void onMouseUp(MouseUpEvent event) {
         int mx = event.getX();
         int my = event.getY();


         c.setLineWidth(1);
         c.setStrokeStyle(Color.GREEN);
         int w = mx - startX_;
         int h = my - startY_;


         g.drawRect(startX_, startY_, w, h);


         int r = Math.min(Math.abs(w / 2), Math.abs(h / 2));
         g.drawArc((startX_ + mx) / 2, (startY_ + my) / 2, r, 0, 360,
         true);


         startX_ = -1;
         startY_ = -1;


      }
   });


   c.addMouseDownHandler(new MouseDownHandler() {
      @Override
      public void onMouseDown(final MouseDownEvent event) {
         int b = event.getNativeButton();
         int mx = event.getX();
         int my = event.getY();
         if (b == NativeEvent.BUTTON_LEFT) {
            lbl.setText("LEFT-CLICK @ " + mx + "," + my);
            startX_ = mx;
            startY_ = my;


         } else if (b == NativeEvent.BUTTON_MIDDLE) {
            lbl.setText("MIDDLE-CLICK @ " + mx + "," + my);


         } else if (b == NativeEvent.BUTTON_RIGHT) {
            lbl.setText("RIGHT-CLICK @ " + mx + "," + my);
         }
      }
   });


   Window win = new Window ();
   win.setBottomComponent(lbl);
   win.setSize (500, 400);
   win.add (c);
   win.show();
}

An here's the result of the above code:

So, it's just matter of time to see very powerful applications and systems. Examples are lots on web http://www.chromeexperiments.com/.

Cheers!

Powerful applications can be implemented into the browser

2010-07-08T11:56:00.006+02:00

This seems to be the next 10 years computing, the nice powerful application that don't need any installer or hard-drive space, just a simple URL. You open the browser, invoke the URL and then "poof" magic, your application is on. Of course, this allows the application providers to charge you on usage-time, which will means that you'll pay all the time, but in the bright side, always you'll have access to the latest version.

Here's a sample of powerful online application, which is working with any modern browser (Chrome, FF, IE9, IE8 + Chrome Frame plugin) -- just try to draw something, and you'll see how nice it is:

&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; Cheers!&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;

Cheers!

Happy browsing...

GWT - Upgrade to GWT 2.1 M1 and fix the module loading errors

2010-05-24T11:13:00.003+02:00

If you try to use the just released GWT 2.1M1 library on your old projects you'll have some errors:

11:10:41.734 [ERROR] [gwt21m1test] Errors in 'jar:file:/C:/Borland/eclipse/plugins/com.google.gwt.eclipse.sdkbundle.2.1.0_2.1.0.m1-201005191217/gwt-2.1.0.M1/gwt-bikeshed.jar!/com/google/gwt/valuestore/ui/AbstractRecordListActivity.java'

11:10:41.796 [ERROR] [gwt21m1test] Line 89: No source code is available for type com.google.gwt.requestfactory.shared.Receiver; did you forget to inherit a required module?

To fix them add to your module .gwt.xml file the following line:

<inherits name='com.google.gwt.requestfactory.RequestFactory' />

Now your modules will load properly.

Cheers!

GWT - Large scale application development and MVP

2010-05-11T21:07:00.001+02:00

Chris Ramsdale, Google Developer Relations

Updated March 2010

Also see Part II of this article.

Building any large scale application has its hurdles, and GWT apps are no exception. Multiple developers working simultaneously on the same code base, while maintaining legacy features and functionality, can quickly turn into messy code. To help sort things out we introduce design patterns to create compartmentalized areas of responsibility within our project.

There are various design patterns to choose from; Presentation-abstraction-control, Model-view-controller, Model-view-presenter, etc... And while each pattern has its benefits, we have found that a Model-view-presenter (MVP) architecture works best when developing GWT apps for two main reasons. First the MVP model, much like other design patterns, decouples development in a way that allows multiple developers to work simultaneously. Secondly, this model allows us to minimize our use of GWTTestCase and, for the bulk of our code, write lightweight (and fast) JRE tests.

At the heart of this pattern is the separation of functionality into components that logically make sense, but in the case of GWT there is a clear focus on making the view as simple as possible in order to minimize our reliance on GWTTestCase and reduce the overall time spent running tests.

Building an MVP based application can be straightforward and easy once you understand the fundamentals behind this design pattern. To help explain these concepts we will use a simple Contacts application as an example. This application will allow users to view, edit, and add contacts to a list of contacts that are stored on the server.

To begin we will break our application up into the following components:

We'll then look into how each of these components interact by digging into:

The sample project, referenced throughout this tutorial, can be found here.

Model
A model encompasses business objects, and in the case of our Contacts application we have:

Contact: A representation of a contact within the contact list. For simplicity, this object contains a first name, last name, and email address. In a more complex application, this object would have more fields.
ContactDetails: A light version of the Contact that contains only the unique identifier and display name. This "light" version of the Contact object will make the Contact list retrieval more efficient, as there will be fewer bits to serialize and transport across the wire. In the case of our example application, this optimization has less impact than it would in a more complex app where Contact objects have substantially more fields. The initial RPC will return a list of ContactDetails, and we've added a display name field so that there is some amount of data that can be displayed (within the ContactsView) without having to making subsequent RPCs.

View
A view contains all of the UI components that make up our application. This includes any tables, labels, buttons, textboxes, etc... Views are responsible for the layout of the UI components and have no notion of the model. That is to say a view doesn't know that it is displaying a Contact, it simply knows that it has, for example, 3 labels, 3 textboxes, and 2 buttons that are organized in a vertical fashion. Switching between views is tied to the history management within the presentation layer.

The views in our Contacts application are:

ContactsView
EditContactView

The EditContactView will be used to add new contacts as well as editing existing contacts.

Presenter
A presenter contains all of the logic for our Contacts application, including events that are sourced from the UI widgets within the view.

For our sample we have the following Presenters:

ContactsPresenter
EditContactPresenter

Just as with the view, the EditContactPresenter will add new contacts as well as editing existing contacts.

AppController

To handle logic that is not specific to any presenter and instead resides at the application layer, we'll introduce the AppController component. This component contains the history management and view transition logic. View transition is directly tied to the history management and is discussed in greater length below.

GXT - How to select items in non-editable ComboBox by pressing keys

2010-04-20T21:08:00.008+02:00

We have a non-editable GXT ComboBox with quite numerous items (100-200), which is hard to select by scrolling (even if they are alphabetically ordered). It would be nice and faster to have the possibility to select items by typing the keys. Unfortunately this feature isn't built-in GXT non-editable combo-box, like it's done for the editable one.

In this case we can fix it by extending the ComboBox class and add to it a key listener and a timer. When we press a key we collect the chars into a buffer and then we look for the item that starts with that text. If we didn't type anything for more than 1 second, then we reset the buffer to allow trying another letters, if the one typed earlier aren't good.

*** The GXT solution is the implementation of the selectable combo-box (preferred ordered, but not a mandatory requirement) by keys is presented below:

public class SccComboBox<D extends ModelData> extends ComboBox<D> {
 private final StringBuilder buffer;
 private final DelayedTask resetBufferTimer;

 /** constructor */
 public SccComboBox () {
 buffer = new StringBuilder();
resetBufferTimer = new DelayedTask(new Listener<BaseEvent>() {
@Override
public void handleEvent(final BaseEvent be) {
buffer.delete(0, buffer.length());
}
});
 }

 /**
 * {@inheritDoc}
 */
 @Override
 protected void onKeyPress(FieldEvent fe) {
 if (isExpanded()) {
 if (!fe.isSpecialKey()) {
buffer.append((char) fe.getKeyCode());
 }
 if (fe.getKeyCode() == KeyCodes.KEY_BACKSPACE) {
int idx = buffer_.length() - 1;
if (idx >= 0) {
 buffer.deleteCharAt(idx);
}
 }

 for (D d : store.getModels()) {
String v = propertyEditor.getStringValue(d);
if (v.toLowerCase().startsWith(buffer.toString().toLowerCase())) {
 select(d);
 break;
}
 }

 /* timer timeout 1 second */
 resetBufferTimer.delay(1000);
}
 super.onKeyPress(fe);
 }

 /**
 * {@inheritDoc}
 */
 @Override
 public void expand() {
 buffer.delete(0, buffer.length());
 super.expand();
 }

}

** The solution for pure GWT implementation is similar with the above code, but with few small changes. We need to replace the DelayedTask with my previous pure GWT implementation of the DelayedTask, LastCallBurstEventsMgr, like in the below code:

First of all, remove the resetBufferTimer local member variable from the SccComboBox, definition and constructor.
Secondly, at the line /* timer timeout 1 second */ we replace the next code line with the following ones:

   /* timer timeout 1 second */
   LastCallBurstEventMgr.addEvent (new BurstEvent ("reset-buffer-timer", new Function() {
   public void execute () {

buffer.delete(0, buffer.length());

}
}, 1000));

So, having this logic added to the ComboBox will resolve your "selection in long combo-box" problem.

Cheers!

Things Every Programmer Should Know: $25, #26, #27

2010-04-04T21:49:00.004+02:00

It was getting late. I was throwing in some placeholder data to test the page layout I'd been working on.

I appropriated the members of The Clash for the names of users. Company names? Song titles by the Sex Pistols would do. Now I needed some stock ticker symbols — just some four letter words in capital letters.

I used those four letter words.

It seemed harmless. Just something to amuse myself, and maybe the other developers the next day before I wired up the real data source.

The following morning, a project manager took some screenshots for a presentation.

Programming history is littered with these kinds of war stories. Things that developers and designers did "that no one else would see" which unexpectedly became visible.

The leak type can vary but, when it happens, it can be deadly to the person, team, or company responsible. Examples include:

During a status meeting, a client clicks on an button which is as yet unimplemented. They are told: "Don't click that again, you moron."

A programmer maintaining a legacy system has been told to add an error dialog, and decides to use the output of existing behind-the-scenes logging to power it. Users are suddenly faced with messages such as "Holy database commit failure, Batman!" when something breaks.

Someone mixes up the test and live administration interfaces, and does some "funny" data entry. Customers spot a $1m "Bill Gates-shaped personal massager" on sale in your online store.

To appropriate the old saying that "a lie can travel halfway around the world while the truth is putting on its shoes," in this day and age a screw-up can be Dugg, Twittered, and Flibflarbed before anyone in the developer's timezone is awake to do anything about it.

Even your source code isn't necessarily free of scrutiny. In 2004, when a tarball of the Windows 2000 source code made its way onto file sharing networks, some folks merrily grepped through it for profanity, insults, and other funny content. (The comment // TERRIBLE HORRIBLE NO GOOD VERY BAD HACK has, I will admit, become appropriated by me from time to time since!)

In summary, when writing any text in your code — whether comments, logging, dialogs, or test data — always ask yourself how it will look if it becomes public. It will save some red faces all round.

26. Don't Ignore that Error! by Pete Goodliffe

I was walking down the street one evening to meet some friends in a bar. We hadn't shared a beer in some time and I was looking forward to seeing them again. In my haste, I wasn't looking where I was going. I tripped over the edge of a curb and ended up flat on my face. Well, it serves me right for not paying attention, I guess.

It hurt my leg, but I was in a hurry to meet my friends. So I pulled myself up and carried on. As I walked further the pain was getting worse. Although I'd initially dismissed it as shock, I rapidly realized there was something wrong.

But I hurried on to the bar regardless. I was in agony by the time I arrived. I didn't have a great night out, because I was terribly distracted. In the morning I went to the doctor and found out I'd fractured my shin bone. Had I stopped when I felt the pain, I'd've prevented a lot of extra damage that I caused by walking on it. Probably the worst morning after of my life.

Too many programmers write code like my disastrous night out.

Error, what error? It won't be serious. Honestly. I can ignore it. This is not a winning strategy for solid code. In fact, it's just plain laziness. (The wrong sort.) No matter how unlikely you think an error is in your code, you should always check for it, and always handle it. Every time. You're not saving time if you don't: You're storing up potential problems for the future.

We report errors in our code in a number of ways, including:

Return codes can be used as the resulting value of a function to mean "it didn't work." Error return codes are far too easy to ignore. You won't see anything in the code to highlight the problem. Indeed, it's become standard practice to ignore some standard C functions' return values. How often do you check the return value from printf?
errno is a curious C aberration, a separate global variable set to signal error. It's easy to ignore, hard to use, and leads to all sorts of nasty problems — for example, what happens when you have multiple threads calling the same function? Some platforms insulate you from pain here; others do not.
Exceptions are a more structured language-supported way of signaling and handling errors. And you can't possibly ignore them. Or can you? I've seen lots of code like this:

try {
    // ...do something...
}
catch (...) {} // ignore errors

The saving grace of this awful construct is that it highlights the fact you're doing something morally dubious.

If you ignore an error, turn a blind eye, and pretend that nothing has gone wrong, you run great risks. Just as my leg ended up in a worse state than if I'd stopped walking on it immediately, plowing on regardless can lead to very complex failures. Deal with problems at the earliest opportunity. Keep a short account.

Not handling errors leads to:

Brittle code. Code that's filled with exciting, hard-to-find bugs.
Insecure code. Crackers often exploit poor error handling to break into software systems.
Poor structure. If there are errors from your code that are tedious to deal with continually, you have probably have a poor interface. Express it so that the errors are less intrusive and the their handling is less onerous.

Just as you should check all potential errors in your code, you need to expose all potentially erroneous conditions in your interfaces. Do not hide them, pretending that your services will always work.

Why don't we check for errors? There are a number of common excuses. Which of these do you agree with? How would you counter each one?

Error handling clutters up the flow of the code, making it harder to read, and harder to spot the "normal" flow of execution.
It's extra work and I have a deadline looming.
I know that this function call will never return an error (printf always works, malloc always returns new memory — if it fails we have bigger problems...).
It's only a toy program, and needn't be written to a production-worthy level.

27. Don't Just Learn the Language, Understand its Culture by Anders Norås

In high school, I had to learn a foreign language. At the time I thought that I'd get by nicely being good at English so I chose to sleep through three years of French class. A few years later I went to Tunisia on vacation. Arabic is the official language there and, being a former French colony, French is also commonly used. English is only spoken in the touristy areas. Because of my linguistic ignorance, I found myself confined at the poolside reading Finnegans Wake, James Joyce's tour de force in form and language. Joyce's playful blend of more than forty languages was a surprising albeit exhausting experience. Realizing how interwoven foreign words and phrases gave the author new ways of expressing himself is something I've kept with me in my programming career.

In their seminal book, The Pragmatic Programmer, Andy Hunt and Dave Thomas encourage us to learn a new programming language every year. I've tried to live by their advice and throughout the years I've had the experience of programming in many languages. My most important lesson from my polyglot adventures is that it takes more than just learning the syntax to learn a language: You need to understand its culture.  You can write Fortran in any language, but to truly learn a language you have to embrace the language.  Don't make excuses if your C# code is a long Main method with mostly static helper methods, but learn why classes make sense. Don't shy away if you have a hard time understanding the lambda expressions used in functional languages, force yourself to use them. 

Once you've learned the ropes of a new language, you'll be surprised how you'll start using languages you already know in new ways.  I learned how to use delegates effectively in C# from programming Ruby, releasing the full potential of .NETs generics gave me ideas on how I could make Java generics more useful, and LINQ made it a breeze to teach myself Scala.

You'll also get a better understanding of design patterns by moving between different languages. C programmers find that C# and Java have commoditized the iterator pattern. In Ruby and other dynamic languages you might still use a visitor, but your implementation won't look like the example from the Gang of Four book.

Some might argue that Finnegans Wake is unreadable, while others applaud it for its stylistic beauty. To make the book a less daunting read, single language translations are available. Ironically, the first of these was in French.  Code is in many ways similar. If you write Wakese code with a little Python, some Java, and a hint of Erlang, your projects will be a mess. If you instead explore new languages to expand your mind and get fresh ideas on how you can solve things in different ways, you will find that the code you write in your trusty old language gets more beautiful for every new language you've learned.

The 'episodes' #28, #29, #30 will come in the next posting :)

Cheers!

Things Every Programmer Should Know: $22, #23, #24

2010-03-28T12:50:00.009+02:00

Here are the 97 Things Every Programmer Should Know project, pearls of wisdom for programmers collected from leading practitioners, published by O'Reilly (license link).

You can go to read the previous very interesting points #19, #20, #21.

22. Do Lots of Deliberate Practice by Jon Jagger

Deliberate practice is not simply performing a task. If you ask yourself "Why am I performing this task?" and your answer is "To complete the task," then you're not doing deliberate practice.

You do deliberate practice to improve your ability to perform a task. It's about skill and technique. Deliberate practice means repetition. It means performing the task with the aim of increasing your mastery of one or more aspects of the task. It means repeating the repetition. Slowly, over and over again. Until you achieve your desired level of mastery. You do deliberate practice to master the task not to complete the task.

The principal aim of paid development is to finish a product whereas the principal aim of deliberate practice is to improve your performance. They are not the same. Ask yourself, how much of your time do you spend developing someone else's product? How much developing yourself?

How much deliberate practice does it take to acquire expertise?

Peter Norvig writes that "It may be that 10,000 hours [...] is the magic number."

In Leading Lean Software Development Mary Poppendieck notes that "It takes elite performers a minimum of 10,000 hours of deliberate focused practice to become experts."

The expertise arrives gradually over time — not all at once in the 10,000th hour! Nevertheless, 10,000 hours is a lot: about 20 hours per week for 10 years. Given this level of commitment you might be worrying that you're just not expert material. You are. Greatness is largely a matter of conscious choice. Your choice. Research over the last two decades has shown the main factor in acquiring expertise is time spent doing deliberate practice. Innate ability is not the main factor.

Mary: "There is broad consensus among researchers of expert performance that inborn talent does not account for much more than a threshold; you have to have a minimum amount of natural ability to get started in a sport or profession. After that, the people who excel are the ones who work the hardest."

There is little point deliberately practicing something you are already an expert at. Deliberate practice means practicing something you are not good at.

Peter: "The key [to developing expertise] is deliberative practice: not just doing it again and again, but challenging yourself with a task that is just beyond your current ability, trying it, analyzing your performance while and after doing it, and correcting any mistakes."

Mary: "Deliberate practice does not mean doing what you are good at; it means challenging yourself, doing what you are not good at. So it's not necessarily fun."

Deliberate practice is about learning. About learning that changes you; learning that changes your behavior. Good luck.

23. Domain-Specific Languages by Michael Hunger

Whenever you listen to a discussion by experts in any domain, be it chess players, kindergarten teachers, or insurance agents, you'll notice that their vocabulary is quite different from everyday language. That's part of what domain-specific languages (DSLs) are about: A specific domain has a specialized vocabulary to describe the things that are particular to that domain.

In the world of software, DSLs are about executable expressions in a language specific to a domain with limited vocabulary and grammar that is readable, understandable, and — hopefully — writable by domain experts. DSLs targeted at software developers or scientists have been around for a long time. For example, the Unix 'little languages' found in configuration files and the languages created with the power of LISP macros are some of the older examples.

DSLs are commonly classified as either internal or external:

Internal DSLs are written in a general purpose programming language whose syntax has been bent to look much more like natural language. This is easier for languages that offer more syntactic sugar and formatting possibilities (e.g., Ruby and Scala) than it is for others that do not (e.g., Java). Most internal DSLs wrap existing APIs, libraries, or business code and provide a wrapper for less mind-bending access to the functionality. They are directly executable by just running them. Depending on the implementation and the domain, they are used to build data structures, define dependencies, run processes or tasks, communicate with other systems, or validate user input. The syntax of an internal DSL is constrained by the host language. There are many patterns — e.g., expression builder, method chaining, and annotation — that can help you to bend the host language to your DSL. If the host language doesn't require recompilation, an internal DSL can be developed quite quickly working side by side with a domain expert.

External DSLs are textual or graphical expressions of the language — although textual DSLs tend to be more common than graphical ones. Textual expressions can be processed by a tool chain that includes lexer, parser, model transformer, generators, and any other type of post-processing. External DSLs are mostly read into internal models which form the basis for further processing. It is helpful to define a grammar (e.g., in EBNF). A grammar provides the starting point for generating parts of the tool chain (e.g., editor, visualizer, parser generator). For simple DSLs, a handmade parser may be sufficient — using, for instance, regular expressions. Custom parsers can become unwieldy if too much is asked of them, so it makes sense to look at tools designed specifically for working with language grammars and DSLs — e.g., openArchitectureWare, ANTlr, SableCC, AndroMDA. Defining external DSLs as XML dialects is also quite common, although readability is often an issue — especially for non-technical readers.

You must always take the target audience of your DSL into account. Are they developers, managers, business customers, or end users? You have to adapt the technical level of the language, the available tools, syntax help (e.g., intellisense), early validation, visualization, and representation to the intended audience. By hiding technical details, DSLs can empower users by giving them the ability to adapt systems to their needs without requiring the help of developers. It can also speed up development because of the potential distribution of work after the initial language framework is in place. The language can be evolved gradually. There are also different migration paths for existing expressions and grammars available.

24. Don't Be Afraid to Break Things by Mike Lewis

Everyone with industry experience has undoubtedly worked on a project where the codebase was precarious at best. The system is poorly factored, and changing one thing always manages to break another unrelated feature. Whenever a module is added, the coder's goal is to change as little as possible, and hold their breath during every release. This is the software equivalent of playing Jenga with I-beams in a skyscraper, and is bound for disaster.

The reason that making changes is so nerve wracking is because the system is sick. It needs a doctor, otherwise its condition will only worsen. You already know what is wrong with your system, but you are afraid of breaking the eggs to make your omelet. A skilled surgeon knows that cuts have to be made in order to operate, but the skilled surgeon also knows that the cuts are temporary and will heal. The end result of the operation is worth the initial pain, and the patient should heal to a better state than they were in before the surgery.

Don't be afraid of your code. Who cares if something gets temporarily broken while you move things around? A paralyzing fear of change is what got your project into this state to begin with. Investing the time to refactor will pay for itself several times over the life cycle of your project. An added benefit is that your team's experience dealing with the sick system makes you all experts in knowing how it should work. Apply this knowledge rather than resent it. Working on a system you hate is not how anybody should have to spend their time.

Redefine internal interfaces, restructure modules, refactor copy–pasted code, and simplify your design by reducing dependencies. You can significantly reduce code complexity by eliminating corner cases, which often result from improperly coupled features. Slowly transition the old structure into the new one, testing along the way. Trying to accomplish a large refactor in "one big shebang" will cause enough problems to make you consider abandoning the whole effort midway through.

Be the surgeon who isn't afraid to cut out the sick parts to make room for healing. The attitude is contagious and will inspire others to start working on those cleanup projects they've been putting off. Keep a "hygiene" list of tasks that the team feels are worthwhile for the general good of the project. Convince management that even though these tasks may not produce visible results, they will reduce expenses and expedite future releases. Never stop caring about the general "health" of the code.

The 'episodes' #25, #26, #27 come in the next posting :)

Cheers!