Creating a Widget with Google Web Toolkit and opentaps

This tutorial shows you how to create a widget with the Google Web Toolkit (GWT) for opentaps. In opentaps, we have already implemented common user interface components, such as screenlets, form fields, auto completion, and lists, based on GWT Ext, which is an open source library that extends the standard GWT. This tutorial will show you how to build a widget using these opentaps GWT components and wire them to the user-facing forms and back end business logic.

Setting up the Files

Create new hot-deploy/crmsfa/src/org/opentaps/gwt/crmsfa/cases with cases.gwt.xml

Create hot-deploy/crmsfa/src/org/opentaps/gwt/crmsfa/cases/client/Entry.java

Creating the Widget

Entry.java references the same quickNewCase:

private static final String QUICK_CREATE_CASE_ID = "quickNewCase";
public void onModuleLoad() {
   	if (RootPanel.get(QUICK_CREATE_CASE_ID) != null) {
  // ...

Add cases to crmsfa build.xml:

 <property name="gwt.module.list" value="contacts,accounts,leads,partners,orders,cases"/>

Now create QuickNewCaseForm and QuickNewCaseConfiguration. QuickNewCaseForm extends ScreenletFormPanel and is the form. For example, it has a TextField for subjectInput and so forth. QuickNewCaseConfiguration is used to hold the literal values on the QuickNewCaseForm, such as the names of the fields. They could be strings in QuickNewCaseForm as well. UI labels are available through UtilUi.MSG: for example, UtilUi.MSG.crmCreateCase() is CrmCreateCase

Putting it on the Screen

Finally, load the GWT widget on the opentaps screen by adding it to the list of GWT scripts for your screen. This is done by modifying the screens XML definition in hot-deploy/crmsfa/widget/crmsfa/screens/cases/CasesScreens.xml and adding our GWT widget to the main decorator, which causes it to show up for all the case screens:

   <screen name="main-section-decorator">
       <section>
           <actions>
               <set field="gwtScripts[]" value="crmsfagwt/org.opentaps.gwt.crmsfa.cases.cases" global="true"/>
               <set field="sectionName" value="cases" global="true"/>

Link Entry.java to opentaps page by modifying hot-deploy/crmsfa/webapp/crmsfa/cases/screenlets/quickCreateCase.ftl and adding:

<@gwtWidget id="quickNewCase"/>

Linking it to the Services

To hook it up to the back end, use the gwt service event handler in the controller, like this:

     <request-map uri="gwtQuickNewCase">
       <security https="true" auth="true"/>
       <event type="gwtservice" invoke="crmsfa.createCase"/>
       <response name="success" type="none"/>
       <response name="error" type="none"/>
   </request-map>