I'm new to gwt and I want a page like this...
***********Header panel*************
Tab1 *** Root panel 1
Tab2 ***
I managed to create everything but I don't know how to make my tabs vertical like that...
My code is,
public void onModuleLoad() {
headerRightPanel.add(portalLabel);
//Tabs which I want it vertical
headerRightPanel.add(orderMenu);
headerRightPanel.add(homeMenu);
headerRightPanel.add(logout);
logout.addClickListener(this);
homeMenu.addClickListener(this);
orderMenu.addClickListener(this);
headerPanel.setVisible(false);
homeMenu.setStyleName("menuEnabled");
orderMenu.setStyleName("menuEnabled");
logout.setStyleName("menuEnabled");
headerRightPanel.setStyleName("menuPanel");
portalLabel.addStyleName("portalLabel");
Image img = new Image("images/logo1.PNG");
headerLeftPanel.add(img);
headerLeftPanel.setStyleName("menuLeftPanel");
headerPanel.add(headerLeftPanel);
headerPanel.add(headerRightPanel);
RootPanel.get("imageContainer").add(img1);
RootPanel.get("sendButtonContainer").add(login);
RootPanel.get("headerContainer").add(headerPanel);
}
If you want to keep elements in a vertical position, use VerticalPanel:
http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/VerticalPanel.html
GWT has many components, unfortunatelly those ones are using tables, not css.
But in this example I would propably go with a css solution. And stay with divs only (FlowPanel with css class). GWT Vertical and Hirozontal Panels are using tables underneeth, that is a ... rough solution for creating layout.
I would mostly adise using UIBinder:
http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html
If that is not too hard for you. But it would help you create a HTML fil next to java, and is more flexible when building complex structures.
Example: FlowPanel will produce a DIV in DOM, so you can add classes to it, set styles, css, hide it, show it, etc.
FlowPanel flowpanel = new FlowPanel();
flowpanel.addStyleName("css-name"); // yuo can add many css classes
flowpanel.hide().show()// you can hide and show it.
flowPanel.add(new FlowPanel())// you can add other elements to it.
Your whole structure is wrong. Rootpanel is the parent layout to which you add other things such as panels and widgets. Are you looking for something like disclosure panel?
Here is the demo of all the panels and widgets in gwt
http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwDisclosurePanel
Related
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.
I am using ui binder to place elements on a GWT page but I am not able to place them correctly.As per my knowledge element in flow panel should appear in a horizontal line but they are appearing in a vertical line.
<g:FlowPanel>
<g:Label ui:field="searchLabel" text="{labels.searchFor}"> </g:Label>
<g:ListBox ui:field="searchListBox"></g:ListBox>
</g:FlowPanel>
<g:SimplePanel addStyleNames="{cres.style.textAlignCenter}">
<g:Button ui:field="searchButton" text="{clabels.search}"/>
</g:SimplePanel>
FlowPanel is just a (widget) wrapper around a simple div element. All the child widget will naturally flow as per the standard HTML behavior (i.e., block and inline elements are displayed as such).
On the contrary the Label widget is not a wrapper of an HTML label element. Again, is a div, so everything stacks up in your FlowPanel.
You can:
use an InlineLabel instead of a Label (will render as a span element);
use a float style on the Label or any other CSS trick to make two divs aligned horizontally;
use an HTMLPanel instead of a FlowPanel (they will behave the same), and lay out elements using also HTML for simple things like labels (i.e., mix and match HTML and Widgets inside it);
use an HorizontalPanel instead of a FlowPanel (but this will render as a table element, be warned).
Flow Panel working is some what strange. will not arrange all the Elements in the flow.Only for some Elements it will work as you expected.For example Buttons.
In case of block level elements will be same as Vertical Panel.For example if you are inserting two Horizontal Panels in a Flow Panel it is same as insering in Vertical Panel.
To achieve side by side arrangement you have to use CSS Float style.
The label is surrounded by a <div>-tag. Without a css style, every <div>-tag has a line break.
Use:
searchLabel.getElement().getStyle().setFloat(Style.Float.LEFT);
to avoid the line break.
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.
Good evening everyone;
I java swing i am trying to have a menu like in the picture
(in the picture left side)
However, it appears that it is more difficult than i thought.I had border layout and i put box layout in the middle and jscroll bar for the right side. Inside the box layout i but labels with icons and i try to chance visibility with adjustment level event. However, i could not manage to obtain any results. I made a research on the internet and stackoverflow however, again i could not exactly reach my purpose.
Regards ...
JScrollBars are not typically used alone, they are used in conjunction with JScrollPane.
Basically, you want to add you components to a container of some kind (say a JPanel) with an appropriate layout manager, then set that container as the view within a JScrollPane
See How to Use Scroll Panes for more details
i found an answer inspiring from comments of other users. First of all thank you for having a look to my question.
i used the codes in here;
http://www.java2s.com/Code/Java/Swing-JFC/AsimpleJScrollPanedemonstration.htm
problem is i required to create a container and put the items to container and then take that pane to put jscroolpane.
Regards ...
I'm looking for a component like "JTabbedPane" in which I can design each tab separately and easily but I don't want the little square buttons with tab names in runtime! Instead, I want to activate each tab panel in my code. In fact, I want to have multiple "JPanel"s with same size and location (they have complete overlap) and I set visibility of each them manually in my code but the most importing thing is that I want to design each panel as easy as possible (like clicking on the tab names in design-time).
You could use CardLayout here to create your own overlapping panels as you have described. The visibility of each panel can be programmatically changed.