IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

GWT et Vaadin Java Discussion :

[GWT 2.4 - UI] Placement des Widgets/ CSS


Sujet :

GWT et Vaadin Java

  1. #1
    Membre averti Avatar de GyZmoO
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    février 2006
    Messages
    428
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : février 2006
    Messages : 428
    Points : 301
    Points
    301
    Par défaut [GWT 2.4 - UI] Placement des Widgets/ CSS
    Bonjour à tous.

    D'avance, excusez moi si je poste dans le mauvais forum (j'ai longtemps hésité...).

    Je découvre GWT, et j'ai voulu faire un truc tout simple :

    Voici ma classe Java
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    public class ContainerView extends Composite
    {
     
      private static ContainerViewUiBinder uiBinder = GWT
    	  .create(ContainerViewUiBinder.class);
     
      interface ContainerViewUiBinder extends UiBinder<Widget, ContainerView>
      {
      }
     
      public ContainerView()
      {
    	initWidget(uiBinder.createAndBindUi(this));
      }
     
     
      public ContainerView(String firstName)
      {
    	initWidget(uiBinder.createAndBindUi(this));
      }
    }
    Mon template :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    	xmlns:g="urn:import:com.google.gwt.user.client.ui">
     
    	<ui:style src="Bb.css"></ui:style>
     
     
    	<g:VerticalPanel stylePrimaryName="{style.container}">
     
    	  <g:Label>
    	  Coucou
    	  </g:Label>
     
    	</g:VerticalPanel>
     
    </ui:UiBinder>
    Rien de bien compliqué..

    Dans mon fichier CSS j'ai :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    .container
    {
      top: 50px;
      /*d'autres propriétés */
    }
    Donc, moi bête, je m'attend à ce que mon Panel soit à 50px du Top de la fenêtre... Bah en fait non, il est collé au Top de la fenêtre. Hop un coup de Firebug et je vois ça pour mon composant en question:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    element.style
    {
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    top:0
    }
    
    .GBUIWHLCEI (nom de ma classe après magouille de GWT pour masquer le nom ^^)
    {
    top: 50px;        <--- Cette propriété est barrée
    }
    Donc j'ai fait un coup de google pour savoir ce que "element.style" avait à voir dans l'histoire, il parait donc que sous Firebug element.style correspond à des attributs que l'on passe directement au composant...

    Bref, pour le moment je m'en sors en rajoutant !important à ma propriété top CSS, mais je me demandais si quelqu'un pouvait me donner une piste/astuce pour éviter ce genre de bricolage !

    Merci

    Ps : j'ai longtemps hésité entre poster ici et poster sur le forum CSS. La pièce est tombé côté face (=GWT)
    define: Programmeur : Celui qui résout un problème que vous n'aviez pas, d'une façon que vous ne comprenez pas.

  2. #2
    in
    in est déconnecté
    Membre expérimenté Avatar de in
    Profil pro
    Inscrit en
    avril 2003
    Messages
    1 612
    Détails du profil
    Informations personnelles :
    Localisation : France, Finistère (Bretagne)

    Informations forums :
    Inscription : avril 2003
    Messages : 1 612
    Points : 1 718
    Points
    1 718
    Par défaut
    bonjour,

    as tu essayé en faisant
    class="{style.container}"

    à la place de
    stylePrimaryName="{style.container}"
    "If email had been around before the telephone was invented, people would have said, 'Hey, forget email! With this new telephone invention I can actually talk to people!"

    Besoin d'une nouvelle méthode pour développer ? -> http://www.la-rache.com/

  3. #3
    Membre averti Avatar de GyZmoO
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    février 2006
    Messages
    428
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : février 2006
    Messages : 428
    Points : 301
    Points
    301
    Par défaut
    Bonjour !

    Et merci pour ta réponse, je teste ça ce soir et reviens poster le résultat
    define: Programmeur : Celui qui résout un problème que vous n'aviez pas, d'une façon que vous ne comprenez pas.

  4. #4
    Membre averti Avatar de GyZmoO
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    février 2006
    Messages
    428
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : février 2006
    Messages : 428
    Points : 301
    Points
    301
    Par défaut
    Re!
    Après tests, it's a fail : pas de méthode setClass(String className) disponible ...
    define: Programmeur : Celui qui résout un problème que vous n'aviez pas, d'une façon que vous ne comprenez pas.

  5. #5
    in
    in est déconnecté
    Membre expérimenté Avatar de in
    Profil pro
    Inscrit en
    avril 2003
    Messages
    1 612
    Détails du profil
    Informations personnelles :
    Localisation : France, Finistère (Bretagne)

    Informations forums :
    Inscription : avril 2003
    Messages : 1 612
    Points : 1 718
    Points
    1 718
    Par défaut
    oui désolé essaie plutôt styleName='{style.container}'

    sinon tu peux aussi essayer de mettre ton vertical panel dans un div auquel tu appliques le style. (ton vertical panel donne une table une fois compilé)
    "If email had been around before the telephone was invented, people would have said, 'Hey, forget email! With this new telephone invention I can actually talk to people!"

    Besoin d'une nouvelle méthode pour développer ? -> http://www.la-rache.com/

Discussions similaires

  1. Probleme Linear Layout,placement des widgets..
    Par frimeman dans le forum Composants graphiques
    Réponses: 3
    Dernier message: 20/04/2011, 17h50
  2. Problème de placement des widgets dans un layout
    Par maroua_mm dans le forum Qt
    Réponses: 1
    Dernier message: 20/08/2009, 16h16
  3. Ajouter des widgets GWT dans une simple application Web
    Par lanwer dans le forum GWT et Vaadin
    Réponses: 2
    Dernier message: 30/03/2009, 19h50
  4. Placement des widgets
    Par awalter1 dans le forum GTK+ avec Python
    Réponses: 2
    Dernier message: 30/10/2007, 13h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo