Comment aligner les boutons à droite sur un HorizontalPanel (GWT)

Question

J'essaye d'implémenter un simple dialogue. Je voudrais avoir OK et annuler les boutons alignés en bas de la boîte de dialogue. J'incorpore les boutons dans le HorizontalPanel et essaye de mettre l'alignement horizontal à DROITE. Cependant, cela ne fonctionne pas. Comment faire les boutons aligner à droite? Je vous remercie. Voici est l'extrait:

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

Le point est d'appeler setHorizontalAlignmentavant ajouter vos boutons comme indiqué ci-dessous:

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 vous voulez que vos boutons soient serrés ensemble - les mettre tous les deux dans un nouveau conteneur, et les mettre le récipient à l'intérieur du droit HorizontalPanel

Answer 2

Essayez d'ajouter les boutons d'abord, puis appeler hp.setHorizontalAlignment("your aligment here").

Bonne chance!

Answer 3

Vous pouvez utiliser Firebug pour extraire les extensions du HorizontalPanel lui-même. Vous pourriez avoir besoin d'un

hp.setWidth("100%"); 

Le HorizontalPanel se redimensionne généralement au contenu, donc si vous mettez deux boutons en elle il sera aligné à gauche que la table elle-même ne se développe pas.

Answer 4

J'ai trouvé un exemple pour aligner les boutons: http://gwt.google.com/samples/Showcase/Showcase.html#CwDialogBox

Answer 5

Vous pouvez également utiliser setCellHorizontalAlignment sur le panneau contenant le HorizontalPanel. C'est ce que je fais.

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

Ajout d'une astuce à ce fil: si vous utilisez UiBinder pour mettre vos panneaux, vous aurez du mal à comprendre comment définir la propriété d'alignement avant d'ajouter des widgets au panneau. En outre, en utilisant l'attribut bean directement sur le panneau, comme ...

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

... ne fonctionne pas. L'astuce? Enveloppez les enfants d'un DockPanel, HorizontalPanel ou VerticalPanel que vous devez définir l'alignement dans un élément <g:cell>:

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

Notez que dans la plupart des cas, vous aurez probablement besoin de définir la « largeur », ainsi que la alignement si vous utilisez ceci sur un panneau horizontal, et vice versa. Voir le Javadoc for CellPanel pour les détails.

Answer 7

Voici un autre exemple en utilisant UIBinder qui devrait fonctionner:

<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

assez tard pour répondre, mais je veux juste parler pour l'enregistrement que réglage de la largeur est importante (comme bikesandcode a déjà suggéré ci-dessus) sinon il ne peut pas travail.

a fonctionné pour moi la suite,

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

Answer 9

Pour les utilisateurs UIBinder, je veux étendre la réponse de @Peter Wagener un peu plus.

Comme @Peter Wagener a dit, ce qui suit ne fonctionne pas. (Je crois que c'est un bug.)

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

Ici, je fourni un exemple pour travailler autour (plusieurs boutons).

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

REMARQUE:

1. La première cellule devrait avoir assez grande largeur.
2. Ne pas affecter de largeur aux cellules de repos, afin qu'il n'y ait pas d'espace entre le premier et le second bouton.

Answer 10

La meilleure façon de faire les contrôles alignés à droite ou à gauche est d'écrire deux lignes de CSS comme suit:

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

puis les affecter au contrôle comme suit:

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