Apache Wicket › Users forum

change <tr> background color when ListView iterate....

Classic

List

Threaded

6 messages Options

arnaud74130

change <tr> background color when ListView iterate....

Hello,

Using a ListView on a <tr> html markup, I would like to alternate the
background color of each "new" tr when the list iterate...

I just find how to do this on the label inside the td... not on the <tr>
level..., so just the background color of the title is changed and not the
full line !

here is an example of my code....

html:
--------

<table>
<tr wicket:id="cdList">
<td><span wicket:id="title"/></td>
</tr>
</table>

java:
------
ListView<CD> aList = new ListView<CD>("cdList",CDList) {

private boolean alternateLine = true; // to switch css class
attribute at each new item...

@Override
protected void populateItem(ListItem<CD> item) {

Label title = new Label("title", new
PropertyModel<String>(item.getModelObject(), "title"));

if (alternateLine) {
title.add(new SimpleAttributeModifier("class", "line1"));
// change the color !
} else {
title.add(new SimpleAttributeModifier("class", "line2"));
}
alternateLine = !alternateLine;

item.add(title)
}
}

thanks,

Arnaud

Mauro Ciancio

Re: change <tr> background color when ListView iterate....

Take a look at:

ListItem#newItem(final int index)

and:

org.apache.wicket.markup.repeater.OddEvenItem.

Cheers.

On Sun, Mar 28, 2010 at 11:40 AM, Arnaud Garcia <[hidden email]> wrote:

> Hello,
>
> Using a ListView on a <tr> html markup, I would like to alternate the
> background color of each "new" tr when the list iterate...
>
> I just find how to do this on the label inside the td... not on the <tr>
> level..., so just the background color of the title is changed and not the
> full line !
>
> here is an example of my code....
>
> html:
> --------
>
> <table>
> <tr wicket:id="cdList">
> <td><span wicket:id="title"/></td>
> </tr>
> </table>
>
>
> java:
> ------
> ListView<CD> aList = new ListView<CD>("cdList",CDList) {
>
> private boolean alternateLine = true; // to switch css class
> attribute at each new item...
>
> @Override
> protected void populateItem(ListItem<CD> item) {
>
> Label title = new Label("title", new
> PropertyModel<String>(item.getModelObject(), "title"));
>
> if (alternateLine) {
> title.add(new SimpleAttributeModifier("class", "line1"));
> // change the color !
> } else {
> title.add(new SimpleAttributeModifier("class", "line2"));
> }
> alternateLine = !alternateLine;
>
> item.add(title)
> }
> }
>
>
> thanks,
>
> Arnaud
>

--
Mauro Ciancio <maurociancio at gmail dot com>

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

arnaud74130

Re: change <tr> background color when ListView iterate....

Hi,

Defenitively it is more elegant to use the "OddEvenItem" object instead of
using my boolean... but it doesn't change my problem...
Changing the class of the items can be done easily (see my code, or you can
use OddEventItem etc..) But the problem is to change the class at the upper
level in the <tr> ?

I am certainely not clear, so I can reformulate like this: how can you
create a table where lines are blue then white and so on when you iterate
over a ListView...

thanks for help,

Arnaud

2010/3/28 Mauro Ciancio <[hidden email]>

> Take a look at:
>
> ListItem#newItem(final int index)
>
> and:
>
> org.apache.wicket.markup.repeater.OddEvenItem.
>
> Cheers.
>
> On Sun, Mar 28, 2010 at 11:40 AM, Arnaud Garcia <[hidden email]>
> wrote:
> > Hello,
> >
> > Using a ListView on a <tr> html markup, I would like to alternate the
> > background color of each "new" tr when the list iterate...
> >
> > I just find how to do this on the label inside the td... not on the <tr>
> > level..., so just the background color of the title is changed and not
> the
> > full line !
> >
> > here is an example of my code....
> >
> > html:
> > --------
> >
> > <table>
> > <tr wicket:id="cdList">
> > <td><span wicket:id="title"/></td>
> > </tr>
> > </table>
> >
> >
> > java:
> > ------
> > ListView<CD> aList = new ListView<CD>("cdList",CDList) {
> >
> > private boolean alternateLine = true; // to switch css class
> > attribute at each new item...
> >
> > @Override
> > protected void populateItem(ListItem<CD> item) {
> >
> > Label title = new Label("title", new
> > PropertyModel<String>(item.getModelObject(), "title"));
> >
> > if (alternateLine) {
> > title.add(new SimpleAttributeModifier("class", "line1"));
> > // change the color !
> > } else {
> > title.add(new SimpleAttributeModifier("class", "line2"));
> > }
> > alternateLine = !alternateLine;
> >
> > item.add(title)
> > }
> > }
> >
> >
> > thanks,
> >
> > Arnaud
> >
>
>
>
> --
> Mauro Ciancio <maurociancio at gmail dot com>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>

Martijn Dashorst

Re: change <tr> background color when ListView iterate....

Administrator

each list item is attached to the tr tag. Therefore the OddEvenItem
solution just works. Did you try it?

Martijn

On Mon, Mar 29, 2010 at 9:24 AM, Arnaud Garcia <[hidden email]> wrote:

> Hi,
>
> Defenitively it is more elegant to use the "OddEvenItem" object instead of
> using my boolean... but it doesn't change my problem...
> Changing the class of the items can be done easily (see my code, or you can
> use OddEventItem etc..) But the problem is to change the class at the upper
> level in the <tr> ?
>
> I am certainely not clear, so I can reformulate like this: how can you
> create a table where lines are blue then white and so on when you iterate
> over a ListView...
>
> thanks for help,
>
> Arnaud
>
>
> 2010/3/28 Mauro Ciancio <[hidden email]>
>
>> Take a look at:
>>
>> ListItem#newItem(final int index)
>>
>> and:
>>
>> org.apache.wicket.markup.repeater.OddEvenItem.
>>
>> Cheers.
>>
>> On Sun, Mar 28, 2010 at 11:40 AM, Arnaud Garcia <[hidden email]>
>> wrote:
>> > Hello,
>> >
>> > Using a ListView on a <tr> html markup, I would like to alternate the
>> > background color of each "new" tr when the list iterate...
>> >
>> > I just find how to do this on the label inside the td... not on the <tr>
>> > level..., so just the background color of the title is changed and not
>> the
>> > full line !
>> >
>> > here is an example of my code....
>> >
>> > html:
>> > --------
>> >
>> > <table>
>> > <tr wicket:id="cdList">
>> > <td><span wicket:id="title"/></td>
>> > </tr>
>> > </table>
>> >
>> >
>> > java:
>> > ------
>> > ListView<CD> aList = new ListView<CD>("cdList",CDList) {
>> >
>> > private boolean alternateLine = true; // to switch css class
>> > attribute at each new item...
>> >
>> > @Override
>> > protected void populateItem(ListItem<CD> item) {
>> >
>> > Label title = new Label("title", new
>> > PropertyModel<String>(item.getModelObject(), "title"));
>> >
>> > if (alternateLine) {
>> > title.add(new SimpleAttributeModifier("class", "line1"));
>> > // change the color !
>> > } else {
>> > title.add(new SimpleAttributeModifier("class", "line2"));
>> > }
>> > alternateLine = !alternateLine;
>> >
>> > item.add(title)
>> > }
>> > }
>> >
>> >
>> > thanks,
>> >
>> > Arnaud
>> >
>>
>>
>>
>> --
>> Mauro Ciancio <maurociancio at gmail dot com>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>

--
Become a Wicket expert, learn from the best: http://wicketinaction.com
Apache Wicket 1.4 increases type safety for web applications
Get it now: http://www.apache.org/dyn/closer.cgi/wicket/1.4.4

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Bustanil Arifin

Re: change <tr> background color when ListView iterate....

In reply to this post by arnaud74130

Using ListItem#newItem(final int index) should be suffice.
The item is the <tr> element. I tried it like this:

...
protected ListItem<MyModel> newItem(int index) {
ListItem<MyModel> item = super.newItem(index);
item.add(new SimpleAttributeModifier("class", index %
2 == 0? "even" : "odd"));
return item;
}
...

On Mon, Mar 29, 2010 at 9:24 AM, Arnaud Garcia <[hidden email]> wrote:

--
Bustanil Arifin
"Keep moving forward!"

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

arnaud74130

Re: change <tr> background color when ListView iterate....

In reply to this post by Martijn Dashorst

Grrr, I had the SimpleAttribute to the Label of my Item not to my item
directly ...
I didn't know that the item was attached to the tr...

thanks for help !!!!

Arnaud

2010/3/29 Martijn Dashorst <[hidden email]>

> each list item is attached to the tr tag. Therefore the OddEvenItem
> solution just works. Did you try it?
>
> Martijn
>
> On Mon, Mar 29, 2010 at 9:24 AM, Arnaud Garcia <[hidden email]>
> wrote:
> > Hi,
> >
> > Defenitively it is more elegant to use the "OddEvenItem" object instead
> of
> > using my boolean... but it doesn't change my problem...
> > Changing the class of the items can be done easily (see my code, or you
> can
> > use OddEventItem etc..) But the problem is to change the class at the
> upper
> > level in the <tr> ?
> >
> > I am certainely not clear, so I can reformulate like this: how can you
> > create a table where lines are blue then white and so on when you iterate
> > over a ListView...
> >
> > thanks for help,
> >
> > Arnaud
> >
> >
> > 2010/3/28 Mauro Ciancio <[hidden email]>
> >
> >> Take a look at:
> >>
> >> ListItem#newItem(final int index)
> >>
> >> and:
> >>
> >> org.apache.wicket.markup.repeater.OddEvenItem.
> >>
> >> Cheers.
> >>
> >> On Sun, Mar 28, 2010 at 11:40 AM, Arnaud Garcia <[hidden email]
> >
> >> wrote:
> >> > Hello,
> >> >
> >> > Using a ListView on a <tr> html markup, I would like to alternate the
> >> > background color of each "new" tr when the list iterate...
> >> >
> >> > I just find how to do this on the label inside the td... not on the
> <tr>
> >> > level..., so just the background color of the title is changed and not
> >> the
> >> > full line !
> >> >
> >> > here is an example of my code....
> >> >
> >> > html:
> >> > --------
> >> >
> >> > <table>
> >> > <tr wicket:id="cdList">
> >> > <td><span wicket:id="title"/></td>
> >> > </tr>
> >> > </table>
> >> >
> >> >
> >> > java:
> >> > ------
> >> > ListView<CD> aList = new ListView<CD>("cdList",CDList) {
> >> >
> >> > private boolean alternateLine = true; // to switch css class
> >> > attribute at each new item...
> >> >
> >> > @Override
> >> > protected void populateItem(ListItem<CD> item) {
> >> >
> >> > Label title = new Label("title", new
> >> > PropertyModel<String>(item.getModelObject(), "title"));
> >> >
> >> > if (alternateLine) {
> >> > title.add(new SimpleAttributeModifier("class",
> "line1"));
> >> > // change the color !
> >> > } else {
> >> > title.add(new SimpleAttributeModifier("class",
> "line2"));
> >> > }
> >> > alternateLine = !alternateLine;
> >> >
> >> > item.add(title)
> >> > }
> >> > }
> >> >
> >> >
> >> > thanks,
> >> >
> >> > Arnaud
> >> >
> >>
> >>
> >>
> >> --
> >> Mauro Ciancio <maurociancio at gmail dot com>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: [hidden email]
> >> For additional commands, e-mail: [hidden email]
> >>
> >>
> >
>
>
>
> --
> Become a Wicket expert, learn from the best: http://wicketinaction.com
> Apache Wicket 1.4 increases type safety for web applications
> Get it now: http://www.apache.org/dyn/closer.cgi/wicket/1.4.4
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>