RichFaces et le Style

**midos** · 02/07/2008, 14h03

Je suis entrain de travailler avec la bibliothèque RichFaces.
Est ce que quelqu'un peut m'expliquer comment utiliser la feuille de style(.xcss) dans une page jsp et comment un composant bien déterminé (commandbutton dans mon cas) peut être configurer selon cette page????

Voici le lien:http://livedemo.exadel.com/richfaces...sf?c=loadStyle

Merci d'avance!!!!!

**romaintaz** · 02/07/2008, 14h19

Bonjour,

Je pense qu'il suffit juste d'indiquer à ce tag là où il trouvera le fichier CSS à charger.
Ensuite, pour un composant donné, tu définis la classe CSS à appliquer grâce à l'attribut styleClass (par ex. styleClass="maClasseCSS").

**midos** · 02/07/2008, 16h29

Dessolé mais est ce que vous pouvez m'indiquer la procédure s'il vous plait!!!!
En effet, j'ai essayé et ça n'a pas marché!!!!!!

**romaintaz** · 02/07/2008, 16h43

Bah à mon avis il te suffit de faire comme dans le lien que tu as donné, genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a4j:loadStyle src="resource:///.../monFichier.css" />

et dans le bouton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<rich:commandButton ... styleClass="uneClasseDefinieDansMonFichierCSS"/>

**romaintaz** · 02/07/2008, 16h45

Envoyé par midos

Dessolé mais est ce que vous pouvez m'indiquer la procédure s'il vous plait!!!!
En effet, j'ai essayé et ça n'a pas marché!!!!!!

Ah, et si tu dis que ça n'a pas marché, dis nous ce qui n'a pas fonctionné précisément !!!!!!!!!!!!!!!!!!!!!!!!!!
(tu pourrais nous montrer ton code, mais là, ça risquerait de trop nous aider

)

**midos** · 02/07/2008, 18h59

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
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<a4j:loadStyle src="resource:///DemoAjax/WebContent/rspanel.css" />
<html>
<head>

    
</head>


<body>

<f:view>

<h:form>
<TABLE WIDTH="900" height="1200" BORDER=1 CELLSPACING=2 CELLPADDING=1>
	
	<TR ALIGN=LEFT VALIGN=TOP>
	<td></td>
		<td WIDTH="200">
		  <rich:toolBar>
               <h:commandButton styleClass=".rsButton" value="Ahmed" />
            <rich:dropDownMenu>
                <f:facet name="label"> 
                    <h:outputText value="PERSONNELS"/>
                </f:facet>
                <rich:menuItem submitMode="ajax" value="New"
                    action="#{ddmenu.doNew}" icon="/images/icons/create_doc.gif">
                </rich:menuItem>
                <rich:menuItem submitMode="ajax" value="Open"
                    action="#{ddmenu.doOpen}" icon="/images/icons/open.gif" />
                <rich:menuGroup value="Save As...">
                    <rich:menuItem submitMode="ajax" value="Save" 
                        action="#{ddmenu.doSave}" icon="/images/icons/save.gif" />
                    <rich:menuItem submitMode="ajax" value="Save All"
                        action="#{ddmenu.doSaveAll}">
                        <f:facet name="icon">
                            <h:graphicImage value="/images/icons/save_all.gif" />
                        </f:facet>
                    </rich:menuItem>
                </rich:menuGroup>
                <rich:menuItem submitMode="ajax" value="Close"
                    action="#{ddmenu.doClose}" />
                <rich:menuSeparator id="menuSeparator11" />
                <rich:menuItem submitMode="ajax" value="Exit"
                    action="#{ddmenu.doExit}" />
            </rich:dropDownMenu>
            <rich:dropDownMenu>
                <f:facet name="label">
                    <h:panelGrid cellpadding="0" cellspacing="0" columns="2"
                        style="vertical-align:middle">
                        <h:outputText value="Links" />
                    </h:panelGrid>
                </f:facet>
                <rich:menuItem submitMode="none"
                    onclick="document.location.href='http://labs.jboss.com/jbossrichfaces/'">
                    <h:outputLink value="http://labs.jboss.com/jbossrichfaces/">
                        <h:outputText value="RichFaces Home Page"></h:outputText>
                    </h:outputLink>
                </rich:menuItem>
                <rich:menuItem submitMode="none"
                    onclick="document.location.href='http://jboss.com/index.html?module=bb&amp;op=viewforum&amp;f=261'">
                    <h:outputLink
                        value="http://jboss.com/index.html?module=bb&amp;op=viewforum&amp;f=261">
                        <h:outputText value="RichFaces Forum"></h:outputText>
                    </h:outputLink>
                </rich:menuItem>

            </rich:dropDownMenu>
        </rich:toolBar>
   	</td>
		
	</TR>

	<TR>
		<TD>Element A1</TD>
		<TD WIDTH="33%">Element A2</TD>
		<TD>Element A3</TD>
		<TD>Element B1</TD>
	</TR>
</TABLE> 


</h:form>
</f:view>
</body>
</html>

NB:j'ai essayé avec ce code mais pas de résultat!!!!

**romaintaz** · 03/07/2008, 08h29

Le fait de mettre le tag avant la balise HTML, ça va pas aider !!
Personnellement, j'essaierais de la mettre entre les balises head...

**midos** · 03/07/2008, 10h22

Toujours rien!!!!

**romaintaz** · 03/07/2008, 10h39

Tu peux montrer ton fichier CSS ?
Je pense également qu'il faudrait enlever le . devant le nom de ta classe CSS...

**midos** · 03/07/2008, 10h56

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
<?xml version="1.0" encoding="UTF-8"?>
<f:template xmlns:f='http:/jsf.exadel.com/template'
   xmlns:u='http:/jsf.exadel.com/template/util' 
   xmlns="http://www.w3.org/1999/xhtml" >
 
<f:verbatim><![CDATA[
 
.rsPanel {
    border-width:1px;
    border-style:solid;
    padding:10px;
    background-position : top left;
    background-repeat : repeat-x;   
 
}
.rsInput {
    border-style:solid;
    border-width:1px;
}
.rsButton {
    border-width:2px;
    border-style:outset;
}
.rsLabel {
    font-size: 12px;
}
 
]]></f:verbatim>
 
<u:selector name=".rsPanel">
    <u:style name="border-color" skin="panelBorderColor" />
    <u:style name="background-color" skin="headerBackgroundColor" />
    <u:style name="background-image" >
           <f:resource f:key="org.richfaces.renderkit.html.GradientA"/>
     </u:style>
</u:selector>
 
<u:selector name=".rsInput">
    <u:style name="background-color" skin="additionalBackgroundColor" />
</u:selector>
 
<u:selector name=".rsButton">
    <u:style name="background-image" value="none" />
    <u:style name="background-color" skin="additionalBackgroundColor" />
    <u:style name="border-color" skin="panelBorderColor" />
</u:selector>
 
<u:selector name=".rsLabel">
    <u:style name="color" skin="headerTextColor" />
</u:selector>
 
 
    <u:style name="color" skin="headerTextColor" />
 
 
</f:template>

NB:code source de la page Css se trouvant sur le même site dont j'ai donné le lien hier(rich faces)!!!!

**romaintaz** · 03/07/2008, 11h23

Hum ouais... Franchement un bon vieux CSS "normal", c'est peut être mieux que cette façon de déclarer une feuille de style, non ?

**midos** · 03/07/2008, 12h31

Je vais essayer!!!!!!!!

**Breezy** · 04/07/2008, 09h19

Remplace

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h:commandButton styleClass=".rsButton" value="Ahmed" />

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h:commandButton styleClass="rsButton" value="Ahmed" />

sans le point devant rsButton

**midos** · 09/07/2008, 09h01

J'ai beaucoup essayer mais malheureusement j'ai pas réussi à résoudre mon problème.
En effet, je ne peux pas transformer la page Xcss en css parce que la première utilise le langage xml et css.
Mon gros problème est que eclipse ne supporte pas cette extension.
Ma question est comment créer cette page xcss dans eclipse???

RichFaces et le Style

JSF Java

Discussions similaires

Partager

Partager