2010-04-14 4 views
10

J'ai lu un article intitulé "Tags First GWT", dans lequel l'auteur suggère d'utiliser GWT pour la gestion des événements et CSS pour la mise en page. Je ne sais tout simplement pas si l'avantage de la compatibilité entre les navigateurs de GWT l'emporte sur la flexibilité offerte par la mise en page CSS pure.Panneaux de mise en page GWT vs mise en page CSS

GWT

GWT 2.0 a des panneaux de mise en page snazzy, mais pour les amener à redimensionner correctement, vous avez vraiment besoin de construire l'ensemble de l'arbre de confinement du panneau à partir du panneau racine vers le bas. C'est une chose tout ou rien, semble-t-il.

CSS

Vous pouvez utiliser les CSS pour la mise en page d'une application trop, et je suis disposé à le faire, si seulement pour justifier mon achat de plusieurs livres vantant l'évangile de « balisage sémantique ». L'inconvénient pourrait être des incompatibilités entre navigateurs, dont je n'ai pas encore déterminé la prévalence.

Quel chemin à parcourir?

Quelle est votre opinion? Les problèmes entre navigateurs sont-ils assez mauvais, et assez répandus, pour justifier l'abandon de mes livres CSS, et la construction avec des panneaux de mise en page GWT?

+0

voulez-vous dire http://www.w3.org/TR/2009/WD-css3-layout-20090402/ quand vous parlez des mises en page css? – Anurag

+0

Pas spécifiquement. Je veux dire l'ensemble des techniques CSS pour le flottement, le positionnement, le dimensionnement, l'écoulement, la superposition et le jigger avec des trucs HTML. – David

Répondre

8

Je suis d'accord avec la recommandation de l'auteur - utiliser GWT pour la logique côté client, mais toujours utiliser HTML et CSS pour la présentation.

Le nouveau classeur d'interface utilisateur & Les modèles d'interface utilisateur déclaratifs vous encouragent à écrire votre code HTML et votre code CSS. C'est plus facile pour les concepteurs, et rend votre code maintenable. Vous pouvez lire GWT HTML layout conventions on SO - il explique comment mélanger les widgets et plain-html/css pour obtenir des avantages des deux mondes.

Le lieur d'interface utilisateur facilite l'utilisation de CSS en utilisant <ui:style>. Avec <ui:style>, vous pouvez générer des CSS spécifiques à ce fichier. GWT automatiquement obfuscate et optimise votre CSS. De plus, si vous mal épeler le nom de la classe CSS, il vous donnera une erreur de compilation (ce qui est génial) au lieu de vous en informer lorsque la page est déployée. Dans le <ui:style>, vous pouvez mettre n'importe quel CSS valide. UIBinder peut également inclure une feuille de style globale. De plus, les images d'arrière-plan dans CSS peuvent être automatiquement combinées en sprites/data: uris pour la performance.

Pour en savoir plus, je vous recommande de lire le UI Binder Guide, puis de suivre l'exemple d'application Contacts. C'est un excellent moyen de commencer.

En outre, je recommanderais d'utiliser le MVP pattern pour concevoir votre application GWT. Il y a plusieurs bons articles à ce sujet, et l'application GWT Contacts Sample est un excellent moyen de l'apprendre.

+0

En utilisant tags dans ce truc UI Binder est vraiment étrange. Je veux dire, où sont les sélecteurs? – David

+0

Mis à jour mon message. est une chose totalement optionnelle, et apporte une grande puissance à votre CSS. Cependant, si vous n'êtes pas à l'aise, vous pouvez l'ignorer complètement et inclure simplement un fichier plaine-vieux-css. –

0

Problèmes de navigateur croisés sont assez mauvais pour chercher un soulagement dans un cadre quelconque, surtout si vous n'êtes pas vraiment un concepteur/développeur front-end. Mais je ne voudrais pas abandonner les livres CSS pour le moment. Il vous aide à comprendre ce qui se passe sous les couvertures lorsque l'abstraction d'un cadre commence à fuir, et ce que vous pouvez faire pour y remédier. Google lui-même dit: «Vous n'êtes pas limité aux widgets pré-conservés, tout ce que vous pouvez faire avec le DOM et le JavaScript du navigateur peut être fait dans GWT, y compris l'interaction avec le JavaScript écrit à la main. Vraisemblablement cela inclut le style, si vous savez comment le faire (comme vous le ferez si vous avez lu et compris tous ces livres CSS).

+0

Vrai, vous pouvez faire n'importe quoi dans GWT. Tout est une question de programmation. Mais j'ai appris cette technique de CSS float à marge négative, vous savez? Argh, je sais pas. – David