I'm trying to get a simple layout working under GWT 2.0 using UiBinder. The layout I'm trying to get is one that mimic Java's BorderLayout in where you can specify different panels in the north, south, east, west and center directions; for that I'm using DockLayoutPanel. I would like to get a header and footer, both with fixed width. The remaining viewport space would be occupied by the widget assigned to the DockLayoutPanel center slot.
The current .ui.xml file I've got is:
<g:DockLayoutPanel unit='EM'>
<g:north size='2'>
<g:HTML>HEADER</g:HTML>
</g:north>
<g:south size='2'>
<g:HTML>FOOTER</g:HTML>
</g:south>
<g:center>
<g:HTML>
<div id='loginform'>Hello!</div>
</g:HTML>
</g:center>
</g:DockLayoutPanel>
The browser only renders HEADER at the top left corner. How can I achieve the layout I'm looking for? It seems that there's more CSS you've got to know before you can use GWT layout panels, but that kind of defeats the purpose of creating the UI with it.
This works for me with none of the hacks suggested by RaphaelO.
The Javadoc example on the DockLayoutPanel uses 192 as the width for West. This is wrong - the author probably thought he was using PX, but he was using EM. So if you zoom out, you'll see that Center is far to the right.
Have you checked your using Standards Mode? This is required for the DockLayoutPanel.
Also, forgot to mention that you should use RootLayoutPanel when you add the DockLayout in your entrypoint class - don't use RootPanel.
The use of the newly introduced Layout Panels is indeed quite confusing. There is a way to make the layout occupies the whole client area. It requires a little bit of Java code in addition to the ui.xml file.
In your EntryPoint class, add a UiBinder definition with a annotation to the ui.xml file which declares the layout:
#UiTemplate("LayoutDeclarationFile.ui.xml")
interface DockLayoutUiBinder extends
UiBinder<DockLayoutPanel, TheEntryPointChildClass> {
}
private static DockLayoutUiBinder uiBinder = GWT
.create(DockLayoutUiBinder.class);
in the onModuleLoad function, instantiate the UiBinder, retrieves its root and directly add it to the DOM:
public void onModuleLoad() {
DockLayoutPanel layout = uiBinder.createAndBindUi(this);
// Make sure we use the whole client area
Window.setMargin("0px");
// Add the panel to the DOM
RootLayoutPanel.get().add(layout);
}
I tried your code block as well as the the sample block on the javadoc page for DockLayoutPanel and I am getting similar results. Only the data in the North section of the DockLayoutPanel seems to be displayed. However when i search the page (using firefox and safari on Mac) the other elements are found but they are not showing anywhere. Seems like there might be a bug with this panel and the UiBinder.
Related
Both Eclipse an Netbeans provide a vertical points of interest highlighter next to document scroll bars, which appears to be a part of an extended JScrollPane or is simply a standalone custom component.
I've marked it on the picture below (Netbeans and Eclipse version, in that order).
It highlights lots of different things and represents a flat view of the entire document.
What is this area/component called in general?
I've been looking around on pointers on how to implement such a thing in swing or abuse an existing implementation to my liking but I don't even know what to search for. Both implementations of this thing appear to be quite similar, so I'm hoping they are based on the same piece of code.
It's an extend JScrollPane which has implemted some kind of column footer.
The default JScrollPane provides row and column headers by default, check out How to use scroll panes for more details
Try taking a look at JideScrollPane from jidesoft
Eclipse just calls these vertical rulers (they are implemented with SWT in Eclipse).
I would like to move the pagingnavigator created by wicket to the right of the screen. As you can see in the picture, I want it near the red circle.
I have a html file(BoatOverview.html) consisting of the panel:
<wicket:panel>
<p><table wicket:id="searchresult" class="searchresult"/></p>
</wicket:panel>
and a java file(BoatOverview.java) which starts off:
class TelledataPanel extends Panel {
*some existing code*
}
From what I have read, you often need to create a custom PagingNavigator to do things like this with wicket. This seems awfully complex when I just want a simple css fix, how do I go about this?
Assuming, you're working with a DataTable and assuming you're creating your PagingNavigator by using DataTable.addBottomToolbar(new NavigationToolbar(DataTable)), you could call add(new SimpleAttributeModifier("style", "float:right")) on your NavigationToolbar.
But since you didn't provide any relevant code, this is purely speculative.
I am extending GWT DialogBox and my constructor looks like:
public MyBox() {
setGlassEnabled(true);
setAnimationEnabled(true);
setWidth("400px");
VerticalPanel contents = new VerticalPanel();
contents.setWidth("400px");
// init widgets
}
When I comment out second line everything works well. With animation enabled is the size of my dialog "broken". When I inspect HTML site the element has correctly 400px, but it just doesn't fully animate :/
I have few such widgets (animated boxes) and some (smaller ones) works well. What might be the problem? Thanks
EDIT:
Here is weird thing. The table element has 432px, but my DialogBox has 400px set everywhere and no padding set. I tried to force padding 0 with css and still no result.
Did you try setting the width before setting animationEnabled? Are you using an XML layout? MAybe try setting the width in there instead of in the class? I suspect the animation actually tweaks the width property and those two are conflicting.
I just looked at an example of something I did that does the same, and I changed the size of the HTMLPanel that is contained inside the dialog box, not the size of the dialog box itself. And this works with animationEnabled.
What is the best way to implement a horizontal navbar in GWT? Using a MenuBar, a TabLayoutPanel, or coding something by hand, that is take a bunch of divs an float them within another div? If played around using TabLayoutPanel but wasn't able to style it to fit my needs.
EDIT
Here's what I intend to do: I have a MasterPage, laid out using a DockLayoutPanel. I have a header, footer, and a content area. After login, the content are should be filled with some sort of navigation and an area showing some panel with some widgets.
The problem with MenuBar (and MenuItems) is its rendering. GWT is rendering everything regarding menus as table and bunch of s and s. This usually messes up the layout of the rest of the page since GWT 2.0+ uses s for most of the widgets.
So, until GWT comes up with the "Layout" version for the MenuBar custom solution is probably the best solution.
A horizontal MenuBar works great for us. Give each MenuItem a Command that triggers your navigation system, or just swap controls in and out of your content area directly.
A MenuBar will be more flexible than using a TabLayoutPanel, but less flexible than a bunch of custom-coded divs.
I need to be able to change the following styles in gwt only through the use of the css file and no java at all.
Font Size of the top tab of decorated panel
Then, the Header of the Stack Panel
The header of the caption panel
This page might be useful for you:
http://code.google.com/intl/sv-SE/webtoolkit/doc/latest/DevGuideUiCss.html
Basically, most of the GWT widgets have a class called gwt-(Classname) (e.g. gwt-StackPanel). Some have multiple ones. This should be described in the API as well, e.g.:
http://asquare.net/gwt/javadoc/1.0.21/com/google/gwt/user/client/ui/StackPanel.html