Best Practices for MVP with Composite Template View ( Header + Content + Nav + Footer) + UiBinder

[digitalsam007]

Hello,

I have been trying to implement the MVP pattern in my new GWT app. I
have followed the Contacts example app and it seems to be quite
straightforward. In there, the controller passes the root
panel(container) to every presenter in its go method. And these
presenters add the respective view(Display) to the container.

However, in my case I have to use a template with Header, footer,
Navigation and Content. Something quite similar to the Mail sample app
found in the GWT SDK. I tried to create a wrapper view class and its
corresponding Presenter and included all the 4 diffrent views viz
header, footer, nav and content in it ( WrapperView.ui.xml).

I provided extra methods in the WrapperView that can return HasWidgets
for each of the segments in the page like this -

HasWidgets getHeaderContainer()
HasWidgets getContentContainer()
HasWidgets getFooterContainer()
HasWidgets getNavContainer()

In the WrapperView.ui.xml , i added a dockLayoutPanel which inturn
contains each of these containers ( each container elemensta re in
turn SimplePanel components which contains the actual widgets for
Header, footer...etc)

<g:DockLayoutPanel unit='EM'>
<g:north size='5'>
<miab:HeaderContainerView ui:field='headerContainer' />
</g:north>
<g:center>
<miab:ContentContainerView ui:field='contentContainer' />
</g:center>
<g:south size="2">
<miab:FooterContainerView ui:field='footerContainer' />
</g:south>
</g:DockLayoutPanel>

So, the first time when the module loads and the AppController.go
method is invoked I trigget the history with a new tocket eg Home.
This invokes the valueChanged method and in that I create the
WrapperView (if not already created; yes i maintain a reference to
this object in AppController) and present it on screen. Then, I call
the views getContentContainer method and try to add the content
directly to that in another presenter. I do not pass the topmost
container this time.

Logically it should work and the content area must be refreshed with
the respective Views when diffrent presenter presents it. But
unfortunately I cannot achieve what I want to yet. So, could anyone of
you provide me with some ideas or may share with me the best way of
achieving this usecase?

Any help in this regard will be highly appreciated

Regards

Sam

[Prashant Hegde]

I am using a similar strategy and it works just fine. I suspect it may
be a problem with your DockLayoutPanel sizing. Please check if the sizes
are 100%, also give the panel a border for debugging to see how your
layout looks...

If it helps, I have listed my UiBinder file.

<ui:style>
.layout {
border-width:1px;
border-style:solid;
width: 100%;
height: 100%;

}

.mainlayout {
width: 100%;
height: 100%;
position:relative;
top:2em;
left: 2em;
}
</ui:style>
<g:DockLayoutPanel styleName='{style.mainlayout}' unit='EM'>
<g:north size='2' unit="EM">
<g:FlowPanel ui:field="header"/>
</g:north>
<g:center>
<g:ScrollPanel styleName='{style.layout}'>
<g:FlowPanel ui:field="content"/>
</g:ScrollPanel>
</g:center>
<g:south size="1" unit="EM">
<g:FlowPanel ui:field="footer"/>
</g:south>
</g:DockLayoutPanel>
</ui:UiBinder>

-- Prashant

[digitalsam007]

Hi Prashant,

I did try to follow your instructions and added styles to my content
container. I replaced the old view with a <g:FlowPanel/>. but
unfortunately, I cant see the content update on screen. Only the
Header and footer are displayed.

In the appController class, inside the valueChanged method, I added
the code like this -

@Override
public void onValueChange(ValueChangeEvent<String> event) {

String token = event.getValue();

if (token != null) {
Presenter presenter = null;
HasWidgets outer = this.container;

if (token.equals("main")) {

if (wrapper == null) {
wrapper = new WrapperView();
ContainerSegment.HEADER = wrapper.getHeaderContainer();
ContainerSegment.CONTENT = wrapper.getContentContainer();
ContainerSegment.FOOTER = wrapper.getFooterContainer();

new WrapperPresenter(new WrapperView()).go(container);
System.out.println("Initial Screen Created!!!");
}

presenter = new SearchPresenter(eventBus, new SearchView());
outer = wrapper.getContentContainer();

}

if (presenter != null) {
presenter.go(outer);
System.out
.println("Content Area is going to refresh with search Widget");
}
}

}

I verified that the correct go method is being called. Also, the outer
container actually contains the Content panel <div> and also the
actual SearchView content is getting added to the container.

Any hint why I might not be able to get a refresh?

[digitalsam007]

I forgot to mention that when I try to add the Search View into the
main root container instead of the content container like this -- it
works in that case but my header and footer will now be gone...

if (presenter != null) {
presenter.go(this.container); // adding to the Root panel
}

I guess there's something wrong with retrieving the Contnet Container.
But when I try to print it , it shows the correct Div html stuffs etc.

Can we not update only a part of a widget/panel???

[digitalsam007]

I also tried to add the serach widget into the content container of
the wrapper view and then adding the wrapper view to the rootpanel
container. But it didnt help. See the modified code below -

HasWidgets outer = this.container;

if (token.equals("main")) {

if (wrapper == null) {
wrapper = new WrapperView();
}

presenter = new SearchPresenter(eventBus, new SearchView());
outer = wrapper.getContentContainer();

}

if (presenter != null) {
presenter.go(outer);

new WrapperPresenter(new WrapperView()).go(this.container);

}

On Feb 19, 7:50 pm, digitalsam007 <digitalsam...@gmail.com> wrote: