I'm trying very hard to understand GWT's layout system that they introduced in 2.0. It's supposedly recommended, but it seems much more complex that the old way.
What I want to do, (which I feel is a very basic design) is build an application with a header, left vertical menu, footer, and a scrolling content section.
So, to do that, you do this:
DockLayoutPanel panel = new DockLayoutPanel();
FlowPanel header = new FlowPanel();
FlowPanel menu = new FlowPanel();
FlowPanel footer = new FlowPanel();
ScrollPanel content = new ScrollPanel();
panel.addNorth(header);
panel.addWest(menu);
panel.addSouth(footer);
panel.add(content);
RootLayoutPanel.get().add(panel);
That works perfectly fine. Except, the ScrollPanel (where all content goes) apparently breaks the layout flow. So, in my activity, I have:
#Override
public void start(AcceptsOneWidget panel, EventBus eventBus)
{
FlowPanel viewPanel = new FlowPanel();
panel.add(viewPanel);
}
If I add a TabLayoutPanel to the viewPanel, it will not display correctly. I have to add it to a LayoutPanel that is attached to a LayoutPanel that is attached to a LayoutPanel, etc. all the way up to the RootLayoutPanel.
So, I try this:
#Override
public void start(AcceptsOneWidget panel, EventBus eventBus)
{
LayouPanel viewPanel = new LayoutPanel();
panel.add(viewPanel);
}
And in my ui:binder, I have:
<g:LayoutPanel>
<g:layer>
<g:TabLayoutPanel barHeight="3.33" barUnit="EM" height="500px">
<!-- tabs go here -->
</g:TabLayoutPanel>
</g:layer>
</g:LayoutPanel>
So 2 things here.
I don't want to set the height. I want the tab panel to be as big as the content. I don't get why you have to set heights in this "better" method of laying out your app.
It still doesn't show on the screen at all. I'm assuming because it's being attached to the ScrollPanel. What confuses me is that ScrollPanel does indeed implement RequiresSize and ProvidesResize, so is it not a valid LayoutPanel? That's literally all LayoutPanel does. It's a ComplexPanel that implements those interfaces
When I inspect the page, and hover over where the TabLayoutPanel should be, I get a blue highlight (in Chrome) as if it were there, but it seems the
<g:layer>
that wraps it has no height, so it hides the TabLayoutPanel. In fact, if I edit it in the viewer to have a height, the TabLayoutPanel does show.
Am I doing something fundamentally wrong here? I would very much like to do:
RootLayoutPanel > DockLayoutPanel > ScrollPanel > *Some Container > TabLayoutPanel
And for things to just... work. I'm trying to convert my current app to this new layout stuff to get rid of all the tables that get generated under the hood, but it seems to cause more problems than it fixes.
*This container has things above and below the Tab Panel
ScrollPanel in your proposed layout will occupy space given to it by DockLayoutPanel. If "Some Container" is never larger than space allocated to ScrollPanel, ScrollPanel will never scroll. If "Some Container" may become larger (i.e. the need for scrolling), then this container cannot get its size from ScrollPanel - its height should either be set explicitly, or it should be a regular FlowPanel which grows with its content. In both of these cases, this "Some Container" will not be able to provide any size to its children, including TabLayoutPanel.
It's hard to give advice without seeing the requirements, but if you need to include a TabLayoutPanel inside a panel that grows with its own content, you must set its height yourself - in code or CSS.
Related
Before I start, I'm aware that its a bad idea to not use a Layout Manager and usually I do use one, however, I also have all my components automatically re-size and relocate based on the size of the window. In addition the program I'm working on is only intended to run on 1 machine throughout its entire lifetime. Please don't downvote me just because of lack of layout manager, I found it to be what I need for this particular program.
To my issue, I found a similar post on stackoverflow but a solution was never achieved.
I'm adding a dynamic amount of JLabels to my JPanel, I've noticed that when not using a layout manager, the scroller doesn't work.
This is a simplified version of my initialization code.
JPanel mypanel = new JPanel();
mypanel.setLayout(null);
mypanel.setSize(800,450);
mypanel.setForeground(Color.WHITE);
mypanel.setBackground(Color.BLACK);
scrollablePanel = new JScrollPane(mypanel);
scrollablePanel.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_ALWAYS);
scrollablePanel.setPreferredSize(new Dimension(800,300));
scrollablePanel.setSize(800,300);
scrollablePanel.setLocation(250,156);
myContainer.add(scrollablePanel);
where myContainer would be the container (also without a layout manager). The JLabels are added later on to the JPanel with:
enter code heremypanel.add(label1);
after some basic settings are set for the labels such as setForeground and setBackground.
Unfortunately when run, the scrollbar appears as if its not required (see image)
http://i.imgur.com/zp0QKGG.png
The table text seen in the image is made up of multiple JLabels.
If it's not possible to resolve the issue without using a Layout Manager I will switch to BoxLayout, I was just hoping there would be a solution.
The problem is JScrollPanel needs the preferred size of the view component to determine when the view exceeds the scroll pane's viewable area.
The preferred size of a component is normally determined via the layout manager. While you can use setPreferredSize, it is typically discouraged and you will simply run into the same problem as the content exceeds what ever value you decide to set.
A better solution would be to use a LayoutManager or compound layout (using multiple layout managers over multiple containers) to achieve the result you desired...or write your own...
i know there is some trouble taking LayoutPanels together with panels like ScrollPanel. Is it even possible to fit a scrollpanel to the current size of a SplitLayoutPanel? For example:
SplitLayoutPanel p = new SplitLayoutPanel(5)
ScrollPanel sp = new ScrollPanel
p.addWest(someOtherPanel);
p.add(sp);
Thanks in advance. A way i could probably do it is to override onResize method. However i am not sure if there is a better solution already.
ScrollPanel implements RequiresResize. LayoutPanel (of any type) implements ProvidesResize. They work really nice together but only if a ScrollPanel is the direct child and only widget in a layer of LayoutPanel. In such cases ScrollPanel will take its size from the size of a layer that it was added to.
Once you add another widget to the same layer where ScrollPanel is, you break this chain of ProvidesResize - RequiresResize widgets. Now a ScrollPanel does not know from where to take its size, so it will never start to scroll.
In your use case, if you want this chain to continue, you need to add a VerticalPanel to the west region of SplitLayoutPanel. Then you add your someOtherPanel to one cell and ScrollPanel to the other cell of your VerticalPanel.
Alternatively, you can simply set position:absolute, top:0 on your someOtherPanel and use a regular FlowPanel or HTMLPanel instead of ScrollPanel with overflow:auto style.
Before I start, I'm aware that its a bad idea to not use a Layout Manager and usually I do use one, however, I also have all my components automatically re-size and relocate based on the size of the window. In addition the program I'm working on is only intended to run on 1 machine throughout its entire lifetime. Please don't downvote me just because of lack of layout manager, I found it to be what I need for this particular program.
To my issue, I found a similar post on stackoverflow but a solution was never achieved.
I'm adding a dynamic amount of JLabels to my JPanel, I've noticed that when not using a layout manager, the scroller doesn't work.
This is a simplified version of my initialization code.
JPanel mypanel = new JPanel();
mypanel.setLayout(null);
mypanel.setSize(800,450);
mypanel.setForeground(Color.WHITE);
mypanel.setBackground(Color.BLACK);
scrollablePanel = new JScrollPane(mypanel);
scrollablePanel.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_ALWAYS);
scrollablePanel.setPreferredSize(new Dimension(800,300));
scrollablePanel.setSize(800,300);
scrollablePanel.setLocation(250,156);
myContainer.add(scrollablePanel);
where myContainer would be the container (also without a layout manager). The JLabels are added later on to the JPanel with:
enter code heremypanel.add(label1);
after some basic settings are set for the labels such as setForeground and setBackground.
Unfortunately when run, the scrollbar appears as if its not required (see image)
http://i.imgur.com/zp0QKGG.png
The table text seen in the image is made up of multiple JLabels.
If it's not possible to resolve the issue without using a Layout Manager I will switch to BoxLayout, I was just hoping there would be a solution.
The problem is JScrollPanel needs the preferred size of the view component to determine when the view exceeds the scroll pane's viewable area.
The preferred size of a component is normally determined via the layout manager. While you can use setPreferredSize, it is typically discouraged and you will simply run into the same problem as the content exceeds what ever value you decide to set.
A better solution would be to use a LayoutManager or compound layout (using multiple layout managers over multiple containers) to achieve the result you desired...or write your own...
I have a TabLayoutPanel and i don't want to give it a fixed height like in the following code example (tabPanel.setHeight("100px");). I want to give it the height of the tab content e.g. the HTML-Widget in the first tab). If i don't set the hight manually, the tab content is not shown at all. Is there any way to get this working with a height adapted to the content?
public class GWTTest implements EntryPoint {
public void onModuleLoad() {
TabLayoutPanel tabPanel = new TabLayoutPanel(3, Unit.EM);
tabPanel.setAnimationDuration(400);
tabPanel.add(new HTML("Tab1 Content"), "Tab 1");
tabPanel.add(new HTML("Tab2 Content"), "Tab 2");
tabPanel.setHeight("100px");
RootPanel.get().add(tabPanel);
}
}
I also tried to mess around directly in the css with the "overflow" and "postition"-attributes, but this then breaks always the animation or something else.
Edit: It seems the easiest way would be to implement my own tab panel - or use an existing javascript library.
Layout panels are a special kind of container in GWT that required sizes from their parents and can size themselves. The basis is the two interfaces ProvidesResize and RequiresResize - indicates that the object will size its children, the other that it must be sized when the parent's size changes. Most layout panels (like TabLayoutPanel) implements both - it needs a size change from its parent, and when it gets it, it will size its children, each tab.
To kick it off though, you need to add the root widget to a RootLayoutPanel, not a RootPanel. There are several chief differences - there is only one RootLayoutPanel (no get(String) method), and the RootLayoutPanel will size its children, while RootPanel will not.
Use RootLayoutPanel.get().add(tabPanel) instead of RootPanel.get().add(tabPanel).
I have also ran up with this issue, but sadly it requires height to be set. All the workaround s where a failure. But some of them suggest the following.
You can try to replace the TabLayoutPanel with a HeaderPanel:
A panel that includes a header (top), footer (bottom), and content
(middle) area. The header and footer areas resize naturally. The
content area is allocated all of the remaining space between the
header and footer area.
Alternatively you can override the onResize() method your ResizeLayoutPanel calculate the height of your embedded content and set the appropriate height.
If you want scrolling functionality you have to embed your VerticalPanel in a ScrollPanel or use CSS to set the oferflow property.
Guys, I need to put some buttons in a jscrollpanel, but the JScrollPane won't create a scroll vertically. I'm using a JPanel inside the JScrollPane which is using the simple FlowLayout layout. How can I make the JScrollPanel to scroll only in the vertical??
Problem:
Desired Solution:
Check out the Wrap Layout
The fact you use a JScrollPane changes quite a few things concerning the internal FlowLayout. indeed, when the FlowLayout tries to layout contained JButtons, it use for that the available space. In your case, you don't have limits to the space in the "scrollable client" of your JScrollPane. As a consequence, considering your FlowLayout has infinite space, it uses this space to display items according to it.
So the solution would be to change your scrollable client in order to limit its viewable area to the same than your JScrollPane's JViewport.
However, you would not even in this case have your line returns, as FlowLayout don't really well handle this case.
Were I to be you, I would of course choose an other layout. As GridLayout don't really well handles borders, i think the only reasonible standard layout you can use is GridBagLayout, althgough I fear your dynamic content constraints may require you something even more customizable.
JTextArea c = new JTextArea();
c.setLineWrap(true);
c.setWrapStyleWord(false);
This will wrap anything in a text area to the next line without creating a Horizontal Scroll.
Use the modified Flow Layout that I posted in this answer: How can I let JToolBars wrap to the next line (FlowLayout) without them being hidden ty the JPanel below them?
It will wrap to the next line and your scrollbar should scroll vertically.
scrollbar = new Scrollbar(Scrollbar.VERTICAL);
Or you could use a JList.
See this site for more info: http://docs.oracle.com/javase/tutorial/uiswing/components/list.html
the example class: ListDialog uses only a vertical scrollbar, when the window is resized or the elements don't fit the view.