how to create a master page or a page which is in common to all the views using gwt mvp

Question

Hi I am new to GWT MVP pattern. I am from asp.net background and currently I am working on GWT and I am asked to create a Master page which has the menu items which should be in common to all the views. Initially I created a sample mvp project using https://developers.google.com/web-toolkit/articles/mvp-architecture-2 and in that there is navigation from one view to another. How do I maintain one view constant and keep changing the other views depending on what menu item we click. Please help

Answer 1

You divide your screen into two or more areas, and assign dedicated ActivityMapper and ActivityManager to each zone. For example, one zone can be "menu" with MenuActivityManager, and the other zone "body" with BodyActivityManager.

Here is a good explanation: http://blog.ltgt.net/gwt-21-activities-nesting-yagni/

Note that there are both pros and cons for using this method. Browsers take milliseconds to render standard html. It may be easier to create a widget mainMenu and include it (best of all, using UiBinder) into every view, rather than deal with two activity managers.

Answer 2

The article you mentioned is from before MVP support added in GWT. It's good at explaining the concept, but the actual implementation is less useful. To continue take a look at the GWT documentation about activities: https://developers.google.com/web-toolkit/doc/latest/DevGuideMvpActivitiesAndPlaces . There you will also find the solution for your problem. In brief, take a look at the ActivityManager. This manages all activities. On the activity manager you set one widget that will be static for all activities. This widget must have a method setWidget (actually it must implement AcceptsOneWidget). In each of your activity implementations you get this widget via the start method. And by calling setWidget with the specific view for that activity in the start method you set the activity specific view. This is all described very briefly, but you should get the concept if you read the mentioned documentation.

Answer 3

If you are working with UiBinder, your ui.xml file should be like this,

 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>
</ui:style>

<g:DockLayoutPanel unit="EM">
    <g:north size="4">
        //Add Logo, menus or what you want to be displayed for all the pages 
    </g:north>
    <g:center>
        //Add code for your desired UI. In java code you change the UI by this "flowpanel"
        For eg: <g:FlowPanel ui:field="flowpanel" />
    </g:center>
</g:DockLayoutPanel>

Then everytime you can clear and add the widgets to be displayed in the view in the <g:center> using your java code like this flowpanel.clear(); flowpanel.add(anyWidget you need).

So <g:north> will be static view and <g:center> will be dynamic view. Now you will get the page as you desired. Since you can change everytime your view on <g:center> only.

Like this you can add <g:east>, <g:west> and g:south> if required.

If you are not working with UiBinder then do everything in your java code as follows,

    final DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Style.Unit.EM);
    dockLayoutPanel.addNorth(any widget you need, "4"); //NorthPanel
    dockLayoutPanel.add(any widget you need);   //CenterPanel

Where "4" is the size of the panel, you can change it.

Like this dockLayoutPanel.addWest(any widget you need, "4"); //WestPanel dockLayoutPanel.addEast(any widget you need, "4");//EastPanel
dockLayoutPanel.addSouth(any widget you need, "4"); //SouthPanel

I hope you got idea now.