Greg Brown's Blog

Greg Brown is currently a member of the technical staff at VMware. He has been writing software using a variety of programming languages and technologies since 1995, and has nearly 10 years of experience developing Java applications on both client and server. He has recently focused on building web applications using rich client technologies including Flash/Flex, AJAX, and Windows Presentation Foundation, and service-oriented architectures including SOAP and REST. He holds a bachelor's degree in Computer Systems Engineering from the University of Massachusetts Amherst.

Creating Fixed-Column Tables in Pivot

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.

Using Decorators in Pivot

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.

Introducing Pivot

A little over a year ago, I wrote a blog entry describing how I thought applets could regain viability as an application development platform ("Re-Inventing the Applet", 3/6/2007). At the time, I made a few suggestions about what needed to improve in order for this to happen:

• "A new, streamlined "Java Player" that can be easily downloaded and installed by end users...which, when first installed, would include only a minimal set of classes required by all applications"

  I later discovered that Sun had been actively working on this. At the time, they were calling it the "Consumer JRE", but it is now known as "Java 6 Update 10" and is scheduled for release later this year.

• "A new GUI toolkit optimized for delivering the best possible user experience on modern operating systems and graphics hardware"

  I learned that Sun had also taken some steps in this direction, optimizing the Java2D API to take better advantage of current graphics hardware (on Windows, at least).

That left one item: the new GUI toolkit. As I suggested in the earlier article, Swing and AWT have grown a bit long in the tooth. The question then became - what should a new Java-based GUI toolkit look like? Sun seemed to think that a new scripting layer added on top of Swing was the answer, but that wasn't consistent with my objectives. I wanted something that would enable Java developers to easily build highly functional and visually engaging applications in Java, not another scripting language, providing capabilities similar to other modern GUI toolkits such as Flex and Silverlight.

After nearly a year of development, I believe I now have an answer to that question.

Introducing Pivot

I would like to introduce the Java development community to the Pivot platform. Pivot is an open-source framework for building high-quality, cross-platform applications that are easily deployable both via the web and to the desktop. It began as an R&D effort at VMware and is now being made available to the community as an option for developers who want to build rich client applications in Java.

Pivot applications are written using a combination of Java and XML and can be run either as an applet or as a standalone (optionally offline) desktop application. While Pivot was designed to be familar to web developers who have experience building AJAX applications using HTML, CSS, and JavaScript, it provides a much richer set of standard widgets than HTML, and allows developers to create sophisticated user experiences much more quickly and easily. Pivot will also seem familiar to Swing developers, as both Swing and Pivot are based on Java2D and employ a model-view-controller (MVC) architecture to separate component data from presentation. However, Pivot includes additional features that make building modern GUI applications much easier, including declarative UI, data binding, and web services integration.

Pivot isn't just another open source web toolkit - it is a full-featured, professional-grade development platform that is sufficiently functional to create a broad range of production-ready applications. We've done our best to include what we think are the most essential features for a 1.0 release, and we have tested as extensively as possible. However, we are looking to the Java development community to help us continue to expand upon what we have accomplished thus far. We need support from developers who are willing to start working with Pivot now, to help us identify issues, complete features, and create reference applications. We are excited about this platform, and we want other Java developers to be excited about it as well.

Pivot is currently being hosted at pivot.dev.java.net. We hope to see you there!

-The Pivot Development Team

August 2008

Search this blog:

Categories

Archives

August 2008
June 2008
March 2007

Recent Entries

Creating Fixed-Column Tables in Pivot

Using Decorators in Pivot

Introducing Pivot

This work is licensed under a Creative Commons License.