RE: [sandbox] new component idea: rounded corners
Looks good. We've been looking to get exactly this sort of thing in our app, and I was about to start looking into creating a component just like this. I guess you've beat me to it! Once you have something available, I'd like to play around with it... but just from the attached image and quick usage example, it looks just like what we need. Dave -Original Message- From: Andrew Robinson [mailto:[EMAIL PROTECTED] Sent: Thursday, June 14, 2007 7:18 PM To: MyFaces Development Subject: [sandbox] new component idea: rounded corners I have created code that can be run from a phase listener or servlet that can generate nicely rendered PNG images with highlighted beveled edges. The idea is to be able to dynamically create a DIV tag with images in the corners and sides that can stretch to create a nice rounded corner background image effect that works on CSS2 compliant browsers as well as IE6 (with alpha-transparency IE6 CSS specific code). Attributes: color: the foreground color of the div (required) backgroundColor: the background color of the div (optional, defaults to transparent) borderColor: instead of 3D highlighting, use a solid rounded border of this color borderWidth: if 3D, the size of the bevel (highlight). If 2D (borderColor set), the thickness of the line. Default: 8 size: specify a specific WxH of the image. When given, just acts as a background image with no repeat an no support for stretching. Default is to have images generated for each corner, side and the center and have CSS position them to support resizing radius: the radius, in pixels, of the rounded corners. default: 8 See example result (attached) which is a 200x200 image with 20px border width 20px radius Usage: s:roundedDiv color=red style=padding: 8px; h:outputText value=Hello world! / /s:roundedDiv Any comments? I have 2 questions on this as well: 1) How should I implement the image generation code: new servlet, new phase listener, part of the extensions filter or other idea? 2) This requires browser detection of IE6. I can easily use a regex on the user agent, but am wondering if there is already any browser detection code in tomahawk or a 3rd party library that I can leverage that is compatible with the apache license. Thanks, Andrew The information transmitted herewith is sensitive information of Chordiant Software or its customers and is intended only for use to the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon, this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
[sandbox] new component idea: rounded corners
I have created code that can be run from a phase listener or servlet that can generate nicely rendered PNG images with highlighted beveled edges. The idea is to be able to dynamically create a DIV tag with images in the corners and sides that can stretch to create a nice rounded corner background image effect that works on CSS2 compliant browsers as well as IE6 (with alpha-transparency IE6 CSS specific code). Attributes: color: the foreground color of the div (required) backgroundColor: the background color of the div (optional, defaults to transparent) borderColor: instead of 3D highlighting, use a solid rounded border of this color borderWidth: if 3D, the size of the bevel (highlight). If 2D (borderColor set), the thickness of the line. Default: 8 size: specify a specific WxH of the image. When given, just acts as a background image with no repeat an no support for stretching. Default is to have images generated for each corner, side and the center and have CSS position them to support resizing radius: the radius, in pixels, of the rounded corners. default: 8 See example result (attached) which is a 200x200 image with 20px border width 20px radius Usage: s:roundedDiv color=red style=padding: 8px; h:outputText value=Hello world! / /s:roundedDiv Any comments? I have 2 questions on this as well: 1) How should I implement the image generation code: new servlet, new phase listener, part of the extensions filter or other idea? 2) This requires browser detection of IE6. I can easily use a regex on the user agent, but am wondering if there is already any browser detection code in tomahawk or a 3rd party library that I can leverage that is compatible with the apache license. Thanks, Andrew attachment: test_full.png
Re: [sandbox] new component idea: rounded corners
For browser detection, there's the Trinidad Agent code which detects IE and lots more. -- Adam On 6/14/07, Andrew Robinson [EMAIL PROTECTED] wrote: I have created code that can be run from a phase listener or servlet that can generate nicely rendered PNG images with highlighted beveled edges. The idea is to be able to dynamically create a DIV tag with images in the corners and sides that can stretch to create a nice rounded corner background image effect that works on CSS2 compliant browsers as well as IE6 (with alpha-transparency IE6 CSS specific code). Attributes: color: the foreground color of the div (required) backgroundColor: the background color of the div (optional, defaults to transparent) borderColor: instead of 3D highlighting, use a solid rounded border of this color borderWidth: if 3D, the size of the bevel (highlight). If 2D (borderColor set), the thickness of the line. Default: 8 size: specify a specific WxH of the image. When given, just acts as a background image with no repeat an no support for stretching. Default is to have images generated for each corner, side and the center and have CSS position them to support resizing radius: the radius, in pixels, of the rounded corners. default: 8 See example result (attached) which is a 200x200 image with 20px border width 20px radius Usage: s:roundedDiv color=red style=padding: 8px; h:outputText value=Hello world! / /s:roundedDiv Any comments? I have 2 questions on this as well: 1) How should I implement the image generation code: new servlet, new phase listener, part of the extensions filter or other idea? 2) This requires browser detection of IE6. I can easily use a regex on the user agent, but am wondering if there is already any browser detection code in tomahawk or a 3rd party library that I can leverage that is compatible with the apache license. Thanks, Andrew
Re: [sandbox] new component idea: rounded corners
Yes, the Trinidad Agent code detects IE and do other things.
I'm not an expert, but actually I'm working in
use trinidad css capabilities to non trinidad components.
There are some points to consider first:
1. If you want to do a component for trinidad, you can take full advantage
of trinidad capabilities,
but you have to write this component with the rules of trinidad (for create
components that inherit form
UIXComponentBase and renderers that extends from XhtmlRenderer or
CoreRenderer, use FacesBean
to get attributes from components, and other stuff). The problem is when you
want to mix this component
with basic html components (Ex: h:outputText/). Instead, you have to use
the trinidad counterpart components (tr:outputText/).
You can put your custom css code in a custom skin file like this:
@agent ie
{
/* Here put css code for ie */
af|panelBox::header
{
text-overflow: ellipsis;
}
/*..*/
}
2. If you want to do a component for tomahawk sandbox, then I found a
workaroud to add trinidad
capabilities and use it with non trinidad components. It's a work in
progress, but I think you can use
this with minimal efford. I'm not probe its agent capabilities, but I
believe that this should work (I want
to probe this too).
Leonardo Uribe
Re: [sandbox] new component idea: rounded corners
On 6/14/07, Leonardo Uribe [EMAIL PROTECTED] wrote:
Yes, the Trinidad Agent code detects IE and do other things.
I'm not an expert, but actually I'm working in
use trinidad css capabilities to non trinidad components.
There are some points to consider first:
1. If you want to do a component for trinidad, you can take full advantage
of trinidad capabilities,
but you have to write this component with the rules of trinidad (for create
components that inherit form
UIXComponentBase and renderers that extends from XhtmlRenderer or
CoreRenderer, use FacesBean
to get attributes from components, and other stuff).
No, not really. For skinning, you can definitely use an ordinary
renderer, extend from UIComponentBase.
What *is* true is that the code that boots up skinning is
the CoreRenderKit and the Trinidad ViewHandlerImpl, in addition
to the trh:styleSheet component (which is automatically
rendered by both trh:head and tr:document).
The problem is when you
want to mix this component
with basic html components (Ex: h:outputText/). Instead, you have to use
the trinidad counterpart components (tr:outputText/).
That's not true at all. You can use h:outputText, etc. etc. You
can use h:form instead of tr:form. And so forth. All of the spec
tags work fine with Trinidad. Tomahawk components also generally
should work with Trinidad, though there I believe there are some
incompatibilities that we can more aggressively target now that
Trinidad is out of the incubator.
-- Adam
You can put your custom css code in a custom skin file like this:
@agent ie
{
/* Here put css code for ie */
af|panelBox::header
{
text-overflow: ellipsis;
}
/*..*/
}
2. If you want to do a component for tomahawk sandbox, then I found a
workaroud to add trinidad
capabilities and use it with non trinidad components. It's a work in
progress, but I think you can use
this with minimal efford. I'm not probe its agent capabilities, but I
believe that this should work (I want
to probe this too).
Leonardo Uribe
Re: [sandbox] new component idea: rounded corners
Yes, you're right. I probe it myself, but i found that the maven artifact for create jsf components set the default myfaces implementation to 1.1.4, so it throw an error like this 2007-06-14 22:34:32,812 WARN [ org.apache.myfaces.renderkit.RenderKitFactoryImpl] Unknown RenderKit 'HTML_BASIC'. 2007-06-14 22:34:32,921 ERROR [STDERR] Jun 14, 2007 10:34:32 PM org.apache.myfaces.trinidadinternal.renderkit.core.CoreRenderKit_addBasicHTMLRenderKit WARNING: Basic HTMLRenderKit could not be located I tried to compile myfaces simple demo with trinidad as dependecy, and i update this dependence of my project as 1.1.5, and it's work without problem. Thanks for you correction Leonardo Uribe
Re: [sandbox] new component idea: rounded corners
I'd like to keep this as sandbox and not involve the Trinidad code if
possible. Any chance at getting this code over into the shared? Also,
I need to know in the Java code, not in the CSS script (for the PNG
work-around and not having to use IE behaviors)
On 6/14/07, Leonardo Uribe [EMAIL PROTECTED] wrote:
Yes, the Trinidad Agent code detects IE and do other things.
I'm not an expert, but actually I'm working in
use trinidad css capabilities to non trinidad components.
There are some points to consider first:
1. If you want to do a component for trinidad, you can take full advantage
of trinidad capabilities,
but you have to write this component with the rules of trinidad (for create
components that inherit form
UIXComponentBase and renderers that extends from XhtmlRenderer or
CoreRenderer, use FacesBean
to get attributes from components, and other stuff). The problem is when you
want to mix this component
with basic html components (Ex: h:outputText/). Instead, you have to use
the trinidad counterpart components (tr:outputText/).
You can put your custom css code in a custom skin file like this:
@agent ie
{
/* Here put css code for ie */
af|panelBox::header
{
text-overflow: ellipsis;
}
/*..*/
}
2. If you want to do a component for tomahawk sandbox, then I found a
workaroud to add trinidad
capabilities and use it with non trinidad components. It's a work in
progress, but I think you can use
this with minimal efford. I'm not probe its agent capabilities, but I
believe that this should work (I want
to probe this too).
Leonardo Uribe
