Use jQuery ThemeRoller skins with Trinidad
------------------------------------------
Key: TRINIDAD-2120
URL: https://issues.apache.org/jira/browse/TRINIDAD-2120
Project: MyFaces Trinidad
Issue Type: Improvement
Components: Skinning
Affects Versions: 2.0.0
Reporter: Leonardo Uribe
Assignee: Leonardo Uribe
Attachments: screenshot-trinidad-cupertino.PNG
Here is the original mail from Trasca Virgil:
http://markmail.org/search/?q=themeroller%20trinidad#query:themeroller%20trinidad+page:1+mid:byczdawpyj33zqoy+state:results
Mon, 25 Oct 2010 07:01:25 -0700
Hi
I am interested to get better skinning support in Apache MyFaces. I want
to
get MyFaces closely integrated with http://jqueryui.com/themeroller/ - I am
targeting MyFaces JSF1.2 branch.
The end result should be the same with what PrimeFaces already did
- http://www.primefaces.org/themes.html
My initial idea is to implemented a JQueryCssToMyFacesCss kind of compiler
which
will get as input the jquery CSS syntax and will dump MyFaces CSS syntax.
I have few questions related with this:
* Did anybody tried something similar in the past - in the MyFaces
community?
* Do you think the approach is achievable? Do you have a better
suggestion? Is
the UI MyFaces CSS syntax a generic enough UI css framework or is making
MyFaces
specific assumptions?
* Is this doable only by implementing the previous compiler or the
MyFaces/Trinidad components should be touched also?
Here is the documentation for jQuery UI CSS framework
http://docs.jquery.com/UI/Theming/API
Thank you,
Virgil
Investigating more about this possible improvement, I notice that jquery
themeroller themes does not require jquery to work. So what can we do?
We can take themeroller themes and generate a skin from trinidad. Trinidad
already has all the pieces of the pluzze (css parser/merger and a cool skinning
api) so we should just use it.
I tried to create a skin in this way:
<skin>
<id>sunny.desktop</id>
<family>sunny</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/themeroller/sunny/jquery-ui-1.8.14.custom.css</style-sheet-name>
</skin>
<skin-addition>
<skin-id>sunny.desktop</skin-id>
<style-sheet-name>skins/themeroller/trinidad-theme.css</style-sheet-name>
</skin-addition>
The first stylesheet is the reference to a generated jquery theme and the
addition is the file that does the integration with trinidad. So, ThemeRoller
generates the .css + image files and we just need to provide a reusable .css
file to reuse the css classes. In practice with just one file we can create 20
or 30 trinidad themes in one move!
Obviously these skins are no match for casablanca theme, and will possibly have
some flaws (the same for any themeroller skin, right?), but I think it is worth
to try it. I'll attach some files here to show how it looks like.
--
This message is automatically generated by JIRA.
For more information on JIRA, see: http://www.atlassian.com/software/jira
