RichFaces et le Style

Version imprimable

02/07/2008, 14h03
midos

RichFaces et le Style

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!!!!!
02/07/2008, 14h19
romaintaz

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").
02/07/2008, 16h29
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é!!!!!!
02/07/2008, 16h43
romaintaz

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

Code:

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

et dans le bouton :

Code:

<rich:commandButton ... styleClass="uneClasseDefinieDansMonFichierCSS"/>
02/07/2008, 16h45
romaintaz

Citation:

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 ;) )

Code:

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!!!!:(

03/07/2008, 08h29
romaintaz

Le fait de mettre le tag avant la balise HTML, ça va pas aider !!
Personnellement, j'essaierais de la mettre entre les balises head...
03/07/2008, 10h22
midos

Toujours rien!!!!
:cry::cry::cry::cry:
03/07/2008, 10h39
romaintaz

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

Code:

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)!!!!

03/07/2008, 11h23
romaintaz

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 ?
03/07/2008, 12h31
midos

Je vais essayer!!!!!!!!
04/07/2008, 09h19
Breezy

Remplace

Code:

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

par

Code:

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

sans le point devant rsButton
09/07/2008, 09h01
midos

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???