2010-04-06 5 views
2

J'essaie d'écrire une application qui utilise des coins arrondis pour encadrer l'application. J'ai trouvé un package on google code qui a un RoundedLinePanel et il semble fonctionner ... genre de.gwt panneau arrondi (widget standard basé sur DecoratorPanel)

Je me demande un certain nombre de choses. Est-ce ce que les gens utilisent pour créer des divs avec des coins arrondis dans GWT? Le release notes dit qu'il n'a pas changé en presque un an.

Aussi, je ne peux pas sembler définir une hauteur fixe de ce div (setHeight le place sur le div wrapper, pas le interne). donc ce n'est pas utile pour moi car j'ai une application à hauteur fixe. Enfin, si quelqu'un peut suggérer un meilleur mécanisme pour créer des divs de coins arrondis dans GWT, je suis tout ouïe.

+0

En tant qu'auteur du "package" je suis biaisé bien sûr ;-) mais le package est le moyen de créer un coin arrondi avec des divs. En ce qui concerne votre problème de réglage de la hauteur. Pourriez-vous élaborer un rapport de bogue ou en rédiger un autre: http://code.google.com/p/cobogw/issues/list. Et si vous avez d'autres demandes ou problèmes, n'hésitez pas à les signaler ou à les mentionner ici. –

+0

Eh bien, j'ai vraiment pas mal de questions, dois-je demander par ici ou créer un problème sur le lien ci-dessus? – brad

+0

Si vous avez des demandes de pr/cr s'il vous plaît faites-le sur le lien, car il est plus facile de suivre. –

Répondre

4

Il ya une belle façon d'arrondir les coins en utilisant CSS 3 (qui ne fonctionne donc pas dans IE < = 8, mais dans IE9 développeur aperçu). Jetez un oeil à http://css3please.com/ pour voir les styles impliqués. C'est assez simple en utilisant une propriété border-radius (ou -moz-border-radius ou -webkit-border-radius). Dans GWT, il suffit d'ajouter un nom de classe de style que vous voulez pour les éléments que vous voulez avoir une bordure arrondie et vous êtes parti. Bien sûr, la prise en charge des coins arrondis dans les navigateurs hérités est plus difficile, mais avez-vous besoin de le faire?

Pour les navigateurs hérités, c'est plus difficile, selon le contexte. Cela implique toujours des images pour les frontières. Vous devez créer des images qui masquent la bordure de la boîte. Ce qui fonctionne est l'astuce décrite in this answer. Pour l'utiliser dans GWT, vous pouvez utiliser uibinder, htmlelement ou créer votre propre widget. Une explication plus large de la technique peut également être trouvée here.

+0

En fait, j'utilise actuellement border-radius (équivalent moz/web) et le seul reproche (dans mon bureau) est qu'il ne fonctionne que pour Firefox/Webkit. Alors oui, je dois le faire. – brad

3

La solution la plus couramment trouvée, le decoratorPanel, est obsolète dans la version actuelle de GWT (si vous l'utilisez avec GWT 2.1.1, par exemple, vous allez vous retrouver avec un désordre d'incompatibilité entre le GWT requis doctype, le décoratorPanel, et IE, en particulier IE8).

Le doctype GWT 2.1.1 requis (! Doctype html) désactive également le populaire coins arrondis.htc pour IE8.

Vous pouvez utiliser la série CSS3 des propriétés d'angle arrondis pour ajouter des classes, mais ils ne fonctionneront pas dans les versions IE avant 9.

JQuery et autres javascript coins arrondis ont une forte probabilité de conflit avec le GWT natif js, donc nous avons abandonné ceux-ci comme une solution possible, bien que personnellement je n'ai fait aucun test pour ceux-ci.

Nous avons fini par devoir utiliser des images de coin arrondies afin d'être vraiment compatible avec les navigateurs et de créer un aspect cohérent.