web-dev-qa-db-fra.com

Comment aligner les boutons sur un HorizontalPanel (GWT)

J'essaye de mettre en place un dialogue simple. J'aimerais que les boutons OK et Annuler soient alignés en bas de la boîte de dialogue. J'intègre les boutons dans HorizontalPanel et j'essaie de définir l'alignement horizontal sur DROITE. Cependant, cela ne fonctionne pas. Comment aligner les boutons correctement? Merci . Voici 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;
}
javagwt
22
Keox

L’important est d’appeler setHorizontalAlignment avant en ajoutant 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 souhaitez que vos boutons soient bien serrés, placez-les dans un nouveau conteneur et placez-le dans le HorizontalPanel situé à droite.

29
zmila

Ajoutez un dernier conseil à ce sujet: si vous utilisez UiBinder pour agencer vos panneaux, vous aurez du mal à comprendre comment définir la propriété d’alignement avant d’ajouter des widgets au panneau. De plus, en utilisant l'attribut de bean directement sur le panneau, comme ...

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

... ne marche pas. L'astuce? Enveloppez tous les enfants d'un DockPanel, HorizontalPanel ou VerticalPanel sur lesquels 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 devrez probablement définir la "largeur" ​​ainsi que l’alignement si vous l’utilisez sur un panneau horizontal, et inversement. Voir la Javadoc pour CellPanel pour les détails.

14
Peter Wagener

Voici un autre exemple 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>
4
mrbang

Vous voudrez peut-être utiliser Firebug pour vérifier les étendues de HorizontalPanel lui-même. Vous pourriez avoir besoin d'un 

hp.setWidth("100%");

HorizontalPanel s'adapte généralement au contenu. Par conséquent, si vous y placez quelques boutons, il restera aligné, car le tableau ne s'agrandira pas.

3
bikesandcode

Vous pouvez également utiliser setCellHorizontalAlignment sur le panneau qui contient 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);
2
Matt Moriarity

Le meilleur moyen d’aligner les contrôles à droite ou à gauche consiste à écrire deux lignes de code CSS comme suit:

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

puis assignez-les au contrôle comme suit:

HorizontalPanel hpButtons = new HorizontalPanel();
hpButtons.addStyleName("buttonToRight");
1
Arash moradabadi

J'ai trouvé un exemple d'alignement des boutons: http://gwt.google.com/samples/Showcase/Showcase.html#CwDialogBox

0
Keox

Pour les utilisateurs d’UIBinder, je souhaite développer un peu plus la réponse de @Peter Wagener.

Comme @Peter Wagener l'a dit, les problèmes suivants ne fonctionnent pas (je crois que c'est un bug)

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

Ici, j'ai fourni un exemple pour contourner le problème (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 doit avoir une largeur suffisante.
  2. N'attribuez pas de largeur aux cellules restantes afin d'éviter tout écart entre le premier et le deuxième bouton.
0
Alex

Assez tard pour répondre mais je veux juste mentionner pour le compte rendu que le réglage de la largeur est important (comme bikesandcode l’a déjà suggéré ci-dessus), sinon cela risque de ne pas fonctionner.

La suite a fonctionné pour moi,

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