grails (11) vaadin (11) meteor (6) java (4) elasticsearch (3) apple (2) centos (1) cloudbees (1) google analytics (1) gradle (1) heroku (1) javafx (1) javascript (1) jdbc (1) jug (1) logback (1) logging (1) mac os (1) management (1) mongodb (1) mongolab (1) mysql (1) twitter (1) ubuntu (1)

Thursday, December 27, 2012

Lazy loaded table in Vaadin 7

There are few options how to make lazy loaded table. When I say lazy loaded table then I mean a table that fetches data lazily from database.

  1. Use standard Vaadin table with scroll bar.



    Client (running in browser) loads items lazily from server (and that is awesome). But there is unfortunately no "lazy container" in Vaadin core and therefore we need to use an add-on. We can use JPAContainer for $299 USD "only". Or LazyQueryContainer for free. I tried LazyQueryContainer and worked well but I noticed that design of that add-on is a bit heavy. Therefore I have decided to build a new LazyContainer.

    Vaadin scrollable table needs to call COUNT of the selected items from a database table when rendering table and also when scrolling. There are also not efficient calls of getItemIds method from container in standard Vaadin table. It is easy to explain. When we scroll in the table then client requests data from the server. Server calls the container method getItemIds(startIndex, numberOfIds) where startIndex and numberOfIds have usually this kind of values. 

    startIndex: 0, numberOfIds: 15
    startIndex: 0, numberOfIds: 55
    startIndex: 10, numberOfIds: 72
    startIndex: 33, numberOfIds: 98

    ...

    Then we make SQL or some other kind of query to database that looks like this select * from orders limit 0 offset 15; 
    It is nice that the data is lazy loaded and therefore we don't fetch N thousands of items from database but it is wasting resources on the server. I tried to play with cache rates but I couldn't tune it to this kind of result. 

    startIndex: 0, numberOfIds: 50
    startIndex: 50, numberOfIds: 50
    startIndex: 100, numberOfIds: 50
    startIndex: 150, numberOfIds: 50
  2. We need to use PagedTable add on in order to get that kind of strict fetching data from database. But there are few problems with PagedTable. First it doesn't have good architecture and it not easy to use when we need to do localization or customization of navigation items plus there are some defects. I have fixed some of the defects, converted it to Maven project and made customization of the navigation components easier. It is accesible from forked PagedTable



    When we use PagedTable together with LazyContainer then we get quite efficient lazy loaded table. How the code of that kind of table could look like? 

    Here is the example https://github.com/ondrej-kvasnovsky/lazy-loaded-paged-table
TextLab for Mac
Ultimate application to validate, clean and format JSON, XML, SQL, HTML.

2 comments:

  1. Hi there, thanks for sharing the paged table and lazy container. I'm just wondering what's the best strategy for updating/refreshing the table when adding/removing beans from the container. The table doesn't seem update automatically.

    ReplyDelete
  2. Hi, great job!
    There is however one problem.
    If the count returned from DAO.count() becomes smaller before the DAO.find() is called it can lead to thousands of DAO.find() calls. Obviously if amount of visible rows is smaller than the reurned count, the find method will be called as long as it will not return enough of results.
    Do you have any idea how I can avoid that? Except of dummy objects creation?
    Thanks!

    ReplyDelete