[TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Scott O'Bryan <da...@gmail.com>]

;). I was wondering when this discussion was going to rear it's ugly
head again.  ;)

If I remember correctly, the *discussion* was kind of inconclusive on
this.  Many people were excited and, having used JQuery, I can see
why.  There were, however, several issues which needed to be
addressed.  Most notably Javascipt API compatibility and the inability
to quantify exactly what JQuery in Trinidad would gain us.

Some of the guys I work with did some work researching JQuery and
although it's terribly convenient and standardized, we did notice some
performance issues in the fundamentals of the system.  Nothing serious
for the average JavaScript user, but when combined with the complexity
of ADFFaces (a Trinidad Derivative), the performance difference was
notable.

If we want to open up this discussion again, I, for one, would invite
it but at the least I think we're going to be looking at a "plugable"
solution and we really need to ask ourselves what we would gain from
such an endeavor.

Scott


Sent from my iPhone

On Jun 19, 2012, at 12:48 AM, Tobias Eisentrager
<te...@googlemail.com> wrote:

> I have used Trinidad to develop a couple production applications which are
> now in the maintenance phase - and am quite happy with it. The hard part
> for me was to adapt the css and js which came with the components. It's
> difficult to adapt the components to your existing style. In my cases the
> time I saved with using the pre-made component library I spent customizing
> the layout.
>
> Nowadays I use:
> - MyFaces 2.1.1 Core
> - Custom Composite Component Library
>
> I find it easiest to just create your own composite components to achieve
> custom layout and behavior. There is a base template which brings in basic
> css, js and the layout. Then each component adds it's own little pieces of
> style and script.
> I use a heavy weight custom component every now and then, but for most use
> cases the CC's are enough.
>
> A couple months ago there was a discussion on this list about switching out
> the JS inside Trinidad to jQuery. I think that this would be a wonderful
> approach. One should create a component library which only uses jQuery JS
> and all components should use the jQuery UI. That way it would be easier to
> integrate them into existing applications. But maybe Primefaces already did
> that...
>
> -- Trinidad is dead. Long live Trinidad.
>
> Tobias Eisentraeger
>
> On Tue, Jun 19, 2012 at 2:56 AM, José Luis Cetina <ma...@gmail.com>wrote:
>
>> I use:
>> PrimeFaces (UI library for JSF, excellent)
>> MyFaces Core
>> Apache TomEE
>> Apache CODI
>> Apache OpenJPA
>> EJB
>> PrettyFaces
>> iReport
>> MySQL
>> Etc...
>> El 18/06/2012 19:28, "Joachim Schrod" <js...@acm.org> escribió:
>>
>>> Hi all,
>>>
>>> Looking at the past few months, it's quite clear that the Trinidad
>>> project is dead for all practical purposes. Almost all emails on
>>> this mailing list concerning it are not answered. New releases are
>>> tagged in SVN, but nobody finds the time to actually do them. I.e.,
>>> there is neither an active user community nor an active developer
>>> community behind it. If one wants to use Trinidad, effectively, one
>>> has to become a major developer in that project.
>>>
>>> Well, shit happens; I'm active in open source development since 30
>>> years, and know how this happens. Luckily, it's better than its
>>> proprietary counterparts that close down the shop completely, when
>>> development interest fades.
>>>
>>> So, to the readers of this mailing list, how do you use JSF nowadays?
>>> -- Do you cope with the basic JSF components, that are made
>>>   available by MyFaces? Without trees, scrollable data tables,
>>>   and such?
>>> -- Do you use another component library (RichFaces, ICEFaces --
>>>   what else is available)?
>>> -- Have you skipped ship and moved to Wicket or other component
>>>   libraries / frameworks?
>>>
>>> I would be very much interested to hear how you do modern Web app
>>> development nowadays, with a full-fledged component library, not on
>>> the very basic HTML/JSF-level. Is JSF still the way to go?
>>>
>>> Thanks a lot for your input and your patience in discussing that issue.
>>>
>>>       Joachim
>>>
>>> --
>>> =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
>>> Joachim Schrod, Roedermark, Germany
>>> Email: jschrod@acm.org
>>>
>>>
>>

[TRINIDAD] enhancements and bugs (was Re: [TRINIDAD] JQuery)

[Scott O'Bryan <da...@gmail.com>]

Thanks for the input Siya..  If you want to file some improvement
requests in Jira you can.  Then open up a discussion for each new
thing you'd like to see.  If you keep each thread to a single topic,
that would help.

As for the js issue, I know Leonardo filed a bug for the date picker
against IE7, but I'm not aware of any other issues.  Which version of
Firefox are you running?  It sounds like there may be a pretty major
bug if the js isn't working.

Sent from my iPhone

On Jun 19, 2012, at 7:09 AM, "siyaphakama.sosibo@accenture.com"
<si...@accenture.com> wrote:

> 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
>

Re: [TRINIDAD] JQuery Themeroller compatibility

[Walter Mourão <wa...@gmail.com>]

Thanks. At this point all I want to know is if it really is an acceptable
strategy so I can continue the efforts using the widgets :-). Opinions...

Regards,

Walter Mourão
http://waltermourao.com.br
http://arcadian.com.br
http://oriens.com.br



On Mon, Jul 23, 2012 at 9:37 AM, Leonardo Uribe <lu...@gmail.com> wrote:

> Hi
>
> I hope to do some work into this issue, but maybe at the beginning of
> August.
>
> regards,
>
> Leonardo Uribe
>
> 2012/7/23 Walter Mourão <wa...@gmail.com>:
> > Hi folks. Just a heads up, I would like to know if somebody else is
> working
> > with https://issues.apache.org/jira/browse/TRINIDAD-2120.
> >
> > thanks,
> >
> > Walter Mourão
> > http://waltermourao.com.br
> > http://arcadian.com.br
> > http://oriens.com.br
> >
> >
> >
> > On Tue, Jul 3, 2012 at 7:09 AM, Leonardo Uribe <lu...@gmail.com> wrote:
> >>
> >> Hi
> >>
> >> Ok, I let some comments in TRINIDAD-2120. Unfortunately my time is
> >> running out these days, but I hope to contribute a little bit more
> >> after my vacations.
> >>
> >> regards,
> >>
> >> Leonardo Uribe
> >>
> >> 2012/7/3 Pavitra Subramaniam <pa...@oracle.com>:
> >> >
> >> >
> >> > On 7/2/2012 3:48 PM, Pavitra Subramaniam wrote:
> >> >>
> >> >>
> >> >>
> >> >> On 6/29/2012 5:48 AM, Leonardo Uribe wrote:
> >> >>>
> >> >>> Hi
> >> >>>
> >> >>> I have been playing for some time with this idea. I tried to create
> a
> >> >>> base skin:
> >> >>>
> >> >>> <skin>
> >> >>> <id>themeroller.desktop</id>
> >> >>> <family>themeroller</family>
> >> >>> <extends>simple.desktop</extends>
> >> >>> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
> >> >>>
> >> >>>
> >> >>>
> <style-sheet-name>skins/themeroller/casablanca-themeroller-base.css</style-sheet-name>
> >> >>> </skin>
> >> >>>
> >> >>> And then just extend that skin like this:
> >> >>>
> >> >>> <skin>
> >> >>> <id>black-tie.desktop</id>
> >> >>> <family>black-tie</family>
> >> >>> <extends>themeroller.desktop</extends>
> >> >>> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
> >> >>>
> >> >>>
> >> >>>
> <style-sheet-name>skins/themeroller/black-tie/jquery-ui-1.8.21.custom.css</style-sheet-name>
> >> >>> </skin>
> >> >>>
> >> >>> It works, so maybe it is better to set the base template on top.
> >> >>
> >> >> +1. thanks for tru
> >> >
> >> >
> >> > er, thanks for trying :).
> >> >
> >> > - Pavitra
> >> >
> >> >>> I think it is also possible to use a skin addition to fix what is
> >> >>> specific to the theme:
> >> >>>
> >> >>> <skin-addition>
> >> >>> <skin-id>cupertino.desktop</skin-id>
> >> >>>
> >> >>>
> >> >>>
> <style-sheet-name>skins/themeroller/cupertino/additional-skin-params.css</style-sheet-name>
> >> >>> </skin-addition>
> >> >>
> >> >> +1 as well.
> >> >>
> >> >> Thanks
> >> >> Pavitra
> >> >>>
> >> >>> I have also found some issues but nothing that cannot be done. For
> >> >>> example, themeroller change the colors according if the text is
> inside
> >> >>> a widget container or header and so on, but trinidad has some
> >> >>> hard-coded font colors and other concepts, that at the end it is
> >> >>> better just ignore them and use a simplified way similar to
> >> >>> themeroller way. Also, it could be good to generate some icons based
> >> >>> on the ones provided by casablanca skin.
> >> >>>
> >> >>> I was thinking on commit the skins inside
> trinidad-components-showcase
> >> >>> for now, and when the code is good enough move it to the
> >> >>> implementation. That could make easier for anybody to help, because
> >> >>> the code is in the repo and with the web application, maven and
> maven
> >> >>> jetty pluggiin, it is very simple to edit some changes then just
> >> >>> refresh the browser and have the result.
> >> >>>
> >> >>
> >> >>
> >> >>> Obviously before that we need to add just a couple of lines in
> >> >>> trinidad, but it is reasonable.
> >> >>>
> >> >>> regards,
> >> >>>
> >> >>> Leonardo Uribe
> >> >>>
> >> >>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
> >> >>>>
> >> >>>> Hi
> >> >>>>
> >> >>>> I did some changes to the css, and now this is the result.
> >> >>>>
> >> >>>>
> >> >>>>
> >> >>>>
> https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png
> >> >>>>
> >> >>>>
> >> >>>>
> https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png
> >> >>>>
> >> >>>> There is still room for improvement, I think we can just take some
> >> >>>> themes, adjust them the best we can and bundle them inside trinidad
> >> >>>> without jQuery. Maybe it is a good idea to write a blog explaining
> >> >>>> how
> >> >>>> to create your custom trinidad skin using ThemeRoller.
> >> >>>>
> >> >>>> In my opinion, casablanca skin is a lot more complex and better
> skin
> >> >>>> that the ones provided in ThemeRoller. It is worth to just take our
> >> >>>> time and create the additional resources to make the skins more
> >> >>>> elegant and well polished. For example, there is no default colors
> >> >>>> for
> >> >>>> links in ThemeRoller, we can provide them manually, things like
> that.
> >> >>>>
> >> >>>> I removed jQuery tr:document hack and the skins do not change.
> >> >>>>
> >> >>>> Suggestions are welcome!.
> >> >>>>
> >> >>>> regards,
> >> >>>>
> >> >>>> Leonardo Uribe
> >> >>>>
> >> >>>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
> >> >>>>>
> >> >>>>> Hi
> >> >>>>>
> >> >>>>> 2012/6/22 Pavitra Subramaniam<pa...@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<da...@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<lu...@gmail.com>
> >> >>>>>> Date: June 21, 2012 6:35:59 AM MDT
> >> >>>>>> To: MyFaces Discussion<us...@myfaces.apache.org>
> >> >>>>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do
> >> >>>>>> you
> >> >>>>>> use
> >> >>>>>> instead?)
> >> >>>>>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<da...@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<lu...@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<si...@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
> >> >>
> >> >>
> >> >
> >> > --
> >> > Thanks
> >> > Pavitra
> >
> >
>

Re: [TRINIDAD] JQuery Themeroller compatibility

[Leonardo Uribe <lu...@gmail.com>]

Hi

I hope to do some work into this issue, but maybe at the beginning of August.

regards,

Leonardo Uribe

2012/7/23 Walter Mourão <wa...@gmail.com>:
> Hi folks. Just a heads up, I would like to know if somebody else is working
> with https://issues.apache.org/jira/browse/TRINIDAD-2120.
>
> thanks,
>
> Walter Mourão
> http://waltermourao.com.br
> http://arcadian.com.br
> http://oriens.com.br
>
>
>
> On Tue, Jul 3, 2012 at 7:09 AM, Leonardo Uribe <lu...@gmail.com> wrote:
>>
>> Hi
>>
>> Ok, I let some comments in TRINIDAD-2120. Unfortunately my time is
>> running out these days, but I hope to contribute a little bit more
>> after my vacations.
>>
>> regards,
>>
>> Leonardo Uribe
>>
>> 2012/7/3 Pavitra Subramaniam <pa...@oracle.com>:
>> >
>> >
>> > On 7/2/2012 3:48 PM, Pavitra Subramaniam wrote:
>> >>
>> >>
>> >>
>> >> On 6/29/2012 5:48 AM, Leonardo Uribe wrote:
>> >>>
>> >>> Hi
>> >>>
>> >>> I have been playing for some time with this idea. I tried to create a
>> >>> base skin:
>> >>>
>> >>> <skin>
>> >>> <id>themeroller.desktop</id>
>> >>> <family>themeroller</family>
>> >>> <extends>simple.desktop</extends>
>> >>> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>> >>>
>> >>>
>> >>> <style-sheet-name>skins/themeroller/casablanca-themeroller-base.css</style-sheet-name>
>> >>> </skin>
>> >>>
>> >>> And then just extend that skin like this:
>> >>>
>> >>> <skin>
>> >>> <id>black-tie.desktop</id>
>> >>> <family>black-tie</family>
>> >>> <extends>themeroller.desktop</extends>
>> >>> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>> >>>
>> >>>
>> >>> <style-sheet-name>skins/themeroller/black-tie/jquery-ui-1.8.21.custom.css</style-sheet-name>
>> >>> </skin>
>> >>>
>> >>> It works, so maybe it is better to set the base template on top.
>> >>
>> >> +1. thanks for tru
>> >
>> >
>> > er, thanks for trying :).
>> >
>> > - Pavitra
>> >
>> >>> I think it is also possible to use a skin addition to fix what is
>> >>> specific to the theme:
>> >>>
>> >>> <skin-addition>
>> >>> <skin-id>cupertino.desktop</skin-id>
>> >>>
>> >>>
>> >>> <style-sheet-name>skins/themeroller/cupertino/additional-skin-params.css</style-sheet-name>
>> >>> </skin-addition>
>> >>
>> >> +1 as well.
>> >>
>> >> Thanks
>> >> Pavitra
>> >>>
>> >>> I have also found some issues but nothing that cannot be done. For
>> >>> example, themeroller change the colors according if the text is inside
>> >>> a widget container or header and so on, but trinidad has some
>> >>> hard-coded font colors and other concepts, that at the end it is
>> >>> better just ignore them and use a simplified way similar to
>> >>> themeroller way. Also, it could be good to generate some icons based
>> >>> on the ones provided by casablanca skin.
>> >>>
>> >>> I was thinking on commit the skins inside trinidad-components-showcase
>> >>> for now, and when the code is good enough move it to the
>> >>> implementation. That could make easier for anybody to help, because
>> >>> the code is in the repo and with the web application, maven and maven
>> >>> jetty pluggiin, it is very simple to edit some changes then just
>> >>> refresh the browser and have the result.
>> >>>
>> >>
>> >>
>> >>> Obviously before that we need to add just a couple of lines in
>> >>> trinidad, but it is reasonable.
>> >>>
>> >>> regards,
>> >>>
>> >>> Leonardo Uribe
>> >>>
>> >>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
>> >>>>
>> >>>> Hi
>> >>>>
>> >>>> I did some changes to the css, and now this is the result.
>> >>>>
>> >>>>
>> >>>>
>> >>>> https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png
>> >>>>
>> >>>>
>> >>>> https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png
>> >>>>
>> >>>> There is still room for improvement, I think we can just take some
>> >>>> themes, adjust them the best we can and bundle them inside trinidad
>> >>>> without jQuery. Maybe it is a good idea to write a blog explaining
>> >>>> how
>> >>>> to create your custom trinidad skin using ThemeRoller.
>> >>>>
>> >>>> In my opinion, casablanca skin is a lot more complex and better skin
>> >>>> that the ones provided in ThemeRoller. It is worth to just take our
>> >>>> time and create the additional resources to make the skins more
>> >>>> elegant and well polished. For example, there is no default colors
>> >>>> for
>> >>>> links in ThemeRoller, we can provide them manually, things like that.
>> >>>>
>> >>>> I removed jQuery tr:document hack and the skins do not change.
>> >>>>
>> >>>> Suggestions are welcome!.
>> >>>>
>> >>>> regards,
>> >>>>
>> >>>> Leonardo Uribe
>> >>>>
>> >>>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
>> >>>>>
>> >>>>> Hi
>> >>>>>
>> >>>>> 2012/6/22 Pavitra Subramaniam<pa...@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<da...@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<lu...@gmail.com>
>> >>>>>> Date: June 21, 2012 6:35:59 AM MDT
>> >>>>>> To: MyFaces Discussion<us...@myfaces.apache.org>
>> >>>>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do
>> >>>>>> you
>> >>>>>> use
>> >>>>>> instead?)
>> >>>>>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<lu...@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<da...@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<lu...@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<si...@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
>> >>
>> >>
>> >
>> > --
>> > Thanks
>> > Pavitra
>
>

Re: [TRINIDAD] JQuery Themeroller compatibility

[Walter Mourão <wa...@gmail.com>]

Hi folks. Just a heads up, I would like to know if somebody else is working
with https://issues.apache.org/jira/browse/TRINIDAD-2120.

thanks,

Walter Mourão
http://waltermourao.com.br
http://arcadian.com.br
http://oriens.com.br



On Tue, Jul 3, 2012 at 7:09 AM, Leonardo Uribe <lu...@gmail.com> wrote:

> Hi
>
> Ok, I let some comments in TRINIDAD-2120. Unfortunately my time is
> running out these days, but I hope to contribute a little bit more
> after my vacations.
>
> regards,
>
> Leonardo Uribe
>
> 2012/7/3 Pavitra Subramaniam <pa...@oracle.com>:
> >
> >
> > On 7/2/2012 3:48 PM, Pavitra Subramaniam wrote:
> >>
> >>
> >>
> >> On 6/29/2012 5:48 AM, Leonardo Uribe wrote:
> >>>
> >>> Hi
> >>>
> >>> I have been playing for some time with this idea. I tried to create a
> >>> base skin:
> >>>
> >>> <skin>
> >>> <id>themeroller.desktop</id>
> >>> <family>themeroller</family>
> >>> <extends>simple.desktop</extends>
> >>> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
> >>>
> >>>
> <style-sheet-name>skins/themeroller/casablanca-themeroller-base.css</style-sheet-name>
> >>> </skin>
> >>>
> >>> And then just extend that skin like this:
> >>>
> >>> <skin>
> >>> <id>black-tie.desktop</id>
> >>> <family>black-tie</family>
> >>> <extends>themeroller.desktop</extends>
> >>> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
> >>>
> >>>
> <style-sheet-name>skins/themeroller/black-tie/jquery-ui-1.8.21.custom.css</style-sheet-name>
> >>> </skin>
> >>>
> >>> It works, so maybe it is better to set the base template on top.
> >>
> >> +1. thanks for tru
> >
> >
> > er, thanks for trying :).
> >
> > - Pavitra
> >
> >>> I think it is also possible to use a skin addition to fix what is
> >>> specific to the theme:
> >>>
> >>> <skin-addition>
> >>> <skin-id>cupertino.desktop</skin-id>
> >>>
> >>>
> <style-sheet-name>skins/themeroller/cupertino/additional-skin-params.css</style-sheet-name>
> >>> </skin-addition>
> >>
> >> +1 as well.
> >>
> >> Thanks
> >> Pavitra
> >>>
> >>> I have also found some issues but nothing that cannot be done. For
> >>> example, themeroller change the colors according if the text is inside
> >>> a widget container or header and so on, but trinidad has some
> >>> hard-coded font colors and other concepts, that at the end it is
> >>> better just ignore them and use a simplified way similar to
> >>> themeroller way. Also, it could be good to generate some icons based
> >>> on the ones provided by casablanca skin.
> >>>
> >>> I was thinking on commit the skins inside trinidad-components-showcase
> >>> for now, and when the code is good enough move it to the
> >>> implementation. That could make easier for anybody to help, because
> >>> the code is in the repo and with the web application, maven and maven
> >>> jetty pluggiin, it is very simple to edit some changes then just
> >>> refresh the browser and have the result.
> >>>
> >>
> >>
> >>> Obviously before that we need to add just a couple of lines in
> >>> trinidad, but it is reasonable.
> >>>
> >>> regards,
> >>>
> >>> Leonardo Uribe
> >>>
> >>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
> >>>>
> >>>> Hi
> >>>>
> >>>> I did some changes to the css, and now this is the result.
> >>>>
> >>>>
> >>>>
> https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png
> >>>>
> >>>>
> https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png
> >>>>
> >>>> There is still room for improvement, I think we can just take some
> >>>> themes, adjust them the best we can and bundle them inside trinidad
> >>>> without jQuery. Maybe it is a good idea to write a blog explaining how
> >>>> to create your custom trinidad skin using ThemeRoller.
> >>>>
> >>>> In my opinion, casablanca skin is a lot more complex and better skin
> >>>> that the ones provided in ThemeRoller. It is worth to just take our
> >>>> time and create the additional resources to make the skins more
> >>>> elegant and well polished. For example, there is no default colors for
> >>>> links in ThemeRoller, we can provide them manually, things like that.
> >>>>
> >>>> I removed jQuery tr:document hack and the skins do not change.
> >>>>
> >>>> Suggestions are welcome!.
> >>>>
> >>>> regards,
> >>>>
> >>>> Leonardo Uribe
> >>>>
> >>>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
> >>>>>
> >>>>> Hi
> >>>>>
> >>>>> 2012/6/22 Pavitra Subramaniam<pa...@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<da...@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<lu...@gmail.com>
> >>>>>> Date: June 21, 2012 6:35:59 AM MDT
> >>>>>> To: MyFaces Discussion<us...@myfaces.apache.org>
> >>>>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you
> >>>>>> use
> >>>>>> instead?)
> >>>>>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<lu...@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<da...@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<lu...@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<si...@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
> >>
> >>
> >
> > --
> > Thanks
> > Pavitra
>

Re: [TRINIDAD] JQuery Themeroller compatibility

[Leonardo Uribe <lu...@gmail.com>]

Hi

Ok, I let some comments in TRINIDAD-2120. Unfortunately my time is
running out these days, but I hope to contribute a little bit more
after my vacations.

regards,

Leonardo Uribe

2012/7/3 Pavitra Subramaniam <pa...@oracle.com>:
>
>
> On 7/2/2012 3:48 PM, Pavitra Subramaniam wrote:
>>
>>
>>
>> On 6/29/2012 5:48 AM, Leonardo Uribe wrote:
>>>
>>> Hi
>>>
>>> I have been playing for some time with this idea. I tried to create a
>>> base skin:
>>>
>>> <skin>
>>> <id>themeroller.desktop</id>
>>> <family>themeroller</family>
>>> <extends>simple.desktop</extends>
>>> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>>>
>>> <style-sheet-name>skins/themeroller/casablanca-themeroller-base.css</style-sheet-name>
>>> </skin>
>>>
>>> And then just extend that skin like this:
>>>
>>> <skin>
>>> <id>black-tie.desktop</id>
>>> <family>black-tie</family>
>>> <extends>themeroller.desktop</extends>
>>> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>>>
>>> <style-sheet-name>skins/themeroller/black-tie/jquery-ui-1.8.21.custom.css</style-sheet-name>
>>> </skin>
>>>
>>> It works, so maybe it is better to set the base template on top.
>>
>> +1. thanks for tru
>
>
> er, thanks for trying :).
>
> - Pavitra
>
>>> I think it is also possible to use a skin addition to fix what is
>>> specific to the theme:
>>>
>>> <skin-addition>
>>> <skin-id>cupertino.desktop</skin-id>
>>>
>>> <style-sheet-name>skins/themeroller/cupertino/additional-skin-params.css</style-sheet-name>
>>> </skin-addition>
>>
>> +1 as well.
>>
>> Thanks
>> Pavitra
>>>
>>> I have also found some issues but nothing that cannot be done. For
>>> example, themeroller change the colors according if the text is inside
>>> a widget container or header and so on, but trinidad has some
>>> hard-coded font colors and other concepts, that at the end it is
>>> better just ignore them and use a simplified way similar to
>>> themeroller way. Also, it could be good to generate some icons based
>>> on the ones provided by casablanca skin.
>>>
>>> I was thinking on commit the skins inside trinidad-components-showcase
>>> for now, and when the code is good enough move it to the
>>> implementation. That could make easier for anybody to help, because
>>> the code is in the repo and with the web application, maven and maven
>>> jetty pluggiin, it is very simple to edit some changes then just
>>> refresh the browser and have the result.
>>>
>>
>>
>>> Obviously before that we need to add just a couple of lines in
>>> trinidad, but it is reasonable.
>>>
>>> regards,
>>>
>>> Leonardo Uribe
>>>
>>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
>>>>
>>>> Hi
>>>>
>>>> I did some changes to the css, and now this is the result.
>>>>
>>>>
>>>> https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png
>>>>
>>>> https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png
>>>>
>>>> There is still room for improvement, I think we can just take some
>>>> themes, adjust them the best we can and bundle them inside trinidad
>>>> without jQuery. Maybe it is a good idea to write a blog explaining how
>>>> to create your custom trinidad skin using ThemeRoller.
>>>>
>>>> In my opinion, casablanca skin is a lot more complex and better skin
>>>> that the ones provided in ThemeRoller. It is worth to just take our
>>>> time and create the additional resources to make the skins more
>>>> elegant and well polished. For example, there is no default colors for
>>>> links in ThemeRoller, we can provide them manually, things like that.
>>>>
>>>> I removed jQuery tr:document hack and the skins do not change.
>>>>
>>>> Suggestions are welcome!.
>>>>
>>>> regards,
>>>>
>>>> Leonardo Uribe
>>>>
>>>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
>>>>>
>>>>> Hi
>>>>>
>>>>> 2012/6/22 Pavitra Subramaniam<pa...@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<da...@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<lu...@gmail.com>
>>>>>> Date: June 21, 2012 6:35:59 AM MDT
>>>>>> To: MyFaces Discussion<us...@myfaces.apache.org>
>>>>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you
>>>>>> use
>>>>>> instead?)
>>>>>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<lu...@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<da...@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<lu...@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<si...@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
>>
>>
>
> --
> Thanks
> Pavitra

Re: [TRINIDAD] JQuery Themeroller compatibility

[Pavitra Subramaniam <pa...@oracle.com>]

On 7/2/2012 3:48 PM, Pavitra Subramaniam wrote:
>
>
> On 6/29/2012 5:48 AM, Leonardo Uribe wrote:
>> Hi
>>
>> I have been playing for some time with this idea. I tried to create a 
>> base skin:
>>
>> <skin>
>> <id>themeroller.desktop</id>
>> <family>themeroller</family>
>> <extends>simple.desktop</extends>
>> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>> <style-sheet-name>skins/themeroller/casablanca-themeroller-base.css</style-sheet-name> 
>>
>> </skin>
>>
>> And then just extend that skin like this:
>>
>> <skin>
>> <id>black-tie.desktop</id>
>> <family>black-tie</family>
>> <extends>themeroller.desktop</extends>
>> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>> <style-sheet-name>skins/themeroller/black-tie/jquery-ui-1.8.21.custom.css</style-sheet-name> 
>>
>> </skin>
>>
>> It works, so maybe it is better to set the base template on top.
> +1. thanks for tru

er, thanks for trying :).

- Pavitra
>> I think it is also possible to use a skin addition to fix what is
>> specific to the theme:
>>
>> <skin-addition>
>> <skin-id>cupertino.desktop</skin-id>
>> <style-sheet-name>skins/themeroller/cupertino/additional-skin-params.css</style-sheet-name> 
>>
>> </skin-addition>
> +1 as well.
>
> Thanks
> Pavitra
>> I have also found some issues but nothing that cannot be done. For
>> example, themeroller change the colors according if the text is inside
>> a widget container or header and so on, but trinidad has some
>> hard-coded font colors and other concepts, that at the end it is
>> better just ignore them and use a simplified way similar to
>> themeroller way. Also, it could be good to generate some icons based
>> on the ones provided by casablanca skin.
>>
>> I was thinking on commit the skins inside trinidad-components-showcase
>> for now, and when the code is good enough move it to the
>> implementation. That could make easier for anybody to help, because
>> the code is in the repo and with the web application, maven and maven
>> jetty pluggiin, it is very simple to edit some changes then just
>> refresh the browser and have the result.
>>
>
>
>> Obviously before that we need to add just a couple of lines in
>> trinidad, but it is reasonable.
>>
>> regards,
>>
>> Leonardo Uribe
>>
>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
>>> Hi
>>>
>>> I did some changes to the css, and now this is the result.
>>>
>>> https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png 
>>>
>>> https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png 
>>>
>>>
>>> There is still room for improvement, I think we can just take some
>>> themes, adjust them the best we can and bundle them inside trinidad
>>> without jQuery. Maybe it is a good idea to write a blog explaining how
>>> to create your custom trinidad skin using ThemeRoller.
>>>
>>> In my opinion, casablanca skin is a lot more complex and better skin
>>> that the ones provided in ThemeRoller. It is worth to just take our
>>> time and create the additional resources to make the skins more
>>> elegant and well polished. For example, there is no default colors for
>>> links in ThemeRoller, we can provide them manually, things like that.
>>>
>>> I removed jQuery tr:document hack and the skins do not change.
>>>
>>> Suggestions are welcome!.
>>>
>>> regards,
>>>
>>> Leonardo Uribe
>>>
>>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
>>>> Hi
>>>>
>>>> 2012/6/22 Pavitra Subramaniam<pa...@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<da...@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<lu...@gmail.com>
>>>>> Date: June 21, 2012 6:35:59 AM MDT
>>>>> To: MyFaces Discussion<us...@myfaces.apache.org>
>>>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do 
>>>>> you use
>>>>> instead?)
>>>>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<lu...@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<da...@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<lu...@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<si...@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
>

-- 
Thanks
Pavitra

Re: [TRINIDAD] JQuery Themeroller compatibility

[Pavitra Subramaniam <pa...@oracle.com>]

On 6/29/2012 5:48 AM, Leonardo Uribe wrote:
> Hi
>
> I have been playing for some time with this idea. I tried to create a base skin:
>
> 	<skin>
> 		<id>themeroller.desktop</id>
> 		<family>themeroller</family>
> 		<extends>simple.desktop</extends>
> 		<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
> 		<style-sheet-name>skins/themeroller/casablanca-themeroller-base.css</style-sheet-name>
> 	</skin>
>
> And then just extend that skin like this:
>
>      <skin>
>          <id>black-tie.desktop</id>
>          <family>black-tie</family>
>          <extends>themeroller.desktop</extends>
>          <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>          <style-sheet-name>skins/themeroller/black-tie/jquery-ui-1.8.21.custom.css</style-sheet-name>
>      </skin>
>
> It works, so maybe it is better to set the base template on top.
>    
+1. thanks for tru
> I think it is also possible to use a skin addition to fix what is
> specific to the theme:
>
>      <skin-addition>
>          <skin-id>cupertino.desktop</skin-id>
>          <style-sheet-name>skins/themeroller/cupertino/additional-skin-params.css</style-sheet-name>
>      </skin-addition>
>    
+1 as well.

Thanks
Pavitra
> I have also found some issues but nothing that cannot be done. For
> example, themeroller change the colors according if the text is inside
> a widget container or header and so on, but trinidad has some
> hard-coded font colors and other concepts, that at the end it is
> better just ignore them and use a simplified way similar to
> themeroller way. Also, it could be good to generate some icons based
> on the ones provided by casablanca skin.
>
> I was thinking on commit the skins inside trinidad-components-showcase
> for now, and when the code is good enough move it to the
> implementation. That could make easier for anybody to help, because
> the code is in the repo and with the web application, maven and maven
> jetty pluggiin, it is very simple to edit some changes then just
> refresh the browser and have the result.
>
>    


> Obviously before that we need to add just a couple of lines in
> trinidad, but it is reasonable.
>
> regards,
>
> Leonardo Uribe
>
> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
>    
>> Hi
>>
>> I did some changes to the css, and now this is the result.
>>
>> https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png
>> https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png
>>
>> There is still room for improvement, I think we can just take some
>> themes, adjust them the best we can and bundle them inside trinidad
>> without jQuery. Maybe it is a good idea to write a blog explaining how
>> to create your custom trinidad skin using ThemeRoller.
>>
>> In my opinion, casablanca skin is a lot more complex and better skin
>> that the ones provided in ThemeRoller. It is worth to just take our
>> time and create the additional resources to make the skins more
>> elegant and well polished. For example, there is no default colors for
>> links in ThemeRoller, we can provide them manually, things like that.
>>
>> I removed jQuery tr:document hack and the skins do not change.
>>
>> Suggestions are welcome!.
>>
>> regards,
>>
>> Leonardo Uribe
>>
>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
>>      
>>> Hi
>>>
>>> 2012/6/22 Pavitra Subramaniam<pa...@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<da...@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<lu...@gmail.com>
>>>> Date: June 21, 2012 6:35:59 AM MDT
>>>> To: MyFaces Discussion<us...@myfaces.apache.org>
>>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
>>>> instead?)
>>>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<lu...@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<da...@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<lu...@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<si...@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
>>>>          

-- 
Thanks
Pavitra

Re: [TRINIDAD] JQuery Themeroller compatibility

[Prakash Udupa <pr...@oracle.com>]

Hi Leonardo,

Thanks for adding this improvement to -tr-property-ref feature.
I reviewed your code changes and noted my review comments in 2120.

Thanks,
Prakash

On 7/2/2012 4:22 AM, Leonardo Uribe wrote:
> Hi
>
> I have attached a patch with the suggested changes to do in trinidad-impl:
>
> https://issues.apache.org/jira/secure/attachment/12534191/TRINIDAD-2120-4-changes-trinidad-impl-only.patch
>
> Could somebody review and commit these changes? It implements the
> following syntax:
>
> .JQBorderColorLook:alias {
>      border-color: -tr-property-ref(".ui-widget-content
> .ui-state-default", "border", "border-top-color");
> }
>
> as described in CSS 2.1 spec:
>
> 'border'
>      Value:  	[<border-width>  ||<border-style>  ||
> <'border-top-color'>  ] | inherit
>
> There is a simple "strategy" pattern implemented. For now, I did it
> only for border, property, which is the only one required to move
> forward, but I think the concept is good enough to include other
> shorthand properties (background, margin, padding, ...).
>
> Note without check and commit this, we cannot add the skins to the
> example. So, it is up to you guys.
>
> regards,
>
> Leonardo Uribe
>
> 2012/6/29 Scott O'Bryan<da...@gmail.com>:
>> +1, do keep in mind that we don't release the component showcase, but
>> it would be available for people to try.
>>
>> Sent from my iPhone
>>
>> On Jun 29, 2012, at 6:49 AM, Leonardo Uribe<lu...@gmail.com>  wrote:
>>
>>> Hi
>>>
>>> I have been playing for some time with this idea. I tried to create a base skin:
>>>
>>>     <skin>
>>>         <id>themeroller.desktop</id>
>>>         <family>themeroller</family>
>>>         <extends>simple.desktop</extends>
>>>         <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>>>         <style-sheet-name>skins/themeroller/casablanca-themeroller-base.css</style-sheet-name>
>>>     </skin>
>>>
>>> And then just extend that skin like this:
>>>
>>>     <skin>
>>>         <id>black-tie.desktop</id>
>>>         <family>black-tie</family>
>>>         <extends>themeroller.desktop</extends>
>>>         <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>>>         <style-sheet-name>skins/themeroller/black-tie/jquery-ui-1.8.21.custom.css</style-sheet-name>
>>>     </skin>
>>>
>>> It works, so maybe it is better to set the base template on top.
>>>
>>> I think it is also possible to use a skin addition to fix what is
>>> specific to the theme:
>>>
>>>     <skin-addition>
>>>         <skin-id>cupertino.desktop</skin-id>
>>>         <style-sheet-name>skins/themeroller/cupertino/additional-skin-params.css</style-sheet-name>
>>>     </skin-addition>
>>>
>>> I have also found some issues but nothing that cannot be done. For
>>> example, themeroller change the colors according if the text is inside
>>> a widget container or header and so on, but trinidad has some
>>> hard-coded font colors and other concepts, that at the end it is
>>> better just ignore them and use a simplified way similar to
>>> themeroller way. Also, it could be good to generate some icons based
>>> on the ones provided by casablanca skin.
>>>
>>> I was thinking on commit the skins inside trinidad-components-showcase
>>> for now, and when the code is good enough move it to the
>>> implementation. That could make easier for anybody to help, because
>>> the code is in the repo and with the web application, maven and maven
>>> jetty pluggiin, it is very simple to edit some changes then just
>>> refresh the browser and have the result.
>>>
>>> Obviously before that we need to add just a couple of lines in
>>> trinidad, but it is reasonable.
>>>
>>> regards,
>>>
>>> Leonardo Uribe
>>>
>>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
>>>> Hi
>>>>
>>>> I did some changes to the css, and now this is the result.
>>>>
>>>> https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png
>>>> https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png
>>>>
>>>> There is still room for improvement, I think we can just take some
>>>> themes, adjust them the best we can and bundle them inside trinidad
>>>> without jQuery. Maybe it is a good idea to write a blog explaining how
>>>> to create your custom trinidad skin using ThemeRoller.
>>>>
>>>> In my opinion, casablanca skin is a lot more complex and better skin
>>>> that the ones provided in ThemeRoller. It is worth to just take our
>>>> time and create the additional resources to make the skins more
>>>> elegant and well polished. For example, there is no default colors for
>>>> links in ThemeRoller, we can provide them manually, things like that.
>>>>
>>>> I removed jQuery tr:document hack and the skins do not change.
>>>>
>>>> Suggestions are welcome!.
>>>>
>>>> regards,
>>>>
>>>> Leonardo Uribe
>>>>
>>>> 2012/6/22 Leonardo Uribe<lu...@gmail.com>:
>>>>> Hi
>>>>>
>>>>> 2012/6/22 Pavitra Subramaniam<pa...@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<da...@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<lu...@gmail.com>
>>>>>> Date: June 21, 2012 6:35:59 AM MDT
>>>>>> To: MyFaces Discussion<us...@myfaces.apache.org>
>>>>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
>>>>>> instead?)
>>>>>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<lu...@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<da...@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<lu...@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<si...@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

Re: [TRINIDAD] JQuery Themeroller compatibility

[Leonardo Uribe <lu...@gmail.com>]

Hi

I have attached a patch with the suggested changes to do in trinidad-impl:

https://issues.apache.org/jira/secure/attachment/12534191/TRINIDAD-2120-4-changes-trinidad-impl-only.patch

Could somebody review and commit these changes? It implements the
following syntax:

.JQBorderColorLook:alias {
    border-color: -tr-property-ref(".ui-widget-content
.ui-state-default", "border", "border-top-color");
}

as described in CSS 2.1 spec:

'border'
    Value:  	[ <border-width> || <border-style> ||
<'border-top-color'> ] | inherit

There is a simple "strategy" pattern implemented. For now, I did it
only for border, property, which is the only one required to move
forward, but I think the concept is good enough to include other
shorthand properties (background, margin, padding, ...).

Note without check and commit this, we cannot add the skins to the
example. So, it is up to you guys.

regards,

Leonardo Uribe

2012/6/29 Scott O'Bryan <da...@gmail.com>:
> +1, do keep in mind that we don't release the component showcase, but
> it would be available for people to try.
>
> Sent from my iPhone
>
> On Jun 29, 2012, at 6:49 AM, Leonardo Uribe <lu...@gmail.com> wrote:
>
>> Hi
>>
>> I have been playing for some time with this idea. I tried to create a base skin:
>>
>>    <skin>
>>        <id>themeroller.desktop</id>
>>        <family>themeroller</family>
>>        <extends>simple.desktop</extends>
>>        <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>>        <style-sheet-name>skins/themeroller/casablanca-themeroller-base.css</style-sheet-name>
>>    </skin>
>>
>> And then just extend that skin like this:
>>
>>    <skin>
>>        <id>black-tie.desktop</id>
>>        <family>black-tie</family>
>>        <extends>themeroller.desktop</extends>
>>        <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>>        <style-sheet-name>skins/themeroller/black-tie/jquery-ui-1.8.21.custom.css</style-sheet-name>
>>    </skin>
>>
>> It works, so maybe it is better to set the base template on top.
>>
>> I think it is also possible to use a skin addition to fix what is
>> specific to the theme:
>>
>>    <skin-addition>
>>        <skin-id>cupertino.desktop</skin-id>
>>        <style-sheet-name>skins/themeroller/cupertino/additional-skin-params.css</style-sheet-name>
>>    </skin-addition>
>>
>> I have also found some issues but nothing that cannot be done. For
>> example, themeroller change the colors according if the text is inside
>> a widget container or header and so on, but trinidad has some
>> hard-coded font colors and other concepts, that at the end it is
>> better just ignore them and use a simplified way similar to
>> themeroller way. Also, it could be good to generate some icons based
>> on the ones provided by casablanca skin.
>>
>> I was thinking on commit the skins inside trinidad-components-showcase
>> for now, and when the code is good enough move it to the
>> implementation. That could make easier for anybody to help, because
>> the code is in the repo and with the web application, maven and maven
>> jetty pluggiin, it is very simple to edit some changes then just
>> refresh the browser and have the result.
>>
>> Obviously before that we need to add just a couple of lines in
>> trinidad, but it is reasonable.
>>
>> regards,
>>
>> Leonardo Uribe
>>
>> 2012/6/22 Leonardo Uribe <lu...@gmail.com>:
>>> Hi
>>>
>>> I did some changes to the css, and now this is the result.
>>>
>>> https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png
>>> https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png
>>>
>>> There is still room for improvement, I think we can just take some
>>> themes, adjust them the best we can and bundle them inside trinidad
>>> without jQuery. Maybe it is a good idea to write a blog explaining how
>>> to create your custom trinidad skin using ThemeRoller.
>>>
>>> In my opinion, casablanca skin is a lot more complex and better skin
>>> that the ones provided in ThemeRoller. It is worth to just take our
>>> time and create the additional resources to make the skins more
>>> elegant and well polished. For example, there is no default colors for
>>> links in ThemeRoller, we can provide them manually, things like that.
>>>
>>> I removed jQuery tr:document hack and the skins do not change.
>>>
>>> Suggestions are welcome!.
>>>
>>> regards,
>>>
>>> Leonardo Uribe
>>>
>>> 2012/6/22 Leonardo Uribe <lu...@gmail.com>:
>>>> Hi
>>>>
>>>> 2012/6/22 Pavitra Subramaniam <pa...@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 <da...@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 <lu...@gmail.com>
>>>>> Date: June 21, 2012 6:35:59 AM MDT
>>>>> To: MyFaces Discussion <us...@myfaces.apache.org>
>>>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
>>>>> instead?)
>>>>> Reply-To: "MyFaces Discussion" <us...@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 <da...@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 <lu...@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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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

Re: [TRINIDAD] JQuery Themeroller compatibility

[Scott O'Bryan <da...@gmail.com>]

+1, do keep in mind that we don't release the component showcase, but
it would be available for people to try.

Sent from my iPhone

On Jun 29, 2012, at 6:49 AM, Leonardo Uribe <lu...@gmail.com> wrote:

> Hi
>
> I have been playing for some time with this idea. I tried to create a base skin:
>
>    <skin>
>        <id>themeroller.desktop</id>
>        <family>themeroller</family>
>        <extends>simple.desktop</extends>
>        <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>        <style-sheet-name>skins/themeroller/casablanca-themeroller-base.css</style-sheet-name>
>    </skin>
>
> And then just extend that skin like this:
>
>    <skin>
>        <id>black-tie.desktop</id>
>        <family>black-tie</family>
>        <extends>themeroller.desktop</extends>
>        <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
>        <style-sheet-name>skins/themeroller/black-tie/jquery-ui-1.8.21.custom.css</style-sheet-name>
>    </skin>
>
> It works, so maybe it is better to set the base template on top.
>
> I think it is also possible to use a skin addition to fix what is
> specific to the theme:
>
>    <skin-addition>
>        <skin-id>cupertino.desktop</skin-id>
>        <style-sheet-name>skins/themeroller/cupertino/additional-skin-params.css</style-sheet-name>
>    </skin-addition>
>
> I have also found some issues but nothing that cannot be done. For
> example, themeroller change the colors according if the text is inside
> a widget container or header and so on, but trinidad has some
> hard-coded font colors and other concepts, that at the end it is
> better just ignore them and use a simplified way similar to
> themeroller way. Also, it could be good to generate some icons based
> on the ones provided by casablanca skin.
>
> I was thinking on commit the skins inside trinidad-components-showcase
> for now, and when the code is good enough move it to the
> implementation. That could make easier for anybody to help, because
> the code is in the repo and with the web application, maven and maven
> jetty pluggiin, it is very simple to edit some changes then just
> refresh the browser and have the result.
>
> Obviously before that we need to add just a couple of lines in
> trinidad, but it is reasonable.
>
> regards,
>
> Leonardo Uribe
>
> 2012/6/22 Leonardo Uribe <lu...@gmail.com>:
>> Hi
>>
>> I did some changes to the css, and now this is the result.
>>
>> https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png
>> https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png
>>
>> There is still room for improvement, I think we can just take some
>> themes, adjust them the best we can and bundle them inside trinidad
>> without jQuery. Maybe it is a good idea to write a blog explaining how
>> to create your custom trinidad skin using ThemeRoller.
>>
>> In my opinion, casablanca skin is a lot more complex and better skin
>> that the ones provided in ThemeRoller. It is worth to just take our
>> time and create the additional resources to make the skins more
>> elegant and well polished. For example, there is no default colors for
>> links in ThemeRoller, we can provide them manually, things like that.
>>
>> I removed jQuery tr:document hack and the skins do not change.
>>
>> Suggestions are welcome!.
>>
>> regards,
>>
>> Leonardo Uribe
>>
>> 2012/6/22 Leonardo Uribe <lu...@gmail.com>:
>>> Hi
>>>
>>> 2012/6/22 Pavitra Subramaniam <pa...@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 <da...@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 <lu...@gmail.com>
>>>> Date: June 21, 2012 6:35:59 AM MDT
>>>> To: MyFaces Discussion <us...@myfaces.apache.org>
>>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
>>>> instead?)
>>>> Reply-To: "MyFaces Discussion" <us...@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 <da...@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 <lu...@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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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

Re: [TRINIDAD] JQuery Themeroller compatibility

[Leonardo Uribe <lu...@gmail.com>]

Hi

I have been playing for some time with this idea. I tried to create a base skin:

	<skin>
		<id>themeroller.desktop</id>
		<family>themeroller</family>
		<extends>simple.desktop</extends>
		<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
		<style-sheet-name>skins/themeroller/casablanca-themeroller-base.css</style-sheet-name>
	</skin>

And then just extend that skin like this:

    <skin>
        <id>black-tie.desktop</id>
        <family>black-tie</family>
        <extends>themeroller.desktop</extends>
        <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
        <style-sheet-name>skins/themeroller/black-tie/jquery-ui-1.8.21.custom.css</style-sheet-name>
    </skin>

It works, so maybe it is better to set the base template on top.

I think it is also possible to use a skin addition to fix what is
specific to the theme:

    <skin-addition>
        <skin-id>cupertino.desktop</skin-id>
        <style-sheet-name>skins/themeroller/cupertino/additional-skin-params.css</style-sheet-name>
    </skin-addition>

I have also found some issues but nothing that cannot be done. For
example, themeroller change the colors according if the text is inside
a widget container or header and so on, but trinidad has some
hard-coded font colors and other concepts, that at the end it is
better just ignore them and use a simplified way similar to
themeroller way. Also, it could be good to generate some icons based
on the ones provided by casablanca skin.

I was thinking on commit the skins inside trinidad-components-showcase
for now, and when the code is good enough move it to the
implementation. That could make easier for anybody to help, because
the code is in the repo and with the web application, maven and maven
jetty pluggiin, it is very simple to edit some changes then just
refresh the browser and have the result.

Obviously before that we need to add just a couple of lines in
trinidad, but it is reasonable.

regards,

Leonardo Uribe

2012/6/22 Leonardo Uribe <lu...@gmail.com>:
> Hi
>
> I did some changes to the css, and now this is the result.
>
> https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png
> https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png
>
> There is still room for improvement, I think we can just take some
> themes, adjust them the best we can and bundle them inside trinidad
> without jQuery. Maybe it is a good idea to write a blog explaining how
> to create your custom trinidad skin using ThemeRoller.
>
> In my opinion, casablanca skin is a lot more complex and better skin
> that the ones provided in ThemeRoller. It is worth to just take our
> time and create the additional resources to make the skins more
> elegant and well polished. For example, there is no default colors for
> links in ThemeRoller, we can provide them manually, things like that.
>
> I removed jQuery tr:document hack and the skins do not change.
>
> Suggestions are welcome!.
>
> regards,
>
> Leonardo Uribe
>
> 2012/6/22 Leonardo Uribe <lu...@gmail.com>:
>> Hi
>>
>> 2012/6/22 Pavitra Subramaniam <pa...@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 <da...@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 <lu...@gmail.com>
>>> Date: June 21, 2012 6:35:59 AM MDT
>>> To: MyFaces Discussion <us...@myfaces.apache.org>
>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
>>> instead?)
>>> Reply-To: "MyFaces Discussion" <us...@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 <da...@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 <lu...@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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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

Re: [TRINIDAD] JQuery Themeroller compatibility

[Leonardo Uribe <lu...@gmail.com>]

Hi

I did some changes to the css, and now this is the result.

https://issues.apache.org/jira/secure/attachment/12533046/redmond%2Bcasablanca-2.png
https://issues.apache.org/jira/secure/attachment/12533047/south-street%2Bcasablanca-2.png

There is still room for improvement, I think we can just take some
themes, adjust them the best we can and bundle them inside trinidad
without jQuery. Maybe it is a good idea to write a blog explaining how
to create your custom trinidad skin using ThemeRoller.

In my opinion, casablanca skin is a lot more complex and better skin
that the ones provided in ThemeRoller. It is worth to just take our
time and create the additional resources to make the skins more
elegant and well polished. For example, there is no default colors for
links in ThemeRoller, we can provide them manually, things like that.

I removed jQuery tr:document hack and the skins do not change.

Suggestions are welcome!.

regards,

Leonardo Uribe

2012/6/22 Leonardo Uribe <lu...@gmail.com>:
> Hi
>
> 2012/6/22 Pavitra Subramaniam <pa...@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 <da...@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 <lu...@gmail.com>
>> Date: June 21, 2012 6:35:59 AM MDT
>> To: MyFaces Discussion <us...@myfaces.apache.org>
>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
>> instead?)
>> Reply-To: "MyFaces Discussion" <us...@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 <da...@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 <lu...@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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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

Re: [TRINIDAD] JQuery Themeroller compatibility

[Leonardo Uribe <lu...@gmail.com>]

Hi

2012/6/22 Pavitra Subramaniam <pa...@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 <da...@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 <lu...@gmail.com>
> Date: June 21, 2012 6:35:59 AM MDT
> To: MyFaces Discussion <us...@myfaces.apache.org>
> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
> instead?)
> Reply-To: "MyFaces Discussion" <us...@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 <da...@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 <lu...@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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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

Re: [TRINIDAD] JQuery Themeroller compatibility

[Pavitra Subramaniam <pa...@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 
<https://issues.apache.org/jira/browse/TRINIDAD-2120> but didn't find 
the changes made to DocumentRenderer. Can you upload it as well? I see 2 
issues being discussed

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 
<http://myfaces.apache.org/trinidad/devguide/skinning.html> for info.

The layout.css could still be an addition, I think. Not sure if it needs 
to @import the jquery.css as well?

>>  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


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 
<http://www.devcurry.com/2010/05/latest-jquery-and-jquery-ui-theme-links.html>. 

Although I am not sure if @import allows specifying absolute urls


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.

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.

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

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<da...@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<lu...@gmail.com>
>> Date: June 21, 2012 6:35:59 AM MDT
>> To: MyFaces Discussion<us...@myfaces.apache.org>
>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
>> instead?)
>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<lu...@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<da...@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<lu...@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<si...@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

Re: [TRINIDAD] JQuery Themeroller compatibility

[Scott O'Bryan <da...@gmail.com>]

Yeah, that looks pretty cool I gotta say.  I'e pinged some of the trin
developers to comment.

Sent from my iPhone

On Jun 21, 2012, at 9:41 AM, Leonardo Uribe <lu...@gmail.com> wrote:

> Hi Scott
>
> 2012/6/21 Scott O'Bryan <da...@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 <da...@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<da...@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<lu...@gmail.com>
>>>> Date: June 21, 2012 6:35:59 AM MDT
>>>> To: MyFaces Discussion<us...@myfaces.apache.org>
>>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
>>>> instead?)
>>>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<lu...@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<da...@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<lu...@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<si...@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
>>>>
>>>>
>>>>
>>

Re: [TRINIDAD] JQuery Themeroller compatibility

[Leonardo Uribe <lu...@gmail.com>]

Hi Scott

2012/6/21 Scott O'Bryan <da...@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 <da...@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<da...@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<lu...@gmail.com>
>>> Date: June 21, 2012 6:35:59 AM MDT
>>> To: MyFaces Discussion<us...@myfaces.apache.org>
>>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
>>> instead?)
>>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<lu...@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<da...@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<lu...@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<si...@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
>>>
>>>
>>>
>

Re: [TRINIDAD] JQuery Themeroller compatibility

[Scott O'Bryan <da...@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<da...@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<lu...@gmail.com>
>> Date: June 21, 2012 6:35:59 AM MDT
>> To: MyFaces Discussion<us...@myfaces.apache.org>
>> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
>> instead?)
>> Reply-To: "MyFaces Discussion"<us...@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<da...@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<lu...@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<lu...@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<da...@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<lu...@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<wa...@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<lu...@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<da...@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<lu...@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<si...@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
>>
>>
>>

Re: [TRINIDAD] JQuery Themeroller compatibility

[Leonardo Uribe <lu...@gmail.com>]

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 <da...@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 <lu...@gmail.com>
> Date: June 21, 2012 6:35:59 AM MDT
> To: MyFaces Discussion <us...@myfaces.apache.org>
> Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
> instead?)
> Reply-To: "MyFaces Discussion" <us...@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 <da...@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 <lu...@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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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
>
>
>

[TRINIDAD] JQuery Themeroller compatibility

[Scott O'Bryan <da...@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 <lu...@gmail.com>
*Date:* June 21, 2012 6:35:59 AM MDT
*To:* MyFaces Discussion <us...@myfaces.apache.org>
*Subject:* *Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
instead?)*
*Reply-To:* "MyFaces Discussion" <us...@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 <da...@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 <lu...@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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Scott O'Bryan <da...@gmail.com>]

Oh.. Haha. I didn't even look.  I thought it was on the dev list.  Let
me do that and I'll we if I can get some input from Jeanne.

Scott

Sent from my iPhone

On Jun 21, 2012, at 6:36 AM, Leonardo Uribe <lu...@gmail.com> wrote:

> 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 <da...@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 <lu...@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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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
>>>>>>>>>>>
>>>>>>>>

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Leonardo Uribe <lu...@gmail.com>]

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 <da...@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 <lu...@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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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
>>>>>>>>>>
>>>>>>>

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Scott O'Bryan <da...@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 <lu...@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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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
>>>>>>>>>
>>>>>>

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Leonardo Uribe <lu...@gmail.com>]

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 <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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
>>>>>>>>
>>>>>

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Leonardo Uribe <lu...@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 <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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
>>>>>>>
>>>>

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Scott O'Bryan <da...@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 <lu...@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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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
>>>>>>
>>>

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Leonardo Uribe <lu...@gmail.com>]

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 <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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
>> >>>
>>

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Walter Mourão <wa...@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 <lu...@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 <da...@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 <lu...@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  <si...@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
> >>>
>

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Leonardo Uribe <lu...@gmail.com>]

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 <da...@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 <lu...@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  <si...@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
>>>

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Scott O'Bryan <da...@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 <lu...@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  <si...@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
>>

Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[Leonardo Uribe <lu...@gmail.com>]

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  <si...@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
>

RE: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use instead?)

[si...@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