Re: [TRINIDAD] JQuery Themeroller compatibility
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 walter.mou...@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 lu4...@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 pavitra.subraman...@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 idthemeroller.desktop/id familythemeroller/family extendssimple.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/themeroller/casablanca-themeroller-base.css/style-sheet-name /skin And then just extend that skin like this: skin idblack-tie.desktop/id familyblack-tie/family extendsthemeroller.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/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-idcupertino.desktop/skin-id style-sheet-nameskins/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 Uribelu4...@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 Uribelu4...@gmail.com: Hi 2012/6/22 Pavitra Subramaniampavitra.subraman...@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
Re: [TRINIDAD] JQuery Themeroller compatibility
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 pavitra.subraman...@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 idthemeroller.desktop/id familythemeroller/family extendssimple.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/themeroller/casablanca-themeroller-base.css/style-sheet-name /skin And then just extend that skin like this: skin idblack-tie.desktop/id familyblack-tie/family extendsthemeroller.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/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-idcupertino.desktop/skin-id style-sheet-nameskins/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 Uribelu4...@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 Uribelu4...@gmail.com: Hi 2012/6/22 Pavitra Subramaniampavitra.subraman...@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 +idsunny.desktop/id +familysunny/family +render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id + style-sheet-nameskins/themeroller/sunny/jquery-ui-1.8.14.custom.css/style-sheet-name +/skin +skin-addition +skin-idsunny.desktop/skin-id + style-sheet-nameskins/themeroller/trinidad-theme.css/style-sheet-name +/skin-addition +skin-addition +skin-idsunny.desktop/skin-id
Re: [TRINIDAD] JQuery Themeroller compatibility
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 darkar...@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 lu4...@gmail.com wrote:
Hi
I have been playing for some time with this idea. I tried to create a base
skin:
skin
idthemeroller.desktop/id
familythemeroller/family
extendssimple.desktop/extends
render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id
style-sheet-nameskins/themeroller/casablanca-themeroller-base.css/style-sheet-name
/skin
And then just extend that skin like this:
skin
idblack-tie.desktop/id
familyblack-tie/family
extendsthemeroller.desktop/extends
render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id
style-sheet-nameskins/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-idcupertino.desktop/skin-id
style-sheet-nameskins/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 lu4...@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 lu4...@gmail.com:
Hi
2012/6/22 Pavitra Subramaniam pavitra.subraman...@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
Re: [TRINIDAD] JQuery Themeroller compatibility
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'Bryandarkar...@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 Uribelu4...@gmail.com wrote:
Hi
I have been playing for some time with this idea. I tried to create a base skin:
skin
idthemeroller.desktop/id
familythemeroller/family
extendssimple.desktop/extends
render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id
style-sheet-nameskins/themeroller/casablanca-themeroller-base.css/style-sheet-name
/skin
And then just extend that skin like this:
skin
idblack-tie.desktop/id
familyblack-tie/family
extendsthemeroller.desktop/extends
render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id
style-sheet-nameskins/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-idcupertino.desktop/skin-id
style-sheet-nameskins/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 Uribelu4...@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 Uribelu4...@gmail.com:
Hi
2012/6/22 Pavitra Subramaniampavitra.subraman...@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
Re: [TRINIDAD] JQuery Themeroller compatibility
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 idthemeroller.desktop/id familythemeroller/family extendssimple.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/themeroller/casablanca-themeroller-base.css/style-sheet-name /skin And then just extend that skin like this: skin idblack-tie.desktop/id familyblack-tie/family extendsthemeroller.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/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-idcupertino.desktop/skin-id style-sheet-nameskins/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 Uribelu4...@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 Uribelu4...@gmail.com: Hi 2012/6/22 Pavitra Subramaniampavitra.subraman...@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 +idsunny.desktop/id +familysunny/family +render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id + style-sheet-nameskins/themeroller/sunny/jquery-ui-1.8.14.custom.css/style-sheet-name +/skin +skin-addition +skin-idsunny.desktop/skin-id + style-sheet-nameskins/themeroller/trinidad-theme.css/style-sheet-name +/skin-addition +skin-addition +skin-idsunny.desktop/skin-id +style-sheet-nameskins/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 theskin use trinidad-theme.css as the style-sheet-name and do
Re: [TRINIDAD] JQuery Themeroller compatibility
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 idthemeroller.desktop/id familythemeroller/family extendssimple.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/themeroller/casablanca-themeroller-base.css/style-sheet-name /skin And then just extend that skin like this: skin idblack-tie.desktop/id familyblack-tie/family extendsthemeroller.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/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-idcupertino.desktop/skin-id style-sheet-nameskins/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 Uribelu4...@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 Uribelu4...@gmail.com: Hi 2012/6/22 Pavitra Subramaniampavitra.subraman...@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 +idsunny.desktop/id +familysunny/family +render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id + style-sheet-nameskins/themeroller/sunny/jquery-ui-1.8.14.custom.css/style-sheet-name +/skin +skin-addition +skin-idsunny.desktop/skin-id + style-sheet-nameskins/themeroller/trinidad-theme.css/style-sheet-name +/skin-addition +skin-addition +skin-idsunny.desktop/skin-id +style-sheet-nameskins/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 theskin 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
Re: [TRINIDAD] JQuery Themeroller compatibility
Hi I have been playing for some time with this idea. I tried to create a base skin: skin idthemeroller.desktop/id familythemeroller/family extendssimple.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/themeroller/casablanca-themeroller-base.css/style-sheet-name /skin And then just extend that skin like this: skin idblack-tie.desktop/id familyblack-tie/family extendsthemeroller.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/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-idcupertino.desktop/skin-id style-sheet-nameskins/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 lu4...@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 lu4...@gmail.com: Hi 2012/6/22 Pavitra Subramaniam pavitra.subraman...@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 + idsunny.desktop/id + familysunny/family + render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id + style-sheet-nameskins/themeroller/sunny/jquery-ui-1.8.14.custom.css/style-sheet-name + /skin + skin-addition + skin-idsunny.desktop/skin-id + style-sheet-nameskins/themeroller/trinidad-theme.css/style-sheet-name + /skin-addition + skin-addition + skin-idsunny.desktop/skin-id + style-sheet-nameskins/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
Re: [TRINIDAD] JQuery Themeroller compatibility
+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 lu4...@gmail.com wrote: Hi I have been playing for some time with this idea. I tried to create a base skin: skin idthemeroller.desktop/id familythemeroller/family extendssimple.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/themeroller/casablanca-themeroller-base.css/style-sheet-name /skin And then just extend that skin like this: skin idblack-tie.desktop/id familyblack-tie/family extendsthemeroller.desktop/extends render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id style-sheet-nameskins/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-idcupertino.desktop/skin-id style-sheet-nameskins/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 lu4...@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 lu4...@gmail.com: Hi 2012/6/22 Pavitra Subramaniam pavitra.subraman...@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 +idsunny.desktop/id +familysunny/family +render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id + style-sheet-nameskins/themeroller/sunny/jquery-ui-1.8.14.custom.css/style-sheet-name +/skin +skin-addition +skin-idsunny.desktop/skin-id + style-sheet-nameskins/themeroller/trinidad-theme.css/style-sheet-name +/skin-addition +skin-addition +skin-idsunny.desktop/skin-id +style-sheet-nameskins/themeroller/layout.css/style-sheet-name +/skin-addition Although the
Re: [TRINIDAD] JQuery Themeroller compatibility
Hi
2012/6/22 Pavitra Subramaniam pavitra.subraman...@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
+ idsunny.desktop/id
+ familysunny/family
+ render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id
+
style-sheet-nameskins/themeroller/sunny/jquery-ui-1.8.14.custom.css/style-sheet-name
+ /skin
+ skin-addition
+ skin-idsunny.desktop/skin-id
+
style-sheet-nameskins/themeroller/trinidad-theme.css/style-sheet-name
+ /skin-addition
+ skin-addition
+ skin-idsunny.desktop/skin-id
+ style-sheet-nameskins/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 extendssimple 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
Re: [TRINIDAD] JQuery Themeroller compatibility
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 lu4...@gmail.com:
Hi
2012/6/22 Pavitra Subramaniam pavitra.subraman...@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
+ idsunny.desktop/id
+ familysunny/family
+ render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id
+
style-sheet-nameskins/themeroller/sunny/jquery-ui-1.8.14.custom.css/style-sheet-name
+ /skin
+ skin-addition
+ skin-idsunny.desktop/skin-id
+
style-sheet-nameskins/themeroller/trinidad-theme.css/style-sheet-name
+ /skin-addition
+ skin-addition
+ skin-idsunny.desktop/skin-id
+ style-sheet-nameskins/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 extendssimple 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
Re: [TRINIDAD] JQuery Themeroller compatibility
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 darkar...@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 lu4...@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 darkar...@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 lu4...@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
idcupertino.desktop/id
familycupertino/family
render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id
style-sheet-nameskins/themeroller/cupertino/jquery-ui-1.8.21.custom.css/style-sheet-name
/skin
skin-addition
skin-idcupertino.desktop/skin-id
style-sheet-nameskins/themeroller/trinidad-theme.css/style-sheet-name
/skin-addition
skin-addition
skin-idcupertino.desktop/skin-id
style-sheet-nameskins/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 lu4...@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
Re: [TRINIDAD] JQuery Themeroller compatibility
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'Bryandarkar...@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 Uribelu4...@gmail.com
Date: June 21, 2012 6:35:59 AM MDT
To: MyFaces Discussionus...@myfaces.apache.org
Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
instead?)
Reply-To: MyFaces Discussionus...@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'Bryandarkar...@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 Uribelu4...@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 overridetr: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
idcupertino.desktop/id
familycupertino/family
render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id
style-sheet-nameskins/themeroller/cupertino/jquery-ui-1.8.21.custom.css/style-sheet-name
/skin
skin-addition
skin-idcupertino.desktop/skin-id
style-sheet-nameskins/themeroller/trinidad-theme.css/style-sheet-name
/skin-addition
skin-addition
skin-idcupertino.desktop/skin-id
style-sheet-nameskins/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?
Re: [TRINIDAD] JQuery Themeroller compatibility
Hi Scott
2012/6/21 Scott O'Bryan darkar...@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 darkar...@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'Bryandarkar...@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 Uribelu4...@gmail.com
Date: June 21, 2012 6:35:59 AM MDT
To: MyFaces Discussionus...@myfaces.apache.org
Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
instead?)
Reply-To: MyFaces Discussionus...@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'Bryandarkar...@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 Uribelu4...@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 {
Re: [TRINIDAD] JQuery Themeroller compatibility
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 lu4...@gmail.com wrote:
Hi Scott
2012/6/21 Scott O'Bryan darkar...@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 darkar...@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'Bryandarkar...@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 Uribelu4...@gmail.com
Date: June 21, 2012 6:35:59 AM MDT
To: MyFaces Discussionus...@myfaces.apache.org
Subject: Re: [TRINIDAD] JQuery (was: Trinidad is dead -- what do you use
instead?)
Reply-To: MyFaces Discussionus...@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'Bryandarkar...@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 Uribelu4...@gmail.com wrote:
Hi
Going back to TRINIDAD-2120, I have seen that is not really necessary to
create a parser.
Re: [TRINIDAD] JQuery Themeroller compatibility
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
+ idsunny.desktop/id
+ familysunny/family
+ render-kit-idorg.apache.myfaces.trinidad.desktop/render-kit-id
+
style-sheet-nameskins/themeroller/sunny/jquery-ui-1.8.14.custom.css/style-sheet-name
+ /skin
+ skin-addition
+ skin-idsunny.desktop/skin-id
+ style-sheet-nameskins/themeroller/trinidad-theme.css/style-sheet-name
+ /skin-addition
+ skin-addition
+ skin-idsunny.desktop/skin-id
+ style-sheet-nameskins/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 extendssimple
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'Bryandarkar...@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
