This week's giveaway is in the Android forum.
We're giving away four copies of Android Security Essentials Live Lessons and have Godfrey Nolan on-line!
See this thread for details.
The moose likes JSF and the fly likes stylesheet messed up in richfaces JSF page Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "stylesheet messed up in richfaces JSF page" Watch "stylesheet messed up in richfaces JSF page" New topic
Author

stylesheet messed up in richfaces JSF page

indbraz ind
Greenhorn

Joined: Oct 05, 2009
Posts: 1
I have a web app that uses myfaces 1.1.5 and tomohawk-1.1.6. I introduced richfaces 3.1.4.GA into this app. When the test page containing rich:panel is rendered, the stylesheet link comes out as <link rel='stylesheet' type='text/css' href='/ucm/a4j_3_1_4.GAcss/panel.xcss/DATB/eAGbuWPCFgAGZAKW.jsf'>
The page looks black&white - no styles are applied. When I use style link from html source and download the css - it looks messed up. I have given my web.xml below. I have re-arranged richfaces filter, removed other filters and tried few things with filter in web.xml to fix this issue but nothing worked. Any help would be greatly appreciated.

Thanks,
indbraz

css from browser url download:

60template32xmlns:f="http:/jsf.exadel.com/template3432xmlns:u="http:/jsf.exadel.com/template/util3432xmlns="http://www.w3.org/1999/xhtml346260verbatim62</verbatim6260selector32name=".dr-pnl346260style32name="background-color3432skin="generalBackgroundColor3462<!-- --></style6260style32name="border-color3432skin="panelBorderColor3462<!-- --></style62</selector6260selector32name=".dr-pnl-h346260style32name="background-color3432skin="headerBackgroundColor3462<!-- --></style6260style32name="border-color3432skin="headerBackgroundColor3462<!-- --></style6260style32name="font-size3432skin="headerSizeFont3462<!--

web.xml


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
<description>debug web.xml</description>
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>classic</param-value>
</context-param>
<context-param>
<description>Comma separated list of URIs of (additional) faces config files.
(e.g. /WEB-INF/my-config.xml)
See JSF 1.0 PRD2, 10.3.2
Attention: You do not need to put /WEB-INF/faces-config.xml in here.
</description>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>/WEB-INF/abc-beans.xml,/WEB-INF/abc-nav.xml,/WEB-INF/def-config.xml,/WEB-INF/abc-config.xml,/WEB-INF/ghi-config.xml</param-value>
</context-param>
<context-param>
<description>State saving method: "client" or "server" (= default)
See JSF Specification 2.5.3</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<description>Only applicable if state saving method is "server" (= default).
Defines the amount (default = 20) of the latest views are stored in session.</description>
<param-name>org.apache.myfaces.NUMBER_OF_VIEWS_IN_SESSION</param-name>
<param-value>20</param-value>
</context-param>
<context-param>
<description>Only applicable if state saving method is "server" (= default).
If true (default) the state will be serialized to a byte stream before it
is written to the session.
If false the state will not be serialized to a byte stream.</description>
<param-name>org.apache.myfaces.SERIALIZE_STATE_IN_SESSION</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>Only applicable if state saving method is "server" (= default) and if
org.apache.myfaces.SERIALIZE_STATE_IN_SESSION is true (= default)
If true (default) the serialized state will be compressed before it
is written to the session. If false the state will not be compressed.</description>
<param-name>org.apache.myfaces.COMPRESS_STATE_IN_SESSION</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>This parameter tells MyFaces if javascript code should be allowed in the
rendered HTML output.
If javascript is allowed, command_link anchors will have javascript code
that submits the corresponding form.
If javascript is not allowed, the state saving info and nested parameters
will be added as url parameters.
Default: "true"</description>
<param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>If true, rendered HTML code will be formatted, so that it is "human readable".
i.e. additional line separators and whitespace will be written, that do not
influence the HTML code.
Default: "true"</description>
<param-name>org.apache.myfaces.PRETTY_HTML</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>If true, a javascript function will be rendered that is able to restore the
former vertical scroll on every request. Convenient feature if you have pages
with long lists and you do not want the browser page to always jump to the top
if you trigger a link or button action that stays on the same page.
Default: "false"</description>
<param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
<param-value>true</param-value>
</context-param>

<context-param>
<description>
Validate managed beans, navigation rules and ensure that forms are not nested.
</description>
<param-name>org.apache.myfaces.VALIDATE</param-name>
<param-value>true</param-value>
</context-param>

<context-param>
<description>A class implementing the
org.apache.myfaces.shared.renderkit.html.util.AddResource
interface. It is responsible to
place scripts and css on the right position in your HTML document.
Default: "org.apache.myfaces.shared.renderkit.html.util.DefaultAddResource"
Follow the description on the MyFaces-Wiki-Performance page to enable
StreamingAddResource instead of DefaultAddResource if you want to
gain performance.
</description>
<param-name>org.apache.myfaces.ADD_RESOURCE_CLASS</param-name>
<param-value>org.apache.myfaces.renderkit.html.util.DefaultAddResource</param-value>
<!--param-value>org.apache.myfaces.component.html.util.StreamingAddResource</param-value-->
</context-param>

<context-param>
<description>
A very common problem in configuring MyFaces-web-applications
is that the Extensions-Filter is not configured at all
or improperly configured. This parameter will check for a properly
configured Extensions-Filter if it is needed by the web-app.
In most cases this check will work just fine, there might be cases
where an internal forward will bypass the Extensions-Filter and the check
will not work. If this is the case, you can disable the check by setting
this parameter to false.
</description>
<param-name>org.apache.myfaces.CHECK_EXTENSIONS_FILTER</param-name>
<param-value>true</param-value>
</context-param>

<context-param>
<description>
Change the url-pattern from the ExtensionsFilter
Default is "/faces/myFacesExtensionResource"
Note: The filter-mapping for ExtensionsFilter, the url-pattern is
this value + "/*", else there comes a exception
</description>
<param-name>org.apache.myfaces.RESOURCE_VIRTUAL_PATH</param-name>
<param-value>/faces/extensionResource</param-value>
</context-param>

<context-param>
<description>
This parameter enables partial state saving.
</description>
<param-name>javax.faces.PARTIAL_STATE_SAVING_METHOD</param-name>
<param-value>false</param-value>
</context-param>

<context-param>
<description>
If true every time a page is rendered, the corresponding JSP is dispatched also.
This is very usefull if Scriptlets are used inside the JSP.
</description>
<param-name>javax.faces.PARTIAL_STATE_SAVING_DISPATCH_EVERY_TIME</param-name>
<param-value>true</param-value>
</context-param>
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<filter>
<filter-name>extensionsFilter</filter-name>
<filter-class>org.apache.myfaces.webapp.filter.ExtensionsFilter</filter-class>
<init-param>
<description>Set the size limit for uploaded files.
Format: 10 - 10 bytes
10k - 10 KB
10m - 10 MB
1g - 1 GB</description>
<param-name>uploadMaxFileSize</param-name>
<param-value>100m</param-value>
</init-param>
<init-param>
<description>Set the threshold size - files
below this limit are stored in memory, files above
this limit are stored on disk.

Format: 10 - 10 bytes
10k - 10 KB
10m - 10 MB
1g - 1 GB</description>
<param-name>uploadThresholdSize</param-name>
<param-value>100k</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>extensionsFilter</filter-name>
<url-pattern>*.jsf</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>extensionsFilter</filter-name>
<url-pattern>/faces/*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>SourceCodeServlet</servlet-name>
<servlet-class>org.apache.myfaces.shared_tomahawk.util.servlet.SourceCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SourceCodeServlet</servlet-name>
<url-pattern>*.source</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
</welcome-file-list>
<error-page>
<error-code>500</error-code>
<location>/error.jsp</location>
</error-page>
</web-app>
Smitha H Rao
Ranch Hand

Joined: Oct 20, 2007
Posts: 50
If you put the SKIN plain like below, then richfaces will not apply style on the component. Then you can use your own style for the component.
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>plain</param-value>
</context-param>



Richfaces comes with very flexible styling where each components style can be customized using the style classes defined for each component.
Once you use plain your richfaces component looks bad wthout any styling.. but you can apply your own style in predefined style classes.

For example in my application I wanted the richfaces <rich: orderingList component to show the selected row the way I wanted. So I defined .rich-ordering-list-row-selected style in my page like below.
.rich-ordering-list-row-selected{
font-weight:bold;
background-color:lightyellow;
}

For every richfaces component the style class name and where it will be applied will be given in detail the manual at docs.jboss.org.

for example the rich: orderingList manual is given at:
http://docs.jboss.org/richfaces/3.3.1.GA/en/devguide/html/rich_orderingList.html


Hope this helps


>


Free Mock tests Interview questions
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: stylesheet messed up in richfaces JSF page
 
Similar Threads
config my-faces & tomahawk & Trinidad
<h:commandLink > Double click problem
blank index.jsp on Tomcat 5.5.9
panelNavigation2 and tree2 not working inside tiles application
NullPointerException in AutoScrollPhaseListener