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 Thu, 21 Jun 2012 15:41:12 GMT
Hi Scott

2012/6/21 Scott O'Bryan <darkarena@gmail.com>:
> Wow...  That looks really good Leonardo...  :D
>

Yes, looks great! And it is also very fun to do, because you can write
the changes on the template and then update the page without restart
the server.

> I think the skin enhancements might be something we could use in core
> trinidad, but I would like a review of the API's first.
>

Ok

> I understand you overrode the document to include a copy of JQuery.  Could
> the same be accomplished generically by allowing JQuery to be loaded as a
> resource?  Were there any other renderer's that needed to change EXCEPT the
> document?
>

I think jQuery is not necessary at all, but in theory there is some
internal code in jQuery that fix some stuff in browsers (IE) to ensure
better cross-browser L & F, but maybe we can try to fix that stuff
using @agent feature when necessary and kick out jQuery (or let it for
later in another custom module ? use jQuery datePicker instead default
tr:inputDate?).

I don't think we need to override another renderer's, because in
practice we have a modified/simplified "casablanca" skin. So, all the
job is almost done, we just need to fill the gaps. But I need help to
review this stuff before commit. I know trinidad internals, but it is
better to know the opinion of the guys who has committed patches
recently.

regards,

Leonardo Uribe

2012/6/21 Scott O'Bryan <darkarena@gmail.com>:
> Wow...  That looks really good Leonardo...  :D
>
> I think the skin enhancements might be something we could use in core
> trinidad, but I would like a review of the API's first.
>
> I understand you overrode the document to include a copy of JQuery.  Could
> the same be accomplished generically by allowing JQuery to be loaded as a
> resource?  Were there any other renderer's that needed to change EXCEPT the
> document?
>
> Scott
>
>
> On Thu 21 Jun 2012 09:14:00 AM MDT, 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
>>>
>>>
>>>
>

Mime
View raw message