NetBeans Wiki: NBDemoMatisseInNB6

NBDemoMatisseInNB6

Your trail:

Page Info Plain View My Prefs Log in

This page (revision-13) last changed on 06:24 14-Oct-2007 by RomanStrobl.

Reality Demo: JSR 295 + JSR 296 + Matisse improvements

This demo script describes building a bit more a complex application using swing app. framework and beans binding.

The database refers to pictures of London properties, you have to extract the archive londonPictures.zip with the images into some local directory.
Replace all occurences of the string 'E:/Work/JavaOne/2007/londonPictures/' in the script realityTable.sql by your path to the directory with images.
JDK 6 is bundled with Derby database. The database is automatically registered when the IDE is started with JDK 6. Verify that there is some DB connection in the Runtime window under the Databases node.
Start the Database using Tools > Java DB Database > Start Java DB Server action if it is not already started.
Connect to the database using Connect ... action on the DB connection node in the Runtime tab (under Databases node).
Make sure there is no REALITY table in the DB already. Delete the table otherwise.
Invoke Execute Command ... action.
Copy and Paste the content of the file realityTable.sql into the 'SQL Command' window.
Invoke Run SQL action from the editors toolbar.
Invoke Refresh action on the Tables node in the Runtime window.
Verify that REALITY table has been created. (You can view the data in the table using View Data ... action from the contextual menu of the table node.)

NetBeans 6.0 M10 or newer, started with JDK 6 (the demo uses features of JTable added in JDK 6).
JXImageView and JXMapKit components installed into the Palette (create a library from swingx-ws.jar and swingx.jar and install the components from this library)
Project RealityDemo.zip containing ImageRenderer, RowSorterToStringConverter and StringToGeopositionConverter is opened in the IDE and compiled (add the library mentioned in the previous step on the classpath of this project).
DB with the REALITY table is started.
Optional: The IDE is warmed up - one JDA project is created and closed.

DnD ImageRenderer into the designer area (we will use it as a renderer for the Photo column).
Select "masterTable[jTable]" in the Inspector, right-click and choose "Table Contents...".
Don't touch Table Model tab and switch to Columns tab.
Select Photo column and assign ImageRenderer to it.
- Click on the ... button next to Renderer property.
- Select Component choice.
- Select imageRenderer1 from the combobox next to Component choice.
- Press OK
Close the customizer.
Go to the Properties window (it shows properties of masterTable).
Change rowHeight property to 50.

Insert a Dialog component into the designer (from the Palette).
Select the detail area components (3 rows of labels and field).
Invoke Cut action.
Switch the designer to jDialog1 (double-click it in the Inspector or invoke Design This Container action on it)
Select the jDialog1 (the gray rectangle) and invoke Paste action.
Move the 3 rows into the upper-left corner.

DnD or pick&plop the JXImageView component from the Palette under the Price field.
Resize the JXImageView to align it horizontally with the fields.
Go to the Binding section of the Properties window.
Press ... button of imageString binding property.
Select masterTable as a Binding Source.
Select selectedElement > photo in the Binding Expression tree-combobox.
Set the Unreadable Source Value in Advanced options to: file:/c:/path_to_images/westminsterAbbey.jpg (you can copy the value from the database , serves as default image)
Press OK.
Optional: Invoke Set Default Size action from the contextual menu of jDialog1.

Switch the designer to main frame (double-click "mainPanel[jPanel]" node).
DnD or pick&plop JButton from the Palette and place it next under the table.
Go to Properties window.
Press ... button of action property.
Select Create New Action ... from the Action to edit combobox.
Enter 'showDetail' in the Method field.
Enter 'Detail' in the Text field.
Press OK.
Enter DesktopApplication/no/.getApplication().show(jDialog1); (replace DesktopApplication/no/ with the name of your application)

!DnD or pick&plop the JXMapKit component from the Palette into the top left corner of the form.
Resize it to make its right side aligned with the JTable.
Change its defaultProvider property to OpenStreeMaps.
DnD StringToGeopositionConverter into the designer area.
Go to Binding properties of JXMapKit and invoke the customizer for addressLocation binding property.
Select masterTable as the Binding Source.
Enter ${selectedElement.latitude},${selectedElement.longitude} as the Binding Expression
Go to Advanced tab and assign StringToGeopositionConverter to the binding.
- Click on ... button next to Converter field.
- Select Component choice.
- Select stringToGeopositionConverter1 from the combobox next to Component choice.
- Press OK.
Set Unreadable Source Value to Custom Code: new GeoPosition(0,0) (incl. packages, copy them from the dialog)
Press OK.

Insert JLabel below the JTable and change its text to 'Search:'.
Insert JTextField next to JLabel and resize it to align with the table.
!DnD RowSorterToStringConverter into the designer area.
Change its 'table' property to masterTable (select masterTable in the combobox).
Select JTextField, go to its Binding properties and invoke a customizer for its text binding property.
Select masterTable as the Binding Source.
Select rowSorter as the Binding Expression.
Go to Advanced tab and assign RowSorterToStringConverter to the binding.
- Click on ... button next to Converter field.
- Select Component choice.
- Select rowSorterToStringConverter1 from the combobox next to Component choice.
- Press OK.
Change Update When combobox to While typing.
Press OK.