GWT ScrollPanel get max size of children without scrolling - gwt

I was wondering is there any possibility to get the inner size of a
com.google.gwt.user.client.ui.ScrollPanel
object in GWT? I would like to create a children of the ScrollPanel that fits exactly into the empty space, without activating the scroll bars.
The ScrollPanel is initialized as follows:
[begin update after answer of #Abhijith Nagaraja]
public void onModuleLoad() {
Window.setMargin("0px");
TabLayoutPanel tabs = new TabLayoutPanel(30, Unit.PX);
//attach the tab panel to the body element
RootPanel.get(null).add(tabs);
//set the TabLayoutPanel to full size of the window.
String width = (Window.getClientWidth()) + "px";
String height = (Window.getClientHeight()) + "px";
tabs.setSize(width, height);
//create the scroll panel and activate the scroll bars
ScrollPanel scrollPanel = new ScrollPanel(new Button("a second button"));
scrollPanel.getElement().getStyle().setOverflowX(Overflow.SCROLL);
scrollPanel.getElement().getStyle().setOverflowY(Overflow.SCROLL);
//attach the scroll panel to the DOM
tabs.add(scrollPanel, "tab1");
System.out.println(scrollPanel.getOffsetWidth()); // --> 0
System.out.println(scrollPanel.getOffsetHeight()); // --> 0
}
[end update]
Reason: I want to initialize a dynamic visualization (which requires scrollbars at a later point in time) in such a way that, it looks nice and avoiding to add the ScrollPanel later.

ScrollPanel sp = new ScrollPanel();
...
int innerWidth = sp.getOffsetWidth()- sp.getElement().getScrollWidth();
...
NOTE: You can use the above code only if your scrollPanell is attached to the screen. In other words it should be rendered.

DOM.setStyleAttribute(scrollpanel.getElement(), "maxHeight", mMainHeight + "px");;

Related

How to set a Popup to be always visible on the top in GWT

I have a loading popup that I need to display on the top of the page, even if the user scroll down.
What I tried so far is to set the popup position as follows
setPopupPosition(Window.getClientWidth()/2 , 0);
The popup shows up on the absolut top.
The situation can be resolved easily if you view it from a different angle: Not the popup position should adjust to the page - instead, the page should scroll behind the centering popup, e.g.:
final ScrollPanel scrollPanel = new ScrollPanel();
RootLayoutPanel.get().add(scrollPanel);
pagePanel = new FlowPanel();
scrollPanel.setWidget(pagePanel);
pagePanel.add(...);
Now add the entire page contents to pagePanel (instead of adding them directly to rootPanel).
Then you can create popups like this:
final PopupPanel popupPanel = new PopupPanel();
popupPanel.add(...);
popupPanel.center();
You'll still have to re-center the popup when the window resizes, but apart from that, the popup will always be at the center in front of the scrolling page.
To achieve this you can implement Window.addWindowScrollHandler. It will always be on top whatever you do.
DialogBox dialog = new DialogBox();
dialog.setWidget(...);
Window.addWindowScrollHandler(new ScrollHandler() {
#Override
public void onWindowScroll(ScrollEvent event) {
dialog.setPopupPosition((Window.getClientWidth() - widthOfDialog) / 2, event.getScrollTop());
}
});
Hope this helps.. Thanks..
The solution that worked for me is this
setPopupPosition(Window.getClientWidth()/2 , Window.getScrollTop());

Fill Visible Area of Eclipse RCP Editor Without Scrolling

This is a question about which general approach to take, so I haven't included any code.
Requirement:
I need to create a page within a multi-page editor that has two vertical sections in it. The top section has a tree and the bottom section has a text field. The tree and text field should fill their respective sections. Each section should scroll independently and there should be a splitter in between. When the editor is opened I want the visible area of the editor to be divided among the two sections based on some ratio I provide. Then when the editor is resized, the two sections will adjust proportionally to maintain the ratio and fit the page. This way there won't be scroll bars on the editor page itself, just the two sections.
Proposed Solution:
My idea was to add a SashForm to the editor page and set the size of the SashForm to be the same as the editor's visible area. Then I'd add a resize listener to the editor page and adjust the size of the SashForm so that it stays in sync with the page. However, I can't find a way to get the editor's visible area. So when I add the SashForm it just makes each section big enough to fit its data and adds a scroll on the editor page itself.
Is it possible to meet my requirement?
Success! The key was to listen for resize events on the ScrolledForm. I've only tested on Fedora but I'll take a look on Windows soon. The only thing that bothers me is that the use of the buffer constants seems a little hacky.
/**
* Form page that contains a sash form and a button. The sash form is dynamically sized to ensure
* that it always fills the available space on the page.
*/
public class SashFormDemoPage extends FormPage
{
/** Horizontal buffer needed to ensure that content fits inside the page */
private static final int HORIZONTAL_BUFFER = 8;
/** Vertical buffer needed to ensure that content fits inside the page */
private static final int VERTICAL_BUFFER = 12;
/** Percentages of the sash form occupied by the tree and text box respectively */
private static final int[] SASH_FORM_WEIGHTS = new int[] {30, 70};
/**
* Constructor
*
* #param editor parent editor
*/
public SashFormDemoPage(ComponentEditor editor)
{
super(editor, "sashFormDemoPage", "Demo");
}
/**
* {#inheritDoc}
*/
#Override
protected void createFormContent(IManagedForm managedForm)
{
// Set page title
ScrolledForm scrolledForm = managedForm.getForm();
scrolledForm.setText("SashForm Demo");
// Set page layout and add a sash form
final Composite parent = scrolledForm.getBody();
parent.setLayout(new GridLayout());
final SashForm sashForm = new SashForm(parent, SWT.VERTICAL);
// Add a tree as the top row of the sash form and fill it with content
FormToolkit toolkit = managedForm.getToolkit();
int style = SWT.SINGLE | SWT.H_SCROLL | SWT.V_SCROLL | SWT.BORDER;
Tree tree = toolkit.createTree(sashForm, style);
for (int i = 0; i < 40; i++) {
TreeItem parentNode = new TreeItem(tree, SWT.NONE);
parentNode.setText("parent-" + i);
for (int j = 0; j < 3; j++) {
TreeItem childNode = new TreeItem(parentNode, SWT.NONE);
childNode.setText("child-" + i + "-" + j);
}
}
// Add a text box as the bottom row of the sash form and fill it with content
style = SWT.MULTI | SWT.V_SCROLL | SWT.WRAP | SWT.BORDER;
Text text = toolkit.createText(sashForm, null, style);
String message = "";
for (int i = 0; i < 100; i++) {
message += "This is a test of the layout demo system. This is only a test. ";
}
text.setText(message);
// Add button below sash form
final Button button = toolkit.createButton(parent, "Test", SWT.NONE);
// Add resize listener to sash form's parent so that sash form always fills the page
parent.addControlListener(new ControlListener() {
#Override
public void controlMoved(ControlEvent e)
{
// Stub needed to implement ControlListener
}
#Override
public void controlResized(ControlEvent e)
{
GridData data = new GridData();
Point size = parent.getSize();
data.widthHint = size.x - HORIZONTAL_BUFFER;
data.heightHint = size.y - button.getSize().y - VERTICAL_BUFFER;
sashForm.setLayoutData(data);
}
});
// Set sash form's weights and pack its parent so that the initial layout is correct
sashForm.setWeights(SASH_FORM_WEIGHTS);
parent.pack();
}
}
Why set the size of the SashForm explicitly? Why not just add it to the parent Composite of the editor? The parent Compositehas a FillLayout and thus the SashForm with fill the editor area automatically.

GWT: How do I create a TabsLayoutPanel with horizontal scroll bars?

I'm using GWT 2.4. I'm trying to create a tabs panel that has multiple tabs, so many that sometimes they exceed the allotted horizontal boundaries. How can I make a horizontal scroll bar appear? Here is how I'm creating my tabs panel now ...
tabsPanel = new TabLayoutPanel(BAR_HEIGHT_IN_EM, Style.Unit.EM);
final List<ScrollPanel> tabs = new ArrayList<ScrollPanel>();
for (final Node tabNode : documentNode.getChildren()) {
// Get the tab's child widgets and add them
// into the tab panel.
final ScrollPanel childpanel = new ScrollPanel();
childpanel.setHeight(SCROLL_PANEL_HEIGHT_PCT);
...
tabsPanel.add(childpanel, tabName);
} // for
tabsPanel.setWidth("100%");
tabsPanel.setHeight("100%");
As you can see, I tried width="100%", but no scroll panels appear that allow me to see the excess tabs.
Thanks, - Dave
There is no built in way to do this with the TabLayoutPanel, but looking at it's code it is possible to do this:
SimplePanel tab = (SimplePanel) getTabWidget(0).getParent();
FlowPanel tabBar = (FlowPanel) tab.getParent();
LayoutPanel container = (LayoutPanel) tabBar.getParent();
Element tabBarContainerLayer = container.getWidgetContainerElement(tabBar);
tabBarContainerLayer.getStyle().clearOverflowX();
DISCLAIMER: untested

GWT composite dynamic height resize

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.

GXT LayoutContainer with scrollbar reports a client height value which includes the area below the scrollbar

I have this code which sets up a "main" container into which other modules of the application will go.
LayoutContainer c = new LayoutContainer();
c.setScrollMode(Scroll.ALWAYS);
parentContainer.add(c, <...>);
Then later on, I have the following as an event handler
pContainer = c; // pContainer is actually a parameter, but it has c's value
pContainer.removeAll();
pContainer.setLayout(new FitLayout());
LayoutContainer wrapperContainer = new LayoutContainer();
wrapperContainer.setLayout(new BorderLayout());
wrapperContainer.setBorders(false);
pContainer.add(wrapperContainer);
LayoutContainer west = pWestContentContainer;
BorderLayoutData westLayoutData = new BorderLayoutData(LayoutRegion.WEST);
westLayoutData.setSize(pWidth);
westLayoutData.setSplit(true);
wrapperContainer.add(west, westLayoutData);
LayoutContainer center = new LayoutContainer();
wrapperContainer.add(center, new BorderLayoutData(LayoutRegion.CENTER));
pCallback.withSplitContainer(center);
pContainer.layout();
So in effect, the container called 'west' here will be where the module's UI gets displayed. That module UI then does a simple rowlayout with two children. The botton child has RowData(1, 1) so it fills up all the available space.
My problem is that the c (parent) container reports a height and width value which includes the value underneath the scrollbars. What I would like is that the scrollbars show all the space excluding their own space.
This is a screenshot showing what I mean:
alt text http://img265.imageshack.us/img265/9206/scrollbar.png
Try adding padding equivalent to the scroll bars size 14px? on the container where the Scroll.Always is being applied