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.
]]>I've recently been reading through the excellent Filthy Rich Clients book by Chet Haase and Romain Guy. I picked it up a couple of weeks ago to see how I might apply some cool Java2D effects to a Pivot application. Since both Pivot and Swing are based on Java2D, I was hoping it wouldn't be too tough. Turns out that it was actually pretty easy.
For example, the book contains a section on creating reflections. In Swing, this requires a custom repaint manager. In Pivot, it can be done with a decorator. Decorators allow a caller to attach additional rendering behavior to a component. The decorator interface is defined as follows:
public interface Decorator {
public Graphics2D prepare(Component component, Graphics2D graphics);
public void update();
public Rectangle getBounds(Component component);
public void repaint(Component component, int x, int y, int width, int height);
}
The prepare() method is called immediately before the component's paint() method and allows the caller to modify or replace the graphics object on which the component will be painted. For example, Pivot's DropShadowDecorator class paints a semi-transparent black rectangle underneath a component to simulate a drop shadow. The FadeDecorator sets an AlphaComposite on the graphics before the component is called, making the entire component appear translucent.
The update() method is called just after painting the component. This allows a caller to paint on top of a component after the component itself is done painting. For example, the ShadeDecorator class paints a semi-transparent colored rectangle over an entire component, and the WatermarkDecorator class paints a string of text over a component, simulating a paper watermark.
The prepare() and update() methods can also be used together to achieve interesting visual effects. BlurDecorator and GrayscaleDecorator take a "snapshot" of the component by returning a BufferedImage graphics object from prepare(), then paint the buffered image to the original graphics object in update(). ReflectionDecorator also works this way, and uses a technique similar to that described in the book to paint the reflection of an undecorated window containing a JPEG image.
Multiple decorators can be attached to a component, and decorators are "chained". The decorators' prepare() methods are called in descending order, passing the graphics output of each to the prior decorator. The update() methods are called in ascending order after the component is painted. This allows a caller to create a window whose contents are rendered in black and white and also paints a drop shadow, for example.
In addition to trying out some of the examples in Filthy Rich Clients, I was also inspired to see how I might implement the translucent window effect described in Josh Marinacci's web log a few weeks back. An instance of FadeDecorator attached to a Frame window did the trick. The result of both experiements is shown in the applet below:
As in Josh's demo, mousing over the frame changes the opacity to 0.9, and mousing out changes it back to 0.5. Fortunately, it is a bit easier to implement the mouse handler logic in Pivot: simply attach a ComponentMouseListener to the frame:
fadeFrame.getComponentMouseListeners().add(new ComponentMouseListener() {
public void mouseMove(Component component, int x, int y) {
// No-op
}
public void mouseOver(Component component) {
fadeDecorator.setOpacity(0.9f);
component.repaint();
}
public void mouseOut(Component component) {
fadeDecorator.setOpacity(0.5f);
component.repaint();
}
});
The Pivot version also doesn't require any OS-specific hacks - the same code works on OSX, Linux, and Windows.
The full source for the demo can be found here.