Greg has posted 18 posts at DZone. You can read more from them at their website. View Full User Profile

Creating Fixed-Column Tables in Pivot

08.27.2008
| 8784 views |
  • submit to reddit

I came across this Flex demo the other day that demonstrates the use of fixed columns in a Flex data grid:

I wanted to see how this might work in Pivot. Here's what I came up with:

This is the WTKX source I used to create the table. One TableView and TableViewHeader set is placed in the scroll pane's row header and corner to create the fixed column, and another set is placed in the view and column header to create the scrollable columns. The same data is used to drive both tables:

<Border styles="{padding:0, borderColor:'#cccac2'}"
xmlns:wtkx="http://pivot.dev.java.net/wtkx/2008" xmlns="pivot.wtk">
<ScrollPane horizontalScrollBarPolicy="fillToCapacity">
<view>
<TableView wtkx:id="primaryTableView" selectMode="single"
styles="{selectionColor:'#ffffff', inactiveSelectionColor:'#ffffff',
selectionBackgroundColor:'#14538B', inactiveSelectionBackgroundColor:'#14538B',
showHighlight:false}">
<columns>
<TableView.Column name="colA" headerData="Column A"/>
<TableView.Column name="colB" headerData="Column B"/>
<TableView.Column name="colC" headerData="Column C"/>
</columns>
<tableData wtkx:id="tableData">
<row name="User 1" colA="1.A" colB="1.B" colC="1.C" />
<row name="User 2" colA="2.A" colB="2.B" colC="2.C" />
<row name="User 3" colA="3.A" colB="3.B" colC="3.C" />
<row name="User 4" colA="4.A" colB="4.B" colC="4.C" />
<row name="User 5" colA="5.A" colB="5.B" colC="5.C" />
<row name="User 6" colA="6.A" colB="6.B" colC="6.C" />
<row name="User 7" colA="7.A" colB="7.B" colC="7.C" />
<row name="User 8" colA="8.A" colB="8.B" colC="8.C" />
</tableData>
</TableView>
</view>
<columnHeader>
<TableViewHeader wtkx:id="primaryTableViewHeader" tableView="$primaryTableView"/>
</columnHeader>
<rowHeader>
<TableView wtkx:id="fixedTableView" tableData="$tableData" selectMode="single"
styles="{selectionColor:'#ffffff', inactiveSelectionColor:'#ffffff',
selectionBackgroundColor:'#14538B', inactiveSelectionBackgroundColor:'#14538B',
showHighlight:false, includeTrailingVerticalGridLine:true}">
<columns>
<TableView.Column name="name" headerData="Name"/>
</columns>
</TableView>
</rowHeader>
<corner>
<TableViewHeader wtkx:id="fixedTableViewHeader" tableView="$fixedTableView"
styles="{includeTrailingVerticalGridLine:true}"/>
</corner>
</ScrollPane>
</Border>

The Pivot version does require a little more code than the Flex version, primarily to keep the selection state of the two tables in sync - the Java source for the demo is here. The gradients used to create the look and feel of the Flex version also look a little nicer. However, scrolling and column resizing in the Pivot table is much smoother. Additionally, the Pivot version addresses some issues raised by readers of the original article:

"Is there a way to not have the scrollbar under the first column so the scrollbar component does not span the whole datagrid but just the columns that can scroll? This would be better for the user."

"Is there a way to remove that black vertical grid line. Tried a number of ways, sounds impossible."

So, it wasn't especially tough to implement, and it compares pretty favorably overall to the Flex version.

From http://weblogs.java.net/blog/gkbrown

Published at DZone with permission of its author, Greg Brown.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Jose Jeria replied on Wed, 2008/08/27 - 3:27pm

Wow, the flash loaded like 20x faster than the applet.

Also note that you can reorder the columns in the Flex version using drag and drop.

 

Greg Brown replied on Wed, 2008/08/27 - 3:46pm in response to: Jose Jeria

"Wow, the flash loaded like 20x faster than the applet." 

That's true. However, startup time is only one performance metric. Performance of an application after it has finished loading may be equally, if not more, important. The Pivot version performs quite well once it is up and running, which, in reality, doesn't take *all* that long. In fact, if you are using J6u10, it loads pretty quickly.

"Also note that you can reorder the columns in the Flex version using drag and drop."

Also true. The Pivot table doesn't currently provide that feature "out of the box" and I didn't want to invest the time in implementing it for this demo. 

I'd still suggest that the user experience in the Pivot version is better than the Flash version, though. Resizing columns in the Flash version doesn't appear to work correctly, and scrolling is not smooth - it scrolls an entire column at at time. Also, as one of the commenters on the original blog pointed out, the scroll bar spans the entire column set, not just the scrollable columns.

Jose Jeria replied on Thu, 2008/08/28 - 2:40am

About the start up time, this is OK for a desktop application, but not really acceptable for a web page. I don't mean to bash Pivot, but the issues are pretty obvious. Not everybody has J6u10 by the way, and many companies and end-users have the automatic update turned off.

Oh, one more thing, the applet flickers and looks like it dissapperas completely when you scroll the page. 

Greg Brown replied on Thu, 2008/08/28 - 6:44am in response to: Jose Jeria

"This is OK for a desktop application, but not really acceptable for a web page." 

I think it depends on the nature of the app. The lines between "web pages" and "desktop applications" have become pretty blurry. If you are truly building a "web page", then I agree. However, if you are building an application that just happens to use the web as its deployment mechanism, it's a different story. The counter example is an AJAX application that loads quickly but performs poorly after it starts up. Which one is "better" just depends on the type of application you are building, your target users' requirements, etc.

It's also worth noting that the startup penalty is only an issue for the first launch. Subsequent starts are nearly instantaneous.

Re: the applet flicker - I see this as well, in Safari on Mac OSX. It seems to be at the plugin level. I don't see the same issue in J6u10 on Windows.

 

Jose Jeria replied on Thu, 2008/08/28 - 11:27am

"The counter example is an AJAX application that loads quickly but performs poorly after it starts up. "

Do you have any examples on such application? Ajax applications (such as Google Docs) that I tried are very fast, especially when using Firefox.

Firefox will soon (in version 3.1) have a JavaScript JIT  compiler that will make web applications even faster.

Greg Brown replied on Thu, 2008/08/28 - 11:39am in response to: Jose Jeria

My point was simply that you should choose the right tool for the job. Every technology has strengths and weaknesses.

 

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.