Hi
2012/6/22 Pavitra Subramaniam<[email protected]>:
Hello Leonardo, Scott,
Thanks for working on this. The LAF is very neat. I looked at the patch
uploaded to the issue 2120 but didn't find the changes made to
DocumentRenderer. Can you upload it as well? I see 2 issues being discussed
The first patch was the "proof of concept" I did long time ago. I have
attached a second patch with the work so far and another screenshot
using other different theme:
https://issues.apache.org/jira/secure/attachment/12533025/TRINIDAD-2120-2.patch
https://issues.apache.org/jira/secure/attachment/12533026/redmond%2Bcasablanca.png
Note the patch does not include the images of each theme.
1. Integrate themes provided by jQuery ThemeRoller into Trinidad Skinning
Framework to get jQuery LAF on Trinidad applications
2. Provide an ability to integrate jQuery widgets in a Trinidad app /
enhance Trinidad component to use jQuery (?)
For 1. Integrate existing themes provided by jQuery ThemeRoller into
Trinidad Skinning Framework to get jQuery LAF on Trinidad applications -
a. for the 'sunny' theme you have defined something like this
+<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>
+<skin-addition>
+<skin-id>sunny.desktop</skin-id>
+<style-sheet-name>skins/themeroller/layout.css</style-sheet-name>
+</skin-addition>
Although the above is a very intelligent use of the feature, I was curious
why you didn't make the<skin> use "trinidad-theme.css" as the
<style-sheet-name> and do an @import of the jquery-ui...css within this
file. You are after all creating a trinidad skin that uses selectors defined
in jQuery theme. Also the<skin> by default<extends>simple desktop if none
is specified. Do we want 'jquery-ui-1.8.14.custom.css' extending from
simple. See Skinning Docs for info.
I don't know if works or not. I don't have any special reason, if put
trinidad-theme "on top" works, sounds good for me.
The layout.css could still be an addition, I think. Not sure if it needs to
@import the jquery.css as well?
That's some styles for the demo, they don't matter.
It seems we need to extend -tr-property-ref to allow a syntax like this:
.somecssclass {
border: 1px solid #aed0ea;
}
border-color: -tr-property-ref(".somecssclass", "border", "3");
-1. what if someone changes .someclass to
.somecssclass {
border: solid #aed0ea;
}
and forgets to change the '-tr-property-ref' of border-color? I think it may
be more error-prone. I like if the user explicitly spells out the property
that '-tr-property-ref' uses. Or something like
border-color: -tr-property-ref(".somecssclass", "border", "color"); //
either width/color/style
Yes, I know. The change I did works, but obviously it could be great
to include some logic there to make easier that part. For example if I
have this definition
.somecssclass {
border: 1px solid #aed0ea;
}
and then a reference like this:
border-color: -tr-property-ref(".somecssclass");
It could be great that if the skin engine can recognize in some way
that border-color can be defined inside a border declaration too and
just take it from there.
That's the part where I need some help. I would suggest something like
-tr-property-ref(".somecssclass", "border", "border-color") to be more
explicit. Anyway, I think it is not difficult to write the required
lines and at the end it will be a valuable feature.
c. Instead of copying the jquery specific CSS file to here -
trinidad-examples/trinidad-components-showcase/src/main/webapp/skins/themeroller/sunny/jquery-ui-1.8.14.custom.css,
I was wondering if we could use the static url for the jquery...css if it's
publicly available on a CDN? Seems like it is here.
Although I am not sure if @import allows specifying absolute urls
Could be, but in theory that't responsibility of JSF resource handler
implementation. It doesn't sound too easy, because you can get the
css, but and the images?. There is no need to go into this point for
now, maybe later.
The idea could be just take some themeroller skins, create one (or
many templates, because there are some small details that needs to be
fine tuned), and bundle them with trinidad. There are some icons that
are not included in themeroller skin, but that's ok, because you can
generate them (copy 4 or 5 icons from casablanca skin and change its
colors are not a big deal, right)?.
For 2. Provide an ability to integrate jQuery widgets in a Trinidad app /
enhance Trinidad component to use jQuery (?)
a. Before providing custom renderers, can't the user add the jQuery
libraries directly into the Trinidad pages where she wants the same, using
<trh:script> /<h:outputScript> works?
Once they do that it's also easy to locate components within the html page
using unique ids from their jQuery scripts and I am assuming enable
behaviors/add widgets etc. Of course the devil is in the details.
Could be.
b. Perhaps a more tight integration with jQuery is desired by Trinidad
customers
Do they want to use jquery widgets in isolation in a trinidad app or do they
want to enhance the behavior of trinidad components using the same (for
example, make tr:inputDate use the jQuery date picker widget?). Siya
mentioned that he wanted to use the jquery date picker instead of the
trinidad one.
It is an open question. My opinion is once solved the problem between
Trinidad / Themeroller skins, people will be able to create jQuery
widgets and trinidad components and change the L&F easily. Now,
current trinidad components don't use any js effects at all, and
that's another feature it would be nice to include. In other words,
you want to use jQuery date picker because it looks good.
But in practice, is not that simple. jQuery date picker uses its own
predefined css classes into the js, right? but we want to use the
selectors defined in trinidad too. So, at the end to make it work is
necessary to rewrite the js code and that means a lot of work (but it
can be done). But note the date picker will not work well in old
browsers, and things get worst in some mobile devices.
So, if the problem is have a nice L&F, and the reasons to use jQuery
widgets is no other than that, we should try as most as possible to
improve it without "sacrify" other nice features Trinidad already has.
I agree fixing just the LAF might be the first thing we can attempt to do
but (2) requires more laboring over. The need for a renderkit might be an
overkill
Sure. But keep it in mind, at the end in the future we could do that.
The idea is be friendship with jQuery, but do not get married yet ;-)
.
Suggestions are welcome
regards,
Leonardo Uribe
Thanks
Pavitra
On 6/21/2012 8:14 AM, Leonardo Uribe wrote:
Hi
I have done the following steps:
1. Override tr:document renderer to include a copy of jQuery.
2. Set in top of the skin, just one generated by Themeroller.
3. Take casablanca skin as base model and copy it in a new file.
4. Use -tr-rule-ref and -tr-property-ref (with some improvements) to
grab the parameters from the generated Themeroller skin.
That's it!
Here is the result so far:
https://issues.apache.org/jira/secure/attachment/12532880/cupertino%2Bcasablanca.png
The good part is, in casablanca skin there is already multiple layers
of selectors, so you only need to change a couple of them. That work
is already done, so you only need to map some properties.
Looks promising.
regards,
Leonardo Uribe
2012/6/21 Scott O'Bryan<[email protected]>:
This was a thread talked about on the user list. In short, Leonardo is
interested in writing a Trinidad skin that could be used with theme-roller
stylesheets so that the LAF of Trinidad could match custom JQuery ui
components. This may help quell some of the desire to move Trinidad
Component system to change to use JQuery by enabling trinidad and JQuery to
operate side by side.
He proposes to do this by adding some features to the skinning framework. I
am forwarding this to the dev list for input and discussion.
Sent from my iPhone
Begin forwarded message:
From: Leonardo Uribe<[email protected]>
Date: June 21, 2012 6:35:59 AM MDT
To: MyFaces Discussion<[email protected]>
Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
instead?)
Reply-To: "MyFaces Discussion"<[email protected]>
Hi
I can dedicate some time to this issue. It is an interesting thing to
do, and I have enough knowledge in JSF and Trinidad codebase. Anyway,
it could be good if you can review the code.
It seems we need to extend -tr-property-ref to allow a syntax like this:
.somecssclass {
border: 1px solid #aed0ea;
}
border-color: -tr-property-ref(".somecssclass", "border", "3");
To retrieve for example, in this case, only the color of the border
and so on. Any idea about how to specify that?.
Maybe we should more this discussion to dev list.
regards,
Leonardo Uribe
2012/6/21 Scott O'Bryan<[email protected]>:
Yeah, something like this MIGHT work in the case where the styles
'fit' the current DOM. You're right that there is a lot of
flexibility there.
In any case, I think this approach (integrating theme-roller) has the
most merit because, instead of rewriting Trinidad's JS, we simply
allow JQuery and Trinidad to co-exist under a common look and feel. :D
Now for the $1,000,000 question. Who wants to do it?
Scott
Sent from my iPhone
On Jun 21, 2012, at 3:25 AM, Leonardo Uribe<[email protected]> wrote:
Hi
Going back to TRINIDAD-2120, I have seen that is not really necessary to
create a parser. Instead we can use trinidad skinning code to do that. For
example:
.AFDarkBackground:alias {
background-color: -tr-property-ref(".ui-widget-header","color");
}
.AFDarkAccentBackground:alias {
-tr-rule-ref: selector(".ui-widget-content");
}
Trinidad skinning is already able to read any css and use it to derive
another skin.
I also tried to override a rendered using this hack:
http://matthiaswessendorf.wordpress.com/2008/02/20/extending-trinidads-default-renderers/
The idea was override<tr:document> to include jQuery script. It works.
We could do a "mixed" strategy. Create a custom RenderKit for trinidad,
but only override some specific renderers. Also, create a "template" theme
like is proposed in TRINIDAD-2120 and add it as a skin addition. For
example:
<skin>
<id>cupertino.desktop</id>
<family>cupertino</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/themeroller/cupertino/jquery-ui-1.8.21.custom.css</style-sheet-name>
</skin>
<skin-addition>
<skin-id>cupertino.desktop</skin-id>
<style-sheet-name>skins/themeroller/trinidad-theme.css</style-sheet-name>
</skin-addition>
<skin-addition>
<skin-id>cupertino.desktop</skin-id>
<style-sheet-name>skins/themeroller/layout.css</style-sheet-name>
</skin-addition>
In that way, you can still use ThemeRoller app / jQuery UI CSS
Framework to create
your own skin, and apply it transparently in trinidad.
So, our first task would be try apply a themeroller skin into
Trinidad, without change any renderer.
Then, optionally we can try to change the component renderers to use
some jquery widgets.
WDYT? Suggestions are welcome.
regards,
Leonardo Uribe
2012/6/21 Leonardo Uribe<[email protected]>:
Hi
I see. We could try that. What I like about that idea is that it
reduce the amount of files to be created, and at the end sounds less
restrictive and go aligned with the efforts in TRINIDAD-2120.
Also, here we have the whole point of the discussion. If we can take
some skins and include them in Trinidad, do we really need jQuery
inside Trinidad? For example, Trinidad casablanca skin look very good,
and it does not suppose use any additional js at all. Note that does
not means you cannot use jQuery together with Trinidad, but if you
have a way to convert ThemeRoller skins into Trinidad, the code
created with jQuery UI could be mixed in a transparent way with
Trinidad, because the L& F will look the same. At the end, we could
change the question about use jQuery or not into this question: How we
can use jQuery UI and create custom widgets and have the same skin
applied when using JSF + Trinidad?.
regards,
Leonardo Uribe
2012/6/20 Scott O'Bryan<[email protected]>:
Right. That's kind of why I suggested a style sheet parser. The idea
is to take some of the styles generated by file roller (the ones that
we can) and use them to generate a Trinidad skinning file.
Sent from my iPhone
On Jun 20, 2012, at 11:42 AM, Leonardo Uribe<[email protected]> wrote:
Hi Walter
Yes, I know that. There is no stopper that could avoid us to use the
datepicker widget, but note to limit the scope of the work, it sounds
more convenient to take some styles from that widget and make them
"fit" in the current implementation. It will take less time and
effort. Later, we could try to see if we can use the widget.
regards,
Leonardo Uribe
2012/6/20 Walter Mourão<[email protected]>:
Hi Leonard,
I did not understand very well.
Just take what's useful of
jQuery (css stuff) and forget about the rest.
How about the components ? Do you mean we can 'decorate' the inputs and
other things using only the CSS ? The
datepicker<http://jqueryui.com/demos/datepicker/>,
for example, needs some javascript..
Thanks,
Walter Mourão
http://waltermourao.com.br
http://arcadian.com.br
http://oriens.com.br
On Wed, Jun 20, 2012 at 12:58 PM, Leonardo Uribe<[email protected]> wrote:
Hi
I think it is possible, but note Trinidad skins has a lot more
details. In theory
you could extract the meta-info of the skin and try to generate a trinidad
skin,
from a parametrized template, but it is necessary to adjust tha
template "at hand".
For example, I tried to take casablanca skin, because its selectors are
more
simple to understand.
The idea about create a custom RenderKit from scratch sounds like a lot of
work,
but if we make some simplifications it could be possible. After all,
it should be
possible to reuse code from other renderkits. What I like about this
is we can do
it without change any trinidad internals at all. Just take what's useful of
jQuery (css stuff) and forget about the rest.
Sounds like something doable in a reasonable amount of time, and maybe it
is
something with high priority, given the amount of people interested.
After all, for
now MyFaces Core is in good shape, and there is some time until JSF 2.2.
regards,
Leonardo Uribe
2012/6/19 Scott O'Bryan<[email protected]>:
+1. Theme roller would be cool. The problem is the current skinning
selectors. I'm wondering if themeroller themes couldn't be parsed
into a skin.
Sent from my iPhone
On Jun 19, 2012, at 8:08 AM, Leonardo Uribe<[email protected]> wrote:
Hi
Interesting question. In my opinion, the most interesting part to use
from jQuery is its jQuery UI CSS Framework. Why? because defining some
small set of selectors and a "standard" html structure to apply them,
you can create a custom skin using ThemeRoller application. I tried to
do something as a "proof of concept" in
https://issues.apache.org/jira/browse/TRINIDAD-2120 , but after some
time I found that anyway it is necessary to create a whole RenderKit
that can fit better with jQuery UI. In that way, some good features
Trinidad already has will be lost, because jQuery UI is the one who
impose the restrictions. At the end you can't have everything. In my
opinion, I would take only jQuery UI CSS Framework, even if that means
lose some functionality in that mode. Change Trinidad internals to use
jQuery is overkill.
Suggestions are welcome.
regards,
Leonardo Uribe
2012/6/19<[email protected]>:
Hello Everyone
I am a JSF and Trinidad Newbie, I just joined a project at work where
it's going to be using Trinidad. I was assigned a task to design some forms
and so far I haven't had the best experience with Trinidad, The Date Input
keeps giving me errors even though I use the same code as the Trinidad
Showcase(
http://example.irian.at/trinidad-components-showcase-2012061903/faces/pages/demoStart.xhtml).
The Tabbed Panel is not rendering but its showing the content. My
conclusion is I'm having issues with components that use JavaScript even
the Tree and there are no errors showing on Firebug. Please Help, I'm not
sure where I'm going wrong.
My Opinion:
Trinidad looks like a great component library for JSF, but I think its
documentation can use some upgrade, it's confusing for a newbie like me,
There is no simple starting point, e.g. a basic guide, where it going to
show basic steps to follow, like Primefaces Guide(
http://primefaces.org/documentation.html). When I played around with
Primefaces everything was straightforward but I wish to utilize Trinidad.
Missing Components:
Some will agree with me when I say I think a time picker needs to be
added to the Trinidad Library.
An improved Date Picker would be a plus, Compare the JQuery Date
picker and the Trinidad Date Picker.
Just My Opition
Thank You
Siya
________________________________
Subject to local law, communications with Accenture and its affiliates
including telephone calls and emails (including content), may be monitored
by our systems for the purposes of security and the assessment of internal
compliance with Accenture policy.
______________________________________________________________________________________
www.accenture.com
--
Thanks
Pavitra
