Jive Community Forums

 

  JavadesktopFAQ JavadesktopWIKI JavadesktopBLOG JavadesktopPROJECTS JavadesktopHOME javadotnet javadesktopFORUMS javadesktopARTICLES

Java Desktop Network Components

Boosting Interactivity and Productivity at the Same Time...

by Amy Fowler

June 12, 2003

 

This white paper provides an overview for a project aimed at making developers more productive in creating rich, responsive Web-enabled desktop clients using the Java™ 2 Platform, Standard Edition (J2SE™ platform).

The Interactivity Void

"Billions of dollars are wasted every year in lost productivity as people wait for Web pages to perform duties that could have been handled better by a 1984 Macintosh-style graphical user interface application."

Dr. Jakob Nielsen

The Web is revolutionizing the way we get work done by allowing us to conduct business anytime, anywhere, given access to a connected Web browser. The problem is that the primary content delivered to browsers is HTML, a markup language that wasn't designed for implementing user interfaces. In the early days of Web applications, users were so enamored with the basic capability of accomplishing tasks from their browser that they put up with the archaic "get a new page on every click" user model. But the Web isn't new anymore and for many applications, users want the degree of interactivity they get with traditional clients. Web application developers have tried to mitigate the inherent limitations of HTML forms by using technologies like JavaScript and dynamic HTML to achieve higher degrees of user interaction, but have discovered the end result to be unwieldy and challenging to maintain as the complexity of the application grows. There has got to be a better option.

Reducing Round Trips

Filling the interactivity void boils down to significantly reducing the server round trips and associated page refreshes by offloading operations from the server that can be safely and more effectively handled by the client. A classic example is a Web interface to view a large quantity of tabular data. Thin clients dictate that the data be served up in page-viewable chunks, and so when the user needs to sort, filter, or search that data, a server round trip and (worse) a page refresh is required. If the user wants to directly manipulate the data, such as dragging or resizing columns, forget it. This is an outrageous waste of modern desktop machines, which have more than enough memory and CPU power to store and manipulate large quantities of data.

So, we want the ubiquity and convenience of applications delivered from the Web, but we also want to maximize our users' productivity by providing UIs that are rich and responsive because server round trips are minimized. Additionally, we want to ensure there is a graceful path for extending these applications over time, since after all, software evolution is inevitable. What do we need to break the HTML browser application juggernaut? Java.

Java Solves this Problem Today

The J2SE platform provides all the required technology to create rich, responsive desktop clients for Web applications and Web Services:

The only catch is that building Web-enabled Java desktop clients requires Java and Swing programming skill and experience, and this leaves out a broad range of Web developers whose expertise falls in other camps. Fortunately, this issue can be addressed by layering a new programming paradigm on top of a strong base, which is precisely the goal of the Java Desktop Network Components (JDNC) project.

High Level Components and XML Simplify the Task

Swing provides an extensive UI class library that enables programmers to create just about any UI imaginable, from IDEs to slick visualization clients. Yet many of today's client applications are primarily about accessing, viewing, manipulating, and editing data obtained in a standard format from a Web-based data source. The task of assembling the UI components, streaming the data from the network, and ensuring the data display and manipulation is visually attractive and optimized for usability requires an understanding of Swing coding fundamentals (models, renderers, threading rules, event handling, and so on). What many developers want and need are higher level components that leverage Swing and build in the smarts for many of these common toils so that well-behaved clients can be constructed more rapidly. Java Desktop Network Components provides this component suite.

Very High-Level Beans

Each JDNC component is implemented as a first-class JavaBeans™ component, exposing all universally required functionality as simple properties and Actions. The initial component set will include:

Component Description Feature Highlights
Table view/edit tabular data scrolling, sorting, search, filter, validation, print
Tree view/edit hierarchical data scrolling, expand/collapse nodes, search, print
TreeTable view/edit hierarchical data with node detail displayed in table rows scrolling, expand/collapse nodes, search, print
Editor view/edit plain and styled text scrolling, simple style editing, search, print
Form view/edit set of data elements type-appropriate edit controls, validation

This list can of course be extended by allowing third-party components to be plugged into the JDNC architecture.

Built-in Data and Networking Smarts

These components will all have built-in data and networking capabilities. They will support both local and remote data sources and will be able to deal with commonly required data formats, such as JDBC rowsets and XML, while clearly defining plug-in points to accommodate the idiosyncratic needs associated with getting data into applications. They'll handle the problem of using threads to stream in the data without blocking the UI (doing this correctly using threads is a nontrivial task) as well as the business of creating and installing the Swing models . For the majority of applications using JDNC, developers will only need to specify the properties associated with obtaining the data (source, format, and so on) and declare how the UI components should bind into that data model, because the components handle the complex details.

Leveraging XML for Configuration

The next requirement is to bring this functionality to the fingertips of markup developers. JDNC defines a simple XML schema for configuring JDNC components for desktop clients. What sets this apart from other XML-based UI technologies is that it is neither a toolkit-level markup language, such as XUL, nor a general purpose markup language for Swing, such as SwingML. This is not to say that these technologies do not have their place, but the primary design goal for JDNC is simplicity. The JDNC configuration schema sits at the application level, which enables developers to more quickly construct Java desktop clients precisely because the schema is less complex. It leverages Swing, but does not require the developer to have expertise in either GUI programming or Swing.

The schema will enable a solid range of sensible layout capabilities without providing the infinite layout options of layout managers. Does this mean that some clients cannot be constructed using JDNC? Yes, and that's exactly the point. JDNC guides the developer by narrowing the choices to a well-honed subset of what's possible. Those who need finer control and flexibility can already use Swing or one of the general purpose markup languages to build just about anything.

Browser or Standalone Deployment

JDNC supports both Java Web deployment models:

  • Applets deployed in browser-based clients using Java Plug-in software.

In this scenario, JDNC can be used to dial up the interactivity of HTML clients by embedding the components in selected areas of a Web page. For example, the JDNC Table component could be used instead of a static HTML table to enable a user to view/sort/filter a large quantity of tabular data without forcing constant server round trips and page refreshes. In this model, the developer simply needs to use the <applet> tag to embed the JDNC table component in the page, and then write a simple XML configuration file that tells the component where to get the data and how to display it. Note that this is distinctly different from the original applet paradigm, which required developers to author the UI source code themselves. This is what makes JDNC a "component" rather than a "class" library. Applets make it possible to integrate this technology into existing applications. If you're haunted by any 1996/1997 memories of applets, you should look again — seven years of steady improvement have made them ready for prime time. In fact, this technology makes it really easy to try it out with minimal investment.

JDNC components can be used to construct standalone clients that are Web-deployed using Java Web Start technology. As in the applet deployment model, the XML configuration file can be used to declare the application's data model, the UI, and how the UI binds to the data model. However, in the standalone case, layout becomes a more central requirement since there is no surrounding HTML to handle that task. As mentioned previously in the section on XML configuration, JDNC will provide sufficient capability to quickly achieve most standard application layouts (with menu bar, tool bar, split and tabbed views, status area, and so on). When building a new client, it's important to understand that a client that is both deployed-from and connected-to the Web does not have to live in the browser, and in fact for one that is used intensively by its users, it shouldn't be. JDNC is designed to make non-browser-based clients a more palatable option for developers who are largely markup developers.

A Simple Example

To illustrate this technology, we'll take a glimpse at a very simple example. Say we have an HTML browser application used to view bugs (something all us developers understand). Since often the quantity of bugs is large, we want to display these bugs in a rich table that is scrollable and supports sorting, resizing, and rearranging of its columns. We'll do this by using the JDNC Table component as an applet embedded in our bug viewing Web page. The developer simply authors the <applet> tag and writes the XML configuration file, and the JDNC Applet worries about instantiating the appropriate Java objects to build the interactive table component. The diagram below depicts this graphically:



                  Diagram of JDNC Bug Table Example

 

Now let's look at it a little more closely, from the developer's point of view.

Embedding the Applet

The developer uses the <applet> tag to incorporate the JDNC Table into the Web page, allowing the surrounding HTML to handle the layout. The "config" applet parameter is set to point to the XML configuration file for this table component:

<applet name="JDNCApplet" archive="table.jar, common.jar"
     code="com.sun.jdnc.JDNCApplet.class"
     width="800" height="300"
     align="middle">
     <param name="config" value="bugtable.xml">

     <param name="boxbgcolor" value="255,255,255">
</applet>

Authoring the XML Configuration File

The developer authors the XML configuration file "bugtable.xml" to configure the data and table display properties:

<?xml version="1.0"?>
  <jdnc-app>

    <data id="bugdata">
      <source url="bugs.txt"/>

      <format mimetype="plain text">
        <columns>
          <column id="bugid">
            <link>
          </column>

          <column id="priority">
            <integer minimum="1" maximum="5"/>
          </column>
          <column id="date">

            <date format="EEE MMM dd HH:mm:ss z yyyy"/>
          </column>
          <column id="state">
            <string>
              <values>

                <value>dispatched</value>
                <value>fixed</value>
                <value>closed</value>
              </values>

            </string>
          </column>
          <column id="synopsis"/>
        <columns>
      </format>

    </data>
    <table id="bugtable" sortable="true" draggable="true" grid="true">

      <statusbar/>
      <rows margin="20">
      </rows>
      <columns>
        <column dataref="bugdata.bugid" label="BugID" alignment="center">

          <sample>8888888</sample>
        </column>
        <column dataref="bugdata.priority" label="Pri">
          <sample>1</sample>

        </column>
        <column dataref="bugdata.synopsis" label="Synopsis" editable="true">
          <sample>This bug is bad and I want you to definitely fix it!</sample>

        </column>
        <column dataref="bugdata.date" label="Dispatched">
          <format>MMM dd, yyyy</format>
        </column>

        <column dataref="bugdata.state" label="State" editable="true" alignment="center">
          <sample>dispatched</sample>

        </column>
      </columns>
    </table>

  </jdnc-app>

Configure the Data Model

This example illustrates how the data model, "bugdata", is configured independent of the UI elements. The <data> element specifies everything JDNC needs to know to access that data (source, formatting params, type information, validation constraints, and so on). In this simple example, when the page including the applet is requested, a servlet makes a database query and generates a simple text file, "bugs.txt", containing the tabular data.

Configure the UI and Bindings to the Data

The Table UI component, "bugtable", is next specified using the <table> tag and includes display-specific information and bindings describing how the data should be mapped into the table. The JDNC table component will automatically tune its cell display and editing based on the information provided in the <data> tag. For example, since the "priority" column defines minimum and maximum values, the table will provide a combobox for editing cells in that column, rather than a numeric textfield. Note also that the columns are not displayed in the same order as they were defined in the "bugdata" element and that the "date" is displayed with a format different from the format that was provided in the text data file. This separation makes it vary easy to customize the display of the data independent of its source, as well as providing flexibility in how the UI components are bound to the application's data model. Multiple UI components may well reference into the same data model to provide alternate views or editing mechanisms.

Understanding the power of XML, it's easy to imagine how much can be customized using this configuration. Ultimately the schema will allow for specifying conditional display (for example, if priority = "1", display the background in red), as well as the necessary hooks for adding event handling and behavior to the UI. We'll leverage standards in the schema whenever possible, provided they don't compromise this technology's ultimate goal of simplicity and ease of development. This example shows a work in progress; the JDNC schema design has and will continue to evolve significantly, which brings us to the next topic.

Community Involvement

When it comes to understanding the challenges inherent in building real world applications, no one is more knowledgeable than the application developer himself. In order for a technology like Java Desktop Network Components to succeed, it will need to be nurtured and shaped by a community that includes those who use it to produce world-class Java desktop clients. The timely arrival of the new community Web site, javadesktop.org, provides just the place to host the evolution of this project under an Open Source development model.

Currently a team at Sun that includes Swing engineers and some outside application developers is busy building an early access version of the JDNC technology. Once we reach this early access milestone (targeted for Fall 03) we'll roll it out as an Open Source project hosted on javadesktop.org. From there we'll look to the Java desktop development community for contributions aimed at improving the design and implementation. The details are still being worked out, so please visit the javadesktop.org Web site in the future for updates on the status of this project.

Conclusion

The excitement of the Internet has swung the pendulum significantly too far in the direction of delivering HTML-based user interfaces in the browser. Users are frustrated over the underwhelming user experience and productivity lost as a result of using thin clients everywhere for everything. It's time to swing the pendulum back to some rational midpoint where choosing between HTML browser clients and more traditional UI clients is based on the user's needs, rather than a desire to have an easy Web deployment model. The emerging world of Web Services means we'll have standards for accessing data from the Web without embedding it in the presentation, as HTML clients do. J2SE technology offers the best of both worlds: rich, robust APIs for creating interactive clients, and Web deployment models that support both browser-based and standalone application clients. The Java Desktop Network Component technology just makes J2SE technology easier for a broad base of developers to embrace. Java is on just about everyone's desktop, so let's use it.

References


Read or Post a Comment