myfaces-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Andrew Robinson" <andrew.rw.robin...@gmail.com>
Subject Re: [Trinidad] Skinning and rounded corners
Date Fri, 25 Apr 2008 23:29:06 GMT
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 <matt.faces@gmail.com> 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
>
>
> <glaucopgomes@yahoo.com.br> 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 <matt.faces@gmail.com> 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
>  >
>  >
>  > <andrew.rw.robinson@gmail.com> 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
>  >  > <glaucopgomes@yahoo.com.br> 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 <darkarena@gmail.com>
>  > 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 <darkarena@gmail.com>
>  >  > >
>  >  > > 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 <matt.faces@gmail.com>
>  >  > >
>  >  > > 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
>  >  > > <andrew.rw.robinson@gmail.com> 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
>  >  > > >
>  >  > >
>  >  > >
>  >  > >
>  >  > >
>  >  > >
>  >  > >
>  >  > >
>  >  > >
>  >  > >
>  >  > >
>  >  > >
>  >  >
>  >
>  >
>  >
>  >
>  >
>

Mime
View raw message