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);
      }

Widget MVP Templates

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, SynapseWidgetPresenter {

	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, SynapseWidgetView {

	/**
	 * 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. You should generally instantiate view objects in the constructor, and add the main content-containing element for this view in the onRender(...) method with a simple add(myContent) call.

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

import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Widget;
import com.google.inject.Inject;

public class DatasetEditorViewImpl extends LayoutContainer implements DatasetEditorView {

	private Presenter presenter;

	@Inject
	public DatasetEditorViewImpl() {
	}

	@Override
	protected void onRender(Element parent, int pos) {
		super.onRender(parent, pos);
	}

	@Override
	public Widget asWidget() {
		return this;
	}


	@Override
	public void setPresenter(Presenter presenter) {
		this.presenter = presenter;
	}

}