lundi 1 août 2011

Passage en 100% SmartGwt : Une zone Bouton

Suite à l'impossibilité de gérer le mélange des Composants Smart avec ceux de Gwt, toute l'application est modifiée pour n'utiliser que des composants SmartGwt.

1ère modification une zone cliquable (sorte de maxi bouton ) composé d'une image et d'un texte
public class MyButton extends Canvas {
public MyButton(String image,String libelle){
        super();
        this.setHeight(128);
        this.setWidth(128);
        this.setStyleName("plBoutonAction");
        VLayout v = new VLayout();
        HLayout h = new HLayout();        
        h.setAlign(Alignment.CENTER);
        h.setCursor(Cursor.HAND);
        v.setWidth(128);
        v.setHeight(128);
        v.setAlign(Alignment.CENTER);
                    
        
        img.setID("img_du_Bouton");
        img.setWidth(48);
        img.setHeight(48);
        img.setSrc(image);
        img.setCursor(Cursor.HAND);
        

        label.setHeight(48);        
        label.setAlign(Alignment.CENTER);
        label.setContents(libelle);
        label.setCursor(Cursor.HAND);
        
        h.addMember(img);
        v.addMember(h);
        v.addMember(label);        
        this.addChild(v);
        //Css style pour changer la bordure lors du Hover
        this.setStyleName("plBoutonAction");
        
    }

 Classe css:
.plBoutonAction {
    border: 1px solid #F1F1F1;
}

.plBoutonAction:hover {
    border: 1px solid #898989;
}

  
    J'ai essayé d'utiliser une classe plPointer qui ferait cursor: pointer; mais les styles des composants inclus ne semblent pas être hérités.
    Donc finalement j'utilise la méthode setCursor sur chaque sous-composant.
Cette classe possède plusieurs constructeurs avec différents paramètres width,height, container, rang du bouton dans un panneau de n boutons etc...


Further to many troubles due to a mix of Gwt/Smartgwt, I switch the application to 100% Smartgwt (except for upload).
I had some sort of Button zone which include an image and a label with a grey border appearing with the mouse hover..
I got trouble using a Css class which would do: cursor: pointer.
Style don't seem to be inherited by the member of a layout.
So at the end I use the setCursor method on each sub component.
This class get several constructors with different parameters such as width, height, container panel, button rank in a xx buttons panel etc...

Aucun commentaire:

Enregistrer un commentaire

It's your turn / Exprimez vous
What do you think, what would you like to be exposed, on which topic you don't agree....
Qu'en pensez vous, quels sujets aimeriez vous voir traités, sur quels point n'êtes vous pas d'accord....