In short: when you have troubles with echo or other bash commands overwriting a string instead of appending something, check whether all involved files are  in UNIX and NOT in  DOS format. The easiset is to do a dos2unix for all involved files which hopefully solves your problem.

In the simplest setting that reproduces the issue, you have a file with several lines, that you want to processwith bash, and processing includes concatenating some other text to each line.

Let’s assume the file is test.txt and looks like this:

aaaaaa
bbbbbb
cccccc

bash command that iterates over each line, and prints it in the form  “line: ${line} end”:

while read line; do echo "line: ${line} end"; done < test.txt

If the file is in DOS, each line ends with \r\n.  the while loop iterates over lines sepearted by \n, which leaves a trailing carriage return (\r) for each line. the carriage return eliminates everything before it. so the output of the above bash command in this case is

 end: aaaaaa
 end: bbbbbb
 end: cccccc

instead of the expected output:

line: aaaaaa end
line: bbbbbb end
line: cccccc end

A dos2unix test.txt solved the problem for me.

AppEvents

Though they are not part of the name “MVC” ( Model View Controller) they are really key to understand everything else. Everything really happens due to events. the only thing that doesn’t happen due to events is the creation of the controllers in the entrypoint, which do nothing else than registering to listen to events. The entrypoint fires the first event (typically init or login) and from than on the event loop starts and everything else is event-centric. Any gxt-application, even the simplest one, as long as it is interactive does event handling. On widget level this is done using addListener. AppEvents help you to abstract from simple widget events like onClick and to transform them to events that are meaningful for your application. You define your own Events, like “Login”, “ViewMailItem”, “CreateMailI” etc. You still add alistener to the button event, but instead of doing the business logic in the handler, the handler  does nothing else than firing the related appevent. In this way when you add new components they just have to register to the appevent to get informed about the button click, you don’t need to change the code of the widget, and if you change the widget. On the other hand you can change the widgets as you want without hurting the application logic, as long as you still fire the applicaton events.

To define the AppEvents create a class that contains a public static final EventType for each Application Event you need.

public class AppEvents {

  public static final EventType Init = new EventType();
  public static final EventType Login = new EventType();
  public static final EventType ViewMailItem = new EventType();
  [...]
}

Dispatcher and EntryPoint

The Dispatcher is responsible for dispatching events.
In the EntryPoint you create the Controllers and add them to the dispatcher

 public void onModuleLoad() {
    Dispatcher dispatcher = Dispatcher.get();
    /* Create controllers and allow them to get notified of events by adding the to the dispatcher */
    dispatcher.addController(new AppController());
    dispatcher.addController(new MailController());
    dispatcher.addController(new TaskController());
    dispatcher.addController(new ContactController());

    /* Trigger the initial event that gets the machine running */
    dispatcher.dispatch(AppEvents.Login);
  }

The controllers

• Register to AppEvents
• Initialize and know their Views
• Do the client-server communication (e.g. to load data that it then passes to its views)
• Forward Event to their Views

In the controller constructor the controller registers to AppEvents. The initialization of its variables (views etc) is deferred to the initialize method, which is called automatically by the dispatcher before it dispatches the first event to a controller. This is called lazy initialization and helps to speed up initial display of the web application as objects are initialized not in the constuctor but later on. The controller must implement the method handleEvent(AppEvent) where all the remaining logic lies. Depending on the EventType the controller contacts the server to load or update data and contacts the views to inform them about data changes that should result in changes in the web interface. You can see that events are key to gxt-mvc. All logic, event the initialization of instance variables is triggered by some kind of event. When forwarding an event to a view, the controller will often need to provide additional ionformation with the event. this can be done using appEvent.setData() before forwanding the event with forwardToView(view, appEvent)

public class MailController extends Controller {

    private MailServiceAsync service;
    private MailFolderView folderView;
    private MailView mailView;

     /* Registers to AppEvents */ 
    public MailController() {
        registerEventTypes(AppEvents.Init);
        registerEventTypes(AppEvents.NavMail);
        registerEventTypes(AppEvents.ViewMailItems);
        registerEventTypes(AppEvents.ViewMailItem);
    }

/* Does the client-server communication, Forwards Event to its Views */
    @Override
    public void handleEvent(AppEvent event) {
        EventType type = event.getType();
        if (type == AppEvents.Init) {
            forwardToView(folderView, event);
        } else if (type == AppEvents.NavMail) {
            forwardToView(folderView, event);
            forwardToView(mailView, event);
        } else if (type == AppEvents.ViewMailItems) {
            onViewMailItems(event);
        } else if (type == AppEvents.ViewMailItem) {
            forwardToView(mailView, event);
        }
    }
	private void onViewMailItems(final AppEvent event) {
		final Folder f = event.getData();
		if (f != null) {
                    /* client-server communication */
			service.getMailItems(f, new AsyncCallback>() {
				public void onSuccess(List result) {
 /* add aditional data to the event and forward if to the  view that is responsible for dislaying the data */
					AppEvent ae = new AppEvent(event.getType(), result);
					ae.setData("folder", f);
					forwardToView(mailView, ae);
				}

				public void onFailure(Throwable caught) {
					Dispatcher.forwardEvent(AppEvents.Error, caught);
				}
			});
		}

	}
 /* Initializes and know its Views, Deferred Initialization */
    public void initialize() {
        service = (MailServiceAsync) Registry.get(Mail.SERVICE);

        folderView = new MailFolderView(this);
        mailView = new MailView(this);
    }

}

The Views

• Create and add widgets to the layout container/ viewport
• handle application events (forwarded to them by their controllers) which should result in UI changes
• listen to widget events and dispatch them as particular application events

Views don’t register themselves for application events as a controller does. But they can get application events that are forwareded to them by their controller. They are responsible to update the widgets with new data, change their visility etc. they act as interface between the widgets and the controllers. They listen to widget events (onclik, selectioChanged, …) and inform whoever is intrested in this user interaction by calling dispatcher.forwardEvent(). to dispatch an event using the dispatcher to any interested  controller).THe view can also forward an event only to its own contrllers and their parents using fireEvent(). (I’m not sure wether or when its a good idea to call fireEvent(). actually the view should not know anything about its controller, so alling dispatcher.forwardEvent() seems cleaner to me).

Where to go from here

• Theres antoher summarizing intro to the gxt-mvc with simple nice charts.
• Some argue that the gxt-mvc pattern is quite flawed, not least because of the dependencies between the view and controller. I recommend you read this blog post “Why Ext-GWT MVC is broken” by Olivier Gérarding. Also have a look at this forum post “stop the insanity”..
• If you come to the conclusion that you don’t want to use ext-gwt mvc have a look at the alterniatives in Survey of MVC Frameworks for GWT:  from Jim Leskos Blog
• or checkout this interesting video session on GWT Best Practices from Google I/O 2008.

For example to access the file default.properties from a GWT RemoteServiceServlet in myApp just call

public class MyServiceImpl extends RemoteServiceServlet implements ...{
[...]
   // path of default.properties in you webapp: 
   String filepath = this.getServletContext().getRealPath("default.properties");  
   // filepath will be /<full-path-to>/<servlet-container>/webapps/myApp/default.properties
[....]

I realised this by discovering a bug in the grid GridDropTarget. After reporting this on a Friday in the gxt-bugs forum, I was pretty overwhelmed when I got a reply next Monday that the bug was fixed, together with the revision number of the code fix. Whow! So I go, where can i checkout the code? Well, actually you can’t unless you have a support subscription (299$). So this leaves me waiting for the next (edit: major) release, or having to understand the bug and fix it myself, because no patch or code was added to the post.

The reaction time is fantastic, but what does it help? its just like it was not fixed until the next release.

See also

• http://www.extjs.com/forum/showthread.php?t=46924
• http://code.google.com/p/extjs-public/

For the imeasure elearning application, I needed an abstract list of search results. Abstract in the way that the search results did not link to a specific item, they did not even have a title or any metadata assigned. the only relevant property was wether an item was considered relevant or not-relevant. As a first version, I created a grid with only one column, with the text “relevant” or “not relevant”. To add some visual aid, relevant items had a green font-color, irrelevant items were red.

GridCellRenderer<SearchResult> relevantRenderer = new GridCellRenderer<SearchResult>() {
 public String render(SearchResult model, String property, ColumnData config, int rowIndex,
 int colIndex, ListStore<SearchResult> store, Grid<SearchResult> grid) {
 boolean val = (Boolean) model.get("sr_relevant");
 String style = val ? "green" : "red";
return "<span style='color:" + style + "'>" + (val ? "relevant" : "not relevant") + "</span>";
}
 };

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
ColumnConfig column = new ColumnConfig();
column.setId("sr_title");
column.setRenderer(relevantRenderer);
column.setAlignment(HorizontalAlignment.CENTER);
configs.add(column);
ListStore<SearchResult> store = new ListStore<SearchResult>();
 store.add(SearchResult.getSearchResults(DEFAULT_RET, DEFAULT_RELRET));

 ColumnModel cm = new ColumnModel(configs);

 Grid<SearchResult> grid = new Grid<SearchResult>(store, cm);

But what i really wanted, was the background to  change color, not the font.

Adapting the GridCellRenderer and replacing color with background-color only changes the background color around the letters, and not for the whole line. Also it doesn’t behave well with background changes of the row on selection or hower. The right appraoch is to set the style of the rows. To do this, first define your own css and add it to the html AFTER the Ext.css. Ext assignes certain classes to rows. the default class of a ext-grid row is “x-grid3-row”, in addition the class “x-grid3-row-selected” is assigned when a row is selected and “x-grid3-row-over” when the mouse is placed over it. there’s also “x-grid3-row-alt” which is set to every other row, if grid grid.setStripeRows(true). We define our own classes that work in conjunction with these ext classes. .class1.class2 means apply this rule if element has both class1 and class2. Attention: there’s now space between the two classes. if you add a space like in “.class1 .class2″ the styling is applied to elements with .class2 that are nested below elements with .class1. To check out which css classes are used, i recommend using firebug HTML inspection. You can even edit the css inline and test the effects!

/* Format for the abstract search result list */
.row-relevant.x-grid3-row {
 background-color:#83D683 !important;
}
.row-relevant.x-grid3-row-selected {
 background-color:#48BF47 !important;
}

.row-relevant.x-grid3-row-over{
 background-color:#48BF47 !important;
 background-image:none !important;
}

.row-notrelevant.x-grid3-row {
 background-color:#FF6666;
}
.row-notrelevant.x-grid3-row-selected {
 background-color:#EF3B3B !important;
}
.row-notrelevant.x-grid3-row-over {
 background-color:#EF3B3B !important;
 background-image:none !important;
}

Now we need to hook our grid to use these classes. To do this implement your own GridViewConfig and override getRowStyle.

	public class GVC extends GridViewConfig
	{
		@Override
		public String getRowStyle(ModelData model, int rowIndex,
				ListStore<ModelData> ds) {
			if (model != null)
			{
				if (model.get("sr_relevant"))
					return "row-relevant";
				else
					return "row-notrelevant";
			}
			return "";
		}
	}

The following code sets up our grid to use our own GridViewConfig and changes the CellRenderer, to use  white font-color

        GridCellRenderer<SearchResult> relevantRenderer = new GridCellRenderer<SearchResult>() {
            public String render(SearchResult model, String property, ColumnData config, int rowIndex,
                    int colIndex, ListStore<SearchResult> store, Grid<SearchResult> grid) {
                boolean val = (Boolean) model.get("sr_relevant");
                return "<span style='color:white;'>" + (val ? "relevant" : "not relevant") + "</span>";
            }};

[...]

grid.getView().setViewConfig(new GVC());

The following tools and resources will help you with similar use cases:

• ColorZilla , a firefox plugin that helps you selecting nice colors
• ExtJS Forum, especially the following threads:
  • Changing the background of a Grid
  • How can I change the background color to a Grid row?
• And for debugging Firebug and  Eclipse of course

FormPanel.setLabelWidth and FormPanel.setFieldWidth have no effect

Check that you didn’t define a FormLayout for the form. If you define a FormLayout you have to use the methods of the layout, cause they override the settings in the form itself.

FormPanel form = new FormPanel();
form.setLayout(new FormLayout()) // <-- Remove this Line
form.setLabelWidth(150);

panel.addText(“foo”) doesn’t work

Problem: when adding text dynamically (after onRender) this call did not change the text of the panel.
Solution: add a call to pane.layout() after panel.addText(). to replace the existing text with new text, call panel.removeAll() first.

panel.addText("foo");
panel.layout(); // <-- Add this line

SerializationException

Problem: My RPC call throws the following exception:

[WARN] Exception while dispatching incoming RPC call
com.google.gwt.user.client.rpc.SerializationException:
java.lang.reflect.InvocationTargetException
....
Caused by: com.google.gwt.user.client.rpc.SerializationException:
 Type 'java.lang.Double' was not included
 in the set of types which can be serialized by this SerializationPolicy
 or its Class object could not be loaded.
 For security purposes, this type will not be serialized.: instance = 0.5

FIrst you should understand the RPC Serialization mechanism, by reading this FAQ entry. So when GWT complains it can’t serialize a standard type like java.lang. Boolean, Integer, Double etc, for which you know it could in principle serialize it, this error is due to the compiler not being able to detect that this class is needed in rpc. (e.g. because you declare List<Object> in your interface, and not the concrete List<Double>). I had this problem with the followig object variable in one of my classes that was used in an interface.

FastMap<Double> measureMap

This was the only occurence of Double in my RPC interfaces, and the compiler apparently didn’t detect it. It was not included in the whitelist files (war/<project-name>/<HASH>.gwt.rpc). I solved this by adding a dummy double variable

FastMap<Double> measureMap
Double dummy; /* <-- add this dummy variable so the compiler detects that
                 Double serialization support is needed. */

Alternatively define a separate dummy class, that defines variables of all the classes you need to be serialized to have these dummy variables in one place, separated from the real code.

Further reading: Stack Overflow entry “How do I add a type to GWT’s Serialization Policy List?“

1. Install Eclipse
2. Install the Google Plugin for Eclipse, follow the isntructions there, restart eclipse after installing the plugin
3. Create a new GWT project:
   1. File > New > Web Application Prject
   2. Provide a project name (e.g. FirstGwtApp) and a package (e.g. org.mystuff.gwt)
   3. Uncheck the checkbox “Use Google App Engine”
4. To start Run As > Webbapliation
5. A Tab  “Development mode” is displayed below the main elipse editing window.  Copy the url given there to your browser.

Step 3 will create a very simple  application, that demonstrates all the basic stuff:

• How the User Interface is set up – see client.<pojectname>
• How to define Services -  see client.GreetingService, client.GreetingServiceAsync.java and server.GreetingServiceImpl