myfaces-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Leonardo Uribe <lu4...@gmail.com>
Subject Re: [TRINIDAD] JQuery Themeroller compatibility
Date Fri, 22 Jun 2012 10:34:42 GMT
Hi

2012/6/22 Pavitra Subramaniam <pavitra.subramaniam@oracle.com>:
> 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 <darkarena@gmail.com>:
>
>
> 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 <lu4242@gmail.com>
> Date: June 21, 2012 6:35:59 AM MDT
> To: MyFaces Discussion <users@myfaces.apache.org>
> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
> instead?)
> Reply-To: "MyFaces Discussion" <users@myfaces.apache.org>
>
> 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 <darkarena@gmail.com>:
>
> 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 <lu4242@gmail.com> 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 <lu4242@gmail.com>:
>
> 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 <darkarena@gmail.com>:
>
> 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 <lu4242@gmail.com> 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 <walter.mourao@gmail.com>:
>
> 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 <lu4242@gmail.com> 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 <darkarena@gmail.com>:
>
> +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 <lu4242@gmail.com> 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  <siyaphakama.sosibo@accenture.com>:
>
> 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

Mime
View raw message