StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In one of my projects I was asked to design a spinner item which is dressed to look good on a mobile web app. Then we realized we actually need another view for our spinner which is 'thinner' as well. So I have tried to aplly the MVP approach to my widget implementation which worked well for me. This one below is a very simple example not for production use just for the sake of demonstration</p> <p>Define a Presenter and a View interface as in MVP pattern. The point here is to make the view implementations dumb so they can be switched without a hassle. Note that Spinner is not actually a Widget but it implements IsWidget which means it will be treated like a widget but in fact we will be passing the reference of our view implementation.</p> <pre><code>public class Spinner implements IsWidget, SpinnerPresenter{ interface View{ Widget asWidget(); void stepUp(int step); void stepDown(int step); void setValue(int value); void setPixelSize(int width,int height); } View view; int value; public Spinner() { view = new SpinnerImpl(this); view.setValue(0); } public int getValue() { return value; } public void setValue(int value) { if (value == this.value) return; this.value = value; view.setValue(value); } public void setPixelSize(int width, int height){ view.setPixelSize(width,height); } @Override public void downButtonClicked() { value--; view.stepDown(1); } @Override public void upButtonClicked() { value++; view.stepUp(1); } @Override public Widget asWidget() { return view.asWidget(); } } </code></pre> <p>And the view Implementation itself which implements the view interface defined in Spinner class. Notice how we delegate user events to Spinner class to be handled over the SpinnerPresenter interface.</p> <pre><code>public class SpinnerImpl extends Composite implements Spinner.View{ private TextBox txtBox; private Button upButton,downButton; private HorizontalPanel panel; private SpinnerPresenter presenter; public SpinnerImpl(SpinnerPresenter presenter){ this.presenter = presenter; upButton = new Button("up"); downButton = new Button("down"); txtBox = new TextBox(); txtBox.setEnabled(false); panel = new HorizontalPanel(); panel.add(upButton); panel.add(txtBox); panel.add(downButton); addHandlers(); initWidget(panel); } private void addHandlers() { upButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { presenter.upButtonClicked(); } }); downButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { presenter.downButtonClicked(); } }); } @Override public void stepDown(int step) { txtBox.setValue(Integer.parseInt(txtBox.getValue())-1+""); } @Override public void stepUp(int step) { txtBox.setValue(Integer.parseInt(txtBox.getValue())+1+""); } @Override public void setValue(int value) { txtBox.setValue(0+""); } } </code></pre> <p>SpinnerPresenter interface :</p> <pre><code>public interface SpinnerPresenter { void upButtonClicked(); void downButtonClicked(); } </code></pre> <p>Finally to add my widget to rootpanel. Notice I can add spinner class as if it was a widget</p> <pre><code>Spinner s = new Spinner(); RootPanel.get().add(s); </code></pre> <p>Now if i wanted to change the way my spinner item looks, change orientation, maybe add a fancy animation for spinning etc, I need only to change my View Implementation. Last but not least when it comes to testing my widget this approach will help since I can easily mockup my view.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload