You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Pierre Goupil <go...@gmail.com> on 2013/06/10 21:49:21 UTC
PageableListView with two rows
Good evening,
Is there a way to have a PageableListView with two rows?
Here is my code:
final PageableListView<Profile> columnListView = new
PageableListView<Profile>(
"columnListView", secondLine, SearchPage.RESULTS / 2)
{
private static final long serialVersionUID = 1L;
@Override
protected void populateItem(final ListItem<Profile> item)
{
final IModel<Profile> p = item.getModel();
item.add(new ProfilePanel("profile", p));
}
};
this.add(columnListView);
this.add(new AjaxPagingNavigator("navigator", columnListView));
It works perfectly well for one line of results, but I'd like to have two
lines of 4 columns instead of one line of 8 columns.
I don't think a DataTable would fit my needs since the ProfilePanel object
is a complex display.
Any help will be much appreciated.
Regards,
Pierre
--
"Un truc bien avec la musique, c'est que quand elle te frappe, tu n'as pas
mal.
Alors frappez-moi de musique !
Frappez-moi de musique, maintenant !"
(Bob Marley : "Trenchtown Rock")
Re: PageableListView with two rows
Posted by Pierre Goupil <go...@gmail.com>.
Thanks to both of you! I've managed to do what I liked. It's a little bit
unusual for me, but it's clean and it works.
Cheers men,
Pierre
On Tue, Jun 11, 2013 at 5:06 PM, Eric Jablow <er...@gmail.com> wrote:
> ListView and its subclasses do not require the use of tables. If another
> style of markup is useful, use that. You can have a <div> with nested
> <div>s, In fact, you could create a ProfilePanel and use a div for each.
>
>
> On Mon, Jun 10, 2013 at 6:06 PM, Dan Retzlaff <dr...@gmail.com> wrote:
>
> > Maybe I just don't understand your requirements. I thought you want two
> > rows for each Profile. So:
> >
> > add(new PageableListView("profile", profiles) {
> > populateItem(item) {
> > item.add(new Label("row1column1"));
> > item.add(new Label("row2column1"));
> > item.setRenderBodyOnly(true);
> > }
> > });
> >
> > <table>
> > <div wicket:id="profile">
> > <tr><td wicket:id="row1column1"></td></tr>
> > <tr><td wicket:id="row2column1"></td></tr>
> > </div>
> > </table>
> >
> > Obviously you can add as many columns as you'd like.
> >
> >
>
--
"Un truc bien avec la musique, c'est que quand elle te frappe, tu n'as pas
mal.
Alors frappez-moi de musique !
Frappez-moi de musique, maintenant !"
(Bob Marley : "Trenchtown Rock")
Re: PageableListView with two rows
Posted by Eric Jablow <er...@gmail.com>.
ListView and its subclasses do not require the use of tables. If another
style of markup is useful, use that. You can have a <div> with nested
<div>s, In fact, you could create a ProfilePanel and use a div for each.
On Mon, Jun 10, 2013 at 6:06 PM, Dan Retzlaff <dr...@gmail.com> wrote:
> Maybe I just don't understand your requirements. I thought you want two
> rows for each Profile. So:
>
> add(new PageableListView("profile", profiles) {
> populateItem(item) {
> item.add(new Label("row1column1"));
> item.add(new Label("row2column1"));
> item.setRenderBodyOnly(true);
> }
> });
>
> <table>
> <div wicket:id="profile">
> <tr><td wicket:id="row1column1"></td></tr>
> <tr><td wicket:id="row2column1"></td></tr>
> </div>
> </table>
>
> Obviously you can add as many columns as you'd like.
>
>
Re: PageableListView with two rows
Posted by Dan Retzlaff <dr...@gmail.com>.
Maybe I just don't understand your requirements. I thought you want two
rows for each Profile. So:
add(new PageableListView("profile", profiles) {
populateItem(item) {
item.add(new Label("row1column1"));
item.add(new Label("row2column1"));
item.setRenderBodyOnly(true);
}
});
<table>
<div wicket:id="profile">
<tr><td wicket:id="row1column1"></td></tr>
<tr><td wicket:id="row2column1"></td></tr>
</div>
</table>
Obviously you can add as many columns as you'd like.
On Mon, Jun 10, 2013 at 1:58 PM, Pierre Goupil <go...@gmail.com>wrote:
> I'm sorry, but I don't understand what you mean. I've tried this:
>
> <table class="large-space-centered-table" align="center">
> <div wicket:id="columnListView">
> <tr wicket:id="separator">
> <td class="normal-text border-cell">
> <span wicket:id="profile"></span>
> </td>
> </tr>
> </div>
> </table>
>
>
>
>
> final PageableListView<Profile> columnListView = new
> PageableListView<Profile>(
> "columnListView", allMatches, SearchPage.COLUMNS)
> {
> private static final long serialVersionUID = 1L;
>
> @Override
> protected void populateItem(final ListItem<Profile> item)
> {
> final IModel<Profile> p = item.getModel();
>
> final WebMarkupContainer separator = new
> WebMarkupContainer("separator");
> if (item.getIndex() == (SearchPage.COLUMNS / 2))
> {
> separator.setRenderBodyOnly(false);
> }
> else
> {
> separator.setRenderBodyOnly(true);
> }
>
> separator.add(new ProfilePanel("profile", p));
> item.add(separator);
> }
> };
>
> columnListView.setRenderBodyOnly(true);
> this.add(columnListView);
> this.add(new AjaxPagingNavigator("navigator", columnListView));
>
>
>
>
> I think I did what you've suggested but instead of two rows of 5 columns, I
> got one line of 5 columns, one of one column and a last line of 4 columns.
> I've missed something, I'm afraid.
>
> Thank you anyway!
>
> Regards,
>
> Pierre
>
>
>
>
> On Mon, Jun 10, 2013 at 10:17 PM, Dan Retzlaff <dr...@gmail.com>
> wrote:
>
> > Hi Pierre,
> >
> > Associate your PageableListView with a <div> that wraps your two <tr>s.
> > Use item.setRenderBodyOnly(true) to prevent the <div> from being rendered
> > so your table markup is still valid.
> >
> > Dan
> >
> >
> > On Mon, Jun 10, 2013 at 12:49 PM, Pierre Goupil <goupilpierre@gmail.com
> > >wrote:
> >
> > > Good evening,
> > >
> > > Is there a way to have a PageableListView with two rows?
> > >
> > > Here is my code:
> > >
> > > final PageableListView<Profile> columnListView = new
> > > PageableListView<Profile>(
> > > "columnListView", secondLine, SearchPage.RESULTS / 2)
> > > {
> > > private static final long serialVersionUID = 1L;
> > >
> > > @Override
> > > protected void populateItem(final ListItem<Profile> item)
> > > {
> > > final IModel<Profile> p = item.getModel();
> > >
> > > item.add(new ProfilePanel("profile", p));
> > > }
> > > };
> > >
> > > this.add(columnListView);
> > > this.add(new AjaxPagingNavigator("navigator", columnListView));
> > >
> > > It works perfectly well for one line of results, but I'd like to have
> two
> > > lines of 4 columns instead of one line of 8 columns.
> > >
> > > I don't think a DataTable would fit my needs since the ProfilePanel
> > object
> > > is a complex display.
> > >
> > > Any help will be much appreciated.
> > >
> > > Regards,
> > >
> > > Pierre
> > >
> > >
> > > --
> > > "Un truc bien avec la musique, c'est que quand elle te frappe, tu n'as
> > pas
> > > mal.
> > > Alors frappez-moi de musique !
> > > Frappez-moi de musique, maintenant !"
> > >
> > > (Bob Marley : "Trenchtown Rock")
> > >
> >
>
>
>
> --
> "Un truc bien avec la musique, c'est que quand elle te frappe, tu n'as pas
> mal.
> Alors frappez-moi de musique !
> Frappez-moi de musique, maintenant !"
>
> (Bob Marley : "Trenchtown Rock")
>
Re: PageableListView with two rows
Posted by Pierre Goupil <go...@gmail.com>.
I'm sorry, but I don't understand what you mean. I've tried this:
<table class="large-space-centered-table" align="center">
<div wicket:id="columnListView">
<tr wicket:id="separator">
<td class="normal-text border-cell">
<span wicket:id="profile"></span>
</td>
</tr>
</div>
</table>
final PageableListView<Profile> columnListView = new
PageableListView<Profile>(
"columnListView", allMatches, SearchPage.COLUMNS)
{
private static final long serialVersionUID = 1L;
@Override
protected void populateItem(final ListItem<Profile> item)
{
final IModel<Profile> p = item.getModel();
final WebMarkupContainer separator = new
WebMarkupContainer("separator");
if (item.getIndex() == (SearchPage.COLUMNS / 2))
{
separator.setRenderBodyOnly(false);
}
else
{
separator.setRenderBodyOnly(true);
}
separator.add(new ProfilePanel("profile", p));
item.add(separator);
}
};
columnListView.setRenderBodyOnly(true);
this.add(columnListView);
this.add(new AjaxPagingNavigator("navigator", columnListView));
I think I did what you've suggested but instead of two rows of 5 columns, I
got one line of 5 columns, one of one column and a last line of 4 columns.
I've missed something, I'm afraid.
Thank you anyway!
Regards,
Pierre
On Mon, Jun 10, 2013 at 10:17 PM, Dan Retzlaff <dr...@gmail.com> wrote:
> Hi Pierre,
>
> Associate your PageableListView with a <div> that wraps your two <tr>s.
> Use item.setRenderBodyOnly(true) to prevent the <div> from being rendered
> so your table markup is still valid.
>
> Dan
>
>
> On Mon, Jun 10, 2013 at 12:49 PM, Pierre Goupil <goupilpierre@gmail.com
> >wrote:
>
> > Good evening,
> >
> > Is there a way to have a PageableListView with two rows?
> >
> > Here is my code:
> >
> > final PageableListView<Profile> columnListView = new
> > PageableListView<Profile>(
> > "columnListView", secondLine, SearchPage.RESULTS / 2)
> > {
> > private static final long serialVersionUID = 1L;
> >
> > @Override
> > protected void populateItem(final ListItem<Profile> item)
> > {
> > final IModel<Profile> p = item.getModel();
> >
> > item.add(new ProfilePanel("profile", p));
> > }
> > };
> >
> > this.add(columnListView);
> > this.add(new AjaxPagingNavigator("navigator", columnListView));
> >
> > It works perfectly well for one line of results, but I'd like to have two
> > lines of 4 columns instead of one line of 8 columns.
> >
> > I don't think a DataTable would fit my needs since the ProfilePanel
> object
> > is a complex display.
> >
> > Any help will be much appreciated.
> >
> > Regards,
> >
> > Pierre
> >
> >
> > --
> > "Un truc bien avec la musique, c'est que quand elle te frappe, tu n'as
> pas
> > mal.
> > Alors frappez-moi de musique !
> > Frappez-moi de musique, maintenant !"
> >
> > (Bob Marley : "Trenchtown Rock")
> >
>
--
"Un truc bien avec la musique, c'est que quand elle te frappe, tu n'as pas
mal.
Alors frappez-moi de musique !
Frappez-moi de musique, maintenant !"
(Bob Marley : "Trenchtown Rock")
Re: PageableListView with two rows
Posted by Dan Retzlaff <dr...@gmail.com>.
Hi Pierre,
Associate your PageableListView with a <div> that wraps your two <tr>s.
Use item.setRenderBodyOnly(true) to prevent the <div> from being rendered
so your table markup is still valid.
Dan
On Mon, Jun 10, 2013 at 12:49 PM, Pierre Goupil <go...@gmail.com>wrote:
> Good evening,
>
> Is there a way to have a PageableListView with two rows?
>
> Here is my code:
>
> final PageableListView<Profile> columnListView = new
> PageableListView<Profile>(
> "columnListView", secondLine, SearchPage.RESULTS / 2)
> {
> private static final long serialVersionUID = 1L;
>
> @Override
> protected void populateItem(final ListItem<Profile> item)
> {
> final IModel<Profile> p = item.getModel();
>
> item.add(new ProfilePanel("profile", p));
> }
> };
>
> this.add(columnListView);
> this.add(new AjaxPagingNavigator("navigator", columnListView));
>
> It works perfectly well for one line of results, but I'd like to have two
> lines of 4 columns instead of one line of 8 columns.
>
> I don't think a DataTable would fit my needs since the ProfilePanel object
> is a complex display.
>
> Any help will be much appreciated.
>
> Regards,
>
> Pierre
>
>
> --
> "Un truc bien avec la musique, c'est que quand elle te frappe, tu n'as pas
> mal.
> Alors frappez-moi de musique !
> Frappez-moi de musique, maintenant !"
>
> (Bob Marley : "Trenchtown Rock")
>