Cómo alinear los botones en un HorizontalPanel (GWT)

Question

Estoy tratando de implementar un diálogo simple. Me gustaría tener OK y cancelar botones alineados a la derecha en la parte inferior del cuadro de diálogo. Incruste los botones en HorizontalPanel y trato de establecer la alineación horizontal a la DERECHA. Sin embargo, esto no funciona. Cómo hacer que los botones se alineen a la derecha? Gracias. Aquí está el fragmento:

private Widget createButtonsPanel() { 
    HorizontalPanel hp = new HorizontalPanel(); 
    hp.setCellHorizontalAlignment(saveButton, HasHorizontalAlignment.ALIGN_RIGHT); 
    hp.setCellHorizontalAlignment(cancelButton, HasHorizontalAlignment.ALIGN_RIGHT); 
    hp.add(saveButton); 
    hp.add(cancelButton);  

    return hp; 
} 

Answer 1

El punto es llamar setHorizontalAlignmentantes añadiendo sus botones como se muestra a continuación:

final HorizontalPanel hp = new HorizontalPanel(); 
final Button saveButton = new Button("save"); 
final Button cancelButton = new Button("cancel"); 

// just to see the bounds of the HorizontalPanel 
hp.setWidth("600px"); 
hp.setBorderWidth(2); 

// It only applies to widgets added after this property is set. 
hp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT); 

hp.add(saveButton); 
hp.add(cancelButton); 

RootPanel.get().add(hp); 

Si desea que sus botones para ser apretado juntos: colóquelos en un recipiente nuevo y colóquelos en el HorizontalPanel horizontalmente alzado.

Answer 2

intenta agregar los botones primero y luego llamar hp.setHorizontalAlignment("your aligment here").

¡Buena suerte!

Answer 3

Es posible que desee utilizar Firebug para verificar las extensiones de HorizontalPanel. Es posible que necesite un

hp.setWidth("100%"); 

El HorizontalPanel tamaños generalmente sí al contenido, por lo que si se pone un par de botones en ella se dejará alineado como la propia tabla no se expande.

Answer 4

he encontrado un ejemplo para alinear los botones: http://gwt.google.com/samples/Showcase/Showcase.html#CwDialogBox

Answer 5

También podría usar setCellHorizontalAlignment en el panel que contiene el HorizontalPanel. Eso es lo que hago.

// doesn't necessarily have to be a vertical panel 
VerticalPanel container = new VerticalPanel(); 
HorizontalPanel buttons = new HorizontalPanel(); 
// add the buttons 
container.add(buttons); 
container.setCellHorizontalAlignment(buttons, HasHorizontalAlignment.ALIGN_RIGHT); 

Answer 6

Adición de un consejo más a este tema: si está utilizando UiBinder para diseñar los paneles, que tendrá problemas para encontrar la manera de establecer la propiedad de alineación antes de añadir ningún widget al panel. Además, al usar el atributo Bean directamente en el panel, como ...

<g:HorizontalPanel horizontalAlignment="ALIGN_RIGHT"> 
    .... 
</g:HorizontalPanel> 

... no funciona. ¿El truco? Envuelva los hijos de un DockPanel, HorizontalPanel o VerticalPanel que necesita para establecer la alineación de un elemento en <g:cell>:

<g:HorizontalPanel> 
    <g:cell width="800px" horizontalAlignment="ALIGN_RIGHT"> 
     <g:Button ui:field="closeButton" text="Close" /> 
    </g:cell> 
</g:HorizontalPanel> 

Tenga en cuenta que en la mayoría de los casos lo más probable es necesario establecer el "ancho", así como la alineación si usa esto en un panel horizontal, y viceversa. Vea el Javadoc for CellPanel para los detalles.

Answer 7

Aquí es otro ejemplo usando UiBinder que debería funcionar:

<g:VerticalPanel> 
<g:HorizontalPanel width="100%"> 
    <g:cell horizontalAlignment="ALIGN_RIGHT" width="100%"> 
    <g:Button ui:field="cancelButton" text="Cancel"/> 
    </g:cell> 
    <g:cell horizontalAlignment="ALIGN_RIGHT"> 
    <g:Button ui:field="okButton" text="Ok"/> 
    </g:cell> 
</g:HorizontalPanel> 
</g:VerticalPanel> 

Answer 8

bastante tarde para responder, pero sólo quiero mencionar para el expediente que la fijación de la anchura es importante (como bikesandcode ya se ha sugerido más arriba) de lo contrario no puede trabajo.

A continuación trabajó para mí,

<g:HorizontalPanel width="100%"> 
    <g:cell horizontalAlignment="ALIGN_RIGHT"> 
     <g:Button ui:field="buttonOK" text="OK"/> 
    </g:cell> 
</g:HorizontalPanel> 

Answer 9

Para los usuarios UiBinder, quiero extender la respuesta de @Peter Wagener un poco más.

Como dijo @Peter Wagener, la siguiente no funciona. (Creo que esto es un error.)

<g:HorizontalPanel horizontalAlignment="ALIGN_RIGHT"> 
    .... 
</g:HorizontalPanel> 

Aquí he proporcionado un ejemplo a evitar (varios botones).

<g:HorizontalPanel> 
    <g:cell width="800px" horizontalAlignment="ALIGN_RIGHT"> 
     <g:Button ui:field="saveButton" text="Save" /> 
    </g:cell> 
    <g:cell horizontalAlignment="ALIGN_RIGHT"> 
     <g:Button ui:field="closeButton" text="Close" /> 
    </g:cell> 
</g:HorizontalPanel> 

NOTA:

1. La primera celda debe tener la anchura suficientemente grande.
2. No asigne ningún ancho a las celdas restantes, para que no haya espacios entre el primer y el segundo botón.

Answer 10

mejor manera de hacer que los controles se alinean a la derecha oa la izquierda es escribir dos líneas de CSS de la siguiente manera:

.buttonToRight { 
    float: right; 
    right: 100%; 
} 

y luego asignarlos al control de la siguiente manera:

HorizontalPanel hpButtons = new HorizontalPanel(); 
hpButtons.addStyleName("buttonToRight");