• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

stylesheet messed up in richfaces JSF page

 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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>
 
Ranch Hand
Posts: 50
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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


>
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic