custom database paging listbox"

From Documentation
Line 2: Line 2:
 
|author=Cossaer Filip
 
|author=Cossaer Filip
 
|date=December 01, 2015
 
|date=December 01, 2015
|version=ZK 7 and above
+
|version=ZK 7 and above}}
|UnderConstructionParagraph}}   
+
{{Template:UnderConstructionParagraph}}   
  
  

Revision as of 08:41, 17 November 2015

DocumentationSmall Talks2015Decembercustom database paging listbox
custom database paging listbox

Author
Cossaer Filip
Date
December 01, 2015
Version
ZK 7 and above

Under Construction-100x100.png This paragraph is under construction.



Introduction: Database paging listbox

While ZK has a lot of good components easy to use, I missed out some important one for me, and that's an easy to use database paging listbox.
You can do automatically paging but then your whole list is actually in your model.
If you wanted to do database paging you needed to set a <paging> and bind it to your viewmodel.
The viewmodel needed then methods for activePage, totalSize, pageSize and when I work with Spring this is already contained in mine Page I get from the repository.
I did some attempts on creating this with custom implementations of ListModel and the use of the autopaging of the listbox.
I failed here because the listbox inner paging doesn't make a difference between totalSize and pageSize.
If I used pageSize, I wasn't able to page to other pages.
If I used totalSize, everything worked BUT underlying the listbox generated totalsize minus pagesize empty objects.
For small queries it isn't so bad, but I had queries what have results of over 1000000 results while page was size 20.
The query was fast enough, but still the listbox takes a long time to load because it was creating the empty objects.
It's here where I decided to go for a custom listbox, where I add mine own paging above and handle it by myself.

Requirements

Now it was time to think about the requirements of the listbox.
What should it do and how to make it easy for usage.
The first thing what popped in mine head is MVVM. We all like it and let's be honest, it's ZK strongest point.
Then I was looking at the listbox and paging component.
The following attributes where important for me that I could set in the zul :

  • pageSize
  • model
  • selectedItem
  • selectedItems
  • pagingPosition
  • checkmark
  • multiple
  • detailed

Then it's up to how do I want to code it in the zul.
The first idea was to use it like this :

<paginglistbox>
      <auxhead>
        <auxheader/>
      </auxhead>
      <listhead>
        <listheader  />
        <listheader  />
      </listhead>
      <template name="model">
        <listitem>
          <listcell>
            <label value="${each.id}" />
          </listcell>
         </listitem>
      </template>
  </paginglistbox>

But then we have the problem because paginglistbox isn't a listbox but it's mine own component who has a listbox inside.
In a zul page, the paginglistbox should look like this :

  <paging/>
  <listbox/>
  <paging/>

Luckily there are templates in ZK.