voyent
ThemeRoller in 2.1  XML
Forum Index -> Development Build Feedback Go to Page: 1, 2 Next 
Author Message
lafortunejm0

Joined: 13/May/2010 15:24:59
Messages: 9
Offline


Hi,

I'm testing the 2.1 Beta and like it so far but I have yet to figure out how to apply a custom ThemeRoller theme to a page. I do not want to use sam or rime, I'd like to use a theme I got from jQuery's site. I saw that this can be specified with a configuration parameter in web.xml, but what do you assign as the parameter's value, and where do you store the theme?

Also, is API documentation available for the new ACE components? The showcase is nice but sometimes hasn't provided enough detail for me.

Thank you,
John
axlesoft


Joined: 06/Jan/2009 00:00:00
Messages: 189
Offline


It appears you need to add the jar file for the theme to your classpath..

Thank update your web.xml to include the theme name:

Code:
   <context-param>
         <param-name>org.icefaces.ace.theme</param-name>
         <param-value>le-frog</param-value>
         </context-param>
 


-Lee
lafortunejm0

Joined: 13/May/2010 15:24:59
Messages: 9
Offline


Thank you Lee, that did the trick.

It is important to note that the jar must be organized like such:

Code:
 META-INF
     resources
         ace-<theme_name>
             theme.css
             images
 


And in theme.css the references to images need to be of the form:
Code:
 url("#{resource['ace-<theme_name>:images/<whatever>']}")
 
axlesoft


Joined: 06/Jan/2009 00:00:00
Messages: 189
Offline


Interestingly it was working in my code because i also had a primefaces theme set that matched the icefaces theme.
Once I removed primefaces the theme was broken.
Looking at the code it appears that the HeadRenderer is responsible for adding the theme but nothing appears to be using the HeadRenderer.
I updated my build to make the CoreRenderer extend the HeadRenderer and now it works.
Be interesting to see whats in the 2.1.1 build.

-Lee
lafortunejm0

Joined: 13/May/2010 15:24:59
Messages: 9
Offline


Yeah, I could not get the themes downloaded off of jqueryui.com to work. I stumbled across the PrimeFaces's ones and got those to work by changing where "primefaces" was referenced to "ace".
lafortunejm0

Joined: 13/May/2010 15:24:59
Messages: 9
Offline


Also, interestingly the new ace buttons are not adopting the theme, though all the other components I've used have.
axlesoft


Joined: 06/Jan/2009 00:00:00
Messages: 189
Offline


Hopefully fixed in 2.1.1 this week.
If you need a quick fix make CoreRenderer extends HeadRenderer.

In the theme.css do something like (on all images):
.ui-widget-content { border: 1px solid #8e846b; background: #feeebd url("#{resource['ace-sunny:images/ui-bg_highlight-soft_100_feeebd_1x100.png']}") 50% top repeat-x; color: #383838; }

And you should be good to go.

-Lee
axlesoft


Joined: 06/Jan/2009 00:00:00
Messages: 189
Offline


Actually that doesnt work. It breaks the singlesubmit.
It looks like the faces-config in the jar should be calling the HeadRenderer when the application fires up.
However, I don't use a faces-config.xml in my project and I wonder if that causes a problem.
I'll see if its resolved in 2.1.1. If not I'll update my code to force the inclusion of the theme in my html header.

-Lee
artzambrano

Joined: 21/Mar/2007 00:00:00
Messages: 175
Offline


Here's a step-by-step guide on how to add a custom theme for ACE components.
The 2.1 theming strategy is not definite at this point, but it will be by the time of the final release, and proper documentation will be provided.
What has been said above in this thread is accurate; I'm just describing the sequence of steps from beginning to end and providing some more details.

At the highest level, these are the steps to follow:
1. Create a theme with the Themeroller utility.
2. Prepare the generated files to be used by ICEfaces.
3. Deploy the theme in your application.

This is a more detailed description:
1. Create a theme with the Themeroller utility.
1.1 Navigate to http://jqueryui.com/themeroller/
1.2 Use the controls on the left to create a custom theme.
1.3 Click the 'Download theme' button.
1.4 Click on 'Deselect all components' to avoid downloading unnecessary Javascript resources.
1.5 Click on 'Advanced Theme Settings'.
1.6 Enter the name of your theme in the text box labeled 'Advanced Theme Settings', e.g. 'mytheme'.
1.7 Click on the 'Download' button to save the file.

2. Prepare the generated files to be used by ICEfaces.
2.1 Locate in your file system the compressed file obtained in the previous step.
2.2 Uncompress the file into a new directory.
2.3 Open this new directory that contains the uncompressed files.
2.4 Navigate to the '/css' subdirectory.
2.5 You should see a subdirectory that has the name you chose for your theme, e.g. 'mytheme', rename this subdirectory by prepending the original name with 'ace-', e.g. 'ace-mytheme'.
2.6 Navigate to this renamed subdirectory, e.g. 'ace-mytheme'.
2.7 Change the name of the only CSS file there to 'theme.css'.
2.8 Open this theme.css file in a text editor.
2.9 Remove unnecessary structural CSS inside this file (it has been known to cause some problems).
2.9.1 If 'Deselect all components' was clicked in the previous step, this file should not contain any widget-specific CSS, but if it does, remove all CSS rules that start with the name of a widget (e.g. ui-accordion). These appear just below the rules labeled as 'Overlays' that appear after the corner radius rules. You can delete everything from this point to the end of the file.
2.10 Modify all url() declarations inside the file to comply with the JSF resource handling mechanism, and prepend each path with 'ace-<theme-name>:', e.g. url(images/ui-bg_flat_75_ffffff_40x100.png) becomes url("#{resource['ace-mytheme:images/ui-bg_flat_75_ffffff_40x100.png']}")
2.11 Put this theme in a .jar file to be served by JSF. You can accomplish this in the following way:
2.11.1 In a staging directory create a subdirectory named 'META-INF'.
2.11.2 Inside 'META-INF' create a subdirectory named 'resources'.
2.11.3 Inside 'resources' put a copy of your theme folder, e.g. 'ace-mytheme'.
2.11.4 Create a zip file that contains the 'META-INF' directory and all its contents. The name of this file can be anything; it could be the name of your theme, for example.
2.11.5 Change the extension of this zip file to 'jar'.
This is an example of the final structure
Code:
 META-INF
      resources
          ace-mytheme
              theme.css
              images
 


3. Deploy the theme in your application.
3.1 Put this .jar file inside the /WEB-INF/lib directory of your application.
3.2 In your web.xml file, add or set the org.icefaces.ace.theme context parameter to the name of your theme as the value.
e.g.
Code:
 	<context-param>
 
 		<param-name>org.icefaces.ace.theme</param-name>
 
 		<param-value>mytheme</param-value>
 
 	</context-param>
 

3.3. Launch your application and test your new theme.

Art Zambrano
ICEsoft Technologies Inc.
axlesoft


Joined: 06/Jan/2009 00:00:00
Messages: 189
Offline


Thanks Art,

I'll give that a whirl.
I'm curious as to why the HeadRenderer doesn't get called.

Right now my build doesn't seem to pick up the icefaces theme at all and simply defaults to "sam"

I do have primefaces as part of my J2EE application and for some reason background images in my application getting values such as:
Code:
 url("/Flo/javax.faces.resource/themes/sam/images/ui-default.png.xhtml?ln=primefaces&v=3.0.M3") repeat-x scroll 0 0 #D8D8D8
 


Most likely something hokey in my setup though.


artzambrano

Joined: 21/Mar/2007 00:00:00
Messages: 175
Offline


HeadRenderer gets to be invoked by having an entry in faces-config.xml like the following:

Code:
     <renderer>
       <component-family>javax.faces.Output</component-family>
       <renderer-type>javax.faces.Head</renderer-type>
       <renderer-class>org.icefaces.ace.renderkit.HeadRenderer</renderer-class>
     </renderer>
 


So, if you're also using primefaces, most likely it's overriding this entry with another one that also uses the javax.faces.Head renderer type and is associating it with a different head renderer class.

Just as a test, you could try to run your application without primefaces to see if the ICEfaces head renderer gets loaded correctly and loads the theme you configured in your web.xml.

At this point, I don't know if ICEfaces 2.1 will ship with a fix to avoid this conflict with the head renderer.

Here's a related link with some more information:

http://javaserverfaces.java.net/nonav/docs/2.1/renderkitdocs/HTML_BASIC/javax.faces.Outputjavax.faces.Head.html

Art Zambrano
ICEsoft Technologies Inc.
axlesoft


Joined: 06/Jan/2009 00:00:00
Messages: 189
Offline


Thanks for the response.
Interestingly, my J2EE app has two web apps and an ejb app.

If primefaces is present in either war then the icefaces ace styling is overridden by primefaces.

I stripped primefaces completely and now the ace styling works.

Now I just need icefaces to have some of the nice prime components like the scheduler, etc.. :-)

itscefet03

Joined: 17/Sep/2010 15:25:17
Messages: 4
Offline


artzambrano wrote:
Here's a step-by-step guide on how to add a custom theme for ACE components.
The 2.1 theming strategy is not definite at this point, but it will be by the time of the final release, and proper documentation will be provided.
What has been said above in this thread is accurate; I'm just describing the sequence of steps from beginning to end and providing some more details.

At the highest level, these are the steps to follow:
1. Create a theme with the Themeroller utility.
2. Prepare the generated files to be used by ICEfaces.
3. Deploy the theme in your application.

This is a more detailed description:
1. Create a theme with the Themeroller utility.
1.1 Navigate to http://jqueryui.com/themeroller/
1.2 Use the controls on the left to create a custom theme.
1.3 Click the 'Download theme' button.
1.4 Click on 'Deselect all components' to avoid downloading unnecessary Javascript resources.
1.5 Click on 'Advanced Theme Settings'.
1.6 Enter the name of your theme in the text box labeled 'Advanced Theme Settings', e.g. 'mytheme'.
1.7 Click on the 'Download' button to save the file.

2. Prepare the generated files to be used by ICEfaces.
2.1 Locate in your file system the compressed file obtained in the previous step.
2.2 Uncompress the file into a new directory.
2.3 Open this new directory that contains the uncompressed files.
2.4 Navigate to the '/css' subdirectory.
2.5 You should see a subdirectory that has the name you chose for your theme, e.g. 'mytheme', rename this subdirectory by prepending the original name with 'ace-', e.g. 'ace-mytheme'.
2.6 Navigate to this renamed subdirectory, e.g. 'ace-mytheme'.
2.7 Change the name of the only CSS file there to 'theme.css'.
2.8 Open this theme.css file in a text editor.
2.9 Remove unnecessary structural CSS inside this file (it has been known to cause some problems).
2.9.1 If 'Deselect all components' was clicked in the previous step, this file should not contain any widget-specific CSS, but if it does, remove all CSS rules that start with the name of a widget (e.g. ui-accordion). These appear just below the rules labeled as 'Overlays' that appear after the corner radius rules. You can delete everything from this point to the end of the file.
2.10 Modify all url() declarations inside the file to comply with the JSF resource handling mechanism, and prepend each path with 'ace-<theme-name>:', e.g. url(images/ui-bg_flat_75_ffffff_40x100.png) becomes url("#{resource['ace-mytheme:images/ui-bg_flat_75_ffffff_40x100.png']}")
2.11 Put this theme in a .jar file to be served by JSF. You can accomplish this in the following way:
2.11.1 In a staging directory create a subdirectory named 'META-INF'.
2.11.2 Inside 'META-INF' create a subdirectory named 'resources'.
2.11.3 Inside 'resources' put a copy of your theme folder, e.g. 'ace-mytheme'.
2.11.4 Create a zip file that contains the 'META-INF' directory and all its contents. The name of this file can be anything; it could be the name of your theme, for example.
2.11.5 Change the extension of this zip file to 'jar'.
This is an example of the final structure
Code:
 META-INF
      resources
          ace-mytheme
              theme.css
              images
 


3. Deploy the theme in your application.
3.1 Put this .jar file inside the /WEB-INF/lib directory of your application.
3.2 In your web.xml file, add or set the org.icefaces.ace.theme context parameter to the name of your theme as the value.
e.g.
Code:
 	<context-param>
 
 		<param-name>org.icefaces.ace.theme</param-name>
 
 		<param-value>mytheme</param-value>
 
 	</context-param>
 

3.3. Launch your application and test your new theme. 




Hi,

I did all steps but my ace:accordion lost all design.

I need to use a specific style in the css file?
artzambrano

Joined: 21/Mar/2007 00:00:00
Messages: 175
Offline


Accordion doesn't require specific styles. Did the accordion lose structural styling as well (positions, dimensions, etc.) or just theme-specific styling (colors, fonts, backgrounds, etc.)? I the tests I made, the theme was applied correctly to the accordion. Perhaps, it has to do with other styles on the page.

Art Zambrano
ICEsoft Technologies Inc.
itscefet03

Joined: 17/Sep/2010 15:25:17
Messages: 4
Offline


Lose all style.
Look

[Thumb - AccordionAfter.jpg]
 Filename AccordionAfter.jpg [Disk] Download
 Description After apply styles
 Filesize 7 Kbytes
 Downloaded:  311 time(s)

[Thumb - AccordionBefore.jpg]
 Filename AccordionBefore.jpg [Disk] Download
 Description Before apply styles
 Filesize 12 Kbytes
 Downloaded:  251 time(s)

 
Forum Index -> Development Build Feedback Go to Page: 1, 2 Next 
Go to:   
Powered by JForum 2.1.7ice © JForum Team