Centering GWT Elements in UIBinder

Asked 22/3, 2011 at 16:42 Answered 17/7, 2011 at 18:47

I am trying to center a TabLayoutPanel in a uibinder and having no luck 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>

Thermal answered 22/3, 2011 at 16:42 Comment(0)

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>

Swoon answered 17/7, 2011 at 18:47 Comment(0)

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.

Rett answered 23/3, 2011 at 21:16 Comment(0)

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.

Quin answered 23/3, 2011 at 22:50 Comment(0)

If the obfuscation of the stylename is the problem as the others suggested simply add:

@external .gwt-TabLayoutPanel;

to the <ui:style> part.

Distefano answered 24/3, 2011 at 7:49 Comment(1)

The reason I don't use this solution is, that it applies the style to all TabLayoutPanels on the page, although it's defined locally in a <ui:style> .. I really like the fact that each UiBinder file has its own "namespace"; global definitions should go in a global CSS file in my opinion. – Rett 24/3, 2011 at 8:56

Recommended topics

Hot tags