You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by "lei.java@gmail.com" <le...@gmail.com> on 2007/12/20 02:05:47 UTC

validation and CSS

Is there a way to apply style sheet (CSS) to the message validator
generates? For example, how to make the "Color me red" message in red when
it is shown up?


<validators>

<field name="pin">

<field-validator type="requiredstring">

<message>*Color me red*</message>

</field-validator>

</field>

</validators>

Many thanks.

Re: validation and CSS

Posted by "lei.java@gmail.com" <le...@gmail.com>.
Thanks so much, Alberto. Your guide is very helpful.


On Dec 19, 2007 10:21 PM, Alberto A. Flores <aa...@gmail.com> wrote:

> As the matter of fact, I found several ways in which you can modify the
> outcome of the tag.
>
> The basic (and in my opinion, a hack) is to look at the generated HTML
> code and then use your own CSS to modify the look and feel of your view.
> I'm currently using the "simple" theme and in all my "textfield" tags I
> don't see any span associated, but if you do, take a look at the
> generated HTML code and see whether there is any span associated there
> (this is how I figured how to modify the errors generated with the
> <s:fieldErrors/>.
>
> If you want to get fancy, you can certainly write your own template
> (freemarker). This gives you full support as to how to modify the entire
> HTML code. I would warn you about this one, since it adds additional
> code that unless you are familiar with, you may not want to touch, so
> consider yourself warned :) - This helped me changed some errors to use
> a "div" instead of "ul, li" combination (in the generated HTML code).
> This is done using the "template" and "templateDir" attributes within
> the UI tags. Playing with this can prove very entertaining. I originally
> started by copying the template (ftl template) from the source
> distribution and modifying it so that I can see how things can be done
> (and also to learn some Freemarker).
>
> Note that even if you are not using the *simple* theme, the <s:head/> is
> meant to give you additional CSS for you. So consider this as you do
> your UI. This is a practice I don't like since personally, I prefer to
> have more control over the produced HTML code, however it's up to you.
>
> Good luck!
>
> lei.java@gmail.com wrote:
> > Thanks Alberto.
> >
> > Which class contains style for <s:textfield .../>? I need to customize
> it so
> > that no <span ../> is around it and the text associated with it is in
> bold.
> >
> > e.g., <s:text field key="some key"/>
> >
> > If the value of the "some key" is Password, I want the "Password" is in
> > bold.
> >
> > Any suggestion?
> >
> > Thanks again.
> >
> > On Dec 19, 2007 10:00 PM, Alberto A. Flores <aa...@gmail.com> wrote:
> >
> >> I believe the errors are within a "span" with class "errorField" (it
> may
> >> be something else). Custom CSS can make you look like whatever you
> want.
> >>
> >>
> >> lei.java@gmail.com wrote:
> >>> Thanks Dave. It seems the simple theme is used so the message is in
> >> black.
> >>> I overrode the ..errorMessage style in JSP which solved my problem but
> >> I'm
> >>> not sure if it's a right way to do that.
> >>>
> >>> Thanks again.
> >>>
> >>>
> >>> On Dec 19, 2007 8:09 PM, Dave Newton <ne...@yahoo.com> wrote:
> >>>
> >>>> Er, the default stylesheet *does* make it show up in read. Are you
> >> using
> >>>> the
> >>>> <s:head/> tag? IIRC that is what includes the CSS file.
> >>>>
> >>>> d.
> >>>>
> >>>> --- "lei.java@gmail.com" <le...@gmail.com> wrote:
> >>>>
> >>>>> Is there a way to apply style sheet (CSS) to the message validator
> >>>>> generates? For example, how to make the "Color me red" message in
> red
> >>>> when
> >>>>> it is shown up?
> >>>>>
> >>>>>
> >>>>> <validators>
> >>>>>
> >>>>> <field name="pin">
> >>>>>
> >>>>> <field-validator type="requiredstring">
> >>>>>
> >>>>> <message>*Color me red*</message>
> >>>>>
> >>>>> </field-validator>
> >>>>>
> >>>>> </field>
> >>>>>
> >>>>> </validators>
> >>>>>
> >>>>> Many thanks.
> >>>>>
> >>>> ---------------------------------------------------------------------
> >>>> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> >>>> For additional commands, e-mail: user-help@struts.apache.org
> >>>>
> >>>>
> >> --
> >>
> >> Alberto A. Flores
> >> http://www.linkedin.com/in/aflores
> >>
> >>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> >> For additional commands, e-mail: user-help@struts.apache.org
> >>
> >
>
> --
>
> Alberto A. Flores
> http://www.linkedin.com/in/aflores
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>

Re: validation and CSS

Posted by "Alberto A. Flores" <aa...@gmail.com>.
As the matter of fact, I found several ways in which you can modify the 
outcome of the tag.

The basic (and in my opinion, a hack) is to look at the generated HTML 
code and then use your own CSS to modify the look and feel of your view.
I'm currently using the "simple" theme and in all my "textfield" tags I 
don't see any span associated, but if you do, take a look at the 
generated HTML code and see whether there is any span associated there 
(this is how I figured how to modify the errors generated with the 
<s:fieldErrors/>.

If you want to get fancy, you can certainly write your own template 
(freemarker). This gives you full support as to how to modify the entire 
HTML code. I would warn you about this one, since it adds additional 
code that unless you are familiar with, you may not want to touch, so 
consider yourself warned :) - This helped me changed some errors to use 
a "div" instead of "ul, li" combination (in the generated HTML code). 
This is done using the "template" and "templateDir" attributes within 
the UI tags. Playing with this can prove very entertaining. I originally 
started by copying the template (ftl template) from the source 
distribution and modifying it so that I can see how things can be done 
(and also to learn some Freemarker).

Note that even if you are not using the *simple* theme, the <s:head/> is 
meant to give you additional CSS for you. So consider this as you do 
your UI. This is a practice I don't like since personally, I prefer to 
have more control over the produced HTML code, however it's up to you.

Good luck!

lei.java@gmail.com wrote:
> Thanks Alberto.
> 
> Which class contains style for <s:textfield .../>? I need to customize it so
> that no <span ../> is around it and the text associated with it is in bold.
> 
> e.g., <s:text field key="some key"/>
> 
> If the value of the "some key" is Password, I want the "Password" is in
> bold.
> 
> Any suggestion?
> 
> Thanks again.
> 
> On Dec 19, 2007 10:00 PM, Alberto A. Flores <aa...@gmail.com> wrote:
> 
>> I believe the errors are within a "span" with class "errorField" (it may
>> be something else). Custom CSS can make you look like whatever you want.
>>
>>
>> lei.java@gmail.com wrote:
>>> Thanks Dave. It seems the simple theme is used so the message is in
>> black.
>>> I overrode the ..errorMessage style in JSP which solved my problem but
>> I'm
>>> not sure if it's a right way to do that.
>>>
>>> Thanks again.
>>>
>>>
>>> On Dec 19, 2007 8:09 PM, Dave Newton <ne...@yahoo.com> wrote:
>>>
>>>> Er, the default stylesheet *does* make it show up in read. Are you
>> using
>>>> the
>>>> <s:head/> tag? IIRC that is what includes the CSS file.
>>>>
>>>> d.
>>>>
>>>> --- "lei.java@gmail.com" <le...@gmail.com> wrote:
>>>>
>>>>> Is there a way to apply style sheet (CSS) to the message validator
>>>>> generates? For example, how to make the "Color me red" message in red
>>>> when
>>>>> it is shown up?
>>>>>
>>>>>
>>>>> <validators>
>>>>>
>>>>> <field name="pin">
>>>>>
>>>>> <field-validator type="requiredstring">
>>>>>
>>>>> <message>*Color me red*</message>
>>>>>
>>>>> </field-validator>
>>>>>
>>>>> </field>
>>>>>
>>>>> </validators>
>>>>>
>>>>> Many thanks.
>>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
>>>> For additional commands, e-mail: user-help@struts.apache.org
>>>>
>>>>
>> --
>>
>> Alberto A. Flores
>> http://www.linkedin.com/in/aflores
>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
>> For additional commands, e-mail: user-help@struts.apache.org
>>
> 

-- 

Alberto A. Flores
http://www.linkedin.com/in/aflores



Re: validation and CSS

Posted by "lei.java@gmail.com" <le...@gmail.com>.
Thanks Alberto.

Which class contains style for <s:textfield .../>? I need to customize it so
that no <span ../> is around it and the text associated with it is in bold.

e.g., <s:text field key="some key"/>

If the value of the "some key" is Password, I want the "Password" is in
bold.

Any suggestion?

Thanks again.

On Dec 19, 2007 10:00 PM, Alberto A. Flores <aa...@gmail.com> wrote:

> I believe the errors are within a "span" with class "errorField" (it may
> be something else). Custom CSS can make you look like whatever you want.
>
>
> lei.java@gmail.com wrote:
> > Thanks Dave. It seems the simple theme is used so the message is in
> black.
> >
> > I overrode the ..errorMessage style in JSP which solved my problem but
> I'm
> > not sure if it's a right way to do that.
> >
> > Thanks again.
> >
> >
> > On Dec 19, 2007 8:09 PM, Dave Newton <ne...@yahoo.com> wrote:
> >
> >> Er, the default stylesheet *does* make it show up in read. Are you
> using
> >> the
> >> <s:head/> tag? IIRC that is what includes the CSS file.
> >>
> >> d.
> >>
> >> --- "lei.java@gmail.com" <le...@gmail.com> wrote:
> >>
> >>> Is there a way to apply style sheet (CSS) to the message validator
> >>> generates? For example, how to make the "Color me red" message in red
> >> when
> >>> it is shown up?
> >>>
> >>>
> >>> <validators>
> >>>
> >>> <field name="pin">
> >>>
> >>> <field-validator type="requiredstring">
> >>>
> >>> <message>*Color me red*</message>
> >>>
> >>> </field-validator>
> >>>
> >>> </field>
> >>>
> >>> </validators>
> >>>
> >>> Many thanks.
> >>>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> >> For additional commands, e-mail: user-help@struts.apache.org
> >>
> >>
> >
>
> --
>
> Alberto A. Flores
> http://www.linkedin.com/in/aflores
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>

Re: validation and CSS

Posted by "Alberto A. Flores" <aa...@gmail.com>.
I believe the errors are within a "span" with class "errorField" (it may 
be something else). Custom CSS can make you look like whatever you want.


lei.java@gmail.com wrote:
> Thanks Dave. It seems the simple theme is used so the message is in black.
> 
> I overrode the ..errorMessage style in JSP which solved my problem but I'm
> not sure if it's a right way to do that.
> 
> Thanks again.
> 
> 
> On Dec 19, 2007 8:09 PM, Dave Newton <ne...@yahoo.com> wrote:
> 
>> Er, the default stylesheet *does* make it show up in read. Are you using
>> the
>> <s:head/> tag? IIRC that is what includes the CSS file.
>>
>> d.
>>
>> --- "lei.java@gmail.com" <le...@gmail.com> wrote:
>>
>>> Is there a way to apply style sheet (CSS) to the message validator
>>> generates? For example, how to make the "Color me red" message in red
>> when
>>> it is shown up?
>>>
>>>
>>> <validators>
>>>
>>> <field name="pin">
>>>
>>> <field-validator type="requiredstring">
>>>
>>> <message>*Color me red*</message>
>>>
>>> </field-validator>
>>>
>>> </field>
>>>
>>> </validators>
>>>
>>> Many thanks.
>>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
>> For additional commands, e-mail: user-help@struts.apache.org
>>
>>
> 

-- 

Alberto A. Flores
http://www.linkedin.com/in/aflores



Re: validation and CSS

Posted by "lei.java@gmail.com" <le...@gmail.com>.
Thanks Dave. It seems the simple theme is used so the message is in black.

I overrode the ..errorMessage style in JSP which solved my problem but I'm
not sure if it's a right way to do that.

Thanks again.


On Dec 19, 2007 8:09 PM, Dave Newton <ne...@yahoo.com> wrote:

> Er, the default stylesheet *does* make it show up in read. Are you using
> the
> <s:head/> tag? IIRC that is what includes the CSS file.
>
> d.
>
> --- "lei.java@gmail.com" <le...@gmail.com> wrote:
>
> > Is there a way to apply style sheet (CSS) to the message validator
> > generates? For example, how to make the "Color me red" message in red
> when
> > it is shown up?
> >
> >
> > <validators>
> >
> > <field name="pin">
> >
> > <field-validator type="requiredstring">
> >
> > <message>*Color me red*</message>
> >
> > </field-validator>
> >
> > </field>
> >
> > </validators>
> >
> > Many thanks.
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>

Re: validation and CSS

Posted by Dave Newton <ne...@yahoo.com>.
Er, the default stylesheet *does* make it show up in read. Are you using the
<s:head/> tag? IIRC that is what includes the CSS file.

d.

--- "lei.java@gmail.com" <le...@gmail.com> wrote:

> Is there a way to apply style sheet (CSS) to the message validator
> generates? For example, how to make the "Color me red" message in red when
> it is shown up?
> 
> 
> <validators>
> 
> <field name="pin">
> 
> <field-validator type="requiredstring">
> 
> <message>*Color me red*</message>
> 
> </field-validator>
> 
> </field>
> 
> </validators>
> 
> Many thanks.
> 


---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org