Creating a Custom UI Widget

This page attempts to describe the code needed to create a new UI Widget using the Ext GWT (GXT) toolkit. Our widgets follow a Model-View-Presenter format that isolates business logic of the widget in a Presenter and the view implementation in a ViewImpl. You will need to create three files, prefereably in an appropriate sub package of org.sagebionetworks.web.client.widget

To use a widget like this, follow these steps:

Steps

1. Create your widget classes using the templates below.
2. Write a test for your Presenter if you write business logic into it.
3. In the PortalGinModule class, force your ViewImpl to be a Singleton and bind the ViewImpl to its View

   1. //DatasetEditor
      bind(DatasetEditorViewImpl.class).in(Singleton.class);
      bind(DatasetEditorView.class).to(DatasetEditorViewImpl.class);

4. Inject the Presenter class into the class that you're using. This automatically injects the ViewImpl into the presenter, and you have a fully ready object. When you want to add this to a UiBinder class, simply add it to a SimplePanel
   1. In your UiBinder (ui.xml) file

      <g:SimplePanel ui:field="editorPanel" />

   2. In your ViewImpl class

      @UiField
      SimplePanel adminPanel;
      
      @Inject
      public SomeViewImpl(..., DatasetEditor datasetEditor) {
      	adminPanel.add(datasetEditor);
      }

Presenter

The presenter stores the business logic. This is where your widget would, say, make calls to a remote service. Often the Presenter will also have several pass through methods for the view like "setTitle(...)".

package org.sagebionetworks.web.client.widget.editpanels;

import com.google.gwt.user.client.ui.Widget;
import com.google.inject.Inject;

public class DatasetEditor implements DatasetEditorView.Presenter {

	private DatasetEditorView view;

	@Inject
	public DatasetEditor(DatasetEditorView view) {
		this.view = view;
		view.setPresenter(this);
	}

	public Widget asWidget() {
		return view.asWidget();
	}

}

View

The view interface defines the view and the Presenter interface--the view's method to make conceptual business logic calls like "saveValues(...)"

package org.sagebionetworks.web.client.widget.editpanels;

import com.google.gwt.user.client.ui.IsWidget;

public interface DatasetEditorView extends IsWidget {

	/**
	 * Set the presenter.
	 * @param presenter
	 */
	public void setPresenter(Presenter presenter);


	/**
	 * Presenter interface
	 */
	public interface Presenter {

	}
}

ViewImpl

The ViewImpl implements its view and extends LayoutContainer. LayoutContainer is Ext GWT's base container (widget) class.