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.
Related
I have my website for a sneaker brand.
I'm creating a new website beside to prepare the new collection, more minimalist design etc.
I did it on Wells template (because I want a sidebare navigation)
I would like to know a few things, such as :
Put the logo on the top center of the page instead of the top left
Add the card on the top right of the screen
Add a color on the text navigation when I go over it
Add a filter color on some picture when I go over it
Add a footer on all the pages
Structure and design options are set on Squarespace templates so for much of what you're asking here, you'll need your own code. For example, there's no built-in option to set a footer on the Wells template. It says so here: https://support.squarespace.com/hc/en-us/articles/206545647-Wells-template#toc-footer
One thing though, for having a different color on navigation links when you hover over the word, go to the Design panel, then go to Site Styles and find the navigation design option for Navigation (Hover) Color. This might help: https://support.squarespace.com/hc/en-us/articles/206545127-Wells-Site-Styles-tweaks#toc-site-wide-options
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).
Let's imagine situation where you're making the layout for a webpage. In HTML you can put the stuff in divs and use CSS to set positioning, e.g. size, positioning, etc.
Let's have another situatinon, but same requirements. You're programing in Java Swing, and you also want to make layout with similar requirements, e.g. size, positioning, etc.
I haven't found layout managers useful in this situation, because they make it one way, but never as you want it, e.g. one part will be next to another part, and it will have some size.
In short: I want the layout to handle positioning and setting sizes of GUI parts as happens with divs in HTML & CSS. I'm programing it in Java Swing.
I've tried swinghtmltemplate, but know about xito try to look through these projects, maybe you will find good solution for you. And yes, there is MiG layout
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
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.