2009-07-28 9 views
3

Je dois créer un bouton d'image dans gwt qui utilise trois images (image de gauche, image centre extensible et image de droite). Les images de côté gauche et les images de droite ayant des coins arrondis. Image de centre veut être étiré dépend de Button Button size.Created ImageButton devrait avoir toutes les fonctionnalités de Button.ImageButton dans gwt

Quelqu'un peut-il m'aider à atteindre cet objectif?

+0

Pouvez-vous être plus précis? –

Répondre

5

Si vous avez besoin d'un bouton avec des coins arrondis puis il y a un certain nombre d'options:

  1. Créer un nouveau widget qui étend la DecoratorPanel pour créer les coins arrondis. Le DecoratorPanel donnera une table (HTML). Vous voudrez probablement remplacer les images standard. Regardez le fichier standard.css fourni par GWT pour trouver les styles qui définissent ces images, puis remplacez ces styles dans votre feuille de style personnalisée (recherchez la classe CSS ".gwt-DecoratorPanel"). Dans le widget, ajoutez un widget Label pour afficher le texte du bouton et fournissez des méthodes get et set sur votre widget pour obtenir et définir du texte sur l'étiquette interne. L'étiquette sera redimensionnée automatiquement, ce qui obligera la cellule à grossir.

  2. Créez un nouveau widget qui étend Composite. Le widget devrait envelopper un FlexTable. Utilisez 3 cellules sur la même ligne. Ajoutez une étiquette à la cellule centrale et fournissez des méthodes get et set sur votre widget pour obtenir et définir du texte sur l'étiquette interne. L'étiquette sera redimensionnée automatiquement, ce qui obligera la cellule à grossir. Ajoutez les gestionnaires appropriés au widget FlexTable. Je vous suggère d'utiliser ces événements pour ajouter ou supprimer des styles dans les cellules appropriées et définir les images d'arrière-plan dans une feuille de style.

  3. Vous pouvez créer votre propre widget. Cela nécessite que vous générez votre propre HTML, etc., qui peut ne pas fonctionner immédiatement dans tous les navigateurs. Je recommande d'essayer l'option 1 ou 2 en premier.

+0

J'ai presque oublié ... il y a aussi un widget CustomButton qui vous permet de mieux contrôler l'apparence du contrôle. Essayez aussi. – moin

1

Vous pourriez être en mesure d'utiliser une seule image d'image-objet si vous pouvez limiter la largeur maximale de vos boutons. Nous avons écrit une classe CssButton (extends Button) dans le cadre GWT Portlets qui utilise une seule image-objet d'image d'arrière-plan pour créer des boutons arrondis. Le code utilise l'écrêtage CSS pour sélectionner l'image d'arrière-plan correcte de l'image-objet en fonction de la largeur du bouton.

Les principaux avantages sont qu'il étend le bouton GWT normal et n'utilise qu'un seul élément BUTTON dans le DOM (léger). L'inconvénient est que la largeur maximale du bouton est limitée à l'image du bouton la plus large de l'image-objet.

Il gère également les effets de survol et de clic en utilisant le même sprite.

Le code se trouve dans le référentiel de portlets GWT si vous souhaitez approfondir votre recherche.