What about a utility method that could be used for many renderers.
It could leverage IE>=7, FF, opera and safari's ability to stretch via CSS.
function:
encodeRounded(baseSelector : string, radius : int) : void
if skin supports rounded corners (increase perf):
if supports CSS stretching then:
write IMG with "position:absolute;top:0px;left:0px"
write IMG with
"position:absolute;top:0px;left:{radius}px;right:{radius}px;"
etc.
So use left + right for the top & bottom images and top + bottom for
the sides. The radius could be taken from a skin property:
af|panelTabbed::body {
-tr-rounded-radius: 5px;
}
Then to set the image:
af|panelTabbed::body::top-left-icon {
content: url(myimage.png);
}
or instead of IMG, just use DIV with background-image.
How does that sound? Therefore we don't have to use tables and we just
exclude IE <= 6 which cannot handle element stretching when specifying
both top & bottom or left & right.
-Andrew
On Fri, Apr 25, 2008 at 4:56 PM, Matt Cooper <[EMAIL PROTECTED]> wrote:
> +1 to the extra DOM and corresponding selectors; it is the most flexible
>
> On Fri, Apr 25, 2008 at 4:35 PM, Glauco P. Gomes
>
>
> <[EMAIL PROTECTED]> wrote:
> >
> > +1 to skining selectors.
> >
> > It's more flexible, and if the user/developer/designer prefer CSS3, he/she
> > can use without problems.
> >
> >
> >
> > Glauco P. Gomes
> >
> > Andrew Robinson escreveu:
> > While that produces a plain rounded border, it would not allow us to
> > use graphic borders with gradients and such. In this case to mirror
> > what Adonis has done for the MyFaces site. Not to mention it looks
> > ugly on Linux FF2 at least (really choppy line).
> >
> > On Fri, Apr 25, 2008 at 4:05 PM, Matt Cooper <[EMAIL PROTECTED]> wrote:
> >
> >
> > I was referring to -foo-border-radius, etc. as seen here:
> >
> > http://www.css3.info/preview/rounded-border/
> >
> > That website is using only the proposed CSS3 syntax.
> >
> > As far as shadows, I believe only Safari currently supports it:
> >
> > http://www.css3.info/preview/box-shadow/
> >
> > Regards,
> > Matt
> >
> > On Fri, Apr 25, 2008 at 1:45 PM, Andrew Robinson
> >
> >
> > <[EMAIL PROTECTED]> wrote:
> > > Well, they support multiple background images for an HTML element, so
> > > that you can do rounded corners manually with shadows but not have to
> > > add extra HTML elements to make it possible.
> > >
> > > -Andrew
> > >
> > >
> > >
> > > On Fri, Apr 25, 2008 at 1:14 PM, Glauco P. Gomes
> > > <[EMAIL PROTECTED]> wrote:
> > > >
> > > > These new browsers (with CSS3) support shadows?
> > > >
> > > > Glauco P. Gomes
> > > >
> > > > Andrew Robinson escreveu:
> > > >
> > > > This has nothing to do with the demo. I am asking about the new
> > > > myfaces skin which users will be able to create their applications
> > > > using it.
> > > >
> > > > -Andrew
> > > >
> > > > On Fri, Apr 25, 2008 at 11:35 AM, Scott O'Bryan <[EMAIL PROTECTED]>
> > wrote:
> > > >
> > > >
> > > > So.. 3 isn't even released yet. Soon it will be 50% on 2 and 50% on
> 3..
> > > > I'm of the opinion that the people who really care about eye candy
> will
> > have
> > > > a more up to date browser. And besides, this is a technical demo,
> there
> > are
> > > > developers and PM's who will be looking at it.
> > > >
> > > > Scott
> > > >
> > > >
> > > >
> > > > Andrew Robinson wrote:
> > > >
> > > >
> > > >
> > > > The problem is that approx 50% of firefox users use 1.5 and the other
> > > > 50% use 2, about 0% use FF3. No one is on IE 3 yet. (not counting
> > > > developers)
> > > >
> > > > -Andrew
> > > >
> > > > On Fri, Apr 25, 2008 at 11:04 AM, Scott O'Bryan <[EMAIL PROTECTED]>
> > > >
> > > > wrote:
> > > >
> > > >
> > > >
> > > >
> > > > I like Matt's idea personally.
> > > >
> > > > Scott
> > > >
> > > >
> > > >
> > > > Andrew Robinson wrote:
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > So use @agent with the new version support in the skin? FF3, IE8 -
> > > > rounded - FF2, IE7 squared (I can't speak to Opera and Safari since I
> > > > have never used them)?
> > > >
> > > > Would take a long time for people to used these browsers, but it would
> > > > dramatically increase performance (much less HTML bulk). I am not
> > > > sure, would like to hear what others think.
> > > >
> > > > -Andrew
> > > >
> > > > On Fri, Apr 25, 2008 at 9:38 AM, Matt Cooper <[EMAIL PROTECTED]>
> > > >
> > > > wrote:
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > Hey Andrew,
> > > >
> > > > How about just using the CSS3 rounded corner styles already
> > > >
> > > > available
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > in Firefox and Safari? Of course we'd fall back into square
> > > >
> > > > corners
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > in IE.
> > > >
> > > > -Matt
> > > >
> > > >
> > > >
> > > > On Thu, Apr 24, 2008 at 6:13 PM, Andrew Robinson
> > > > <[EMAIL PROTECTED]> wrote:
> > > > > Looking at the many of the renderers for Trinidad components I do
> > > >
> > > > not
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > > see a lot of skinning selectors that would enable rounded
> > > >
> > > > corners.
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > For
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > > example, the panelTabbed has some nice selectors for the tabs,
> > > >
> > > > but
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > > only one selector for the body, so it would not be possible to
> > > >
> > > > round
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > > the body corners, only the tabs themselves.
> > > > >
> > > > > Is this something we want to address for the new myfaces skin or
> > > > > should we just sacrifice LnF for performance at the moment and
> > > >
> > > > keep
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > > the corners square and no drop shadows or other nice effects?
> > > > >
> > > > > -Andrew
> > > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > > >
> > >
> >
> >
> >
> >
> >
>
