Designing Applications: Tutorials JBuilder® 2005 Borland Software Corporation 100 Enterprise Way Scotts Valley, California 95066-3249 www.borland.com Refer to the file deploy.html located in the redist directory of your JBuilder product for a complete list of files that you can distribute in accordance with the JBuilder License Statement and Limited Warranty. Borland Software Corporation may have patents and/or pending patent applications covering subject matter in this document. Please refer to the product CD or the About dialog box for the list of applicable patents. The furnishing of this document does not give you any license to these patents. COPYRIGHT © 1997–2004 Borland Software Corporation. All rights reserved. All Borland brand and product names are trademarks or registered trademarks of Borland Software Corporation in the United States and other countries. All other marks are the property of their respective owners. For third-party conditions and disclaimers, see the Release Notes on your JBuilder product CD. Printed in the U.S.A. JB2005designui-tutorials 6E5R0804 0405060708-987654321 PDF Contents Chapter 1 Step 15: Showing filename and state in User interface tutorials 1 the window title bar. 38 Step 16: Deploying the Text Editor application Documentation conventions . 2 to a JAR file . 41 Developer support and resources. 3 Overview . 41 Contacting Borland Developer Support . 3 Running the Archive Builder . 42 Online resources. 3 Testing the deployed application from World Wide Web . 4 the command line . 46 Borland newsgroups . 4 Modifying the JAR file and retesting Usenet newsgroups . 4 the application . 47 Reporting bugs . 4 Chapter 2 Chapter 4 Tutorial: Creating a simple Tutorial: Creating a UI with user interface 7 nested layouts 49 Step 1: Creating the UI project . 50 Creating the UI . 7 Using the Project wizard . 50 Using layouts . 8 Step 2: Generating the application source files . 51 Adjusting constraints. 9 Using the Application wizard . 51 Attaching events . 9 Step 3: Changing contentPane’s layout . 53 Chapter 3 Step 4: Adding the main panels . 54 Step 5: Creating toolbars . 56 Tutorial: Building a Java text editor 11 Step 6: Adding toolbar buttons. 57 What this tutorial demonstrates . 11 Step 7: Adding components to the Sample code for this tutorial . 12 middle panel . 59 Step 1: Setting up . 12 Step 8: Creating a status bar . 60 Creating the project . 13 Step 9: Converting to portable layouts. 61 Selecting the project’s code style options . 14 Step 10: Completing your layout. 63 Using the Application wizard. 14 Suppressing automatic hiding of JFrame . 16 Chapter 5 Setting the look and feel . 16 Tutorial: Creating a GridBagLayout Step 2: Adding a text area . 17 Step 3: Creating the menus. 20 in JBuilder 65 Step 4: Adding a FontChooser dialog. 22 Using GridBagLayout . 66 Setting the dialog’s frame and title properties . 22 What is GridBagLayout? . 67 Creating an event to launch the FontChooser . 22 What is the component’s display area?. 67 Step 5: Attaching a menu item event to the What are GridBagConstraints? . 69 FontChooser. 24 Why is GridBagLayout so complicated? . 69 Step 6: Attaching menu item events Why use GridBagLayout? . 70 to JColorChooser . 25 Simplifying GridBagLayout . 70 Step 7: Adding a menu event handler Sketch your design on paper first . 70 to clear the text area. 26 Use nested panels and layouts . 72 Step 8: Adding a file chooser dialog . 26 Use the JBuilder visual designer . 73 Internationalizing Swing components . 27 Prototype your UI in null or XYLayout . 75 Step 9: Adding code to read text from a file. 28 Creating a GridBagLayout in JBuilder . 76 Step 10: Adding code to menu items About the design . 76 for saving a file . 29 Step 1: Design the layout structure. 77 Step 11: Adding code to test if a file Step 2: Create a project for this tutorial . 81 has been modified. 31 Step 3: Add the components Step 12: Activating the toolbar buttons . 33 to the containers . 81 Specifying button tool tip text . 33 Add the main panel to the UI frame . 82 Creating the button events. 33 Create the left panel and add Creating a fileOpen() method . 34 its components. 82 Creating a helpAbout() method . 35 Create the right panel and add Step 13: Hooking up event handling to its components. 84 the text area . 36 Create the bottom panel and add Step 14: Adding a context menu to the text area . 37 its components. 85 i Step 4: Convert the upper panels Dragging the black sizing nibs into to GridBagLayout . 85 an adjacent empty cell . 106 Step 5: Convert the lower panel Adding components . 108 to GridLayout . 86 Miscellaneous tips . 109 Step 6: Convert the outer panel Switch back to XYLayout for to GridBagLayout . 86 major adjustments. 109 Step 7: Make final adjustments . 86 Remove weights and fill before making GridLayout panel . 88 adjustments . 109 Upper panels . 90 Making existing GridBagLayout code Conclusion . 94 visually designable . 110 Tips and techniques . 94 Differences in code . 110 Setting individual constraints in the designer . 94 Modifying code to work in the designer . 110 anchor . 94 Code generated by JBuilder in Part 2. 111 fill . 95 Other resources on GridBagLayout. 112 insets . 95 GridBagConstraints . 113 gridwidth, gridheight . 96 anchor . 113 ipadx, ipady . 97 fill . 113 gridx, gridy . 98 insets . 114 weightx, weighty . 98 gridwidth, gridheight . 114 Behavior of weight constraints . 99 ipadx, ipady . 115 Using drag and drop to edit constraints . 101 gridx, gridy . 115 Dragging a component to an empty cell . 102 weightx, weighty . 116 Dragging a component to Examples of weight constraints . 116 an occupied cell . 103 Dragging a large component into Index 119 a small cell . 105 ii Chapter 1 Chapter 1User interface tutorials These tutorials are designed to help you quickly get comfortable with using the visual designer. Each tutorial has a different emphasis, so you can choose the tutorial that most closely matches your needs. Here is a quick and simple tutorial to introduce you to the designer: I Chapter 2, “Tutorial: Creating a simple user interface” — Create a simple GUI, play with layouts and constraints, and hook up an event. These tutorials provide in-depth practice with important aspects of the designer: I Chapter 3, “Tutorial: Building a Java text editor” — Create and deploy a real application to load, edit, and save text files, hooking events up to buttons and menus. I Chapter 4, “Tutorial: Creating a UI with nested layouts” — Design a user interface with nested panels and layouts, converting between different layouts. I Chapter 5, “Tutorial: Creating a GridBagLayout in JBuilder” — Learn how to use GridBagLayout and GridBagConstraints. Create a GridBagLayout UI container in the designer. These tutorials assume you are familiar with Java and with the JBuilder IDE. For more information on these and other pertinent subjects, see below. See also I Java: Getting Started with Java I JBuilder IDE: “The JBuilder environment” in Getting Started with JBuilder I Using JBuilder features to improve ease of use for people with disabilities: Accessibility options section in the JBuilder Quick Tips Chapter 1: User interface tutorials 1 Documentation conventions Documentation conventions The Borland documentation for JBuilder uses the typefaces and symbols described in the following table to indicate special text. Table 1.1 Typeface and symbol conventions Typeface Meaning Bold Bold is used for java tools, bmj (Borland Make for Java), bcj (Borland Compiler for Java), and compiler options. For example: javac, bmj, -classpath. Italics Italicized words are used for new terms being defined, for book titles, and occasionally for emphasis. Keycaps This typeface indicates a key on your keyboard, such as “Press Esc to exit a menu.” Monospaced type Monospaced type represents the following: I text as it appears onscreen I anything you must type, such as “Type Hello World in the Title field of the Application wizard.” I file names I path names I directory and folder names I commands, such as SET PATH I Java code I Java data types, such as boolean, int, and long. I Java identifiers, such as names of variables, classes, package names, interfaces, components, properties, methods, and events I argument names I field names I Java keywords, such as void and static [ ] Square brackets in text or syntax listings enclose optional items. Do not type the brackets. < > Angle brackets are used to indicate variables in directory paths, command options, and code samples. JDK 5.0 uses angle brackets to denote generics. For example, <filename> may be used to indicate where you need to supply a file name (including file extension), and <username> typically indicates that you must provide your user name. When replacing variables in directory paths, command options, and code samples, replace the entire variable, including the angle brackets (< >). For example, you would replace <filename> with the name of a file, such as employee.jds, and omit the angle brackets. See “Using command-line tools” in Building Applications with JBuilder for more information. Note: Angle brackets are used in HTML, XML, JSP, and other tag-based files to demarcate document elements, such as <font color=red> and <ejb- jar>. The following convention describes how variable strings are specified within code samples that are already using angle brackets for delimiters. Italics, serif This formatting is used to indicate variable strings within code samples that are already using angle brackets as delimiters. For example, <url="jdbc:borland:jbuilder\\samples\\guestbook.jds"> ... In code examples, an ellipsis (…) indicates code that has been omitted from the example to save space and improve clarity. On a button, an ellipsis indicates that the button links to a selection dialog box. 2 Designing Applications: Tutorials Developer support and resources JBuilder is available on multiple platforms. See the following table for a description of platform conventions used in the documentation.