[sandbox] new component idea: rounded corners

[Andrew Robinson <an...@gmail.com>]

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

[David Brunette <Da...@chordiant.com>]

     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:andrew.rw.robinson@gmail.com] 
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.

Re: [sandbox] new component idea: rounded corners

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

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

[Adam Winer <aw...@gmail.com>]

On 6/14/07, Leonardo Uribe <lu...@gmail.com> 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

[Andrew Robinson <an...@gmail.com>]

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 <lu...@gmail.com> 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
>
>
>

Re: [sandbox] new component idea: rounded corners

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

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

[Adam Winer <aw...@gmail.com>]

For browser detection, there's the Trinidad Agent code
which detects IE and lots more.

-- Adam


On 6/14/07, Andrew Robinson <an...@gmail.com> 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
>
>