I'm using GWT 2.4 and uiBinder.
I'm trying to get a grouping of widgets in the center of a page aligned vertically with a single outside border. I thought it would be fairly easy, but I need to use a vertical layout in the center of the page to align the widgets.
The widgets are lined up the way I wanted using Vertical Panels, but there isn't a border option available, unless I want to put borders around each of the elements using the borderwidth property.
Here is the uiBinder code:
<g:HTMLPanel ui:field="mainPanel">
<g:VerticalPanel ui:field="verticalPanel" styleName="{style.center}">
<g:Label ui:field="titleLabel"></g:Label>
<g:Label ui:field="loggedInUserLabel" text="You are logged in as: "> </g:Label>
<g:Label ui:field="userNameLabel" styleName="{style.spacer-bottom}"></g:Label>
<g:FormPanel ui:field="formPanel" styleName="{style.spacer-bottom}">
<g:FileUpload ui:field="fileUpload"></g:FileUpload>
</g:FormPanel>
<g:Label ui:field="Label" text="Please select:"></g:Label>
<g:ListBox ui:field="ListBox" styleName="{style.spacer-bottom}" visibleItemCount='5'>
<g:item value="-1">-- Please select item(s) below: --</g:item>
</g:ListBox>
<g:Button ui:field="Button" styleName="{style.button}" text="Calculate"></g:Button>
<g:HorizontalPanel ui:field="horizontalPanel" styleName="{style.spacer-top}">
<g:cell width='5em' horizontalAlignment="ALIGN_LEFT">
<g:Button ui:field="cancelButton" styleName="{style.exitcancelbutton}" text="Cancel"></g:Button>
</g:cell>
<g:cell width='5em' horizontalAlignment="ALIGN_RIGHT">
<g:Button ui:field="exitButton" styleName="{style.exitcancelbutton}" text="Exit"></g:Button>
</g:cell>
</g:HorizontalPanel>
</g:VerticalPanel>
</g:HTMLPanel>
Did I design this wrong, I mean using the wrong panel, for what I'm trying to do?
Okay, I figured this one out on my own. Being a java dev I need to lean more on the CSS solutions, but after doing some thinking, CSS is the correct way to do this. I put this into my CSS:
.mainPanel {
width: 400px ;
margin-left: auto ;
margin-right: auto ;
border: 1px solid black;
padding: 2px;
margin-bottom:6px;
}
and then I leverage the topmost panel, which is my main container, (the HTMLPanel) and apply the style to it:
<g:HTMLPanel ui:field="mainPanel" styleName="{style.mainPanel}">
<table width="30%" align="center">
<tr> etc...
It's centered in the page and has a border like I wanted. I generally lean towards the table layouts out of habit, but it seems to work well for what I want here.