Centrar elementos GWT en UIBinder

Estoy tratando de centrar un TabLayoutPanel en un uibinder y no tener suerte en absoluto. Como puede ver a continuación, he probado todos los trucos de CSS que se me ocurren. ¿Alguien puede ayudar?Centrar elementos GWT en UIBinder

<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>

Fuente

2011-03-22 Jason

El problema aquí es que .gwt-TabLayoutPanel no se aplicará a su TabLayoutPanel. Esto se debe a que los nombres de clase en los estilos UiBinder de GWT serán ofuscados en el CSS resultante.

Básicamente, hay dos soluciones:

a) o bien poner el CSS para .gwt-TabLayoutPanel en un archivo CSS simple. Incluya ese archivo en su página HTML usando

<head> 
    ... 
    <link type="text/css" rel="stylesheet" href="My.css"> 
    ... 
</head>

De esta manera, el nombre de la clase no se ofuscará.

b) O (probablemente mejor), en la sección UiBinder <style>, utilice un nombre de clase arbitraria como .panel, y cambiar su código como este:

<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}" >

De esta manera, se ofuscado el nombre de clase tanto en la definición de estilo como en el atributo de clase de su panel.

Ahora su panel debe estar centrado.

Fuente

2011-03-23 21:16:06

Hay otra solución exactamente para el caso de jour (por cierto, se menciona en javadoc como no recomendado para el nuevo código).
En Vista:

interface GlobalResources extends ClientBundle { 
     @NotStrict 
     @Source("../resources/css/global.css") //legacy.css 
     CssResource css(); 
}

de Vista constructor:

 // Inject global styles. 
     GWT.<GlobalResources>create(GlobalResources.class).css().ensureInjected();

De esa manera standart CSS se puede utilizar sin ofuscación.

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; 
}

Me inyectaron en GlobalResources presentador principal, de modo de editar el tema para los widgets standart se convirtió en mucho más fácil (Menultem, DialogBox, etc.).

Fuente

2011-03-23 22:50:51

Si la ofuscación de la stylename es el problema, ya que los otros sugirieron simplemente añaden:

@external .gwt-TabLayoutPanel;

a la < ui: style> parte.

Fuente

2011-03-24 07:49:36

La razón por la que no uso esta solución es, que se aplica el estilo a todos los TabLayoutPanels en la página, aunque se define localmente en un '' .. Me gusta mucho el hecho de que cada archivo de UiBinder tenga su propio "espacio de nombres"; las definiciones globales deberían ir en un archivo CSS global en mi opinión. –

Centrar un elemento se puede hacer con un elemento de la célula como esto:

<g:HorizontalPanel width="100%" height="100%"> 
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE"> 
    <g:Label>Hello Center</g:Label> 
</g:cell> 
</g:HorizontalPanel>

Fuente

2011-07-17 18:47:40 mrbang

Respuesta

Cuestiones relacionadas