You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by Craig McClanahan <cr...@apache.org> on 2005/11/03 23:09:46 UTC
[shale][clay] CSS style classes on substituted elements
As part of my JavaOne session on Shale, I demo'd the fact that Clay lets you
have two different views of the page:
Designer view: http://localhost:8080/myapp/login.html
Developer view: http://localhost:8080/myapp/login.faces
To demonstrate that Clay was actually parsing the HTML template, in
login.html I changed:
<span jsfid="usernameMessage">
username error message
</span>
to the following instead ("errors" is a CSS style class that turns the text
red):
<span jsfid="usernameMessage" class="errors">
username error message
</span>
When you redisplay the designer view, this does indeed show a change in
behavior -- the "username error message" string shows up in red. However, if
you redisplay the developer view and then try to enter an invalid
username/password, the text still comes up in black. One thing I noticed, in
the emitted HTML markup for the developer view, the error message string is
*not* surrounded by a <span class="errors>...</span>, which is (of course)
why the text didn't change color. Did some behavior change recently in this
regard?
I'd be fine with some alternative way of accomplishing this sort of
demonstration, but changing the HTML template and seeing the change applied
immediately is a more compelling demo than something like changing
clay-config.html.
Craig
Re: [shale][clay] CSS style classes on substituted elements
Posted by Dan Turkenkopf <dt...@gmail.com>.
Beyond the drama of the demo, I would definitely like to see Clay work
the way you suggest. If the CSS styles are picked up from the span
tag, then I can maintain the separation between UI designer and
developer. If the style needs to be specified in the
clay-config.html, then I need to have my developers worrying about the
look and feel - which is what I'm trying to avoid by using Clay in the
first place.
On 11/3/05, Craig McClanahan <cr...@apache.org> wrote:
> As part of my JavaOne session on Shale, I demo'd the fact that Clay lets you
> have two different views of the page:
>
> Designer view: http://localhost:8080/myapp/login.html
>
> Developer view: http://localhost:8080/myapp/login.faces
>
> To demonstrate that Clay was actually parsing the HTML template, in
> login.html I changed:
>
> <span jsfid="usernameMessage">
> username error message
> </span>
>
> to the following instead ("errors" is a CSS style class that turns the text
> red):
>
> <span jsfid="usernameMessage" class="errors">
> username error message
> </span>
>
> When you redisplay the designer view, this does indeed show a change in
> behavior -- the "username error message" string shows up in red. However, if
> you redisplay the developer view and then try to enter an invalid
> username/password, the text still comes up in black. One thing I noticed, in
> the emitted HTML markup for the developer view, the error message string is
> *not* surrounded by a <span class="errors>...</span>, which is (of course)
> why the text didn't change color. Did some behavior change recently in this
> regard?
>
> I'd be fine with some alternative way of accomplishing this sort of
> demonstration, but changing the HTML template and seeing the change applied
> immediately is a more compelling demo than something like changing
> clay-config.html.
>
> Craig
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: [shale][clay] CSS style classes on substituted elements
Posted by Craig McClanahan <cr...@apache.org>.
On 11/3/05, Ryan Wynn <bi...@gmail.com> wrote:
>
> Or better yet you could put
> <set name="styleClass" value="@class"/> in the attributes of the baseHtml
> component of clay
> and then it would be picked up by all the descendants.
That makes sense to me ... all the JSF standarfd components (and I suspect
lots of third party ones) use the "styleClass" --> "class" trick, so this
will fix 'em all.
Thanks Ryan!
Craig
On 11/3/05, Ryan Wynn <bi...@gmail.com> wrote:
> >
> > I believe that currently if the html attribute is not also an attribute
> on
> > the underlying component, then the html attribute will be treated as a
> > symbol.
> > So, in this case if userNameMessage is actually a h:message, then
> > <span jsfid="usernameMessage" class="errors" styleClass="errors">
> > username error message
> > </span>
> > would produce <span class="errors">...</span> in both the designer and
> > developer views.
> > On the other hand if you wanted to utilize the new symbol functionality.
> > You would change
> > your clay-config.xml to add the following:
> > <component jsfid="usernameMessage"..>
> > <attributes>
> > ...
> > <set name="styleClass" value="@class"/>
> > </attributes>
> > </component>
> > Then you could just use
> > <span jsfid="usernameMessage" class="errors">
> > username error message
> > </span>
> > in the html and still get the proper output in both designer and
> > developer views.
> >
> > On 11/3/05, Craig McClanahan <cr...@apache.org> wrote:
> > >
> > > As part of my JavaOne session on Shale, I demo'd the fact that Clay
> lets
> > > you
> > > have two different views of the page:
> > >
> > > Designer view: http://localhost:8080/myapp/login.html
> > >
> > > Developer view: http://localhost:8080/myapp/login.faces
> > >
> > > To demonstrate that Clay was actually parsing the HTML template, in
> > > login.html I changed:
> > >
> > > <span jsfid="usernameMessage">
> > > username error message
> > > </span>
> > >
> > > to the following instead ("errors" is a CSS style class that turns the
> > > text
> > > red):
> > >
> > > <span jsfid="usernameMessage" class="errors">
> > > username error message
> > > </span>
> > >
> > > When you redisplay the designer view, this does indeed show a change
> in
> > > behavior -- the "username error message" string shows up in red.
> > > However, if
> > > you redisplay the developer view and then try to enter an invalid
> > > username/password, the text still comes up in black. One thing I
> > > noticed, in
> > > the emitted HTML markup for the developer view, the error message
> string
> > > is
> > > *not* surrounded by a <span class="errors>...</span>, which is (of
> > > course)
> > > why the text didn't change color. Did some behavior change recently in
> > > this
> > > regard?
> > >
> > > I'd be fine with some alternative way of accomplishing this sort of
> > > demonstration, but changing the HTML template and seeing the change
> > > applied
> > > immediately is a more compelling demo than something like changing
> > > clay-config.html.
> > >
> > > Craig
> > >
> > >
> >
>
Re: [shale][clay] CSS style classes on substituted elements
Posted by Ryan Wynn <bi...@gmail.com>.
Or better yet you could put
<set name="styleClass" value="@class"/> in the attributes of the baseHtml
component of clay
and then it would be picked up by all the descendants.
On 11/3/05, Ryan Wynn <bi...@gmail.com> wrote:
>
> I believe that currently if the html attribute is not also an attribute on
> the underlying component, then the html attribute will be treated as a
> symbol.
> So, in this case if userNameMessage is actually a h:message, then
> <span jsfid="usernameMessage" class="errors" styleClass="errors">
> username error message
> </span>
> would produce <span class="errors">...</span> in both the designer and
> developer views.
> On the other hand if you wanted to utilize the new symbol functionality.
> You would change
> your clay-config.xml to add the following:
> <component jsfid="usernameMessage"..>
> <attributes>
> ...
> <set name="styleClass" value="@class"/>
> </attributes>
> </component>
> Then you could just use
> <span jsfid="usernameMessage" class="errors">
> username error message
> </span>
> in the html and still get the proper output in both designer and
> developer views.
>
> On 11/3/05, Craig McClanahan <cr...@apache.org> wrote:
> >
> > As part of my JavaOne session on Shale, I demo'd the fact that Clay lets
> > you
> > have two different views of the page:
> >
> > Designer view: http://localhost:8080/myapp/login.html
> >
> > Developer view: http://localhost:8080/myapp/login.faces
> >
> > To demonstrate that Clay was actually parsing the HTML template, in
> > login.html I changed:
> >
> > <span jsfid="usernameMessage">
> > username error message
> > </span>
> >
> > to the following instead ("errors" is a CSS style class that turns the
> > text
> > red):
> >
> > <span jsfid="usernameMessage" class="errors">
> > username error message
> > </span>
> >
> > When you redisplay the designer view, this does indeed show a change in
> > behavior -- the "username error message" string shows up in red.
> > However, if
> > you redisplay the developer view and then try to enter an invalid
> > username/password, the text still comes up in black. One thing I
> > noticed, in
> > the emitted HTML markup for the developer view, the error message string
> > is
> > *not* surrounded by a <span class="errors>...</span>, which is (of
> > course)
> > why the text didn't change color. Did some behavior change recently in
> > this
> > regard?
> >
> > I'd be fine with some alternative way of accomplishing this sort of
> > demonstration, but changing the HTML template and seeing the change
> > applied
> > immediately is a more compelling demo than something like changing
> > clay-config.html.
> >
> > Craig
> >
> >
>
Re: [shale][clay] CSS style classes on substituted elements
Posted by Ryan Wynn <bi...@gmail.com>.
I believe that currently if the html attribute is not also an attribute on
the underlying component, then the html attribute will be treated as a
symbol.
So, in this case if userNameMessage is actually a h:message, then
<span jsfid="usernameMessage" class="errors" styleClass="errors">
username error message
</span>
would produce <span class="errors">...</span> in both the designer and
developer views.
On the other hand if you wanted to utilize the new symbol functionality.
You would change
your clay-config.xml to add the following:
<component jsfid="usernameMessage"..>
<attributes>
...
<set name="styleClass" value="@class"/>
</attributes>
</component>
Then you could just use
<span jsfid="usernameMessage" class="errors">
username error message
</span>
in the html and still get the proper output in both designer and developer
views.
On 11/3/05, Craig McClanahan <cr...@apache.org> wrote:
>
> As part of my JavaOne session on Shale, I demo'd the fact that Clay lets
> you
> have two different views of the page:
>
> Designer view: http://localhost:8080/myapp/login.html
>
> Developer view: http://localhost:8080/myapp/login.faces
>
> To demonstrate that Clay was actually parsing the HTML template, in
> login.html I changed:
>
> <span jsfid="usernameMessage">
> username error message
> </span>
>
> to the following instead ("errors" is a CSS style class that turns the
> text
> red):
>
> <span jsfid="usernameMessage" class="errors">
> username error message
> </span>
>
> When you redisplay the designer view, this does indeed show a change in
> behavior -- the "username error message" string shows up in red. However,
> if
> you redisplay the developer view and then try to enter an invalid
> username/password, the text still comes up in black. One thing I noticed,
> in
> the emitted HTML markup for the developer view, the error message string
> is
> *not* surrounded by a <span class="errors>...</span>, which is (of course)
> why the text didn't change color. Did some behavior change recently in
> this
> regard?
>
> I'd be fine with some alternative way of accomplishing this sort of
> demonstration, but changing the HTML template and seeing the change
> applied
> immediately is a more compelling demo than something like changing
> clay-config.html.
>
> Craig
>
>