skinning selectonemenu| JBoss.org Content Archive (Read Only)

1. Re: skinning selectonemenu

smithbstl Jun 26, 2007 1:58 PM (in response to smithbstl)

Ok, I just needed to add an entry to theme.css which is generated using seam gen. For some reason there is no skinning of select boxes at all.

I just wonder what will happen if I change themes? Will I need to edit this every time? That does not sound very dynamic to me.

2. Re: skinning selectonemenu

sergeysmirnov Jun 26, 2007 2:36 PM (in response to smithbstl)

I guess, this is a question to Seam gen, but not to RichFaces. Right?

3. Re: skinning selectonemenu

smithbstl Jun 26, 2007 2:58 PM (in response to smithbstl)

I think so,

I was first under the impression that the input elements were skinned by the blueSky theme built into RichFaces/A4J but later found that they are done in the theme.css that is generated by seam.

It would be nice if there was some way to skin the JSF RI components (h:xxx) outside of writing custom css or if RichFaces provided replacements for these components that were skinnable similar to way Trinidad does.

4. Re: skinning selectonemenu

sergeysmirnov Jun 26, 2007 3:15 PM (in response to smithbstl)

JSF has a standard way to overwrite the presentation of the component - using other renderer as a replacement for the original one. We used this approach previously. However, overwriting the original renderer might cause missing some portion of original behavior on the presentation level. So, we try to avoid this way and keep the original renderers as they are.

P.S. Actually, Ajax4jsf (skinability is a part of it) allows to create style sheet dynamically, so, the look-n-feel will be changed if skin changes. I am speaking about xcss files. As I see, Seam Gen does not use this feature as far as you mention theme.css, but not theme.xcss

5. Re: skinning selectonemenu

smithbstl Jun 26, 2007 3:29 PM (in response to smithbstl)

Right, seam gen generates this css file

a:active, a:link, a:visited {
 color: #0D5798;
}
a:hover {
 color: #8CAFCD;
}

input, textarea, select {
 border: 1px solid #BBBBBB;
 font-size: 10px;
 background: #F0F8FF;
 color: black;
}

input[type='submit'], input[type='button'] {
 background: #4477AA;
 color: white;
 margin: 5px;
 border-color: gray;
}

.tableControl, .actionButtons {
 width: 100%;
}

.tableControl {
 text-align: right;
}

.footer {
 text-align: center;
 font-size: 10px;
}

.rich-table {
 width:100%;
}

h1 {
 font-family: Arial,sans-serif;
 color: #578BB8;
 font-size: 1.6em;
 margin-top: 0;
}

body {
 margin: 0px;
 font-family: Arial,sans-serif;
 color: #616161;
}

.body {
 padding: 30px;
}

.columnHeader:hover
{
 color: #FF6600;
}

.message {
 border: 1px solid #FFCC00;
 padding: 5px;
 margin-top: 5px;
 margin-bottom: 5px;
 background-color: #F0F8FF;
 font-size: 12px;
}

.name {
 vertical-align: top;
 font-weight: bold;
 width: 115px;
 float: left;
 padding: 5px;
 margin-top: 3px;
 clear: left;
}
.value {
 float: left;
 padding: 5px;
}
.error {
 margin-left: 20px;
 margin-top: 5px;
 float: left;
 padding: 5px;
 border: 1px solid red;
}

.errors {
 color: red;
}
.errors input {
 border: 1px solid red;
}
.errors textarea {
 border: 1px solid red;
}
.required {
 color: red;
 padding-left: 2px;
}

/* date picker style */
div.seam-date
{
 margin-top: 5px;
 border: 1px solid #AAAAAA;
 background-color: #FFFFFF;
 color: #505050;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-size: 12px;
}

table.seam-date td {
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-weight: 12px;
}

.seam-date-monthNames
{
 width: 70px;
 border: 1px solid #dddddd;
 border-right: 3px solid #444444;
 border-bottom: 3px solid #444444;
 background-color: #ffffff;
 font-size: 12px;
 cursor: pointer;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-weight: normal;
}

a.seam-date-monthNameLink, a.seam-date-monthNameLink:visited
{
 text-align: center;
 display: block;
 color: #555555;
}

a.seam-date-monthNameLink:hover
{
 background-color: #CCCCCC;
 color: red;
}

.seam-date-years
{
 height: 10em;
 overflow: auto;
 width: 60px;
 border: 1px solid #dddddd;
 border-right: 3px solid #444444;
 border-bottom: 3px solid #444444;
 background-color: #ffffff;
 font-size: 12px;
 cursor: pointer;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-weight: normal;
}

a.seam-date-yearLink, a.seam-date-yearLink:visited
{
 text-align: center;
 display: block;
 color: #555555;
}

a.seam-date-yearLink:hover
{
 background-color: #CCCCCC;
 color: red;
}

tr.seam-date-header
{
 padding: 2px 0px 2px 0px;
}

td.seam-date-header
{
 padding: 0px 8px 0px 8px;
 text-align: center;
 color: gray;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-size: 12px;
}

td.seam-date-header-prevMonth
{
 background-image: url("../img/cal-prev.png");
 background-repeat: no-repeat;
 background-position: center;
 padding: 0px 2px 0px 2px;
 width: 17px;
 height: 16px;
 margin-left: 2px;
}

td.seam-date-header-nextMonth
{
 background-image: url("../img/cal-next.png");
 background-repeat: no-repeat;
 background-position: center;
 padding: 0px 2px 0px 2px;
 width: 17px;
 height: 16px;
 margin-right: 2px;
}

tr.seam-date-headerDays
{
 color: white;
 font-weight: normal;
}

tr.seam-date-headerDays > td
{
 background-color: #CCCCCC;
 border: 1px solid #AAAAAA;
 color: white;
 text-align: center;
 width: 26px;
}

tr.seam-date-footer
{
 background-color: white;
 color: #505050;
 font-weight: bold;
}

tr.seam-date-footer > td
{
 text-align: center;
}

td.seam-date-inMonth
{
 background-color: white;
 color: black;
 font-weight: normal;
 cursor: pointer;
 border: 1px solid #ece9d8;
}

td.seam-date-outMonth
{
 background-color: white;
 color: #999999;
 font-weight: normal;
 cursor: pointer;
 border: 1px solid #ece9d8;
}

td.seam-date-selected
{
 background-color: #CCCCCC;
 border: 1px solid #AAAAAA;
 color: black;
 font-weight: normal;
}

td.seam-date-dayOff-inMonth
{
 background-color: #efefef;
 color: black;
 font-weight: normal;
 cursor: pointer;
 border: 1px solid #ece9d8;
}

td.seam-date-dayOff-outMonth
{
 background-color: #efefef;
 color: #999999;
 font-weight: normal;
 cursor: pointer;
 border: 1px solid #ece9d8;
}

td.seam-date-hover
{
 background-color: #CCCCCC;
 border: 1px solid #AAAAAA;
 cursor: pointer;
 color: red;
}

Most of this has to do with seam controls (which are slated to be merged into rich faces in the future) although there is one entry for rich-table near the top section which is curious.

It is the top few blocks that are overriding the input controls. Would it be possible for A4J to skin my input controls via xcss instead of using this css file? I really have no idea how that all works other that what you have told me. How the built in themes work is not really mentioned at all in the docs.

Thanks

6. Re: skinning selectonemenu

sergeysmirnov Jun 26, 2007 4:14 PM (in response to smithbstl)

xcss is css in XML format where some static css parameters are replaced with definitions based on skin parameters.
This is an example of xcss file.

The skin properties file allows skin parameter with name 'generalStyleSheet'. If it is defined, the additional (to the components' css files) file will be processed each time page is loaded. The file might be a context relative css file or resource file loaded from jar (the prefix resource:/// should be used in this case).

In general, we can add this parameter to the DEFAULT.skin.properties file and it will be available in any skin (because they are inherited from it). However, many people will be surprised when the form controls become colored after the next ajax4jsf upgrade.
So, the question about the possibility is not a technical one. It is about the backward compatibility (even on a look-n-feel level).

7. Re: skinning selectonemenu

jbuechel Jul 30, 2007 5:50 AM (in response to smithbstl)

Hi sergey,

i'm struggling with this issue as well. I'm using jboss seam and richfaces.

1.
If try to reference a css file by linking it as follows:

<link href="/contextPath/a4j.res/test.css" rel="stylesheet" type="text/css" />

It seems like it has not been loaded correctly.. Can't i use a4j.res? (actually i implemented a resource resolver. But if i could use the one from a4j it would be more nice.)

2.
Can you provide more information about the use of xcss please?
If i reference it as shown above but using test.xcss it's not parsed.

My web.xml looks like:

<?xml version="1.0" ?>
<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">

 <!--*********************************************
 DEBUG: Facelets development mode (disable in production)
 *********************************************-->
 <context-param>
 <param-name>facelets.DEVELOPMENT</param-name>
 <param-value>false</param-value>
 </context-param>

 <!--*********************************************
 WEB COMPONENTS
 *********************************************-->
 <!-- resource resolver -->
 <context-param>
 <param-name>facelets.RESOURCE_RESOLVER</param-name>
 <param-value>
 com.frox.fwc.resource.FaceletsJarResolver
 </param-value>
 </context-param>

 <!-- Facelets: facelet tag libraries
 This entry is only needed if the custom tag libraries are NOT referenced from
 a jar file. In the component project it self for instances. In case of the .taglib.xml file is
 located in a jar file it is loaded automatically from the META-INF directory within the jar file.
 <context-param>
 <param-name>facelets.LIBRARIES</param-name>
 <param-value>/WEB-INF/froxwebcomponents.taglib.xml</param-value>
 </context-param>-->

 <!--*********************************************
 FACELETS
 *********************************************-->
 <!-- Facelets comments: Content within comment brakets won't be rendered. This is not default behavior. -->
 <context-param>
 <param-name>facelets.SKIP_COMMENTS</param-name>
 <param-value>true</param-value>
 </context-param>

 <!--*********************************************
 AJAX4JSF
 *********************************************-->
 <context-param>
 <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
 <param-value>com.sun.facelets.FaceletViewHandler</param-value>
 </context-param>

 <context-param>
 <param-name>org.ajax4jsf.SKIN</param-name>
 <param-value>
 com/frox/fwc/view/skins/defaultFwc<!-- blueSky --><!-- classic -->
 </param-value>
 </context-param>

 <!--*********************************************
 JBOSS SEAM
 *********************************************-->
 <listener>
 <listener-class>
 org.jboss.seam.servlet.SeamListener
 </listener-class>
 </listener>

 <filter>
 <filter-name>Seam Filter</filter-name>
 <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class>
 </filter>

 <filter-mapping>
 <filter-name>Seam Filter</filter-name>
 <url-pattern>/*</url-pattern>
 </filter-mapping>

 <servlet>
 <servlet-name>Seam Resource Servlet</servlet-name>
 <servlet-class>
 org.jboss.seam.servlet.ResourceServlet
 </servlet-class>
 </servlet>

 <servlet-mapping>
 <servlet-name>Seam Resource Servlet</servlet-name>
 <url-pattern>/seam/resource/*</url-pattern>
 </servlet-mapping>

 <!--*********************************************
 JSF
 *********************************************-->
 <context-param>
 <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
 <param-value>.xhtml</param-value>
 </context-param>

 <servlet>
 <servlet-name>Faces Servlet</servlet-name>
 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>

 <servlet-mapping>
 <servlet-name>Faces Servlet</servlet-name>
 <url-pattern>*.seam</url-pattern>
 </servlet-mapping>

 <security-constraint>
 <display-name>Restrict raw XHTML Documents</display-name>
 <web-resource-collection>
 <web-resource-name>XHTML</web-resource-name>
 <url-pattern>*.xhtml</url-pattern>
 </web-resource-collection>
 <auth-constraint>
 <role-name>NONE</role-name>
 </auth-constraint>
 </security-constraint>

</web-app>

8. Re: skinning selectonemenu

jbuechel Jul 30, 2007 8:13 AM (in response to smithbstl)

I realized that there is an exception:

org.ajax4jsf.framework.resource.ResourceNotFoundException: Resource not registered : com/frox/fwc/view/themes/fwcDefault/css/fwc.css
 at org.ajax4jsf.framework.resource.ResourceBuilderImpl.getResource(ResourceBuilderImpl.java:367)
 at org.ajax4jsf.framework.resource.ResourceBuilderImpl.getResourceForKey(ResourceBuilderImpl.java:322)
 at org.ajax4jsf.framework.resource.InternetResourceService.serviceResource(InternetResourceService.java:152)
 at org.ajax4jsf.framework.resource.InternetResourceService.serviceResource(InternetResourceService.java:141)
 at org.ajax4jsf.framework.ajax.xmlfilter.BaseFilter.doFilter(BaseFilter.java:261)
 at org.jboss.seam.web.Ajax4jsfFilter.doFilter(Ajax4jsfFilter.java:40)
 at org.jboss.seam.servlet.SeamFilter$FilterChainImpl.doFilter(SeamFilter.java:69)
 at org.jboss.seam.servlet.SeamFilter.doFilter(SeamFilter.java:140)
 at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235)
 at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
 at org.jboss.web.tomcat.filters.ReplyHeaderFilter.doFilter(ReplyHeaderFilter.java:96)
 at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235)
 at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
 at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:230)
 at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175)
 at org.jboss.web.tomcat.security.SecurityAssociationValve.invoke(SecurityAssociationValve.java:179)
 at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:433)
 at org.jboss.web.tomcat.security.JaccContextValve.invoke(JaccContextValve.java:84)
 at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
 at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:104)
 at org.jboss.web.tomcat.service.jca.CachedConnectionValve.invoke(CachedConnectionValve.java:156)
 at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
 at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:241)
 at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:844)
 at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:580)
 at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
 at java.lang.Thread.run(Thread.java:595)

Code in facelet:

<link href="/froxwebcomponents/a4j.res/com/frox/fwc/view/themes/fwcDefault/css/fwc.css" rel="stylesheet" type="text/css" />

Code in resources-config.xml: (which is located in WEB-INF/classes/META-INF/ and goes in a jar in a second step)

<resource>
 <name>test.xcss</name>
 <path>com/frox/fwc/view/themes/fwcDefault/css/fwc.css</path>
</resource>

9. Re: skinning selectonemenu

jbuechel Jul 30, 2007 10:30 AM (in response to smithbstl)

For those who are interested in this topic.

It seems like it has to be used as follows:

<a4j:loadStyle src="resource://#{theme.cssSkinMapper}" />

In a seam theme properties file it's defined like this:

cssSkinMapper=package_in_classpath/css/fwcSkinMapper.xcss

quite easy.. Thanks!

10. Re: skinning selectonemenu

jbuechel Jul 30, 2007 10:38 AM (in response to smithbstl)

The content of the xcss file could be interesting as well for those who are not very familiar with this (like me):

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

]]>

</f:verbatim>

<u:selector name="a:link">
 <u:style name="color" skin="generalLinkColor" />
</u:selector>
<u:selector name="a:active">
 <u:style name="color" skin="generalLinkColor" />
</u:selector>
<u:selector name="a:visited">
 <u:style name="color" skin="visitedLinkColor" />
</u:selector>
<u:selector name="a:hover">
 <u:style name="color" skin="hoverLinkColor" />
</u:selector>


</f:template>

generalLinkColor is a property in skin.properties files.