JDNC XML Markup Tutorial

JDesktop^TM Network Components (JDNC) simplify the task of creating rich, sophisticated Java desktop clients that leverage the power of Swing and the Java platform. JDNC clients can be created using Java or by using an XML markup language that requires no Java or Swing programming.

The data for this demo comes from a file generated by a WebService that accesses global weather data from weather stations all over the world at the moment of the query. Information about each weather station, including country of origin, geographical coordinates and elevation, is included as well as temperature (in Celsius), visibility, humidity, and wind strength and direction at the moment of sampling. Click on the following image to launch this simple JDNC demo using Java Web Start:

  <?xml version='1.0'?>
    <om:resource xmlns:om="http://www.openmarkup.net/2004/05/om"
                 xmlns="http://www.jdesktop.org/2004/05/jdnc">
      <table>
        <tabularData source="data/weather.txt"/>
      </table>
    </om:resource>

The examples that follow illustrate the power and ease-of-use of JDNC. The first demo is a basic table; subsequent examples build in complexity and highlight other component types, such as tree table, form, and editor. As you are learning JDNC, it's a good idea to start with an existing jdnc file and modify it to suit your needs — you can practice this using the exercises that follow most of the examples. The exercises are small, independent tasks that don't have to be done all at once.

The examples included in this tutorial are:

• simpleTable
  The 5-line table demo you've already seen performs no special processing or filtering.
• betterTable
  Unwanted columns are suppressed. The corresponding flag is displayed alongside each country's name, and the background of the rows are painted in alternate colors to improve readability. Several exercises are provided to further alter the presentation of the data.
• tabTable
  A tabbed pane efficiently displays three separate tables. Data filtering suppresses unwanted rows. A search field allows the user to filter the data interactively.
• treeTable
  How to use and customize the look of a tree table that displays hierarchical data.
• editorDemo
  How to use an editor component. Also, how to define and configure actions that can be shared in the menu, tool bar and popup menu.
• formDemo
  How to use the form component to enter data into a table.

The sections in this tutorial are:

• What You Need to Get Started
• Demo: simpleTable
• Demo: betterTable
• Hands On: Modify betterTable Example
  • Exercise 1: Column Alignment and Colors
  • Exercise 2: Pattern Matching
  • Exercise 3: Sorting
• Demo: tabTable
• Hands On: Modify tabTable Example
  • Exercise 4: Data Filtering
  • Exercise 5: Searching
• Demo: treeTable
• [PENDING]Hands On: Modify treeTable Example
• Demo: editorDemo
• Hands On: Modify editorDemo Example
  • Exercise 8: Configuring Actions
• [IN PROCESS]Demo: formDemo
• [PENDING]Hands On: Modify formDemo Example
• Where to Find More Information

What You Need to Get Started

Demo: simpleTable

---

Try this: 

1. Run simpleTable using Java Web Start. You can also run it from the command line (using run demo\simpleTable.jdnc [on Microsoft Windows] or run.sh demo/simpleTable.jdnc [on Unix]).
2. The contents of the weather file, generated from a weather service, appear in the table.
3. Resize the window to make it wider.
4. The columns have generic columnN style names, and can be dragged and resized. Move the columns around.
5. The data is currently unsorted. Click on column0 — an upwards-arrow appears and the entries are sorted in ascending order.
6. Click on column0 again. A downwards-arrow appears and the entries are sorted in descending order.
7. Click on column4 — this floating point column indicates the elevation of the weather station. Note that the numbers are sorted alphabetically rather than numerically, so that the rows with values of 101.0 appear between the rows with values of 1109.0 and 1011.0.
8. Double-click on a table entry. By default, the table entries are editable but any changes you make are temporary.

---

As mentioned before, this demo requires only these lines of XML:

<?xml version='1.0'?>
  <om:resource xmlns:om="http://www.openmarkup.net/2004/05/om"
                  xmlns="http://www.jdesktop.org/2004/05/jdnc">
    <table>
      <tabularData source="weather.txt"/>
    </table>
  </om:resource>

The <xml> tag is a standard XML declaration.

The <om:resource> element is called the root element. The prefix in the <resource> tag, in this case om, defines the namespace of the root element. This start tag is matched by an </om:resource> end tag.

The <table> tag indicates that the data will be displayed in an instance of a high-level JDNC component, a JNTable, and is also matched by the </table> end tag.

The <tabularData> tag describes where the data comes from. In this case, it specifies the location of a text file, though it could also be a URL. The URL might point to a file or a servlet that talks to a database or an Enterprise JavaBeans^TM component. No other information is provided about the format of the data, so JDNC doesn't know, for example, that several columns contain floating point numbers or that column7 contains time stamps or that column10 contains integers. The data is displayed without any sort of processing or filtering.

Demo: betterTable

• Suppressing unwanted columns, such as region, dewpoint, and humidity.
• Displaying the corresponding flag for each country and converting the country name where appropriate — mapping "Iran, Islamic Republic of" to "Iran", for example.
• Displaying an image representing the wind direction; in the incoming data, window direction is represented by a string, such as "NW".
• Displaying the rows with alternate background colors.
• Enabling user customization for column display.
• Readable column names, including embedded HTML.

---

Version note:  The changes made while running the demo are temporary — they are not written back to the data source. Writing data back to the data source will be available in the next release.

---

---

Try this: 

1. Run betterTable using Java Web Start. You can also run it from the command line (using run demo\betterTable.jdnc [on Microsoft Windows] or run.sh demo/betterTable.jdnc [on Unix]).
2. Double-click a Temperature value and enter random text, such as foo. The box is outlined in red and the focus remains on the text field. JDNC automatically validates the temperature and rejects non-numeric values.
3. Re-enter the Temperature in a numeric format. Since the column is defined as floating point, any integer or decimal value is accepted.
4. Double-click a Country value. Nothing happens since this column is defined to be read-only. If this column weren't defined to be read-only, a combo box would appear with all the possible enumerated values to select from.
5. A button with a column image, , is displayed at the end of the row of column names, also called the column header. This feature becomes available when the table is defined with the attribute columnCloakEnabled="true".
6. Click on the button. A combo box containing a list of the columns appears. A check next to a column name indicates that the column is currently displayed. Select a value, such as Code. The column is removed from the table.
7. Select the Code value again. The column reappears, in the last column position.
8. Select a compass icon. Because this column is writable, a combo box appears allowing you to select another wind direction. Select a new compass direction.

---

<tabularData source="data/weather.txt">
    <metaData>
	<columnMetaData name="ICAO"/>
	<columnMetaData name="STATION"/>
	<columnMetaData name="REGION"/>
	<columnMetaData name="COUNTRY"/>
	<columnMetaData name="ELEVATION" dataType="float"/>
	<columnMetaData name="LATITUDE" dataType="float"/>
	<columnMetaData name="LONGITUDE" dataType="float"/>
	<columnMetaData name="TIMESTAMP"/>
	<columnMetaData name="TEMPERATURE" dataType="float"/>
	<columnMetaData name="DEWPOINT" dataType="float"/>
	<columnMetaData name="HUMIDITY" dataType="integer"/>
	<columnMetaData name="VISIBILITY_QUAL"/>
	<columnMetaData name="VISIBILITY" dataType="float"/>
	<columnMetaData name="WIND_DIR"/>
	<columnMetaData name="WIND_DEG" dataType="integer"/>
	<columnMetaData name="WIND_SPEED" dataType="float"/>
	<columnMetaData name="GUST_SPEED" dataType="float"/>
    </metaData>
</tabularData>

All the columns of data must be defined in the <metaData> block and in the correct order of arrival. Later when the data is displayed in the view, the ordering can be changed and any columns can be ignored if they aren't relevant to the application. The "name" attribute provides a handle to a particular column. Supported data types are:

• string (the default)
• float
• integer
• date
• href

An <enumeration> can be defined for the values in a table's column and, for an editable column, the values are displayed in each cell inside a combo box. An enumeration maps one set of strings to another set of strings and/or images. For example, on a column containing values from "1" to "5", the values "1", "2", "3", "4", and "5" can be remapped in the view to "Mild", "Medium", "Spicy", "Very Spicy", and "Four Alarm", respectively. Or, these values can be remapped to images — the "1" represented by a blank image, the "2" by an image of one chili, the "3" by two chilis and so on. In the betterTable example, the Country column is mapped to both text (a sometimes-shortened version of the country name) and images (the country's flag), and the Wind Direction column is mapped to images of a compass pointing in the appropriate direction.

When defining an enumeration, typically inside a <defs> block, the "value" attribute must be literal (no metacharacters) and are tested against the incoming values. This is a snippet of the flag enumeration used in the betterTable example:

  <om:defs>
      <enumValues xml:id="flags">
        <enumeration value="Afghanistan" title="Afghanistan"
			icon="images/flags/afghanistan.gif"
			horizontalAlignment="trailing"
			horizontalTextPosition="leading"/>
	<enumeration value="Albania" title="Albania"
	                icon="images/flags/albania.gif"
			horizontalAlignment="trailing"
			horizontalTextPosition="leading"/>
        <enumeration value="Algeria" title="Algeria"
	                icon="images/flags/algeria.gif"
			horizontalAlignment="trailing"
			horizontalTextPosition="leading"/>
        <enumeration value="Angola" title="Angola"
	                icon="images/flags/angola.gif"
			horizontalAlignment="trailing"
			horizontalTextPosition="leading"/>
        ...
	<enumeration value="Yugoslavia" title="Yugoslavia"
	                icon="images/flags/yugoslavia.gif"
			horizontalAlignment="trailing"
			horizontalTextPosition="leading"/>
	<enumeration value="Zaire" title="Zaire"
	                icon="images/flags/zaire.gif"
			horizontalAlignment="trailing"
			horizontalTextPosition="leading"/>
	<enumeration value="Zambia" title="Zambia"
	                icon="images/flags/zambia.gif"
			horizontalAlignment="trailing"
			horizontalTextPosition="leading"/>
        <enumeration value="Zimbabwe" title="Zimbabwe"
	                icon="images/flags/Zimbabwe.gif"
			horizontalAlignment="trailing"
			horizontalTextPosition="leading"/>
      </enumValues>
  </om:defs>

---

Note:  The "id" is used only in the jdnc file, it isn't assigned to anything in the instantiated object. The "name" attribute, however, is assigned as a property value on the instantiated object. This distinction becomes more important when combining the programmatic I/F with a JDNC markup file.

---

The "title" and "icon" attributes are optional, but if you want text to be displayed in the column, the "title" attribute is required. When both an icon and text are present, the "horizontalAlignment" and "horizontalTextAlignment" attributes determine whether the icon appears before (leading), or after (trailing) the text. In the previous code snippet, the text is positioned before the icon.

Once the incoming data has been specified, all that remains is to define how the data will be displayed. This is accomplished using the <columns> block:

    <columns>
	<column title="Station" binding="STATION"/>
	<column title="Country" binding="COUNTRY" isReadOnly="true"
	        enumValues="#flags"
		prototypeValue="this is a really really long field"/>
	<column title="Code" binding="ICAO" horizontalAlignment="center"/>
	<column title="Time" binding="TIMESTAMP"
	        prototypeValue="this is a really really long field"/>
	<column title="&#176;C" binding="TEMPERATURE"
	        horizontalAlignment="center"/>
	<column title="Wind Direction" binding="WIND_DIR"
	        enumValues="#compass"/>
	<column title="Direction" binding="WIND_DEG"
	        horizontalAlignment="center"/>
	<column title="Wind Speed" binding="WIND_SPEED"
	        horizontalAlignment="center"/>
	<column title="Gust Speed" binding="GUST_SPEED"
	        horizontalAlignment="center"/>
    </columns>

Note that HTML can be used in the string literals. For example, the title for the temperature column is defined as °C, which produces °C. It's necessary to use the ISO numeric code rather than the character name — ° causes build errors.

The <highlighters> block specifies custom highlighting for table cells:

    <highlighters>
        <alternateRowHighlighter oddRowBackground="#EEEEFF" evenRowBackground="#CCCCFF"/>
    </highlighters>

---

Note:  Colors may be specified either in hexidecimal, such as "#EEEEFF", or by SVG name, such as "white" or "lightgray". You can find a complete list of supported color names on the SVG website.

---

The status bar displays the number of rows and columns in the table in a view underneath the table. To enable the status bar, use the <statusBar> tag inside the <rootPane> block:

  <rootPane>
    ...
    <statusBar/>
  </rootPane>

[BUG: Currently there is a bug when you specify a <statusBar> in the jdnc file. The bar is displayed, but it has no statistics. This will be fixed soon.]

Hands On: Modify betterTable Example

            run demo\betterTableEx1.jdnc     [Microsoft Windows]
	    run.sh demo/betterTableEx1.jdnc  [Unix]

These exercises use tags that you haven't seen before, so you will want to reference the JDNC Schema.

---

Exercise 1: Column Alignment and Colors 

For these exercises you might find the SVG color name table useful.

1A: The values in each displayed column can be constrained to the center, leading, or trailing positions. In a column that contains both an image and text, such as Country, you can control whether the image is before or after the text. In the Country column, position the text after the icon for Canada only. [5 minutes] Solution

1B: The table header, where the column names are displayed, is typically displayed with a gray background. Change the color of the header background to any shade of blue. [5 minutes] Solution

1C: The background colors of the table rows alternate between light blue and medium blue. Change the background colors to yellow and orange. [5 minutes] Solution

---

Exercise 2: Pattern Matching 

The <patternHighlighter> tag allows you to specify custom highlighting based on regular expressions. JDNC supports the regular expression syntax defined in the 1.4 release of the Java 2 Platform, Standard Edition. See the Regular Expressions lesson in The Java Tutorial for more information.

You might also want to look up <patternHighlighter> in the JDNC Schema.

2A: Use the <patternHighlighter> tag inside of the <highlighters> block to assign red text to any country with a name beginning with B or M. Note that the regular expression is matched to the incoming data string, not the enumerated string. [10 minutes] Solution.

2B: Change the text color all Canadian weather samples to royal blue. [5 minutes] Solution.

---

Version note:  At this time pattern matching can be performed on strings only, so it isn't possible to assign colors to temperatures, for example, unless you are willing to treat the temperature column as a string — the drawback to this approach is that sorting would then occur alphabetically, rather than numerically. Future releases will support pattern matching on other data types.

---

---

Exercise 3: Sorting 

By default, JDNC's table component supports interactive column sorting so that users can dynamically click on columns to control the sorted view. Sometimes a client may want to define an initial sort order to be displayed when the table first appears. This can be done using the <sorter> tag.

You can look up the <sorter> element in the JDNC Schema.

3A: Use a <sorter> tag inside a <filters> block to sort the rows based on temperature. [10 minutes] Solution

3B: Run the demo. By default, the rows are sorted in ascending order. Change the demo to sort in descending order using the "direction" attribute. [5 minutes] Solution

3C: Now that the temperatures are sorted, it might be interesting to sort within a temperature value based on latitude to see which of the -29°C temperature samples is nearest the North Pole, for example. Add the Latitude column to the view and add a secondary sort on that column. [5 minutes] Solution

---

Demo: tabTable

• A tabbed pane containing three tabs, each with its own table.
• Data filtering — only rows that match specific criteria are displayed.
• Data searching — the search panel allows the data to be interactively filtered.

Tab #1: Countries Beginning with 'E'

Tab #2: Search Panel on Rows with Latitude >= 60

Tab #3: Search Panel on all Weather Samples

---

Try this: 

1. Run tabTable using Java Web Start. You can also run it from the command line (using run demo\tabTable.jdnc [on Microsoft Windows] or run.sh demo/tabTable.jdnc [on Unix]), if you prefer.
2. The data source for the table under the first tab, "Stations in Countries Beginning with 'E'", is the same flat file we've used before but a filter in the XML file causes any sample taken in a country not beginning with the letter 'E' to be ignored.
3. Select the "Northern Stations (Latitude >= 60)" tab.
4. The data for this table comes from a flat file that has limited the samples to those from stations at latitudes nearer the North Pole. When pulling data from a live data source, it is possible that the source will allow some form of query to be specified within the tabularData tag. This table displays the Latitude column.
5. Use the search field to search on the Country column. Select Country "contains" and enter "an". As you type the a, all the rows that don't contain 'a' in the country's name are filtered out. As you type 'n', the rows are further filtered.
6. Select Country "begins with" and enter "s". All of the rows from "Sweden" appear.
7. Click on the "Match Case" check box. All the rows disappear unless you typed "s" in upper case.
8. Select the "All Weather Stations" tab. This table uses the original flat file containing all the weather samples.
9. Use the search field to filter rows on the Code column. Select Code "begins with" and enter "p". All the rows with an ICAO code beginning with "P" appear.

---

  <tabbedPane>
    <table title="Stations in Countries Beginning with 'E'"...>
      ...
    </table>
    <table title="Northern Stations (Latitude >= 60)"...>
      ...
    </table>
    <table title="All Weather Stations"...>
      ...
    </table>
  </tabbedPane>

  <filters>
    <patternFilter expression="E.*" match="caseInsensitive unicodeCase"
                   testColumn="COUNTRY"/>
  </filters>

• caseInsensitive
• multiline
• dotAll
• unicodeCase
• canonEq

The second tab contains the Northern Stations (Latitude >= 60) table. The data comes from a pre-filtered flat file, northernlatitudes.txt — a custom servlet will probably support specifying a query in the URL to fetch the rows of interest.

In addition to pre-filtering the data, the table uses a search field to allow the user to dynamically filter the data. This requires two simple steps:

• Specify a <patternFilter>, but specify only an "id" and a "testColumn":

    <filters>
      <patternFilter xml:id="countryFilter" testColumn="COUNTRY"/>
    </filters>
  

• Specify a <searchPanel> inside a <toolBar> block, using the same "id" specified in the <patternFilter>:

    <toolBar>
      <searchPanel patternFilter="#countryFilter"/>
    </toolBar>
  

The third tab contains the All Weather Stations table which uses the complete weather.txt flat file for the data. In this case, the search field searches on the ICAO Code string:

  <filters>
    <patternFilter xml:id="codeFilter" testColumn="ICAO"/>
  </filters>
  <toolBar>
    <searchPanel patternFilter="#codeFilter"/>
  </toolBar>

Hands On: Modify tabTable Example

---

Exercise 4: Data Filtering 

The following exercises require some knowledge of regular expressions. See the Regular Expressions lesson in The Java Tutorial for more information on the regular expression support introduced in the 1.4 release of the Java 2 Platform, Standard Edition.

4A: Modify the <patternFilter> in the first table to display only samples from countries beginning with letter 'A' through letter 'J'. [10 minutes] Solution.

4B: Modify the <patternFilter> in the first table to display only samples from weather stations identified as airport locations. [10 minutes] Solution.

---

Exercise 5: Searching 

5A: Modify the search field in the third table (All Weather Stations) to search on the Station column. Run the demo and, in the All Weather Stations table, search on "Station contains Air". Compare the results to the results from Exercise 4B. They should be the same. [10 minutes] Solution.

---

Demo: treeTable

[BUG/PENDING: There is currently a bug where the custom icons aren't displayed. Update this screenshot when the bug is fixed.]

---

Try this: 

1. Run treeTable using Java Web Start. You can also run it from the command line (using run demo\treeTable.jdnc [on Microsoft Windows] or run.sh demo/treeTable.jdnc [on Unix]), if you prefer.
2. Click the first down-arrow in the Process ID column. The entire tree table collapses. A right-arrow replaces the down-arrow indicating that this node can be expanded.
3. Double-click the same Process ID. The tree table expands. Double-clicking the Process ID is the same as clicking the arrows.
4. Move the columns around. The hierarchical column, Process ID, can appear in any location.

---

You may have noticed that the treeTable example displays a custom title, Server Process Tree, in the window's title bar. This was accomplished using the <app> tag inside the <defs> block:

  <om:defs>
    <app xml:id="pstree" title="Server Process Tree" versionString="1.0"/>
    ...
  </om:defs>

• title
• versionString
• class

    <rootPane app="#pstree">

The high-level tree table component is defined using the <treeTable> tag:

    <treeTable preferredSize="704 528" columnMargin="0"
               rowHeight="28" source="data/pstree.txt"
	       expandedIcon="images/close.png" collapsedIcon="images/open.gif"
	       containerIcon="images/gears.png" leafIcon="images/gear.gif">

The tree table icons are specified using the "expandedIcon", "collapsedIcon", "containerIcon", and "leafIcon" attributes. JDNC provides default images so this step is optional.

The <hierarchicalColumnHighlighter> tag in the <highlighters> block calls attention to the hierarchical column (in this case, the Process ID column) by painting its background in slightly darker values:

  <highlighters>
    ...
    <hierarchicalColumnHighlighter/>
  </highlighters>

Hands On: Modify treeTable Example

---

Exercise 6: xxx 

6A: Remove the custom icons from the treeTable demo. Run the demo to see what the standard provided icons look like. Solution.

---

Demo: editorDemo

• Plain or styled text, such as HTML. For more information on the Swing editor pane, see How to Use Editor Panes and Text Panes, a section in The Swing Tutorial.
• Defining actions that can then be assigned to a menu, a tool bar, or both. The JDNC actions framework is based on the framework described in An Easy Architecture For Managing Actions, an article on the javadesktop.org website.

---

Try this: 

1. Run editorDemo using Java Web Start. You can also run it from the command line (using run demo\editorDemo.jdnc on [Microsoft Windows] or run.sh demo/editorDemo.jdnc [on Unix]), if you prefer.
2. Click in the "Jabberwocky" string so that the insertion cursor appears. The "centered paragraph" icon is selected.
3. Click in the "Lewis Carroll" string. The italic and underline icons are now selected, as well as the centered paragraph. [BUG: Currently, in these two steps the left-aligned paragraph icon is actually selected.]
4. Click Format to bring up the text-formatting submenu. The Italic and Underline menu items are checked and the center paragraph menu item is selected. The menu items and the tool bar icons are in synch thanks to JDNC's actions framework.
5. Select some text. Type control-X. The text is moved to the clipboard and removed from the text area.
6. Move the insertion cursor and type control-V. The text is copied from the clipboard to the new location. [BUG: There is some weird formatting problems when I do this.]
7. Select the "Find" button - this is depicted as a pair of binoculars.
8. Enter "Jabber" into the text field of the search panel and find all the instances of this string.

---

Here's the action tag for the File menu:

  <om:defs>
    <action xml:id="file-menu" title="File" mnemonic="F"
            description="File Operations"/>
    ...
  </om:defs>

The EditorKit has built-in support for the following actions:

• cut-to-clipboard
• copy-to-clipboard
• paste-from-clipboard
• undo
• redo
• find
• print
• about

  <action xml:id="cut-to-clipboard" title="Cut" mnemonic="C"
          smallIcon="/toolbarButtonGraphics/general/Cut16.gif"
          icon="/toolbarButtonGraphics/general/Cut24.gif"
          accelerator="control X" description="Cut to clipboard"/>

The "icon" attribute is the 24x24 image used in the tool bar. The "smallIcon" attribute is the 16x16 image used in the menu. When the path is prefixed by "/", as in icon="/toolbarButtonGraphics/general/Print24.gif", then JDNC looks in the resources of the classpath for the image. These images are part of the Java Look and Feel Graphics Repository (jlfgr-1_0.jar), which is included in the bundle for this tutorial.

For more information on loading resources, see the documentation for java.lang.Class.getResource(String).

The StyledEditorKit has built-in support for the following actions, most of which are toggle actions:

• right-justify
• left-justify
• center-justify
• font-bold
• font-italic
• font-underline

    <action xml:id="right-justify" isToggle="true" title="Right Align"
            group="paragraph-align" mnemonic="R"
	    smallIcon="/toolbarButtonGraphics/text/AlignRight16.gif"
	    icon="/toolbarButtonGraphics/text/AlignRight24.gif"
	    description="Adjust the placement of the text along the right side"/>

Defining the actions in the <defs> block makes it easy to share them between tool bars, menus and popups. The menuBar block is used to build the menu, using the actions already defined as well as new (placeholder) actions for New and Open:

  <menuBar>
    <menu actionRef="#file-menu">
       <action xml:id="new-command" title="New" mnemonic="N"
                smallIcon="/toolbarButtonGraphics/general/New16.gif"
		description="Create a new document (dummy command)"/>
       <action xml:id="open-command" title="Open" mnemonic="O"
                smallIcon="/toolbarButtonGraphics/general/Open16.gif"
		description="Open an existing document (dummy command)"/>
    </menu>
    <menu title="Edit" mnemonic="E" description="Edit Commands">
      <action actionRef="#cut-to-clipboard"/>
      <action actionRef="#copy-to-clipboard"/>
      <action actionRef="#paste-from-clipboard"/>
      <separator/>
      <action actionRef="#undo"/>
      <action actionRef="#redo"/>
    </menu>
    <menu title="Format" mnemonic="O" description="Text Formatting Commands">
      <action actionRef="#font-bold"/>
      <action actionRef="#font-italic"/>
      <action actionRef="#font-underline"/>
      <separator/>
      <action actionRef="#left-justify"/>
      <action actionRef="#center-justify"/>
      <action actionRef="#right-justify"/>
    </menu>
  </menuBar>

The <toolBar> is defined in the same manner as the menu:

  <toolBar>
    <action actionRef="#font-bold"/>
    <action actionRef="#font-italic"/>
    <action actionRef="#font-underline"/>
    <separator/>
    <action actionRef="#cut-to-clipboard"/>
    <action actionRef="#copy-to-clipboard"/>
    <action actionRef="#paste-from-clipboard"/>
    <action actionRef="#undo"/>
    <action actionRef="#redo"/>
    <separator/>
    <action actionRef="#find"/>
    <action actionRef="#print"/>
    <separator/>
    <action actionRef="#left-justify"/>
    <action actionRef="#center-justify"/>
    <action actionRef="#right-justify"/>
    <separator/>
    <action actionRef="#about"/>
  </toolBar>

  <editor source="jabberwock.html">

  <editor source="jabberwock.html">
    <popupMenu>
      <action actionRef="#cut-to-clipboard"/>
      ...
    </popupMenu>
  </editor>

---

Note:  The <popupMenu> tag is supported in all the high-level JDNC components: tree, table, treetable, form and editor.

---

Hands On: Modify editorDemo Example

---

Exercise 8: Configuring Actions 

For the following exercises, you will find the Java Look and Feel Graphics Repository (jlfgr-1_0.jar) useful.

8A: An action is defined for the built-in "Find" support of the editor kit but it's been added only to the toolbar. Add searching support to the menu and popup menu. [15 minutes] Solution

8B: The New and Open items were placed in the menu only. Add them to the tool bar and popup menu. [20 minutes] Solution

8C: Add a refresh action that reloads the source file on demand. [15 minutse] Solution

---

Demo: formDemo

The formDemo example introduces the high-level JDNC form component — this component makes it easy to construct forms by binding a form to named fields on a data model, such as a column on a TabularDataModel (or RowSet), a property on a JavaBeans component, or a key on a map of named values.

---

Note:  Currently, the XML form supports binding only to a single data model, but this will be changed in a future release to support binding to multiple data models. The programmatic I/F does support binding to multiple data models.

---

---

Try this: 

1. Run formDemo using Java Web Start. You can also run it from the command line (using run demo\formDemo.jdnc [on Microsoft Windows] or run.sh demo/formDemo.jdnc [on Unix]), if you prefer.

---

  <om:defs>
    <tabularData xml:id="weatherdata">
      <metaData>
        ...
      </metaData>
    </tabularData>
  </om:defs>
  <rootPane>
    <splitPane>
      <table>
        ...
      </table>
      <form>
        <components>
	  <component>
	  <component>
	  ...
	</components>
      </form>
    </splitPane>
  </rootPane>

  <splitPane orientation="vertical" background="#EEEEEE">

  <table xml:id="weathertable" data="#weatherdata" title="Weather Stations"
        showHorizontalLines="false" showVerticalLines="false"
        preferredSize="550 200" background="#EEEEEE">

  <form data="#weatherdata" tracks="#weathertable" background="#EEEEEE"/>

  <metaData>
    <columnMetaData name="ICAO" displaySize="4" title="Code"/>
    <columnMetaData name="STATION" displaySize="25" title="Station"/>
    <columnMetaData name="REGION" isReadOnly="true" title="Region"/>
  </metaData>

The "reset" and "submit" buttons are created automatically in the form:

• reset
  Pulls the values from the model into the UI components.
• submit
  If all the form fields are valid, pushes the values from the UI component to the model. If any form fields are invalid, displays an error to the user.

Hands On: Modify formDemo Example

[PENDING: Stay tuned]

Where to Find More Information

• The JDNC Development website includes technical overviews, documentation and demos. It's also the home of this tutorial.

• The JDNC Schema.

• The announce@jdnc.dev.java.net mailing list informs subscribers of the progress of the JDNC project. You can use Mailing List Page to subscribe to it.