MVP pattern for Tabbed UI (Each Tab = Unique Module e.g. Orders)

[j.singh.developer]

I have a requirement to implement a tabbed UI where each tab will
serve a unique module e.g. Orders, Reports, Users, etc. I am not able
to visualize how would I implement an MVP pattern in a such a
scenario. I also have to provide breadcrumb trail.

Any guidance or pointing to resources would be really appreciated.
Thanks

[Philippe Beaudoin]

You may want to take a look at http://gwtplatform.com an MVP framework with built-in support for tabbed presenterd and breadcrumbs. Might not be exactly what you're looking for, but it may help get the conversation started...

Cheers!

    Philippe

[Jatinder Pal Singh]

Thanks very much. Yes I have heard of GWTP. But I wanted to stay with the original MVP pattern offered by Google. I don't know if GWTP is the way to go.

[Philippe Beaudoin]

For info, GWTP is looking to merge back with the GWT MVP classes. The goal is to offer a nice annotation-based alternative to the complex setup and boilerplate often required to wire together a large MVP app. In addition to features such as simple tab presenters or hierarchical name tokens, which are not yet part of the GWT's MVP.

If you're curious, there is going to be a talk at Google I/O partly of GWTP:

  http://127.0.0.1:8888/Puzzlebazar.html?gwt.codesvr=127.0.0.1:9997#!main
See:
  Highly Productive GWT: Rapid Development with App Engine, Objectify, RequestFactory, and gwt-platform

[Philippe Beaudoin]

Sorry, wrong link:

  http://www.google.com/events/io/2011/sessions.html

[Y2i]

From my experience TabPanel does not fit with MVP, but TabBar on top of a client area fits well.

Use DockLayoutPanel, place TabBar into <g:north> and the client area into <g:center>

[Jatinder Pal Singh]

Y2i, thanks for the suggestion. That sounds like a good idea. I was wondering if there's an existing sample app that does things similar to what I want to achieve. It would be really helpful.

Thanks once again!

[Y2i]

I'm not aware of an existing sample app, but it's not hard to implement.  Start from this tutorial http://code.google.com/webtoolkit/doc/latest/DevGuideMvpActivitiesAndPlaces.html

In the entry point http://code.google.com/webtoolkit/doc/latest/DevGuideMvpActivitiesAndPlaces.html#Putting_it_all_together

Instead of SimplePanel create DockLayoutPanel.  Add TabBar as a north widget, and a SimplePanel as the center widget.

Initialize the TabBar with tabs

Add SelectionHandler<Integer> to the TabBar

In the selection handler call placeCotroller.goTo() depending on which tab is selected.

Set SimpleWidget as the display of the activityManager.

Add the DockLayoutPanel to the RootPanel at the end. 

You also have to create a presenter, a view, a view implementation (that implements the view) and an activity (that implements the presenter) for each tab.

[Philippe Beaudoin]

I concur with Y2i regarding the use of a top TabBar, I'm using a
similar approach.

Other things you may want to add:
- Loose coupling between TabBar and content presenters (they are not
injected in one another).
The TabBar sends an event on the bus to discover and collect all the
content presenters it should handle.
The TabBar sends an event when a tab is clicked to display the
corresponding presenter.
- History support
You may want each tab to corresponds to a different history token.
This one is trickier to do as it requires two way communication
between the content presenters and the TabBar presenter: when a
presenter is displayed, it needs to tell the TabBar which tab to
highlight.
- Nested tabs
It gets slightly trickier if you want to support TabBars within
TabBars, à-la Google Code

You can have a look at GWTP for inspiration on how to do all of the above.

Cheers,

Philippe

> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-tool...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.
>