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] UiBinder, CSS, et Cie


Sujet :

GWT et Vaadin Java

  1. #1
    Membre éclairé 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 : 41
    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
    Par défaut [GWT 2.4] UiBinder, CSS, et Cie
    Bonjour à tous!

    Je découvre actuellement GWT en version (je suis en version V2.4)...

    Bref, pour le moment je découvre, et je suis face à une question, je vous expose la situation.

    mon module gwt contient ceci (de manière à hériter de ce thème):

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <inherits name="com.google.gwt.user.theme.clean.Clean" />

    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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
     
    <!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"
        xmlns:b="urn:import:mikon.bb.client"
        xmlns:v="urn:import:mikon.bb.client.view" >
     
        <ui:style src="bb.css" >
     
        </ui:style>
     
     
            <g:TabLayoutPanel
                addStyleNames="{style.mikon-content}"
                animationDuration="500"
                barHeight="30"
                ui:field="tabLayoutPanel" >
     
                <g:tab>
     
                    <g:header>
    Home1
                    </g:header>
     
                    <g:HTML addStyleNames="{style.mikon-display}" >
    Coucou1
                    </g:HTML>
                </g:tab>
     
                <g:tab>
     
                    <g:header>
    Home2
                    </g:header>
     
                    <v:TeamView
                        addStyleNames="{style.mikon-display}"
                        ui:field="teamView" >
                    </v:TeamView>
                </g:tab>
     
                <g:tab>
     
                    <g:header>
    1
                    </g:header>
     
                    <g:HTML>
    d
                    </g:HTML>
                </g:tab>
     
                <g:tab>
     
                    <g:header>
    3
                    </g:header>
     
                    <g:HTML>
    b
                    </g:HTML>
                </g:tab>
     
                <g:tab>
     
                    <g:header>
    5
                    </g:header>
     
                    <g:HTML>
    a
                    </g:HTML>
                </g:tab>
            </g:TabLayoutPanel>
     
    </ui:UiBinder>
    C'est mon fichier ui.xml .

    Cette ligne :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
            <g:TabLayoutPanel
                addStyleNames="{style.mikon-content}"
    Fait référence au fichier css qui contient ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    .mikon-content
    {
    	width: 90%;
    	top: 100px !important;
    	left: 5% !important;
    	background-color: #000000 !important;
    	opacity: 0.5;
    }
    Bon déjà, j'utilise !important, qui à mon sens est un hack dégeu', mais passons.

    Je génère, et après j'obtiens mon tab panel avec mes onglets tout bien.
    Arrive le moment ou je veux changer les couleurs des différents composants du tabPanel.

    Après avoir fait un coup de FireBug, je vois que les headers des onglets sont sur un div qui est de classe gwt-TabLayoutPanelTabs, et j'aimerai bien changer sa couleur! Mais comment faire au plus propre?
    Le problème c'est que dans mon fichier ui.xml je n'ai pas "accès" à ce div :/

    - dans mon .html ajouter un lien vers un fichier CSS qui surchargera cette classe?
    - ajouter dans mon module la déclaration d'un fichier CSS (dans la même veine que la solution précédente)

    Enfin, j'espère que j'ai été clair, je tiens à préciser que j'ai déjà pas mal feuilleté google et Cie, et je n'ai rien trouvé de satisfaisant (chez Google, ils disent que les 2 méthodes ci dessus sont "depecrated")... Bref, toutes les remarques/astuces/etc seront les bienvenues !!!!

    Merci bien ;

  2. #2
    Membre éclairé
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2011
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aisne (Picardie)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2011
    Messages : 51
    Par défaut
    Hello,

    j'ai trouvé un très bon article sur le sujet http://wiki.objetdirect.com/expertis...es_et_UiBinder

    Maxime

  3. #3
    Membre éclairé 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 : 41
    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
    Par défaut
    Salut !

    Très bon article, ajouté aux favoris

    Je pense que je vais m'en sortir !
    Je reviens faire part de mes avancées dés que possible !!

  4. #4
    Membre éclairé 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 : 41
    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
    Par défaut
    Bonjour, bonjour !

    D'abord merci à toi Maxime, ton article m'a un peu éclairé.

    Pour ceux que ça intéresse voila ce que j'ai fais :

    J'ai regardé la JavaDoc du TabLayoutPanel :

    J'ai pu voir toutes les règles CSS à utiliser :

    CSS Style Rules

    .gwt-TabLayoutPanel
    the panel itself
    .gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs
    the tab bar element
    .gwt-TabLayoutPanel .gwt-TabLayoutPanelTab
    an individual tab
    .gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner
    an element nested in each tab (useful for styling)
    Ensuite dans mon fichier ui.xml j'ai utilisé la balise @external pour éviter que
    le nom de classe soit brouillé, ce qui donne un truc du genre :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <ui:style>
    @external .gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs
    {
       backround-color: myColor;
    }
    </ui:style>
    Hop, une compil' plus tard, j'ai mon tab qui est bien de la couleur que je veux !!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [GWT 1.7] TabPanel et CSS
    Par GAEREL dans le forum GWT et Vaadin
    Réponses: 9
    Dernier message: 03/11/2012, 20h54
  2. gwt style css
    Par lahmar.abdel1 dans le forum GWT et Vaadin
    Réponses: 1
    Dernier message: 04/06/2009, 14h18
  3. GWT + CSS : je dois rater un truc là..
    Par mamelouk dans le forum GWT et Vaadin
    Réponses: 7
    Dernier message: 07/08/2008, 00h21
  4. comment applique Css sur composants GWT
    Par groupe dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 15/05/2008, 11h53
  5. GWT Ext et styles css personnalisés
    Par dridri dans le forum GWT et Vaadin
    Réponses: 4
    Dernier message: 12/03/2008, 09h31

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