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

  1. #1
    Membre actif
    Profil pro
    100
    Inscrit en
    juillet 2007
    Messages
    583
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations professionnelles :
    Activité : 100

    Informations forums :
    Inscription : juillet 2007
    Messages : 583
    Points : 269
    Points
    269

    Par défaut [Primefaces] Mon Composite component perd le style (la taille des textes n'est pas la même)

    Bonjour,

    J'ai un problème de rendu graphique avec mon composite component. La taille de la police est différente du reste de l'application.
    Dans la composite, j'ai du 16px alors que partout ailleurs c'est du 14px.

    Dans l'image ci-dessous, j'ai intégré mon composite component à un dialogue d'édition :

    Nom : Sans titre.png
Affichages : 18
Taille : 17,4 Ko

    Voici le code du composite component :
    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
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:h="http://java.sun.com/jsf/html"
    	xmlns:c="http://java.sun.com/jsf/core"
    	xmlns:composite="http://java.sun.com/jsf/composite"
    	xmlns:p="http://primefaces.org/ui"
    	xmlns:cc="http://java.sun.com/jsf/composite">
     
    <!-- INTERFACE -->
    <composite:interface
    	name="historiqueEntite"
    	shortDescription="erererre ">
     
    	<composite:attribute
    		name="modifications"
    		required="true"
    		type="java.util.List"
    		shortDescription="erererer" />
     
    	<composite:attribute
    		name="titre"
    		type="java.lang.String"
    		shortDescription="ererererer"
    		default="#{msg['HistoriqueDesModifications']}" />
     
    	<composite:attribute
    		name="afficherTitre"
    		type="java.lang.Boolean"
    		shortDescription="ererrerer"
    		required="true" />
    </composite:interface>
     
     
    <!-- IMPLEMENTATION -->
    <composite:implementation>
    	<!-- !! Doit être wrappé dans un div AVEC SON PROPRE id afin de pouvoir le référencer par son nom '' dans le yhtml qui utilise ce composant !! -->
    	<div
    		id="#{cc.clientId}"
    		style="margin-top: 10px;"
    		class="Container100 ui-fluid">
     
    		<!-- AFFICHAGE DU TITRE -->
    		<p:outputLabel
    			value="#{cc.attrs.titre}"
    			styleClass="FontBold Fs18 hardblue"
    			rendered="#{cc.attrs.afficherTitre}" />
     
    		<p:dataTable
    			id="tableHistorique"
    			value="#{cc.attrs.modifications}"
    			var="modification"
    			rowKey="#{modification.id}"
    			emptyMessage="#{msg['AucuneDonneeAAfficher']}"
    			style="border:0px !important; background:none; width:100%;"
    			styleClass="ui-panelgrid-blank tableNoBorder"
    			scrollHeight="275"
    			scrollable="true">
     
    			<cc:insertChildren />
     
    			<!--DATE -->
    			<p:column
    				style="width:15%;"
    				headerText="#{msg['Property_ModificationEntite_dateModification']}">
    				<p:outputLabel value="#{modification.getDateModification()}">
    					<c:convertDateTime
    						type="date"
    						pattern="yyyy-MM-dd - HH:mm:ss" />
    				</p:outputLabel>
    			</p:column>
     
    			<!-- NOM PRENOM EMPLOYE -->
    			<p:column
    				style="width:15%;font-size:14px;"
    				headerText="#{msg['Property_ModificationEntite_employe']}">
    				<p:outputLabel value="#{modification.getNomPrenom()}" />
    			</p:column>
     
    			<!-- TYPE DE MODIFICATION + DETAILS DES CHAMPS MODIFIES-->
    			<p:column
    				style="width:15%;"
    				headerText="#{msg['Property_ModificationEntite_typeModification']}">
    				<p:outputLabel
    					id="changement"
    					value="#{modification.getTypeModification()}">
    					<p:tooltip
    						for="changement"
    						escape="false"
    						position="bottom"
    						value="#{modification.getModificationChamps()}" />
    				</p:outputLabel>
    			</p:column>
     
    			<!-- REMARQUE -->
    			<p:column
    				style="width:40%;"
    				headerText="#{msg['Property_ModificationEntite_remarque']}">
    				<p:outputLabel value="#{modification.getRemarque()}" />
    			</p:column>
     
    		</p:dataTable>
    	</div>
    	<p:outputLabel value="Essai pour la taille du texte" />
    	<p:outputLabel value="Essai pour la taille du texte en 14" style="font-size:14px;"/>
    </composite:implementation>
    </html>
    Le code du dialogue dans lequel le composant est ajouté :
    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
    <ui:composition
    	template="../../../../template.xhtml"
    	xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:h="http://java.sun.com/jsf/html"
    	xmlns:f="http://java.sun.com/jsf/core"
    	xmlns:p="http://primefaces.org/ui"
    	xmlns:ui="http://java.sun.com/jsf/facelets"
    	xmlns:c="http://java.sun.com/jsp/jstl/core"
    	xmlns:perso="http://java.sun.com/jsf/composite/composants">
    	<ui:define name="dialog">
    		<h:form id="appDialog">
    			<div
    				id="divprinc"
    				class="Container100 ui-fluid"
    				style="width: 100%"
    				align="center">
    
    				<p:focus context="panel" />
    			
    			<!-- le code de mon dialogue -->
    
    
    				<!--  AFFICHAGE  -->
    				<perso:historiqueEntite
    					id="historiqueEntite"
    					rendered="#{not appDialog.isInCreationMode()}"
    					modifications="#{appDialog.modifications}"
    					afficherTitre="#{appDialog.isAfficherTitre()}"
    					titre="#{appDialog.getTitreHistorique()}" />
    
    			</div>
    		</h:form>
    	</ui:define>
    </ui:composition>
    Le template du dialogue :
    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
    <!DOCTYPE html>
     
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:h="http://java.sun.com/jsf/html"
    	xmlns:f="http://java.sun.com/jsf/core"
    	xmlns:p="http://primefaces.org/ui"
    	xmlns:ui="http://java.sun.com/jsf/facelets"
    	xmlns:c="http://java.sun.com/jsp/jstl/core">
     
    <h:head>
    	<f:facet name="first">
    		<meta
    			http-equiv="X-UA-Compatible"
    			content="IE=edge" />
    		<meta
    			http-equiv="Content-Type"
    			content="text/html; charset=UTF-8" />
    		<meta
    			name="viewport"
    			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    		<meta
    			name="apple-mobile-web-app-capable"
    			content="yes" />
    	</f:facet>
     
    	<h:outputStylesheet
    		name="css/font-icon-layout.css"
    		library="sentinel-layout" />
    	<h:outputStylesheet
    		name="css/sentinel-layout.css"
    		library="sentinel-layout" />
    	<h:outputStylesheet
    		name="css/core-layout.css"
    		library="sentinel-layout" />
    	<h:outputStylesheet
    		name="perso-style.css"
    		library="css" />
    	<h:outputScript
    		name="js/layout.js"
    		library="sentinel-layout" />
     
    	<ui:insert name="head" />
    	<title>#{editionDialog.getDialogTitle()}</title>
    </h:head>
     
    <h:body style="background:none">
     
    	<p:messages
    		autoUpdate="true"
    		escape="false" />
     
    	<ui:insert
    		id="dialog"
    		name="dialog" />
    	<p:spacer height="10px"></p:spacer>
    	<p:panelGrid
    		id="buttonPanel"
    		columns="2"
    		styleClass="ui-panelgrid-blank tableNoBorder"
    		style="margin-left: auto; margin-right: auto;">
    	</p:panelGrid>
     
     
    </h:body>
     
    </html>
    Est-ce que qqun sait pourquoi le style n'est pas le même ?
    Un grand merci pour votre aide
    Images attachées Images attachées   

  2. #2
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    novembre 2006
    Messages
    6 918
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2006
    Messages : 6 918
    Points : 8 796
    Points
    8 796
    Billets dans le blog
    1

    Par défaut

    Difficile de dire quelle définition est utilisée aux 2 endroits mais je te suggère d'utiliser les outils des navigateurs "modernes" pour déterminer de quelle classe vient la taille.
    Avec Firefox, tu fais F12 sur ta page et tu utilises l'icône en haut à gauche avant d'aller pointer vers ton élément dans la page.
    Dans la vue qui s'affiche, tu as les classes de styles associées à ton élément avec leur provenance, ça devrait t'aider à comprendre d'où vient la différence
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  3. #3
    Membre actif
    Profil pro
    100
    Inscrit en
    juillet 2007
    Messages
    583
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations professionnelles :
    Activité : 100

    Informations forums :
    Inscription : juillet 2007
    Messages : 583
    Points : 269
    Points
    269

    Par défaut

    J'ai effectivement pu identifier la classe qui manquait avec l'outil

    Merci pour ton aide

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

Discussions similaires

  1. Réponses: 3
    Dernier message: 28/07/2014, 21h50
  2. Réponses: 3
    Dernier message: 08/09/2012, 14h52
  3. Problème avec mon Composite
    Par rahmoucha dans le forum Eclipse Platform
    Réponses: 6
    Dernier message: 16/02/2010, 17h08
  4. [Flex builder3] rendering de "composite components"
    Par Jacques - 06 dans le forum MXML
    Réponses: 2
    Dernier message: 07/05/2008, 08h21

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