SmartGWT Intro

SmartGWT's JavaDoc includes both reference and conceptual overview information. As you browse through the JavaDoc, be sure not to miss the com.smartgwt.client.docs package, which contains dozens of chapters of overview materials on various SmartGWT subsystems.

In addition to the conceptual material in JavaDoc, some conceptual overviews in the SmartClient QuickStart Guide can be used with SmartGWT. The following chapters are HIGHLY RECOMMENDED:

Chapter 6, Data Binding
Chapter 7, Layout
Chapter 8, Data Integration

The following overviews in the SmartGWT JavaDoc are also HIGHLY RECOMMENDED:

Client-Server Integration (Overview of server integration approaches)
  Client-side Data Integration (approaches for SmartGWT)
  Server DataSource Integration (approaches for SmartGWT Pro & Enterprise)

Tree DataBinding Overview
Form Layout Overview
Grid Inline Editing Overview

Debugging (SmartClient Diagnostic Tools)

Custom Components

You can subclass and extend SmartGWT's widgets and other components using normal Java techniques. Chapter 9 of the SmartClient QuickStart Guide (Extending SmartClient) provides some valuable tips for the most effective and common ways of extending the built-in components.

In the Customized Components subsection, the method calls shown do not apply to SmartGWT. To do the equivalent of the addProperties() calls shown, create a normal Java subclass and call setters from it's constructor.

In the New components subsection, the method calls shown do not apply to SmartGWT, however, the 3 strategies for custom component creation do apply. The 3rd strategy (Create a Layout subclass that generates and manages a set of other components) is the most common.

In the New Form Controls subsection, the strategy of adding an icon to an existing FormItem type as a simple way to make a customized FormItem class makes sense in SmartGWT, but is accomplished via the FormItemIcon class and FormItem.setIcons() setter, which should be called from the constructor of a FormItem subclass.

Skinning

In SmartGWT, skins are packages as GWT modules. To change to a different default skin, change which GWT module you are including instead.

SmartGWT can be skinned via the SmartClient skinning system, as covered in the Skinning Guide. SmartClient skinning uses standard CSS along with a few settings that are controlled in a JavaScript file called load_skin.js. load_skin.js consists almost entirely of simple JSON blocks of property settings and does not require JavaScript, DOM or CSS expertise to edit.

The structure of a SmartClient and SmartGWT skin differs only in the root path. In a SmartClient skin, the directory: 

    isomorphic/skins/ThemeName
.. is equivalent to the path .. 
    com.smartclient.theme.themeName.public.sc.skins.ThemeName
.. within smartgwt-skins.jar.

All subdirectories and the meaning of all resources are the same, with the addition that a new SmartGWT theme requires must be packaged as a standard GWT module like the built-in skins.

Translating SmartClient Samples

Because SmartGWT and SmartClient are fundamentally similar systems, any time you encounter a SmartClient example or code sample (in SmartClient documentation, in the SmartClient forums, or elsewhere on the web) that sample can generally be translated to SmartGWT via a straightforward process. The following table will help in translating:

SmartClientSmartGWT
Reference in documentation to a property ClassName.propertyName A Java class ClassName with a setter method setPropertyName and a getter method getPropertyName
Creation of visual components, DataSources and other objects. 
isc.ClassName.create({
    firstProperty : firstValue,
    secondProperty : secondValue,
    ...
})

ClassName obj = new ClassName();
obj.setFirstProperty(firstValue);
obj.setSecondProperty(secondValue);
...
Creation of ListGrids, DataSources, DynamicForms and other objects which are configured with a list of fields. 
isc.ListGrid.create({
    fields : [
       { name : "projectName", title:"Team Name", type:"text" },
       { name : "stateDate", title:"Start Date", type:"date" },
       ...
    ]
})

ListGrid grid = new ListGrid();

ListGridField projectNameField = new ListGridField();
projectNameField.setName("projectName");
projectNameField.setTitle("Project Name");
projectNameField.setType(ListGridFieldType.TEXT);

ListGridField startDateField = new ListGridField();
projectNameField.setName("startDate");
projectNameField.setTitle("Start Date");
projectNameField.setType(ListGridFieldType.DATE);

...

grid.setFields(projectNamefield, startDateField);
Note that ListGridField actually has shortcut constructors that simplify this, eg, 
new ListGridField("startDate", "Start Date");