myfaces-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Glauco P. Gomes" <glaucopgo...@yahoo.com.br>
Subject Re: [Trinidad] Skinning and rounded corners
Date Fri, 25 Apr 2008 23:38:47 GMT
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
  <title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
+1 for tableless.<br>
<br>
Glauco P. Gomes<br>
<br>
Andrew Robinson escreveu:
<blockquote
 cite="mid:bc36a6210804251629xa53b683l84a8b9367ba8e967@mail.gmail.com"
 type="cite">
  <pre wrap="">What about a utility method that could be used for many renderers.

It could leverage IE&gt;=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 &amp; 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 &lt;= 6 which cannot handle element stretching when specifying
both top &amp; bottom or left &amp; right.

-Andrew

On Fri, Apr 25, 2008 at 4:56 PM, Matt Cooper <a class="moz-txt-link-rfc2396E" href="mailto:matt.faces@gmail.com">&lt;matt.faces@gmail.com&gt;</a>
wrote:
  </pre>
  <blockquote type="cite">
    <pre wrap="">+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


<a class="moz-txt-link-rfc2396E" href="mailto:glaucopgomes@yahoo.com.br">&lt;glaucopgomes@yahoo.com.br&gt;</a>
wrote:
 &gt;
 &gt;  +1 to skining selectors.
 &gt;
 &gt;  It's more flexible, and if the user/developer/designer prefer CSS3, he/she
 &gt; can use without problems.
 &gt;
 &gt;
 &gt;
 &gt;  Glauco P. Gomes
 &gt;
 &gt;  Andrew Robinson escreveu:
 &gt;  While that produces a plain rounded border, it would not allow us to
 &gt; use graphic borders with gradients and such. In this case to mirror
 &gt; what Adonis has done for the MyFaces site. Not to mention it looks
 &gt; ugly on Linux FF2 at least (really choppy line).
 &gt;
 &gt; On Fri, Apr 25, 2008 at 4:05 PM, Matt Cooper <a class="moz-txt-link-rfc2396E"
href="mailto:matt.faces@gmail.com">&lt;matt.faces@gmail.com&gt;</a> wrote:
 &gt;
 &gt;
 &gt;  I was referring to -foo-border-radius, etc. as seen here:
 &gt;
 &gt;  <a class="moz-txt-link-freetext" href="http://www.css3.info/preview/rounded-border/">http://www.css3.info/preview/rounded-border/</a>
 &gt;
 &gt;  That website is using only the proposed CSS3 syntax.
 &gt;
 &gt;  As far as shadows, I believe only Safari currently supports it:
 &gt;
 &gt;  <a class="moz-txt-link-freetext" href="http://www.css3.info/preview/box-shadow/">http://www.css3.info/preview/box-shadow/</a>
 &gt;
 &gt;  Regards,
 &gt;  Matt
 &gt;
 &gt;  On Fri, Apr 25, 2008 at 1:45 PM, Andrew Robinson
 &gt;
 &gt;
 &gt; <a class="moz-txt-link-rfc2396E" href="mailto:andrew.rw.robinson@gmail.com">&lt;andrew.rw.robinson@gmail.com&gt;</a>
wrote:
 &gt;  &gt; Well, they support multiple background images for an HTML element, so
 &gt;  &gt; that you can do rounded corners manually with shadows but not have to
 &gt;  &gt; add extra HTML elements to make it possible.
 &gt;  &gt;
 &gt;  &gt; -Andrew
 &gt;  &gt;
 &gt;  &gt;
 &gt;  &gt;
 &gt;  &gt; On Fri, Apr 25, 2008 at 1:14 PM, Glauco P. Gomes
 &gt;  &gt; <a class="moz-txt-link-rfc2396E" href="mailto:glaucopgomes@yahoo.com.br">&lt;glaucopgomes@yahoo.com.br&gt;</a>
wrote:
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; These new browsers (with CSS3) support shadows?
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; Glauco P. Gomes
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; Andrew Robinson escreveu:
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; This has nothing to do with the demo. I am asking about the new
 &gt;  &gt; &gt; myfaces skin which users will be able to create their applications
 &gt;  &gt; &gt; using it.
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; -Andrew
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; On Fri, Apr 25, 2008 at 11:35 AM, Scott O'Bryan <a class="moz-txt-link-rfc2396E"
href="mailto:darkarena@gmail.com">&lt;darkarena@gmail.com&gt;</a>
 &gt; wrote:
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; So.. 3 isn't even released yet. Soon it will be 50% on 2 and
50% on 3..
 &gt;  &gt; &gt; I'm of the opinion that the people who really care about eye
candy will
 &gt; have
 &gt;  &gt; &gt; a more up to date browser. And besides, this is a technical demo,
there
 &gt; are
 &gt;  &gt; &gt; developers and PM's who will be looking at it.
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; Scott
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; Andrew Robinson wrote:
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; The problem is that approx 50% of firefox users use 1.5 and the
other
 &gt;  &gt; &gt; 50% use 2, about 0% use FF3. No one is on IE 3 yet. (not counting
 &gt;  &gt; &gt; developers)
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; -Andrew
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; On Fri, Apr 25, 2008 at 11:04 AM, Scott O'Bryan <a class="moz-txt-link-rfc2396E"
href="mailto:darkarena@gmail.com">&lt;darkarena@gmail.com&gt;</a>
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; wrote:
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; I like Matt's idea personally.
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; Scott
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; Andrew Robinson wrote:
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; So use @agent with the new version support in the skin? FF3,
IE8 -
 &gt;  &gt; &gt; rounded - FF2, IE7 squared (I can't speak to Opera and Safari
since I
 &gt;  &gt; &gt; have never used them)?
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; Would take a long time for people to used these browsers, but
it would
 &gt;  &gt; &gt; dramatically increase performance (much less HTML bulk). I am
not
 &gt;  &gt; &gt; sure, would like to hear what others think.
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; -Andrew
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; On Fri, Apr 25, 2008 at 9:38 AM, Matt Cooper <a class="moz-txt-link-rfc2396E"
href="mailto:matt.faces@gmail.com">&lt;matt.faces@gmail.com&gt;</a>
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; wrote:
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; Hey Andrew,
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; How about just using the CSS3 rounded corner styles already
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; available
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; in Firefox and Safari? Of course we'd fall back into square
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; corners
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; in IE.
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; -Matt
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; On Thu, Apr 24, 2008 at 6:13 PM, Andrew Robinson
 &gt;  &gt; &gt; <a class="moz-txt-link-rfc2396E" href="mailto:andrew.rw.robinson@gmail.com">&lt;andrew.rw.robinson@gmail.com&gt;</a>
wrote:
 &gt;  &gt; &gt; &gt; Looking at the many of the renderers for Trinidad components
I do
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; not
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; &gt; see a lot of skinning selectors that would enable rounded
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; corners.
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; For
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; &gt; example, the panelTabbed has some nice selectors for
the tabs,
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; but
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; &gt; only one selector for the body, so it would not be possible
to
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; round
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; &gt; the body corners, only the tabs themselves.
 &gt;  &gt; &gt; &gt;
 &gt;  &gt; &gt; &gt; Is this something we want to address for the new myfaces
skin or
 &gt;  &gt; &gt; &gt; should we just sacrifice LnF for performance at the
moment and
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; keep
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt; &gt; the corners square and no drop shadows or other nice
effects?
 &gt;  &gt; &gt; &gt;
 &gt;  &gt; &gt; &gt; -Andrew
 &gt;  &gt; &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt; &gt;
 &gt;  &gt;
 &gt;
 &gt;
 &gt;
 &gt;
 &gt;

    </pre>
  </blockquote>
  <pre wrap=""><!---->
  </pre>
</blockquote>
<br>
</body>
</html>

Mime
View raw message