You are viewing a plain text version of this content. The canonical link for it is here.
Posted to adffaces-user@incubator.apache.org by Markus Heinisch <Ma...@trivadis.com> on 2006/08/31 15:49:14 UTC
How to style a single tr:inputText with a background-color depending on a state?
Hi,
I want to style required input fields (tr:inputText) with a different background color and only the <input> element should be affected.
With ADF Faces I used a little trick (see below).
Now I want to use Trinidad and the trick doesn't work anymore!
I have found no way to style a single component instance with a style class.
(Don't want to write an inline style for every required form field).
The documentation says about attribute styleClass:
"If in ADF, styleClass and inlineStyle were rendered on the label and the <input>. In Trinidad, these attributes are rendered on the root dom element."
Sorry, have no clue what that means. Does it mean the root of the document or the parent of the <input> element which is a <td>?
In the end it make no difference if I use attribute styleClass or not. :-(
Any hints are welcome!
Thanks,
Markus
________________________________
From: Markus Heinisch [mailto:Markus.Heinisch@trivadis.com]
Sent: Wed 28.06.2006 18:24
To: adffaces-user@incubator.apache.org
Subject: AW: [SPAM] - Skin Enhancement Request - Bayesian Filter detected spam
Hi Dan,
Are you looking for a solution like this:
<af:inputText value="#{bindings.Title.inputValue}"
label="#{bindings.Title.label}"
required="#{bindings.Title.mandatory}"
styleClass="#{bindings.Title.mandatory ? 'required' : 'nonrequired'}"
columns="#{bindings.Title.displayWidth}">
</af:inputText>
The EL expression in the attribute styleClass makes the trick. The EL expression resolves to styleClass="required" when the Title is mandatory (example uses Oracle ADF which provides for a property like 'Title' some metadata like 'mandatory' or 'updatable').
The styleclass must be defined in a CSS or your Skin-CSS:
input.required, textarea.required, select.required {
background-color: rgb(255,255,181);
border-style: solid ;
}
input.nonrequired, textarea.nonrequired, select.nonrequired {
background-color: white;
border-style: solid ;
}
From my point of view everything you need is available to solve your styling needs. ;-)
Cheers,
Markus
------------------------------------------
Markus Heinisch
Dipl.-Inform.
Consultant
Trivadis GmbH
Freischützstrasse 92
81927 München
Germany
Tel.: +49-89-99275930
Fax : +49-89-99275959
Mobile: +49-162-2959616
mailto:markus.heinisch@trivadis.com
http://www.trivadis.com
> -----Ursprüngliche Nachricht-----
> Von: Dan Robinson [mailto:dannyjrobinson@gmail.com]
> Gesendet: Mittwoch, 28. Juni 2006 18:02
> An: adffaces-user@incubator.apache.org
> Betreff: [SPAM] - Skin Enhancement Request - Bayesian Filter
> detected spam
>
> I don't think this is currently possible, but please prove me wrong!
>
> We'd like to provide a skin configuration that would cause
> certain styles to be appled when a field is marked as
> required. Specifically, we'd like to cause the input field
> background colour to be changed to make it very obvious that
> it is required.
>
> So far we've only been able to set the background color for
> all elements of an input field (label, tip, etc.).
>
> I guess an extension of this would be to make the label bold etc. etc.
>
> Thanks,
>
> Danny
>
Re: How to style a single tr:inputText with a background-color depending on a state?
Posted by Simon Lessard <si...@gmail.com>.
When skinning, you should assume the least possible about the markup being
generated as it can change from version to version. Try to use skin
selectors most of the time. If you want to skin all required input in some
consistent way, not just inputText, you can use aliases. Like the patch I
made also include two new aliases:
.AFRequiredContent:alias
.AFRequiredLabel:alias
So let say you would like to make all required fields' label in caps and all
inputs' background yellow, it'll be achievable using the following :
.AFRequiredContent:alias
{
background-color: yellow;
}
.AFRequiredLabel:alias
{
text-transform: uppercase;
}
I'll try to have the patch commited asap.
Regards,
~ Simon
On 8/31/06, Markus Heinisch <Ma...@trivadis.com> wrote:
>
> Thanks Simon, that will solve my actual problem.
>
> BUT: Does that mean that I can't associate an tr:inputText with a style
> class selector?
> When I have a different use case (say, mark all optional <input>
> components or something else) then I can't do it by myself, it must be
> implemented in Trinindad??
>
> Cheers,
> Markus
>
>
>
> ________________________________
>
> From: Simon Lessard [mailto:simon.lessard.3@gmail.com]
> Sent: Thu 31.08.2006 17:55
> To: adffaces-user@incubator.apache.org
> Subject: Re: How to style a single tr:inputText with a background-color
> depending on a state?
>
>
>
> Hello Markus,
>
> It will be possible soon since I posted a patch about this, we only need
> to
> commit it when we're sure it works fine. We have a small issue with states
> currently though so it might not be today. You'll be able to do just what
> you want using <af|inputText:required::content/>
>
>
> Regards,
>
> ~ Simon
>
> On 8/31/06, Markus Heinisch <Ma...@trivadis.com> wrote:
> >
> > Hi,
> >
> > I want to style required input fields (tr:inputText) with a different
> > background color and only the <input> element should be affected.
> > With ADF Faces I used a little trick (see below).
> >
> > Now I want to use Trinidad and the trick doesn't work anymore!
> > I have found no way to style a single component instance with a style
> > class.
> > (Don't want to write an inline style for every required form field).
> >
> > The documentation says about attribute styleClass:
> > "If in ADF, styleClass and inlineStyle were rendered on the label and
> the
> > <input>. In Trinidad, these attributes are rendered on the root dom
> > element."
> >
> > Sorry, have no clue what that means. Does it mean the root of the
> document
> > or the parent of the <input> element which is a <td>?
> > In the end it make no difference if I use attribute styleClass or not.
> :-(
> >
> > Any hints are welcome!
> >
> > Thanks,
> > Markus
> >
> >
> >
> > ________________________________
> >
> > From: Markus Heinisch [mailto:Markus.Heinisch@trivadis.com]
> > Sent: Wed 28.06.2006 18:24
> > To: adffaces-user@incubator.apache.org
> > Subject: AW: [SPAM] - Skin Enhancement Request - Bayesian Filter
> detected
> > spam
> >
> >
> >
> > Hi Dan,
> >
> > Are you looking for a solution like this:
> >
> > <af:inputText value="#{bindings.Title.inputValue}"
> > label="#{bindings.Title.label}"
> > required="#{bindings.Title.mandatory}"
> > styleClass="#{bindings.Title.mandatory ?
> > 'required' : 'nonrequired'}"
> > columns="#{bindings.Title.displayWidth}">
> > </af:inputText>
> >
> > The EL expression in the attribute styleClass makes the trick. The EL
> > expression resolves to styleClass="required" when the Title is mandatory
> > (example uses Oracle ADF which provides for a property like 'Title' some
> > metadata like 'mandatory' or 'updatable').
> >
> > The styleclass must be defined in a CSS or your Skin-CSS:
> >
> > input.required, textarea.required, select.required {
> > background-color: rgb(255,255,181);
> > border-style: solid ;
> > }
> > input.nonrequired, textarea.nonrequired, select.nonrequired {
> > background-color: white;
> > border-style: solid ;
> > }
> >
> > From my point of view everything you need is available to solve your
> > styling needs. ;-)
> >
> > Cheers,
> > Markus
> > ------------------------------------------
> > Markus Heinisch
> >
> > Dipl.-Inform.
> > Consultant
> >
> > Trivadis GmbH
> > Freischützstrasse 92
> > 81927 München
> > Germany
> >
> > Tel.: +49-89-99275930
> > Fax : +49-89-99275959
> > Mobile: +49-162-2959616
> > mailto:markus.heinisch@trivadis.com
> > http://www.trivadis.com
> >
> >
> > > -----Ursprüngliche Nachricht-----
> > > Von: Dan Robinson [mailto:dannyjrobinson@gmail.com]
> > > Gesendet: Mittwoch, 28. Juni 2006 18:02
> > > An: adffaces-user@incubator.apache.org
> > > Betreff: [SPAM] - Skin Enhancement Request - Bayesian Filter
> > > detected spam
> > >
> > > I don't think this is currently possible, but please prove me wrong!
> > >
> > > We'd like to provide a skin configuration that would cause
> > > certain styles to be appled when a field is marked as
> > > required. Specifically, we'd like to cause the input field
> > > background colour to be changed to make it very obvious that
> > > it is required.
> > >
> > > So far we've only been able to set the background color for
> > > all elements of an input field (label, tip, etc.).
> > >
> > > I guess an extension of this would be to make the label bold etc. etc.
> > >
> > > Thanks,
> > >
> > > Danny
> > >
> >
> >
> >
>
>
>
>
RE: How to style a single tr:inputText with a background-color depending on a state?
Posted by Markus Heinisch <Ma...@trivadis.com>.
Thanks Simon, that will solve my actual problem.
BUT: Does that mean that I can't associate an tr:inputText with a style class selector?
When I have a different use case (say, mark all optional <input> components or something else) then I can't do it by myself, it must be implemented in Trinindad??
Cheers,
Markus
________________________________
From: Simon Lessard [mailto:simon.lessard.3@gmail.com]
Sent: Thu 31.08.2006 17:55
To: adffaces-user@incubator.apache.org
Subject: Re: How to style a single tr:inputText with a background-color depending on a state?
Hello Markus,
It will be possible soon since I posted a patch about this, we only need to
commit it when we're sure it works fine. We have a small issue with states
currently though so it might not be today. You'll be able to do just what
you want using <af|inputText:required::content/>
Regards,
~ Simon
On 8/31/06, Markus Heinisch <Ma...@trivadis.com> wrote:
>
> Hi,
>
> I want to style required input fields (tr:inputText) with a different
> background color and only the <input> element should be affected.
> With ADF Faces I used a little trick (see below).
>
> Now I want to use Trinidad and the trick doesn't work anymore!
> I have found no way to style a single component instance with a style
> class.
> (Don't want to write an inline style for every required form field).
>
> The documentation says about attribute styleClass:
> "If in ADF, styleClass and inlineStyle were rendered on the label and the
> <input>. In Trinidad, these attributes are rendered on the root dom
> element."
>
> Sorry, have no clue what that means. Does it mean the root of the document
> or the parent of the <input> element which is a <td>?
> In the end it make no difference if I use attribute styleClass or not. :-(
>
> Any hints are welcome!
>
> Thanks,
> Markus
>
>
>
> ________________________________
>
> From: Markus Heinisch [mailto:Markus.Heinisch@trivadis.com]
> Sent: Wed 28.06.2006 18:24
> To: adffaces-user@incubator.apache.org
> Subject: AW: [SPAM] - Skin Enhancement Request - Bayesian Filter detected
> spam
>
>
>
> Hi Dan,
>
> Are you looking for a solution like this:
>
> <af:inputText value="#{bindings.Title.inputValue}"
> label="#{bindings.Title.label}"
> required="#{bindings.Title.mandatory}"
> styleClass="#{bindings.Title.mandatory ?
> 'required' : 'nonrequired'}"
> columns="#{bindings.Title.displayWidth}">
> </af:inputText>
>
> The EL expression in the attribute styleClass makes the trick. The EL
> expression resolves to styleClass="required" when the Title is mandatory
> (example uses Oracle ADF which provides for a property like 'Title' some
> metadata like 'mandatory' or 'updatable').
>
> The styleclass must be defined in a CSS or your Skin-CSS:
>
> input.required, textarea.required, select.required {
> background-color: rgb(255,255,181);
> border-style: solid ;
> }
> input.nonrequired, textarea.nonrequired, select.nonrequired {
> background-color: white;
> border-style: solid ;
> }
>
> From my point of view everything you need is available to solve your
> styling needs. ;-)
>
> Cheers,
> Markus
> ------------------------------------------
> Markus Heinisch
>
> Dipl.-Inform.
> Consultant
>
> Trivadis GmbH
> Freischützstrasse 92
> 81927 München
> Germany
>
> Tel.: +49-89-99275930
> Fax : +49-89-99275959
> Mobile: +49-162-2959616
> mailto:markus.heinisch@trivadis.com
> http://www.trivadis.com
>
>
> > -----Ursprüngliche Nachricht-----
> > Von: Dan Robinson [mailto:dannyjrobinson@gmail.com]
> > Gesendet: Mittwoch, 28. Juni 2006 18:02
> > An: adffaces-user@incubator.apache.org
> > Betreff: [SPAM] - Skin Enhancement Request - Bayesian Filter
> > detected spam
> >
> > I don't think this is currently possible, but please prove me wrong!
> >
> > We'd like to provide a skin configuration that would cause
> > certain styles to be appled when a field is marked as
> > required. Specifically, we'd like to cause the input field
> > background colour to be changed to make it very obvious that
> > it is required.
> >
> > So far we've only been able to set the background color for
> > all elements of an input field (label, tip, etc.).
> >
> > I guess an extension of this would be to make the label bold etc. etc.
> >
> > Thanks,
> >
> > Danny
> >
>
>
>
Re: How to style a single tr:inputText with a background-color depending on a state?
Posted by Simon Lessard <si...@gmail.com>.
Hello Markus,
It will be possible soon since I posted a patch about this, we only need to
commit it when we're sure it works fine. We have a small issue with states
currently though so it might not be today. You'll be able to do just what
you want using <af|inputText:required::content/>
Regards,
~ Simon
On 8/31/06, Markus Heinisch <Ma...@trivadis.com> wrote:
>
> Hi,
>
> I want to style required input fields (tr:inputText) with a different
> background color and only the <input> element should be affected.
> With ADF Faces I used a little trick (see below).
>
> Now I want to use Trinidad and the trick doesn't work anymore!
> I have found no way to style a single component instance with a style
> class.
> (Don't want to write an inline style for every required form field).
>
> The documentation says about attribute styleClass:
> "If in ADF, styleClass and inlineStyle were rendered on the label and the
> <input>. In Trinidad, these attributes are rendered on the root dom
> element."
>
> Sorry, have no clue what that means. Does it mean the root of the document
> or the parent of the <input> element which is a <td>?
> In the end it make no difference if I use attribute styleClass or not. :-(
>
> Any hints are welcome!
>
> Thanks,
> Markus
>
>
>
> ________________________________
>
> From: Markus Heinisch [mailto:Markus.Heinisch@trivadis.com]
> Sent: Wed 28.06.2006 18:24
> To: adffaces-user@incubator.apache.org
> Subject: AW: [SPAM] - Skin Enhancement Request - Bayesian Filter detected
> spam
>
>
>
> Hi Dan,
>
> Are you looking for a solution like this:
>
> <af:inputText value="#{bindings.Title.inputValue}"
> label="#{bindings.Title.label}"
> required="#{bindings.Title.mandatory}"
> styleClass="#{bindings.Title.mandatory ?
> 'required' : 'nonrequired'}"
> columns="#{bindings.Title.displayWidth}">
> </af:inputText>
>
> The EL expression in the attribute styleClass makes the trick. The EL
> expression resolves to styleClass="required" when the Title is mandatory
> (example uses Oracle ADF which provides for a property like 'Title' some
> metadata like 'mandatory' or 'updatable').
>
> The styleclass must be defined in a CSS or your Skin-CSS:
>
> input.required, textarea.required, select.required {
> background-color: rgb(255,255,181);
> border-style: solid ;
> }
> input.nonrequired, textarea.nonrequired, select.nonrequired {
> background-color: white;
> border-style: solid ;
> }
>
> From my point of view everything you need is available to solve your
> styling needs. ;-)
>
> Cheers,
> Markus
> ------------------------------------------
> Markus Heinisch
>
> Dipl.-Inform.
> Consultant
>
> Trivadis GmbH
> Freischützstrasse 92
> 81927 München
> Germany
>
> Tel.: +49-89-99275930
> Fax : +49-89-99275959
> Mobile: +49-162-2959616
> mailto:markus.heinisch@trivadis.com
> http://www.trivadis.com
>
>
> > -----Ursprüngliche Nachricht-----
> > Von: Dan Robinson [mailto:dannyjrobinson@gmail.com]
> > Gesendet: Mittwoch, 28. Juni 2006 18:02
> > An: adffaces-user@incubator.apache.org
> > Betreff: [SPAM] - Skin Enhancement Request - Bayesian Filter
> > detected spam
> >
> > I don't think this is currently possible, but please prove me wrong!
> >
> > We'd like to provide a skin configuration that would cause
> > certain styles to be appled when a field is marked as
> > required. Specifically, we'd like to cause the input field
> > background colour to be changed to make it very obvious that
> > it is required.
> >
> > So far we've only been able to set the background color for
> > all elements of an input field (label, tip, etc.).
> >
> > I guess an extension of this would be to make the label bold etc. etc.
> >
> > Thanks,
> >
> > Danny
> >
>
>
>