I'm using GWT 2.4. I want to construct content sections using the StackLayoutPanel widget. Howevr, I'm having trouble sizing the widget vertically to take up as much space as possible. I'm discovering
p.setHeight("100%");
doesn't actually do anything. Does anyone have any advice for calculating the proper height for the StackLayoutPanel so that it takes up as much space as possible but not more? Here's the code I'm using ...
final StackLayoutPanel p = new StackLayoutPanel(Unit.EM);
p.setHeight("100%");
int i=0;
for (final Node node : nodes) {
if (node != null) {
final Widget childWidget = getWidget(node.getChildren());
if (childWidget != null) {
final String sectionTitle = node.getAttributes().get(NAME_ATTR) != null ? node.getAttributes().get(NAME_ATTR).getValue() : "Section " + (i+1);
p.add(childWidget, sectionTitle, 2);
} // if
} // if
i++;
} // for
return p;
Here is the code that ultimately calls the StackLayoutPanel. Notice that the parent widget, "ScrollPanel", sets height="100%", but that has no effect on causing the StacklayoutPanel to fill out all of its space.
final ScrollPanel childpanel = new ScrollPanel();
childpanel.setHeight("100%");
// Below, a StackLayoutPanel is returned as the child widget
final Widget childWidget = xmlToHtmlService.getWidget(tabNode.getChildren());
childpanel.add(childWidget);
Thanks, -
The best way to size a LayoutPanel of any type is to add it to another LayoutPanel and set its size from the parent panel. Setting the size directly never works like I want it to.
This a pretty different setup from the other GWT widgets, which just want to be added and sized. You can read about it at http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels .
There's a lot to learn about LayoutPanels. Once you've got them set up properly, though, they're very natural to use, and you can do a lot of precision layout with them.
Related
I have a question concerning the grid widget. This widget is also available in vanilla GWT through the "GWT-Widgets 7.4.3" download.
But my question is how do you enable sorting in this widget in GWT ?
I started from the example provided by Vaadin : https://github.com/Artur-/grid-gwt
But when you do a "setSortable(true)" on a Column the only thing that happens is that an arrow of sort direction is drawn in the table header when clicking it. The table itself isn't re-sorted.
Also executing a sort method on the grid with a column and a direction has no effect.
In the book of vaadin https://vaadin.com/book/-/page/components.grid.html I noted the following : "The container data source must support sorting. At least, it must implement Container.Sortable.".
So I suppose that ListDataSource is not suited for sorting.
But what else can I use in GWT so that it sorts ? In the book of Vaadin I see that a
BeanItemContainer is used, but this is not available in "GWT-Widgets 7.4.3" as this seems to be a server component.
So it comes down to this question: How do I enable sorting on the Vaadin grid in a vanilla GWT project ?
thanks
Frank
I have no experience with Vaadin, but in plain GWT you would do something like this (where T is your object):
ListDataProvider<T> dataProvider = new ListDataProvider<T>();
List<T> displayItems = dataProvider.getList();
ListHandler<T> sortHandler = new ListHandler<T>(displayItems);
Then, to make a column sortable, you need to tell the sortHandler how to sort these objects:
dateColumn.setSortable(true);
dateColumn.setDefaultSortAscending(false);
sortHandler.setComparator(dateColumn, new Comparator<Item>() {
#Override
public int compare(Item o1, Item o2) {
if (o1.getDate() != null) {
return (o2.getDate() != null) ?
o1.getDate().compareTo(o2.getDate()) : 1;
}
return -1;
}
});
If I try to sort a column that's out of view (I need to scroll on the right to see it)
then the column sorts but the table scrolls back to the left, (and the column i sorted is out of view again)
One can try this in the Basic Gid of the GXT showcase:
Just make the width of the columns larger so that the horizontal scroller shows up and then try to scroll at the end of the table and sort.
How to fix this?
Thanks
This is how I solved it:
Override onDataChanged of GridView and set preventScrollToTopOnRefresh to true before sorting and then set it back to whatever it was. I wonder why this is not the default behaviour.
final GroupSummaryView<Row> view = new GroupSummaryView<Row>()
{
protected void onDataChanged(StoreDataChangeEvent<Row> se)
{
boolean b = preventScrollToTopOnRefresh;
preventScrollToTopOnRefresh = true;
super.onDataChanged(se);
preventScrollToTopOnRefresh = b;
}
};
_table.setView(view);
There is no built-in feature to prevent that behavior, so you have to write it yourself. You just need to store the scroll state before sorting and restore it after:
// save scroll state
final int scrollTop = getView().getScroller().getScrollTop();
final int scrollLeft = getView().getScroller().getScrollLeft();
// restore scroll state
getView().getScroller().setScrollTop(scrollTop);
getView().getScroller().setScrollLeft(scrollLeft);
#Darek Kay : Thank You very much. I was having an issue of scroll down while changing the option by selecting value from EditorTreeGrid. Your suggesion worked for me. Here's what I did and worked for me :
final int scrollTop = editorTreeGrid.getView().getScroller().getScrollTop();
final int scrollLeft = ditorTreeGrid.getView().getScroller().getScrollLeft();
editorTreeGrid.getView().refresh(true);
editorTreeGrid.getView().getScroller().setScrollTop(scrollTop);
editorTreeGrid.getView().getScroller().setScrollLeft(scrollLeft);
I have an AbsolutePanel and different widgets (Buttons, Images, Labels, e.t.c.) on it. Is it possible to get collection or array or whatever of all widgets of certain type, for example - Image?
Here you go :
We can use iterator.
Iterator<Widget> arrayOfWidgets = abslPanel.iterator();
while (arrayOfWidgets.hasNext()){
Widget ch = arrayOfWidgets .next();
if (ch instanceof Button) {
//Do something (in your case make an arraylist of your objects)
}
}
If you add gwtquery to your project it is really easy:
List<Image> allImages = $("*", myPanel).widgets(Image.class);
And even you could use sophisticated css selectors to perform a finer discrimination:
List<MyWidget> allMyWidgets = $("*:nth-child(even)", myPanel).widgets(MyWidget.class);
GWT's CellBrowser is a great way of presenting dynamic data.
However when the browser contains more rows than some (seemingly) arbitrary maximum, it offers a "Show More" label that the user can click to fetch the unseen rows.
How can I disable this behavior, and force it to always show every row?
There are several ways of getting rid of the "Show More" (which you can combine):
In your TreeViewModel, in your NodeInfo's setDisplay or in the DataProvider your give to the DefaultNodeInfo, in onRangeChange: overwrite the display's visible range to the size of your data.
Extend CellBrowser and override its createPager method to return null. It won't change the list's page size though, but you can set it to some very high value there too.
The below CellBrowser removes the "Show More" text plus loads all available elements without paging.
public class ShowAllElementsCellBrowser extends CellBrowser {
public ShowAllElementsCellBrowser(TreeViewModel viewModel, CellBrowser.Resources resources) {
super(viewModel, null, resources);
}
#Override
protected <C> Widget createPager(HasData<C> display) {
PageSizePager pager = new PageSizePager(Integer.MAX_VALUE);
// removes the text "Show More" during loading
display.setRowCount(0);
// increase the visible range so that no one ever needs to page
display.setVisibleRange(0, Integer.MAX_VALUE);
pager.setDisplay(display);
return pager;
}
}
I found a valid and simple solution in setting page size to the CellBrowser's builder.
Hope this will help.
CellBrowser.Builder<AClass> cellBuilder = new CellBrowser.Builder<AClass>(myModel, null);
cellBuilder.pageSize(Integer.MAX_VALUE);
cellBrowser = cellBuilder.build();
The easiest way to do this is by using the:
cellTree.setDefaultNodeSize(Integer.MAX_VALUE);
method on your Cell Tree. You must do this before you begin expanding the tree.
My workaround is to navigate through elements of treeview dom to get "show more" element with
public static List<Element> findElements(Element element) {
ArrayList<Element> result = new ArrayList<Element>();
findShowMore(result, element); return result; }
private static void findShowMore(ArrayList res, Element element) {
String c;
if (element == null) { return; }
if (element.getInnerText().equals("Show more")) { res.add(element);
}
for (int i = 0; i < DOM.getChildCount(element); i++) { Element
child = DOM.getChild(element, i); findShowMore(res, child); } }
and than use:
if (show) { element.getStyle().clearDisplay(); } else {
element.getStyle().setDisplay(Display.NONE); }
I Have a GWT Composite to which some other Composites are added dynamically.
I want to make may Parent composite Resize to fit the height of all its child widgets automatically.
i tried setting setHeight("100%") for Composite but this doesn’t work.
any Idea how to accomplish this functionality?
thanks.
EDIT:
final DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
dockLayoutPanel.setStyleName("EntryPanel");
dockLayoutPanel.setSize("142px", "72px");
initWidget(dockLayoutPanel);
final VerticalPanel panel = new VerticalPanel();
panel.setSize("140px", "72px");
chckbxExport = new CheckBox("Export");
putField(CommonPresenter.CONSTANTS.EXPORT, chckbxExport);
dateBox = new DateBox();
dateBox.addValueChangeHandler(new ValueChangeHandler<Date>() {
#Override
public void onValueChange(final ValueChangeEvent<Date> event) {
dateChanged = true;
}
});
panel.add(dateBox);
final ListBox visibility = new ListBox();
final Label lblVisibility = new Label("Visibility:");
LabeledWidget vis = new LabeledWidget(lblVisibility, visibility);
for (int i = 0; i < CommonPresenter.CONSTANTS.VISIBILITIES.length; i++) {
visibility.addItem(CommonPresenter.CONSTANTS.VISIBILITIES[i]);
}
putField(CommonPresenter.CONSTANTS.VISIBILITY, visibility);
panel.add(vis);
panel.add(chckbxExport);
dockLayoutPanel.add(panel);
UPDATE:
Setting Composite width to fill all available Window horizontal space:
final int scrollBarWidth = 25;
// editPanel.setHeight("180px");
setWidth(Window.getClientWidth() - scrollBarWidth + "px");
// editPanel.setStyleName("EditorPanel");
Window.addResizeHandler(new ResizeHandler()
{
public void onResize(ResizeEvent event)
{
int width = event.getWidth();
setWidth(width - scrollBarWidth + "px");
}
});
Here's how to do it generally with HTML+CSS:
Create the parent, and do not set its height (or set it to auto).
Then add the children (just make sure, that you don't use absolute/fixed positioning for the children).
Set the height of the children, if required.
The height of the parent will then be adjusted automatically. This is the same for GWT Composites - just make sure, which CSS (including style attributes) applies to your elements! If unsure, use Firebug.
If you need more specifics, then you'd have to post some code which shows how you construct the parent composite (UiBinder, ...?)
Instead of using "100%" you can get the actual height by Window#getClientHeight(). To handle scenarios where the user resizes the browser, you can use a ResizeHandler.
Try Overriding the Resize()(Your class must extend to ResizeComposite).
In this re-size method set the size you want.
This works you dynamically because every time the window is re-sized this method is called and the values are set accordingly.