Centering GWT Elements in UIBinder_问答_开发者

开发者 https://www.devze.com 2023-02-19 13:09 出处：网络

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?

相关专题：gwt 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: