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
    [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 :



    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

  2. #2
    Modérateur

    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
    J'ai effectivement pu identifier la classe qui manquait avec l'outil

    Merci pour ton aide