I am developing a GWT Web application and I would like to include the resize capability into the container. For that, I am implementing a combination of Vertical and Horizontal Panels within a FlowPanel which is resizable. Well, the code for the resize method is the following:
Window.addResizeHandler(new ResizeHandler() {
#Override
public void onResize(ResizeEvent event) {
flowPanel.setHeight(event.getHeight()+"px");
flowPanel.setWidth(event.getWidth()+"px");
}
});
However, when I change the size of the windows, the size of the web elements does not change. Do you know how to implement it?
Thank you very much in advance!!!
You may want to review your layout solution. There are very few cases when you need to use a ResizeHandler. Typically, you can achieve a desired layout either by using a LayoutPanel (or Horizontal/Vertical panels) that automatically resize with the window, or by using CSS. Then your layout will respond well to any changes in a browser window, and you don't need to write any code for that to happen.
EDIT:
In order for a widget to resize automatically, the parent widget must implement ProvidesResize, and the child widget must implement Resizable. FlowPanel does not implement either. Once you use it, the chain of resizing events is broken.
Typically, I use a LayoutPanel for my outmost container. It occupies the entire browser window when added to the RootPanel, and it adjusts with the Window. Vertical and Horizontal panels are similar.
use,
window.getClientWidth();
window.getClientHeight();
Based on your component size you can -/+ px and use.
Related
look at this DockPanel http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwDockPanel
& it's code:
dock.add(new HTML(constants.cwDockPanelNorth1()), DockPanel.NORTH);
dock.add(new HTML(constants.cwDockPanelSouth1()), DockPanel.SOUTH);
dock.add(new HTML(constants.cwDockPanelEast()), DockPanel.EAST);
dock.add(new HTML(constants.cwDockPanelWest()), DockPanel.WEST);
dock.add(new HTML(constants.cwDockPanelNorth2()), DockPanel.NORTH);
dock.add(new HTML(constants.cwDockPanelSouth2()), DockPanel.SOUTH);
Is it similar to the BorderLayout in Java? or it is different?
How to set layout using DockLayoutPanel in UiBinder for the below picture:
Why don't they add the Center? I am confused, also how to set docklayout for the above picture in UiBinder?
Diffrences between DockPanel and DockLayouPanel
DockLayoutPanel
A panel that lays its child widgets out "docked" at its outer edges,
and allows its last widget to take up the remaining space in its
center. This widget will only work in standards mode, which requires
that the HTML page in which it is run have an explicit
declaration.
DockPanel
A panel that lays its child widgets out "docked" at its outer edges,
and allows its last widget to take up the remaining space in its
center. This widget has limitations in standards mode that did not
exist in quirks mode. The child Widgets contained within a DockPanel
cannot be sized using percentages. Setting a child widget's height to
100% will NOT cause the child to fill the available height.
If you need to work around these limitations, use DockLayoutPanel
instead, but understand that it is not a drop in replacement for this
class. It requires standards mode, and is most easily used under a
RootLayoutPanel (as opposed to a RootPanel).
DockLayoutPanel is similar to BorderLayout.
To add something in center use add with no params:
dockLayoutPanel.add(widget);
This will take all remaining space.
The center widget should be added last. Otherwise you get an exception.
The Layout you want to create can't be done with just one DockLayoutPanel.
I'm trying to implement a scrollPanel within a Horizontal Panel.
I read this post
GWT Horizontal panel with horizontal scrolling
The answer seems great, however I'm wondering if ravi wrapped his simple panel with a scroll Panel or vice versa.
Basically I wanted to know how the panels were nested within each other?
A scroll panel is nothing special - it's just a DIV element with some CSS set on it. That's what the answer to the other question means, as a SimplePanel is simply a Widget that appears as a DIV.
So what the other answer did was create a scrolling widget by:
Creating a SimplePanel as the content container
Set some CSS with the overflow-x attribute to the SimplePanel
Setting the content will now have a horizontal scroll bar (due to the CSS attribute).
If you prefer a more direct way of doing this check out UiBinder. Using it you can combine widgets/CSS/HTML elements in a form closer to how the browser renders your UI. So for example you can create a DIV with the required CSS to achive a scrolling container.
I am using absolute panel in gwt application according to my window screen.but i want to use a panel which is auto scalable or adjustable according to client window screen. so is it possible or any panel which position relatively rather than absolutely?
Thanks
rahul
Try this one (SplitLayoutPanel):
http://gwt.google.com/samples/Showcase/Showcase.html#!CwSplitLayoutPanel
SplitLayoutPanel and DockLayoutPanel are great but they are limitated as they just extends LayoutPanel.
I would recommend to get used of LayoutPanel as it is more flexible for anny liquid layout you have in mind.
In pseudocode, you just need to.
Define your Widget x;
Define your LayoutPanel lp.
add the widget in lp. (lp.add(x)) this will just enlarge your widget to fit All the screen as you have not defined any constrain yet.
you can then apply constrains combined as you want. (BOTTOM; TOP; LEFT; RIGHT; WIDTH; HEIGHT;)
For example: TOP and WIDTH constrains:
lp.setWidgetTopWidth (the widget, the TOP position, the TOP unit, the WIDTH of the widget, the WIDTH unit).
Here, the UNIT is quite important. If you choose PX. Your application will NOT be liquid. As it will be static across different screens. In our company we have 16:9 and 4:3 screens. So we use PCT unit (percentage) for WIDTH contrains but we use PX for TOP (our header is the same for all the screens).
You can even apply EM unit to a dimension if you want your widget to get bigger if the user zoom in or zoom out your application.
Annother beneffit of using LayoutPanel is changing the layout on runtime. You can easily fit a second widget (and a third, fourth, ... ) by reducing the space dedicated to the others and then adding and applying constrains to the new one.
hope this helps you as it helped us!
http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/LayoutPanel.html
I'm trying to insert a gwt datagrid in my application. If i set a static height (500px) everything works nice. But i want to make the dataGrid auto adjust to screen size. With height 100% i get a blank screen.
i've also tried to put the datagrid into a resizeLayoutPanel with the same results.
any tips?
All RequiresResize widgets should be given an explicit size, or be added to ProvidesResize widgets (up to a RootLayoutPanel or a ProvidesResize widget with an explicit size; the only exception is ResizeLayoutPanel which doesn't implement ProvidesResize because it couldn't honor the contract for its header and footer widgets, but it definitely honors it for the center widget).
So the question is: where did you add your DataGrid and/or ResizeLayoutPanel?
Thomas Broyer is correct. Nonetheless I found something of interest concerning the DataGrid (it does not happen in CellTable).
If you are using a DeckPanel and if you are creating the DataGrid on a hidden Panel of this DeckPanel, than the data of the DataGrid will not be visible if you show the panel of the DataGrid.
I found only one workaround: call addDataDisplay of your DataProvider "after" the panel was made visible.
i created a widget, say MyBox, which has many other widgets. i have to use that widget on different page, however on different page, the size of the widget is different, on some page it's smaller, on other page it's bigger. Just wonder is there any way in GWT to zoom in & out the widget? Thanks
You can set the width and height of a widget, and the normal kinds of "zooming" that happen with HTML will happen to your widget too. If you want inner widgets to resize automatically, check out Layout Panels in GWT 2.0 and later.