---

NetBeans GUI Builder Demo - JSRs 295 and 296 and Localization (? Minutes)

Description

This demo will give a quick overview of the NetBeans GUI Builder. In particular, this demo will show how the GUI Builder incorporates JSRs 295 (Beans Binding) and 296 (Swing Application Framework). The demo will also show how easy the GUI Builder makes localization.

Product Versions Supported

• NetBeans 6.0 Beta 1 with "Web and Java EE" support. The SJSAS 9 must be installed to make use of the "sample" database.

Points to Hit

• The GUI Builder makes visually creating a UI very simple by providing guides and eliminating messy layout nightmares.
• The GUI Builder creates all the necessary code for a "Swing Application Framework" application including "About" processing.
• The GUI Builder supports "Swing Application Framework" features like "Action"s by providing visual tools to create "Action"s.
• The GUI Builder supports "Beans Binding" by allow the developer to visually bind components as well as visually drag and drop database tables onto components.
• The GUI Builder makes localization easy be creating all the necessary property files and allowing the developer to easily manage locale information.

Demo Prep

None

Gotchas

None known

Demo

1. Create a new project "Java->Java Desktop Application".

2. Choose "Basic Application" under the "Choose Application Shell" list.

Explanation Point: We could choose "Database Application" since we will be using a database but this demo will show the power of the Beans binding implementation in the GUI Builder.

3. Take the rest of the defaults and click "Finish".

4. Resize the frame created making it bigger.

5. Drag a "Swing Controls->Table" from the palette onto frame showing the guidelines for the top and the left side.

6. Resize the table to fit the guidelines on the left and right side leaving room on the bottom to later add a button.

7. Open the "Services" window and navigate to "Databases->jdbc:derby://localhost:1527/sample->Tables->Customer".

8. Drag the "Customer" relational table to the UI table and drop it.

Explanation Point: NetBeans does lots of work here building the Beans binding to the database, creating an Entity POJO from the relational table, etc.

9. Add a "Button" to the frame just below the table centered on the table.

10. Drag a "Swing Windows->Dialog" onto the designer outside the frame containing the Table.

11. Right-click on the button and select "Set Action...".

12. On the "Action to Edit" pulldown, select "Create new Action...".

13. Enter "showDetails" for the Method:.

14. Enter "Details..." for the Text: and press "OK".

15. The Java editor will be opened to the Action method. Replace "// put your action code here" with this code:

   DesktopApplication<number>.getApplication().show(jDialog1);

16. Switch back to "Design" mode.

17. Double-click on "_jDialog1" in the Inspector window to open jDialog1 in the designer.

18. Resize the dialog making it bigger in height and width.

19. Drag-n-Drop a "Swing Controls->Label" onto the designer using the guides to place it in the top, left corner and change the text to "Name:".

20. Drag-n-Drop a "Swing Controls->Text Field" onto the designer using the guides to place next to the label

• Double click on "jTextField1" and clear the value (Make sure to hit "RETURN")
• Resize the text field to the right side guide

21.Select both the "Name:" label and the "Text Field" and do a copy and a paste.

22. Drag the new components down below until the correct guides are hit.

23. Change the new label to "Address1:"

24. Resize the "Text Field" associated with the "Name:" label so the left side aligns with the text field below it.

25. Right-click on the Name Text Field and select "Bind->text".

26. Select "jTable1" from the "Binding Source:" and "selectedElement->name" for the "Binding Expression:".

27. Right-click on the Address1 Text Field and select "Bind->text".

28. Select "jTable1" from the "Binding Source:" and "selectedElement->addressline1" for the "Binding Expression:".

29. Now run the application to show how it works so far. Open the Details window and show how the values change as the selection changes.

Localization (l10n)

30. In the Design mode, right-click on the Form DesktopApplicationNview (N will vary) and select properties.

31. Click on the "..." next to the Design local: property.

32. In the "Predefined Locales:", select es_MX - Spanish / Mexico and select OK.

33. Close the Properties window.

34. Back in the GUI designer, double click on the "Name:" label and change it to "Nombre:".

35. In the Design mode, right-click on the Form DesktopApplicationNview (N will vary) and select properties.

36. Select the pulldown for the Design Locale: property and choose default language. Notice how the label in the designer changes back to English.

37. In the project window, drill down in the "desktopapplicationN.resources->DesktopApplicationNView.properties" and show the "es_MX - Spanish (Mexico)" property file.

38. Double-click on the "es_MX - Spanish (Mexico)" property file to show how the designer has maintained it.

Demo Cleanup

None.

Attachments