You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Iamuser <su...@gmail.com> on 2016/06/28 07:02:17 UTC

Change font and border based on value

Hello,
I use wicket 6.

I need to change the font and border of 6 input texts based on their value.
For example:
- if value is 4 or 5 - change the color to RED.
- if value <0 or >10 - change the color to BLUE.

In order to change the color I have used: 
new AttributeAppender("style", Model.of("color: red;"), " ")

Please let me know how to change the color based on the values that are set
in the input texts.
Thank you.



--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Change-font-and-border-based-on-value-tp4674965.html
Sent from the Users forum mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Change font and border based on value

Posted by Martin Grigorov <mg...@apache.org>.
Hi,

You could either combine those two or you could use plain JavaScript.
You could roll your own JavaScript (e.g. based on jQuery) that listens for
'change' event on (all) text field(s) and changes the styling.

Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov

On Tue, Jun 28, 2016 at 10:32 AM, Iamuser <su...@gmail.com> wrote:

> Hello,
> Thank you so much for this.
> However the color does not change if I change the input and leave the text
> box.
> For that, I was thinking of adding on the textbox component.
>
> add(new AjaxFormComponentUpdatingBehavior("onchange")
>
> Is there any simpler way to have both?
> 1. when page loads, set the color of existing textbox values. (works with
>  override onComponentTag)
> 2. when editing the textbox values inside the page, change the color
> accordinglly (works with AjaxFormComponentUpdatingBehavior)
>
> Thank you.
>
> On Tue, Jun 28, 2016 at 11:15 AM, Martin Grigorov-4 [via Apache Wicket] <
> ml-node+s1842946n4674966h80@n4.nabble.com> wrote:
>
> > Hi,
> >
> > You can do something like:
> >
> > new TextField<Integer>("someId", ...) {
> >   @Override protected void onComponentTag(ComponentTag tag) {
> >      super.onComponentTag(tag);
> >      int value = getModelObject();
> >      if (value < 0 || value > 10) {
> >         tag.append("style", "color:blue", ";");
> >      } else if (value == 4 || value == 5) {
> >         tag.append("style", "color:red", ";");
> >      }
> >   }
> > }
> >
> > Martin Grigorov
> > Wicket Training and Consulting
> > https://twitter.com/mtgrigorov
> >
> > On Tue, Jun 28, 2016 at 9:02 AM, Iamuser <[hidden email]
> > <http:///user/SendEmail.jtp?type=node&node=4674966&i=0>> wrote:
> >
> > > Hello,
> > > I use wicket 6.
> > >
> > > I need to change the font and border of 6 input texts based on their
> > value.
> > > For example:
> > > - if value is 4 or 5 - change the color to RED.
> > > - if value <0 or >10 - change the color to BLUE.
> > >
> > > In order to change the color I have used:
> > > new AttributeAppender("style", Model.of("color: red;"), " ")
> > >
> > > Please let me know how to change the color based on the values that are
> > set
> > > in the input texts.
> > > Thank you.
> > >
> > >
> > >
> > > --
> > > View this message in context:
> > >
> >
> http://apache-wicket.1842946.n4.nabble.com/Change-font-and-border-based-on-value-tp4674965.html
> > > Sent from the Users forum mailing list archive at Nabble.com.
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: [hidden email]
> > <http:///user/SendEmail.jtp?type=node&node=4674966&i=1>
> > > For additional commands, e-mail: [hidden email]
> > <http:///user/SendEmail.jtp?type=node&node=4674966&i=2>
> > >
> > >
> >
> >
> > ------------------------------
> > If you reply to this email, your message will be added to the discussion
> > below:
> >
> >
> http://apache-wicket.1842946.n4.nabble.com/Change-font-and-border-based-on-value-tp4674965p4674966.html
> > To unsubscribe from Change font and border based on value, click here
> > <
> http://apache-wicket.1842946.n4.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=4674965&code=c3VwZXJiaXNzaW1hQGdtYWlsLmNvbXw0Njc0OTY1fC01MzM2MjU4NzI=
> >
> > .
> > NAML
> > <
> http://apache-wicket.1842946.n4.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml
> >
> >
>
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Change-font-and-border-based-on-value-tp4674965p4674967.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

Re: Change font and border based on value

Posted by Iamuser <su...@gmail.com>.
Hello,
Thank you so much for this.
However the color does not change if I change the input and leave the text
box.
For that, I was thinking of adding on the textbox component.

add(new AjaxFormComponentUpdatingBehavior("onchange")

Is there any simpler way to have both?
1. when page loads, set the color of existing textbox values. (works with
 override onComponentTag)
2. when editing the textbox values inside the page, change the color
accordinglly (works with AjaxFormComponentUpdatingBehavior)

Thank you.

On Tue, Jun 28, 2016 at 11:15 AM, Martin Grigorov-4 [via Apache Wicket] <
ml-node+s1842946n4674966h80@n4.nabble.com> wrote:

> Hi,
>
> You can do something like:
>
> new TextField<Integer>("someId", ...) {
>   @Override protected void onComponentTag(ComponentTag tag) {
>      super.onComponentTag(tag);
>      int value = getModelObject();
>      if (value < 0 || value > 10) {
>         tag.append("style", "color:blue", ";");
>      } else if (value == 4 || value == 5) {
>         tag.append("style", "color:red", ";");
>      }
>   }
> }
>
> Martin Grigorov
> Wicket Training and Consulting
> https://twitter.com/mtgrigorov
>
> On Tue, Jun 28, 2016 at 9:02 AM, Iamuser <[hidden email]
> <http:///user/SendEmail.jtp?type=node&node=4674966&i=0>> wrote:
>
> > Hello,
> > I use wicket 6.
> >
> > I need to change the font and border of 6 input texts based on their
> value.
> > For example:
> > - if value is 4 or 5 - change the color to RED.
> > - if value <0 or >10 - change the color to BLUE.
> >
> > In order to change the color I have used:
> > new AttributeAppender("style", Model.of("color: red;"), " ")
> >
> > Please let me know how to change the color based on the values that are
> set
> > in the input texts.
> > Thank you.
> >
> >
> >
> > --
> > View this message in context:
> >
> http://apache-wicket.1842946.n4.nabble.com/Change-font-and-border-based-on-value-tp4674965.html
> > Sent from the Users forum mailing list archive at Nabble.com.
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]
> <http:///user/SendEmail.jtp?type=node&node=4674966&i=1>
> > For additional commands, e-mail: [hidden email]
> <http:///user/SendEmail.jtp?type=node&node=4674966&i=2>
> >
> >
>
>
> ------------------------------
> If you reply to this email, your message will be added to the discussion
> below:
>
> http://apache-wicket.1842946.n4.nabble.com/Change-font-and-border-based-on-value-tp4674965p4674966.html
> To unsubscribe from Change font and border based on value, click here
> <http://apache-wicket.1842946.n4.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=4674965&code=c3VwZXJiaXNzaW1hQGdtYWlsLmNvbXw0Njc0OTY1fC01MzM2MjU4NzI=>
> .
> NAML
> <http://apache-wicket.1842946.n4.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>


--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Change-font-and-border-based-on-value-tp4674965p4674967.html
Sent from the Users forum mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Change font and border based on value

Posted by Martin Grigorov <mg...@apache.org>.
Hi,

You can do something like:

new TextField<Integer>("someId", ...) {
  @Override protected void onComponentTag(ComponentTag tag) {
     super.onComponentTag(tag);
     int value = getModelObject();
     if (value < 0 || value > 10) {
        tag.append("style", "color:blue", ";");
     } else if (value == 4 || value == 5) {
        tag.append("style", "color:red", ";");
     }
  }
}

Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov

On Tue, Jun 28, 2016 at 9:02 AM, Iamuser <su...@gmail.com> wrote:

> Hello,
> I use wicket 6.
>
> I need to change the font and border of 6 input texts based on their value.
> For example:
> - if value is 4 or 5 - change the color to RED.
> - if value <0 or >10 - change the color to BLUE.
>
> In order to change the color I have used:
> new AttributeAppender("style", Model.of("color: red;"), " ")
>
> Please let me know how to change the color based on the values that are set
> in the input texts.
> Thank you.
>
>
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Change-font-and-border-based-on-value-tp4674965.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>