Centering GWT Elements in UIBinder
I am trying to center a TabLayoutPanel in a uibinder and having no luc开发者_Go百科k whatsoever. As you can see below, I've tried every CSS trick I can think of. Can anyone assist?
<ui:style>
.gwt-TabLayoutPanel {
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #666;
border-left: 1px solid #999;
border-right: 1px solid #666;
}
</ui:style>
<g:VerticalPanel ui:field="userInterfacePanel" width="100%">
<mapmaker:MapBox ui:field="mapBox"/>
<g:TabLayoutPanel barHeight="20" ui:field="interfaceTabs" height="300px" width="80%" >
<g:tab>
<g:header>Lines</g:header>
<g:Label>Select Line Data Here</g:Label>
</g:tab>
<g:tab>
<g:header>Features</g:header>
<g:Label>Select Features Data Here</g:Label>
</g:tab>
<g:tab>
<g:header>Help</g:header>
<g:Label>Help goes here</g:Label>
</g:tab>
</g:TabLayoutPanel>
<g:HorizontalPanel>
<g:Button>Generate KML</g:Button>
<g:Button>Generate Shapefile</g:Button>
</g:HorizontalPanel>
</g:VerticalPanel>
Centering an item can be done with a cell element like this:
<g:HorizontalPanel width="100%" height="100%">
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<g:Label>Hello Center</g:Label>
</g:cell>
</g:HorizontalPanel>
The problem here is, that .gwt-TabLayoutPanel will not be applied to your TabLayoutPanel. That's because the class names in GWT's UiBinder styles will be obfuscated in the resulting CSS.
There are basically two solutions:
a) Either put your CSS for .gwt-TabLayoutPanel in a plain CSS file. Include that file in your HTML page using
<head>
...
<link type="text/css" rel="stylesheet" href="My.css">
...
</head>
This way, the class name won't be obfuscated.
b) Or (probably better), in the UiBinder <style> section, use an an arbitrary class name like .panel, and change your code like this:
<ui:style>
.panel {
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #666;
border-left: 1px solid #999;
border-right: 1px solid #666;
}
</ui:style>
...
<g:TabLayoutPanel barHeight="20" ui:field="interfaceTabs"
height="300px" width="80%"
addStyleNames="{style.panel}" >
This way, the class name will be obfuscated both in the style definition, and in the class attribute of your panel.
Now your panel should be centered.
There is another solution exactly for jour case (btw mentioned in javadoc as not recommended for new code).
In View:
interface GlobalResources extends ClientBundle {
@NotStrict
@Source("../resources/css/global.css") //legacy.css
CssResource css();
}
View's constructor:
// Inject global styles.
GWT.<GlobalResources>create(GlobalResources.class).css().ensureInjected();
That way standart CSS can be used without obfuscation.
global.css:
.gwt-DialogBox .Caption {
background: #E3E8F3;
padding: 4px 24px 4px 8px;
cursor: move;
border-bottom: 1px solid #BBB;
border-top: 0px solid white;
text-align: center;
font-family: Georgia, Times New Roman, sans-serif;
}
I injected GlobalResources in main presenter so editing theme for standart widgets (MenuItem,DialogBox,etc.) became much easier.
If the obfuscation of the stylename is the problem as the others suggested simply add:
@external .gwt-TabLayoutPanel;
to the <ui:style> part.
加载中,请稍侯......
精彩评论