GXT 3 Grid height and scroll - gwt

My environment is: GWTP 0.7, GWT 2.4.0, GXT 3.0.1. This question is somehow related to GXT 3 grid scrolling issue but with the exception that the solution there does not work for me.
My case:
public abstract class AbstractGridView extends ViewImpl implements AbstractGridPresenter.MyView {
protected final VerticalLayoutContainer cont = new VerticalLayoutContainer();
protected final VerticalLayoutData toolBarData = new VerticalLayoutData(1, -1);
protected final VerticalLayoutData contentData = new VerticalLayoutData(1, -1); //grid's layout config
protected final ToolBar toolBar = new ToolBar();
protected final TextButton addItemButton = new TextButton(ADDBUTTON_TEXT);
#Inject
protected AbstractGridView() {
toolBar.add(addItemButton);
cont.add(toolBar, toolBarData);
}
public Widget asWidget() {
return cont;
}
}
public class DepartmentsView extends AbstractGridView implements DepartmentsPresenter.MyView {
private final Grid<Department> grid;
private final ColumnModel<Department> model;
private final List<ColumnConfig<Department, ?>> config = new ArrayList<ColumnConfig<Department,?>>();
private final ListStore<Department> store = new ListStore<Department>(PROPS.key());
#Inject
public DepartmentsView() {
super();
config.add(new ColumnConfig<Department, Long>(PROPS.id()));
config.get(config.size() - 1).setHeader(IDCOLUMN_HEADER);
config.add(new ColumnConfig<Department, String>(PROPS.name()));
config.get(config.size() - 1).setHeader(NAMECOLUMN_HEADER);
config.add(new ColumnConfig<Department, String>(companyNameProvider));
config.get(config.size() - 1).setHeader(COMPANYCOLUMN_HEADER);
model = new ColumnModel<Department>(config);
grid = new Grid<Department>(store, model);
grid.getView().setAutoFill(true);
filters.initPlugin(grid);
filters.setLocal(true);
filters.addFilter(idFilter);
filters.addFilter(nameFilter);
filters.addFilter(companyFilter);
cont.add(grid);
}
}
All these are injected into BorderLayoutContainer in BaseView:
public class BaseView extends ViewImpl implements BasePresenter.MyView {
private final Viewport viewPort = new Viewport();
private final BorderLayoutContainer borderContainer = new BorderLayoutContainer();
private final ContentPanel west = new ContentPanel();
private final ContentPanel north = new ContentPanel();
private final ContentPanel center = new ContentPanel();
private final BorderLayoutData westData = new BorderLayoutData(200);
private final BorderLayoutData northData = new BorderLayoutData();
private final BorderLayoutData centerData = new BorderLayoutData();
#Inject
public BaseView() {
borderContainer.setBorders(true);
west.setResize(true);
center.setResize(false);
center.setHeight("auto");
north.setResize(false);
westData.setCollapsible(false);
westData.setCollapseMini(false);
westData.setMargins(new Margins(5, 5, 5, 5));
northData.setCollapsible(false);
northData.setMargins(new Margins(5));
northData.setSize(57);
centerData.setCollapsible(false);
centerData.setMargins(new Margins(5));
borderContainer.setWestWidget(west, westData);
borderContainer.setCenterWidget(center, centerData);
borderContainer.setNorthWidget(north, northData);
viewPort.add(borderContainer);
}
public Widget asWidget() {
return viewPort;
}
#Override
public void setInSlot(Object slot, Widget content) {
setMainContent(content);
}
private void setMainContent(Widget content) {
center.clear();
if (content != null) {
center.setWidget(content);
}
}
}
So, if I do not attach contentData when adding my grid to VerticalLayoutContainer (cont) it renders equally to as VerticalLayoutData(1, -1) which is: grid's height is not computed at all and it's content flows under the bottom of the page with no scrollbar to get to any row lower the bottom page border. If I set VerticalLayoutData (1, 1) as in the link at the beginning of my question I can only see grid's header and grid's content's height is computed to 0px (though it's present in the page's DOM). And only if I set height manually, for example setHeight(300) grid's height sets that quantity of pixels and vertical scrollbar is shown to get to any row in the grid's store, though one can easily understand manually setting grid's height is not of any reason solution in case of Viewport managed application window.
What have I missed in widgets config or is this a bug with any reasonable workaround for it?

I've found the layout problem:
center.setResize(false); // BaseView's constructor
That made BorderLayoutContainer's ContentPanel not to resize child widget (VerticalLayoutContainer) to fit.

Related

SimplePanel can only contain one child widget

When i run the following Code and push Button "Push", more than once a time, i get browser error "simplePanel can only contain one child widget". How can i solve that problem? thank you in advance! Jogi
public class Projekt implements EntryPoint {
private RootPanel rootPanel;
public void onModuleLoad() {
rootPanel = RootPanel.get("gwtContainer");
rootPanel.setSize("1902", "868");
final AbsolutePanel boundaryPanel = new AbsolutePanel();
boundaryPanel.setStyleName("frame1");
boundaryPanel.setSize("1455px", "600px");
final Diagram diagram = new Diagram(boundaryPanel);
RootPanel.get().add(boundaryPanel, 446, 242);
final Connector con = new Connector(100, 300, 300, 500);
Button la = new Button("Push");
la.setSize("200", "200");
RootPanel.get().add(la);
Button la2 = new Button("Push2");
la2.setSize("200", "200");
RootPanel.get().add(la2);
final Image img = new Image("images/concrete.svg");
img.setSize("200", "200");
final Shape shapei = new Shape(img);
Image img2 = new Image("images/variable.svg");
img2.setSize("200", "200");
boundaryPanel.add(img2, 200,200);
final Shape shapei2 = new Shape(img2);
shapei2.showOnDiagram(diagram);
la.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
boundaryPanel.add(img, 100,100);
shapei.showOnDiagram(diagram);
}
});
la2.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
con.showOnDiagram(diagram);
}
});
diagram.addDiagramListener(new DiagramListenerAdapter() {
#Override
public void onElementConnect(ElementConnectEvent event) {
if (con.startEndPoint.isGluedToConnectionPoint()) {
Widget connected = con.startEndPoint.gluedConnectionPoint.parentWidget;
if(connected.equals(shapei.connectedWidget)){
Image logo = new Image("images/xor.svg");
logo.setSize("100", "100");
boundaryPanel.add(logo);
}
else if(connected.equals(shapei2.connectedWidget)){
Image logo2 = new Image("images/and.svg");
logo2.setSize("100", "100");
boundaryPanel.add(logo2);
};
}}
});
}}
RootPanel.get() is a SimplePanel. You try to add more than one child to it, resulting in this error.
Instead, you should add HTMLPanel, for example, to your RootPanel, and then add all the children to this HTMLPanel.
I suppose your Diagram extends GWT's SimplePanel
class? SimplePanel can contain only a single widget, have a look here:
http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/SimplePanel.html
You could either extend a different class, or call the remove(Widget w) method to remove the existing widget before trying to add a new one.

Cannot reduce size of RCP view when migrated to Eclipse 4

I'm currently working on migrating a set of eclipse RCP applications from 3.6 to 4.2.
I'm struggling with an issue with RCP perspectives that view height cannot be reduced below a certain size (looks like 10% from the window height).
The code works fine in eclipse 3.x and user can reduce the view height by dragging the border.
However, in 4.x the height of top most view (button view) can only be reduced upto a certain value.
Can anybody help with this, please?
public class Perspective implements IPerspectiveFactory {
public static final String ID = "im.rcpTest2.fixedperspective";
public void createInitialLayout(IPageLayout layout) {
String editorArea = layout.getEditorArea();
layout.setEditorAreaVisible(false);
layout.addStandaloneView(ButtonView.ID, false, IPageLayout.TOP,
0.1f, editorArea);
layout.addStandaloneView(View.ID, false, IPageLayout.LEFT,
0.25f, editorArea);
IFolderLayout folder = layout.createFolder("messages", IPageLayout.TOP,
0.5f, editorArea);
folder.addPlaceholder(View2.ID + ":*");
folder.addView(View2.ID+":2");
folder.addView(View2.ID+":3");
layout.getViewLayout(ButtonView.ID).setCloseable(false);
layout.getViewLayout(View.ID).setCloseable(false);
}
}
public class ButtonView extends ViewPart {
public ButtonView() {
}
public static final String ID = "im.rcptest2.ButtonView"; //$NON-NLS-1$
private Text text;
/**
* Create contents of the view part.
* #param parent
*/
#Override
public void createPartControl(Composite parent) {
Composite container = new Composite(parent, SWT.NONE);
container.setBackground(SWTResourceManager.getColor(SWT.COLOR_GRAY));
container.setLayout(new GridLayout(2, false));
text = new Text(container, SWT.BORDER);
text.setLayoutData(new GridData(SWT.FILL, SWT.TOP, true, false, 1, 1));
{
Button btnMybutton = new Button(container, SWT.NONE);
btnMybutton.setText("MyButton");
}
}
#Override
public void setFocus() {
// TODO Auto-generated method stub
}
}
This looks like the value
int minSashPercent = 10;
in org.eclipse.e4.ui.workbench.renderers.swt.SashLayout
There does not seem to be a way to change this value. So the only thing you could do would be to write a custom Sash Renderer class by providing your own Renderer Factory.

GXT ToolBar is scrolled

I'm developing a simple GXT widget - it's a TreePanel with a ToolBar added using setTopComponent.
The problem is that as soon as the tree is large enough so that it can be scrolled, the scroll-bar doesn't scroll the tree only, but scrolls the ToolBar as well.
What should be change so that ToolBar remains on the top of page, and only the tree is scrolled.
public class TreePanelExample extends LayoutContainer {
#Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
Folder model = getTreeModel();
TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);
final TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
tree.setDisplayProperty("name");
tree.setAutoLoad(true);
ToolBar toolBar = new ToolBar();
toolBar.setBorders(true);
toolBar.add(new Button("Dummy button", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
Info.display("Dummy button", "I'm so dumb!");
}
}));
ContentPanel panel = new ContentPanel();
panel.setHeaderVisible(false);
panel.setCollapsible(false);
panel.setFrame(false);
panel.setAutoWidth(true);
panel.setAutoHeight(true);
// setting fixed size doesn't make any difference
// panel.setHeight(100);
panel.setTopComponent(toolBar);
panel.add(tree);
add(panel);
}
The problem is that
TreePanelExample extends LayoutContainer
while instead it should extend Viewport.
Additionally I shouldn't have used
panel.setAutoWidth(true);
panel.setAutoHeight(true);
Plus it is necessary to add the main panel using
new BorderLayoutData(LayoutRegion.CENTER);
Here is the complete solution:
public class TreePanelExample extends Viewport {
public TreePanelExample() {
super();
setLayout(new BorderLayout());
Folder model = getTreeModel();
TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);
final TreePanel<ModelData> treePanel = new TreePanel<ModelData>(store);
treePanel.setDisplayProperty("name");
treePanel.setAutoLoad(true);
ToolBar toolBar = new ToolBar();
toolBar.setBorders(true);
toolBar.add(new Button("Dummy button", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
Info.display("Dummy button", "I'm so dumb!");
}
}));
ContentPanel panel = new ContentPanel();
panel.setBodyBorder(false);
panel.setHeaderVisible(false);
panel.setTopComponent(toolBar);
panel.setLayout(new FitLayout());
panel.add(treePanel);
BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(5, 5, 5, 5));
centerData.setCollapsible(true);
panel.syncSize();
add(panel, centerData);
}

Unable to load tab in PagerSlidingTabStrip when fragment is replaced

I'm trying to implement a viewpager with a PagerSlidingTabStrip instead of a TabView. The viewpager has three tabs in which each listview displays a list of events. The three tabs are called Past, Tonight and Future.
I've set up the slider as the github page suggests:
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
View v = inflater.inflate(R.layout.all_events_main_strip, container, false);
// Set up the ViewPager, attaching the adapter and setting up a listener for when the
// user swipes between sections.
pager = (ViewPager) v .findViewById(R.id.pager_main);
tabs = (PagerSlidingTabStrip) v.findViewById(R.id.tabs);
adapter = new MyPagerAdapter(getFragmentManager());
pager.setAdapter(adapter);
tabs.setViewPager(pager);
// Set Present tab as default
pager.setCurrentItem(1);
return v;
}
When the app starts the Main Activity adds for the first time this fragment and everything works great. 3 swipeable tabs with 3 listviews. (c.f. code section)
Here is the problem:
I've noticed that when I press the back button and replace the fragment again, in order to reopen the viewpager, the tab in the middle doesn't show any listview. If I swype left or right the content in the other tabs is loaded and displayed but the Present Tab remains empty.
When I debug the ToNightEvents ListFragment isn't called at all.
Do you guys have any suggestions to solve the problem?
The code:
The code is structured as follows: After the onCreateView I've added an OnDestroyView method to remove the fragment but it didn't work... Then in the fragmentPagerAdapter each page is called as a fragment in the getItem method. Finally at the end of the code you can see the three ListFragment classes in which a listview is populated through an AsyncTask
public class FragmentAllEvents extends Fragment
{
private static final String TAG_UID = "uid";
private static final String TAG_LOGO = "logo";
private static final String TAG_POKUID = "pokuid";
static ArrayList<HashMap<String, String>> userList;
ArrayList<HashMap<String, String>> userListTotal;
private final Handler handler = new Handler();
HashMap<String, String> userSelected;
EventsFunctions eventsFunctions;
UserFunctions userFunctions;
static ListView lv;
ActionBar actionBar;
MyPagerAdapter adapter;
ViewPager pager;
PagerSlidingTabStrip tabs;
private Drawable oldBackground = null;
private int currentColor = 0xFF666666;
//Context context = this;
#Override public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set up the action bar.
actionBar = getActivity().getActionBar();
actionBar.setHomeButtonEnabled(true);
}
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
View v = inflater.inflate(R.layout.all_events_main_strip, container, false);
pager = (ViewPager) v .findViewById(R.id.pager_main);
tabs = (PagerSlidingTabStrip) v.findViewById(R.id.tabs);
adapter = new MyPagerAdapter(getFragmentManager());
pager.setAdapter(adapter);
tabs.setViewPager(pager);
pager.setCurrentItem(1);
return v;
}
#Override
public void onDestroyView()
{
super.onDestroyView();
getActivity().getSupportFragmentManager().beginTransaction().remove(this).commit();
}
public static class MyPagerAdapter extends FragmentPagerAdapter
{
public MyPagerAdapter(FragmentManager fm)
{
super(fm);
}
#Override
public Fragment getItem(int i)
{
switch (i)
{
case 0:
return new PastEvents();
case 1:
return new ToNightEvents();
case 2:
return new FutureEvents();
/*default:
// The other sections of the app are dummy placeholders.
return new ToNightEvents();
*/
}
return null;
}
/**
* A fragment that launches past events list.
*/
public static class PastEvents extends ListFragment implements
PullToRefreshAttacher.OnRefreshListener
{
private ListView pastList;
private PullToRefreshAttacher mPullToRefreshAttacher;
ProgressBar progress;
String tabTime;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View pastView = inflater.inflate(R.layout.pastlist, container, false);
progress = (ProgressBar) pastView.findViewById(R.id.loading_spinner_past);
tabTime="past";
pastList = (ListView) pastView.findViewById(android.R.id.list);
// Now get the PullToRefresh attacher from the Activity. An exercise to the reader
// is to create an implicit interface instead of casting to the concrete Activity
mPullToRefreshAttacher = ((Home) getActivity()).getPullToRefreshAttacher();
// Now set the ScrollView as the refreshable view, and the refresh listener (this)
mPullToRefreshAttacher.addRefreshableView(pastList, this);
new AsyncLoadEvents(getActivity(), progress, pastList, mPullToRefreshAttacher).execute(tabTime);
return pastView;
}
#SuppressWarnings("unchecked")
#Override
public void onListItemClick(ListView listView, View view, int position, long id)
{
super.onListItemClick (listView, view, position, id);
HashMap<String, String> map = (HashMap<String, String>) getListView().getItemAtPosition(position);
//Log.e("AttendList Report", "Clicked list item: " + position +" Content: \n" + map.get(TAG_ID).toString());
Log.e("PastList Report", "Clicked list item: " + position +" Event's content: \n" + map.get(TAG_UID).toString());
Intent intent = new Intent(getActivity(), SingleEventActivity.class);
intent.putExtra("pokuid",map.get(TAG_POKUID)); // Maybe remove attribute toString();
intent.putExtra("uid", map.get(TAG_UID));
intent.putExtra("logo",map.get(TAG_LOGO));
getActivity().startActivity(intent);
}
#Override
public void onRefreshStarted(View view)
{
new AsyncLoadEvents(getActivity(), progress, pastList, mPullToRefreshAttacher).execute(tabTime);
}
}
/**
* A fragment that launches future event list.
*/
public static class FutureEvents extends ListFragment implements
PullToRefreshAttacher.OnRefreshListener
{
private ListView futureList;
private PullToRefreshAttacher mPullToRefreshAttacher;
ProgressBar progress;
String tabTime;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View futureView = inflater.inflate(R.layout.futurelist, container, false);
progress = (ProgressBar) futureView.findViewById(R.id.loading_spinner_future);
tabTime = "future";
futureList = (ListView) futureView.findViewById(android.R.id.list); //change to attendlist if needed
// Now get the PullToRefresh attacher from the Activity. An exercise to the reader
// is to create an implicit interface instead of casting to the concrete Activity
mPullToRefreshAttacher = ((Home) getActivity()).getPullToRefreshAttacher();
// Now set the ScrollView as the refreshable view, and the refresh listener (this)
mPullToRefreshAttacher.addRefreshableView(futureList, this);
new AsyncLoadEvents(getActivity(), progress, futureList, mPullToRefreshAttacher).execute(tabTime);
return futureView;
}
#SuppressWarnings("unchecked")
#Override
public void onListItemClick(ListView listView, View view, int position, long id)
{
super.onListItemClick (listView, view, position, id);
HashMap<String, String> map = (HashMap<String, String>) getListView().getItemAtPosition(position);
Log.e("PastList Report", "Clicked list item: " + position +" Event's content: \n" + map.get(TAG_UID).toString());
Intent intent = new Intent(getActivity(), SingleEventActivity.class);
intent.putExtra("pokuid",map.get(TAG_POKUID)); // Maybe remove attribute toString();
intent.putExtra("uid", map.get(TAG_UID));
intent.putExtra("logo",map.get(TAG_LOGO));
getActivity().startActivity(intent);
}
#Override
public void onRefreshStarted(View view)
{
new AsyncLoadEvents(getActivity(), progress, futureList, mPullToRefreshAttacher).execute(tabTime);
}
}
/**
* A fragment that launches future event list.
*/
public static class ToNightEvents extends ListFragment implements
PullToRefreshAttacher.OnRefreshListener
{
private ListView tonightList;
private PullToRefreshAttacher mPullToRefreshAttacher;
ProgressBar progress;
String tabTime;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View tonightView = inflater.inflate(R.layout.tonightlist, container, false);
progress = (ProgressBar) tonightView.findViewById(R.id.loading_spinner_tonight);
tabTime = "tonight";
tonightList = (ListView) tonightView.findViewById(android.R.id.list); //change to attendlist if needed
// Now get the PullToRefresh attacher from the Activity. An exercise to the reader
// is to create an implicit interface instead of casting to the concrete Activity
mPullToRefreshAttacher = ((Home) getActivity()).getPullToRefreshAttacher();
// Now set the ScrollView as the refreshable view, and the refresh listener (this)
mPullToRefreshAttacher.addRefreshableView(tonightList, this);
new AsyncLoadEvents(getActivity(), progress, tonightList, mPullToRefreshAttacher).execute(tabTime);
return tonightView;
}
#SuppressWarnings("unchecked")
#Override
public void onListItemClick(ListView listView, View view, int position, long id)
{
super.onListItemClick (listView, view, position, id);
HashMap<String, String> map = (HashMap<String, String>) getListView().getItemAtPosition(position);
Log.e("PastList Report", "Clicked list item: " + position +" Event's content: \n" + map.get(TAG_UID).toString());
Intent intent = new Intent(getActivity(), SingleEventActivity.class);
intent.putExtra("pokuid",map.get(TAG_POKUID)); // Maybe remove attribute toString();
intent.putExtra("uid", map.get(TAG_UID));
intent.putExtra("logo",map.get(TAG_LOGO));
getActivity().startActivity(intent);
}
#Override
public void onRefreshStarted(View view)
{
new AsyncLoadEvents(getActivity(), progress, tonightList, mPullToRefreshAttacher).execute(tabTime);
}
}
public String[] titles=
{
"Past",
"Tonight",
"Future"
};
#Override
public int getCount()
{
return titles.length;
}
#Override
public CharSequence getPageTitle(int position)
{
return titles[position];
}
}
}
This would normally work if you were in an Activity, however I guess you are in a Fragment since the code you posted is the method onCreateView(). The problem is that you are trying to use the FragmentManager of the Activity and you should be using the Fragment's FragmentManager. This FragmentManager is not what you need. Try this instead:
adapter = new MyPagerAdapter(getChildFragmentManager());
I think I'm a little bit late but if anyone happens to have the same error here is the solution =)
Q.
The following fixed it for me:
Add an OnBackStackChangedListener to the fragment manager.
In the onBackStackChanged method, get references to both the ViewPager and the PagerSlidingTabStrip (pager and tabs in your example). If the appropriate fragment is currently active, do the following:
pager.invalidate();
tabs.invalidate();
pager.setAdapter(new MyPagerAdapter(getFragmentManager()));
tabs.setViewPager(pager);

Height of the middle element in a GWT HeaderPanel

I am using a GWT HeaderPanel. As a middle element, I am using a DockLayoutPanel as follows:
<g:DockLayoutPanel width="1200px" height="100%">
<g:west size="220">
<g:HTMLPanel styleName="{style.debug}">
something <br />
something <br />
</g:HTMLPanel>
</g:west>
</g:DockLayoutPanel>
The page renders fine but, if the browser window is shrunk vertically, the middle panel goes on top of the footer, which is of course not what you would want with a header panel.
I rather like to have the fixed footer, which is why I am not doing the whole thing using DockLayoutPanel. What am I doing wrong? Thanks!
EDIT: ok, actually, if the window is grown vertically, the middle panel still does not resize
EDIT2: The HeaderPanel is directly in the root panel and looks like this:
<g:HeaderPanel>
<my.shared:Header></my.shared:Header>
<my.shared:Middle></my.shared:Middle>
<my.shared:Footer></my.shared:Footer>
</g:HeaderPanel>
Layout panels 101: HeaderPanel is a RequiresResize panel, so it must either be put into a ProvidesResize panel, such as RootLayoutPanel, (or as the middle panel of a HeaderPanel [1]) or be given an explicit fixed size.
[1] HeaderPanel does not implement ProvidesResize because it only fulfills the contract for its middle panel.
The following approach worked for me. It's based on Zack Linder's advice
Google Web Toolkit ›layout panel problem
(1) Attach a HeaderLayoutPanel to your RootLayoutPanel. The headerLayoutPanel is a class you create that extends HeaderPanel and implements ProvidesResize().
import com.google.gwt.user.client.ui.HeaderPanel;
import com.google.gwt.user.client.ui.ProvidesResize;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.user.client.ui.Widget;
public class HeaderLayoutPanel extends HeaderPanel implements ProvidesResize {
SimpleLayoutPanel contentPanel;
public HeaderLayoutPanel() {
super();
contentPanel=new SimpleLayoutPanel();
}
#Override
public void setContentWidget(Widget w) {
contentPanel.setSize("100%","100%");
contentPanel.setWidget(w);
super.setContentWidget(contentPanel);
}
public void onResize() {
int w=Window.getClientWidth();
int h=Window.getClientHeight();
super.setPixelSize(w, h);
}
}
(2) Next, instantiate a HeaderLayoutPanel. The header and footer widgets are assigned
a fixed height (e.g. menu bar height), and their width adjusts automatically to the
width of the panel. The center widget should be a ProvidesSize. I used a LayoutPanel.
For example,
public class AppViewer extends Composite implements MyApp.AppDisplay {
private HeaderLayoutPanel allContentsPanel;
MenuBar menuBarTop;
MenuBar menuBarBottom;
LayoutPanel dataPanel;
public AppViewer() {
allContentsPanel = new HeaderLayoutPanel();
menuBarTop = new MenuBar(false);
menuBarBottom = new MenuBar(false);
dataPanel = new LayoutPanel();
menuBarTop.setHeight("30px");
menuBarBottom.setHeight("20px");
allContentsPanel.setHeaderWidget(menuBarTop);
allContentsPanel.setFooterWidget(menuBarBottom);
allContentsPanel.setContentWidget(dataPanel);
initWidget(allContentsPanel);
}
#Override
public void doOnResize() {
allContentsPanel.onResize();
}
}
(3) The center widget (LayoutPanel) will hold the DeckLayoutPanel, which I defines in a
separate Composite (but you can do whatever you want). For example,
public class MyDataView extends Composite implements MyDataPresenter.DataDisplay {
private DockLayoutPanel pnlAllContents;
private HorizontalPanel hpnlButtons;
private HorizontalPanel hpnlToolbar;
private VerticalPanel pnlContent;
public MyView() {
pnlAllContents=new DockLayoutPanel(Unit.PX);
pnlAllContents.setSize("100%", "100%");
initWidget(pnlAllContents);
hpnlToolbar = new HorizontalPanel();
hpnlToolbar.setWidth("100%");
pnlAllContents.addNorth(hpnlToolbar, 30);
hpnlButtons = new HorizontalPanel();
hpnlButtons.setWidth("100%");
pnlAllContents.addSouth(hpnlButtons,20);
pnlContent=new VerticalPanel();
//center widget - takes up the remainder of the space
pnlAllContents.add(pnlContent);
...
}
}
(4) Finally everything gets tied together in the onModuleLoad() class: AppViewer generates
the display which is added to the RootLayoutPanel, and MyDataView generates a display.asWidget()
that is added to the container. For example,
public class MyApp implements EntryPoint,Presenter{
private HasWidgets container=RootLayoutPanel.get();
private static AppDisplay display;
private DataPresenter dataPresenter;
public interface AppDisplay extends Display{
#Override
Widget asWidget();
HasWidgets getContentContainer();
void doOnResize();
}
#Override
public void onModuleLoad() {
display=new AppViewer();
dataPresenter = new DataPresenter();
display.getContentContainer().add(dataPresenter.getDisplay().asWidget());
container.add(display.asWidget());
bind();
}
#Override
public void bind() {
Window.addResizeHandler(new ResizeHandler() {
#Override
public void onResize(ResizeEvent event) {
display.doOnResize();
}
});
}
#Override
public com.midasmed.client.presenter.Display getDisplay() {
return display;
}
}
Hope this helps!
Well, I haven't been able to solve this but, for future visitors: the same can be achieved (minus the problem I couldn't fix) using a DockLayourPanel with a north, center and south components.