Forums for ICEfaces and ICEpdf

Hello, everyone. I have created a new Table component for use with ICEFaces called Snappy Table. It is designed to increase the responsiveness of table paging and selection, and to reduce the amount of JSF code needed to implement a simple table. Some of the features are:

1. Less code to implement.
2. Client Side rendering of selection and paging. No server rendering is needed when paging though a table or selecting a row. This makes for a much more responsive user interface.
3. Client side sorting.
4. Easy to customize.
5. Client side form population. Clicking on a row can populate input fields based on the row selection.

I'm still in the process of developing this component and I wanted to get some feedback from the ICEFaces community.

Check out the demo and download the component for testing. And please send in your feedback!

http://snappy.sensemaker.net

Hi,

Nice work! But as I can see you load the whole data the first time in your page and afterwards show only the necessary data. So you do not perform a round trip when you click on the next button like the icefaces table.

But I would appreciate a table component which loads the data dynamically from the server.
Your component is great but, as I understood your code see bottom, when I have a table which shows 100'000 lines, you download the whole data the first time (which takes a lot of time) and afterwards the navigation is very fast.

Better would be to transfer from a list of 100'000 entries only the entries which are shown. So every click on the next button will perform a round trip to the server but will only transfer the entries which are shown.

Georges Goebel

Code:

 <div id="basicForm:basicDATAROW2">{"selected":false,"listIndex":2,"defaultClass":"evenRow","rendered":1215511656238,"row":[{"sort":"1002","align":"left","value":"1002","valign":"center"},{"sort":"Zed<s> Hotrods","align":"left","value":"Zed<s> Hotrods","valign":"center"},{"sort":"834 Dearfoot Trail","align":"left","value":"834 Dearfoot Trail","valign":"center"},{"sort":"true","align":"right","value":"Y","valign":"center"},{"sort":"12.94","align":"left","value":"12.94","valign":"center"},{"sort":"1172920056234","align":"left","value":"Mar 3, 2007 6:07:36 AM","valign":"center"}]}</div>
 <div id="basicForm:basicDATAROW3">{"selected":false,"listIndex":3,"defaultClass":"oddRow","rendered":1215511656238,"row":[{"sort":"1003","align":"left","value":"1003","valign":"center"},{"sort":"Fancy Shoes","align":"left","value":"Fancy Shoes","valign":"center"},{"sort":"5019 12th ST NW","align":"left","value":"5019 12th ST NW","valign":"center"},{"sort":"true","align":"right","value":"Y","valign":"center"},{"sort":"144.89","align":"left","value":"144.89","valign":"center"},{"sort":"1173006456234","align":"left","value":"Mar 4, 2007 6:07:36 AM","valign":"center"}]}</div>
 <div id="basicForm:basicDATAROW4">{"selected":false,"listIndex":4,"defaultClass":"evenRow","rendered":1215511656238,"row":[{"sort":"1004","align":"left","value":"1004","valign":"center"},{"sort":"ACME Inc","align":"left","value":"ACME Inc","valign":"center"},{"sort":"127 First ST","align":"left","value":"127 First ST","valign":"center"},{"sort":"true","align":"right","value":"Y","valign":"center"},{"sort":"133.49","align":"left","value":"133.49","valign":"center"},{"sort":"1173092856235","align":"left","value":"Mar 5, 2007 6:07:36 AM","valign":"center"}]}</div>

Thanks for the quick feedback George. The current table would run into a problem with 100,000 rows. It should be possible to load in chucks of data (Say blocks of 100) instead of the whole thing. I would like to avoid a server round trip on each page change.

I've updated Snappy table to support chucked data. Basically it will load the first 10 pages and last 10 pages, then as you page though it will go back to the server to get more as needed.

Check it out at http://snappy.sensemaker.net.

Nice,

I will check it out

Georges

Hi,

looks great!

just two quick question:

rmayhew wrote:

I've updated Snappy table to support chunked data.

Can chunked and sortable be combined?

What is the attribute selectedClass exactly for?

Thanks,
TheWolf

Currently you can not have chucked data and and sorting enabled at the same time. (Well you can, but it won't work) Client side sorting is out due to the fact it does not have all the data. I will look into supporting other options for sorting (Perhaps a call back to a backing bean function)

hey great component.. very easy to use and good responsive!! :D

Q: Can i use the standard <f:xxxConverter> nested <snappy:columns>??

Q: Can i render ice components (links,buttons,checkbox) nested <snappy:columns>??

The answer for both questions is no at this point. It should be possible to add the support for <f:xxxConverter> and I will look into that. However using ICECompoents will not work. In order to provide the advanced paging, sorting, and selection the table has to control cell rendering directly.

However I will also add support for rendering columns as links,buttons,checkbox's, ext.

Keep an eye on http://snappy.sensemaker.net/wiki/Edit.jsp?page=Development%20Roadmap for whats planned.

I've added support fort <F:XXXconverters/> download a new copy to check it out.

I've made some modifications to the data table. Now instead of taking a list value and columns having a property value I am now following the standard JSF convention of value and var.

For example.

Old:

<snappy:table list="#{bean.list}>
<snappy:column property="number">

New:

<snappy:table value="#{bean.list}" var="row">
<snappy:column value="#{row.number}"/>

Great but I can't execute it on the liferay portal.

I have not tried using liferay yet. Could you give me more information on the failure?

Also I have released the table and Calendar as open source.

Hey Rob,

First of all, congrats for a great idea and the progress you've made so far. I've just tried integrating snappy:calendar into our app, to save the server some trouble.

There are two issues I have come across though:

1. The popup component would not appear until I specifically included the snappy.js under snappy.jar\net\sensemaker\snappy\resources\
(I moved it to a convenient place and used <script src="./js/snappy.js"/>)

Unless I did this, the browser said it cannot locate sp_calendar as the onclick event of the "..." button executed.

2. If I run the test app in your project, I notice I cannot leave the value blank, which would be desired in my application.

Thanks for any thoughts and Good Luck!
Radu