Laying out your UI
The user interface (UI) is the collection of visual windows, menus, and controls a user interacts with to control a program. This section explains the fundamental tasks you perform as you create a Java UI using the JBuilder visual design tools. If you're already comfortable using controls in a graphical user interface environment, much of the material discussed here, such as selecting, sizing, and deleting components, might be familiar to you.
Good object-oriented programming design would divide your programs into multiple classes for the UI and for "engine" code. You can encapsulate various UI pieces (panels or frames) into individual classes that you can reuse in other programs. The JBuilder component palette lets you add your own classes to the palette so you can drop them into a UI design. All the workings of the program (such as access to databases, socket connections to other computers, distributed object interactions using RMI or CORBA, calculations and computations) should be put in objects and classes other than the UI classes.
Basic design tasks
At the simplest level, designing a user interface consists of the following basic tasks:
JBuilder assists with this process by providing wizards to create the basic framework of files for your project and visual design tools to speed up the UI design process.
Starting your UI project using wizards
The first step in designing a user interface with JBuilder is to create or open a project that includes a designable container class, such as a Frame
or a Panel
. The quickest way to do this is to create a project with the Project wizard, then create the application or applet files using the Application wizard or the Applet wizard.
For more information on creating projects, see "Creating and managing projects" in Building applications with JBuilder.
The wizards import all the packages necessary for designing a UI. All you need to do is select the Frame or Applet file, click the Design tab and start adding components in the UI designer.
Note: You can add additional Frames, Panels, and Dialogs to your UI project by choosing File|New and selecting the appropriate wizard from the object gallery.
Using the Application wizard
To create a new application using the Application wizard complete the following steps.
- Close any open projects in JBuilder, then choose File|New and double-click the Application icon.
- The Project wizard appears first, suggesting a default project name, directory name, and root, source, backup, and output paths. Change the project file name and type (
.jpr
or .jpx
) and the project directory name if you want to give the project a particular name. Leave the rest of the paths unchanged. Note the default root path and the default project, source, backup, and output directory names.
Note: The paths for project files are pre-set in the default project properties. You can override the default settings for each project by typing a new path in Step 1 of the Project wizard. But, until you become a more advanced Java user, it's best to leave these unchanged. For more information on changing the default project properties, see "Creating and managing projects" in Building applications with JBuilder.
The name of the package for the project is derived from the project file name and is displayed in the Application wizard. For example, if you create a project called /[home]/[username]/jbproject/project1/project1.jpr
, the Application wizard suggests using a package name of project1
.
For more information on packages, see Packages.
- Click Next to continue to Step 2 of the Project wizard. Note the paths generated from Step 1:
- Project path
- Where the project file is saved.
- Source path
- Where the source files are saved.
- Backup path
- Where the backup files are saved.
- Output path
- Where the class files are saved.
These paths and the JDK path can be edited by selecting the ellipsis button
. Required libraries can also be added.
See also: "Setting the JDK" and "How JBuilder constructs paths."
- Click Next to continue to Step 3 where you can enter project information in the project notes HTML file.
- Click Finish to complete the wizard.
The Project wizard creates two files:
- A project file (.jpr or .jpx).
- An HTML file that contains default project information. You can edit this to record any pertinent information about the project.
- Next, the Application wizard automatically starts. It has two steps. For now, accept the default file names in both steps, check any features you want to include in your UI frame in Step 2, then choose Finish.
The Application wizard creates two files:
Application1.java
: A startup class for your application. This class contains the main()
method for the application. At runtime, this startup class creates an instance of the UI class for the application.
Frame1.java
: A UI class. This class is your main UI container, to which you'll add UI components using the UI designer. Use this class only for UI related code and keep any other program functions and operations in the application class.
Frame1.java
opens in the editor. Notice the first two lines of code in the declaration statement:
public class Frame1 extends JFrame {
JPanel contentPane;
Frame1.java
extends the Swing JFrame
and contains a JPanel
which uses the BorderLayout
layout manager to arrange its components. The JPanel
variable is called contentPane
.
- Now select the Design tab to switch to the UI designer. Notice that a component tree appears in the structure pane and shows the current structure of
Frame1.java
.
In the UI
folder, contentPane
(under this
) is the drawing surface for your UI design. The frame can optionally contain a menu bar, a status bar, and a toolbar by checking these items on Step 2 of the Application wizard.
Using the Applet wizard
To create a new applet using the Applet wizard complete the following steps.
If you're creating an applet for the Web, see Working with applets for information on browser and JDK compatibility issues.
- Close all open projects.
- Choose File|New Project from the JBuilder main menu. The Project wizard appears,
suggesting a default project name, directory name, and root, source, backup, and output paths. Change the project file name and type (
.jpr
or .jpx
) and the project directory name if you want to give the project a particular name. Leave the rest of the paths unchanged. Note the default root path and the default project, source, backup, and output directory names.
Note: The paths for the project files are pre-set in the default project properties. Until you become a more advanced Java user, it's best to leave these unchanged. For more information on the default project properties, see "Creating and managing projects" in Building applications with JBuilder.
The name of the package for the project is derived from the project file name and is displayed in the Applet wizard. For example, if you create a project called /[home]/[username]/jbproject/appletproject1/appletproject1.jpr
, the Applet wizard suggests using a package name of appletproject1
.
For more information on packages, see Packages.
- Click Next to continue to Step 2 of the Project wizard. Note the paths generated from Step 1:
- Project path
- Where the project file is saved.
- Source path
- Where the source files are saved.
- Backup path
- Where the backup files are saved.
- Output path
- Where the class files are saved.
These paths and the JDK path can be edited by selecting the ellipsis button
. Required libraries can also be added.
See also: "Setting the JDK" and "How JBuilder constructs paths."
- Click Next to continue to Step 3 where you can enter project information in the project notes HTML file.
- Click Finish to complete the Project wizard.
The Project wizard creates two files:
- A project file (.jpr or .jpx).
- An HTML file with a name matching the project that contains the default project information. You can edit this to record any pertinent information about the project you want to display.
- Next, choose File|New and double-click the Applet wizard in the object gallery.
- Type a new name for the applet class if you like.
- Select the base class you want the applet to extend:
java.swing.JApplet
(JFC Swing class) or java.applet.Applet
(AWT class).
- Check any of the remaining options you want:
- Generate Header Comments:
- Uses information from the project file as header comments at the top of the applet class file.
- Can Run Standalone:
- Creates a
main()
function so you can test the applet without its being called from an HTML page.
- Generate Standard Methods:
- Creates stubs for the standard applet methods:
start()
, stop()
, destroy()
, getAppletInfo()
, and getParameterInfo()
.
- Click Next to go to Step 2. In this step, you can add parameters. From this information, the wizard generates PARAM tags within the APPLET tag of the applet HTML file and parameter-handling code in the new applet java file.
Fill in one row for each parameter you wish to have.
- To add a new parameter, click the Add Parameter button.
- To select a cell, click it or use the keyboard navigation arrows to move to it.
- To enter a value in a cell, type in a value, or select one if a drop-down list exists.
- To remove a parameter, click in any cell of the parameter row, then click the Remove Parameter button.
Below are the parameter field definitions:
- Name
- A name for the parameter. This will be used to provide the NAME attribute in the PARAM tag in the HTML file and to provide the
name
parameter of the corresponding getParameter()
call in the Java source.
- Type
- The type of variable that will be inserted into the Java source code of your applet for holding the value of the parameter coming in from the HTML page.
- Desc
- A brief description of the parameter. This will be used to describe the parameter when external tools query the applet for what parameters it supports. An example of such a tool is the Applet|Info browser in AppletViewer. (JBuilder runs and debugs applets in AppletViewer.)
- Variable
- The name of the variable that will be inserted into the Java source code of your applet for holding the value of the parameter coming in from the HTML page.
- Default
-
The default value for the parameter. This is the value that the Java source code in this applet uses if a future HTML file that uses this applet doesn't hava a PARAM tag for this parameter. For an HTML file to provide this parameter, the NAME attribute in the PARAM tag must exactly match what you've entered in the Name column. Note that this matching is case-sensitive.
- Click Next to go to Step 3. Uncheck Generate HTML Page if you don't want to generate the HTML page automatically. Otherwise, leave it checked and enter information about it, such as the title of the page, the name of the applet, the size of the applet on the page, and the CODEBASE location. Select the Place In Output Directory if you want to save the HTML file in the same directory as the classes. When this option is not selected, the HTML file is saved to the source directory with the source files.
- Choose Finish to generate the applet java and HTML files.
The Applet wizard creates two files:
- An HTML file containing an Applet tag referencing your applet class. This is the file you should select to run or debug your applet.
- A Java class that extends
Applet
or JApplet
and that is designable with the UI designer.
See also:
Applet wizard
Working with Applets
Opening the UI designer
To open the UI designer and the other visual design tools,
- Select a visually designable Java file in the project pane, such as a
Frame
, Panel
, Applet
, or Dialog
file.
Note: To quickly create a designable Frame
or Applet
file, use the Application wizard or the Applet wizard.
- Click the Design tab at the bottom of the AppBrowser. The component tree appears in the structure pane of the AppBrowser, and the component palette, UI designer, and Inspector appear in the content pane.
The source code is still accessible on the Source tab of the AppBrowser, so you can view and edit your source code in parallel with designing your UI. Any changes made in the UI designer or Inspector are immediately reflected in the source code, and vice versa.
Adding components to the UI container
To add a component,
- Click a component on the component palette.
- Do one of the following:
- Click in the UI designer to drop the component at its default size. The upper-left corner of the component is anchored where you clicked, and the component is its default size.
- Drop the component onto the desired container in the component tree.
- Click and drag the component in the UI designer to the desired size. The upper-left corner of the component is anchored where you clicked.
Note: This is appropriate only when using null
or XYLayout
(XYLayout
is a feature of JBuilder Professional and Enterprise) for a container. Ultimately, the layout manager for each container in your UI will determine its components' sizes and positions. For more information on layout managers, see Using layout managers.
To add multiple instances of a component,
- Press the Shift key while clicking a component on the component palette.
- Click repeatedly in the UI designer or in the component tree to add multiple instances of the component.
- Clear the selection when you are done by clicking the palette's Selection
button or by choosing another component on the palette.
Note: Be careful to clear the selection. Otherwise, you may inadvertently click in the component tree or the UI designer and create an unwanted component.
Specifying a coding style for generated code
When you visually add a JavaBean component to your design in the UI designer, JBuilder generates an instance variable for that component and adds it to the source code. Likewise, when you delete a component in the UI designer, JBuilder deletes the associated lines from the code.
You can specify one of two source code styles for the UI designer to use when instantiating a JavaBean component:
To specify which code style to use for instantiating a JavaBean,
- Open your project.
- Choose Project|Project Properties or Project|Default Project Properties, and click the Code Style tab.
- Check or uncheck Use Beans.instantiate. By default , this option is unchecked and uses the parameterless constructor.
Using "new" plus a parameterless constructor
As an example, if you create a JPanel
, then add a JButton
to it, by default the UI designer adds the following code to the container's declaration statement:
JButton jButton = new JButton();
and this code to the jbInit()
method, which is called from the container's constructor:
jPanel1.add(jButton1, null);
Using Beans.instantiate
Using the same JButton
example, when you choose to use Beans.instantiate, JBuilder adds the following to the container's declaration statement:
JButton jButton1;
and this code to the jbInit()
method, which is called from the container's constructor:
jButton1 = (JButton) Beans.instantiate(getClass().getClassLoader(),
JButton.class.getName());
jPanel1.add(jButton1, null);
Selecting components in your UI
Before attempting to select an existing component in your UI, be sure the selection arrow
on the component palette appears depressed. Otherwise you may accidentally place a component on your UI.
To select a single component, do any one of the following:
- Click the component in the UI designer.
- Select the component in the component tree.
To select multiple components, do one of the following:
- Hold down the Ctrl key, and click the components in the UI designer one at a time.
- Hold down the Shift key, and click the first and last components in a range in the component tree.
- Hold down the Shift key, and drag around the outside of the components in the UI designer, surrounding the components with a rectangle.
When this rectangle encloses all the components you want to select, release the mouse button. If necessary, you can then use Ctrl+click to individually add or remove components from the selected group.
Notice that as you move the mouse over a component in the UI designer, the status bar at the bottom of the AppBrowser displays the name of the component. This is especially useful if the component you are trying to select is hidden or invisible in the designer, such as an AWT Panel
or one of the panels in a CardLayout
stack. If the panel containing the component is in XYLayout
, it also displays the xy coordinates.
Adding components to nested containers
There might be times when you want to add a component to a container that already has containers nested in it. For example, you might want to add a panel to a BorderLayout
container that is already filled with two other panels. You need a way to indicate to the UI designer which container should actually receive the selected component.
To do this,
- Select the container to which you want to add the component.
- Select the component on the palette that you want to add.
- Drop the component into the parent container.
- Press the Alt key, and while holding it down, release the mouse button.
Once the component is in the new container, you can modify its constraints to specify its exact placement.
Moving and resizing components
For many layouts, the layout manager completely determines the size of the components by constraints, and you cannot size the components yourself. However, when working with null
layout or XYLayout
(the layout
property is set to null
or XYLayout
in the Inspector), you can size components when you first place them in your UI, or you can resize and move components later.
To size a component as you add it,
- Select the component on the component palette.
- Place the cursor where you want the component to appear in the UI.
- Drag the mouse pointer before releasing the mouse button.
As you drag, an outline appears to indicate the size and position of the control.
- Release the mouse button when the outline is the size you want.
To resize a component,
- Click the component in the UI designer or in the component tree to select it.
When a component is selected, small squares, called sizing handles, appear on the perimeter of the component, and for some containers, a move handle appears in the middle of the component.
- Click an outer handle and drag to resize.
To move a component, click the component in the UI designer or in the component tree to select it and do one of the following:
- Click anywhere inside the component in the UI designer, and drag it any direction. If the component is a container completely covered with other components, use the center move handle to drag it.
- Hold down the Ctrl key, and use one of the arrow keys to move the component one pixel in the direction of the arrow.
- Hold down the Shift+Ctrl keys, and use one of the arrow keys to move the component eight pixels in the direction of the arrow.
- Click and drag the component in the component tree to a new location.
Cutting, copying, and pasting components
To cut, copy, or paste components in the UI designer, select the component(s) in either the UI designer or the component tree, then do one of the following:
Deleting components from your UI
To delete a component, select the component in the UI designer or the component tree. Choose Edit|Delete (Ctrl+Del) or just press Del.
Undo/Redo
To undo or redo an action in the UI designer, do one of the following:
- Right-click anywhere in the UI designer or the component tree, and choose Undo or Redo from the pop-up menu.
- Click anywhere in the UI designer or the component tree and choose Edit|Undo (Ctrl+Z) or Edit|Redo (Ctrl+Shift+Z).
You can undo multiple successive actions by choosing Undo repeatedly. This undoes your changes by stepping back through your actions and reverting your design through its previous states.
Redo reverses the effects of your last Undo. You can redo multiple successive actions by choosing Redo repeatedly. Redo is available only after an Undo command.
Grouping components
Some components on the palette are containers that can be used to group components together so they behave as a single component at design time.
For example, you might group a row of buttons in a Panel
to create a toolbar. Or you could use a container component to create a customized backdrop, status bar, or check box group.
When you place components within containers, you create a relationship between the container and the components it contains. All design-time operations you perform on the containers, such as moving, copying, or deleting, also affect any components grouped within them.
To group components by placing them into a container,
- Add a container to the UI. If you are working in
null
or XYLayout
, you can drag to size it.
- Add each component to the container, making sure the mouse pointer falls within the container's boundaries. (The status bar at the bottom of the AppBrowser displays which container your mouse is over.) You can drop a new component from the component palette, or drag an existing component into the new container. As you add components, they appear inside the selected container in the UI designer and under that container in the component tree.
Tip: If you want the components to stay where you put them, change the container's layout to null
or XYLayout
before adding any components. Otherwise, the size and position of the components will change according to the layout manager used by the container. You can change to a final layout after you finish adding the components.
Adding menus, dialogs, and database components
Components that do not descend from java.awt.Component
, such as menus, dialogs and database components, are treated differently from UI components during class design. They are represented on the component palette, but when you add them to your class, they are visible only in the component tree. They also use different designers. You can select them in the component tree to change their properties in the Inspector or double-click them to open the associated designer.
Menus
To add menus to your UI,
- Click one of the following menu bar or pop-up menu components on the component palette:
- Swing containers tab
JMenuBar
JPopUpMenu
- AWT tab
MenuBar
PopUpMenu
- Drop it anywhere on the component tree or in the UI designer. Notice that it is placed in the component tree's
Menu
folder.
- Double-click the menu component in the component tree to open the menu designer, or right-click it and choose Activate Designer.
- Add menu items in the menu designer.
- Attach events to the menu items by using the Inspector or manually typing the code.
- Close the menu designer by double-clicking a UI component in the component tree.
For details on creating menus, see "Designing menus" in Building Applications with JBuilder.
Dialogs
The Dialog wizard is a feature of JBuilder Professional and Enterprise.
There are two ways to add dialogs to your project:
- Use an existing one from the component palette.
- Create a custom one using the Dialog wizard in the object gallery (File|New).
To add an existing dialog,
- Select one of the dialog components, such as
JFileChooser,
on the component palette. You'll find them on the Swing Containers tab and on the More dbSwing tab in the Enterprise and Professional editions.
- Drop it on the
UI
folder in the component tree.
Note: Depending on the type of dialog, it is placed in either the UI
folder or Other
folder of the component tree.
- Select any dbSwing components in the component tree and change the
frame
property to this
so they are visible at runtime.
- Attach events to the associated menu item that will surface the dialog at runtime. Use the Events tab in the Inspector or create the source code manually.
To create a custom dialog with the Dialog wizard,
- Choose File|New and double-click the Dialog wizard icon in the object gallery.
- Name your dialog class and choose the base class from which you want the class to inherit:
javax.swing.JDialog
or java.awt.Dialog
- Click OK to close the dialog box. A shell dialog class is created in your project with a
Panel
added so it is ready to design in the UI designer.
- Complete any UI design desired, then attach events to the menu items that will surface the dialog at runtime.
For information on how to hook up menu events to dialogs, see "Working with events". The JFileChooser
, FontChooser
, and JColorChooser
dialogs are demonstrated in the tutorial "Building a Java text editor".
Database components
This is a feature of JBuilder Professional and Enterprise.
Database components are JavaBean components that you never see in the UI. These components, located on the Data Express page of the component palette, control data and are often attached to data-aware UI components.
To add a Database component to your class,
- Select the Data Express tab of the component palette and click the desired component.
- Drop it on the component tree or in the UI designer. Although the component is not visible in the UI designer, it appears in the
Data Access
folder in the component tree.
- Modify any properties and add event handlers as with other components.
To use the column designer,
- Select the Data Express tab on the component palette.
- Add a component with columns, such as a
TableDataSet
or a QueryDataSet
.
- Click the
icon beside it in the component tree to expand the tree and double-click the <newcolumn> node to open the column designer.
- Close the column designer by double-clicking another non-database component in the component tree.
For complete information about using Database components, see "Developing database applications" in the Database Application Developer's Guide.
Adding additional containers to your project
The object gallery contains wizards for adding new containers, such as frames and panels, to your project. Choose File|New to open the object gallery, select the icon for the type of container you want to add, and click OK. A new, designable class of that type will be created in your project.
Changing the look and feel of your UI
JBuilder includes the Java Foundation Classes (Swing) graphical user interface (GUI) components. All of JBuilder's UI components are based on Swing architecture, which give you the capability of specifying a look and feel for a program's user interface. You can take advantage of this Java feature to create applications that will have the look and feel of a user's native desktop. You can also ensure a uniform look and feel in your applications across platforms with the Java Metal Look & Feel.
You have several choices of look and feel available to you in JBuilder depending on which platform you use:
When you create an application or an applet using the JBuilder wizards, the following code is automatically generated in the class, Application1.java
or Applet1.java
for example, that runs your program.
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
For example,
Application:
//Main method
public static void main(String[] args) {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
}
catch(Exception e) {
}
new Application1();
}
Applet (when base class is javax.swing.JApplet)
:
//static initializer for setting look and feel
static {
try {
//UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
//UIManager.setLookAndFeel(UIManager.getCrossPlatformLookAndFeelClassName());
}
catch(Exception e) {
}
}
}
JBuilder uses the following method to set the program's look and feel.
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
This method automatically detects which platform is running your program and uses that look and feel for your program.
Note that the line of code for the look and feel statement is inside the try/catch block. This is necessary for it to compile.
You can change the runtime look and feel for your program by changing the code in the UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
method to:
UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
or
UIManager.setLookAndFeel("com.sun.java.swing.plaf.motif.MotifLookAndFeel");
Important: If you know you want your runtime look and feel to be Motif, then be sure to use Motif in the UI designer so you can see the end results. For example, Motif puts more space around components such as buttons.
To preview a particular look and feel in your UI design,
- Open the UI frame file and select the Design tab to open the UI designer.
- Right-click in the UI designer and choose Look And Feel.
- Select the look you want from the menu list.
The UI designer repaints to display the selected look and feel. It does not change your code.
Important: Changing the look and feel in the UI designer does not change your code. This is only a preview in the UI designer and does not affect the look and feel at runtime.
Serializing components in the UI designer
Serializing an object is the process of turning it into a sequence of bytes that is neither a .java nor a .class file. That sequence of bytes can be saved as a file on a disk or sent over a network. When a request is made to restore an object from a file, or on the other end of a network connection, the sequence of bytes is deserialized into its original structure.
For JavaBeans, serialization provides a simple way to save the initial state for all instances of a type of class or bean. If the bean is serialized to a file and then deserialized the next time it's used, the bean is restored exactly as the user left it.
Warning:
Use extreme caution when serializing components. Don't attempt it until you know exactly what it entails and what the ramifications are.
For more information about serialization, refer to Sun's article, "Object Serialization", at http://java.sun.com/j2se/1.3/docs/guide/serialization/.
Fast track to serializing
JBuilder makes it easy to serialize JavaBeans in the UI designer. First, modify the bean using the Inspector to give it any settings you want to keep. Then follow these steps:
- Select and right-click the component in the component tree and choose Serialize from the pop-up menu.
A message box displays, showing you the path and name for the new serialized file. It has the same name as the original component and a .ser extension.
- Click OK to create the serialized file. The following occurs:
- A confirmation dialog box appears if the file already exists.
- The .ser serialization file is created starting at the first directory named on the Source Path, and it creates the appropriate package subdirectory path (for example
myprojects/java/awt
).
- The serialization file is added to your project as a node so it can be deployed with your project.
- JBuilder copies the .ser file from the Source Path to the Out Path during compiling.
The next time you instantiate that bean using Beans.instantiate()
, the .ser file is read into memory.
Serializing a this
object
The rule for serialization is simple: to serialize, you need a live instance of the object you want to serialize. This presents a problem for a this
object, because it is not instantiated the same way as components added to the UI designer. Therefore, you need an alternate way to get a live instance of this
.
Of course you can serialize in code, but you generally serialize an object after you have used a RAD tool (like an Inspector) or a customizer to make changes to it.
The following example shows how you can serialize a this
UI frame. You can modify these steps to serialize any type of object, such as a panel
, class
, dialog
, or menu
.
- Open your project and create the class you want to serialize. (
Frame1.java
, for this example).
- Save and compile it.
- Open another file in your project that already has a class in it which can be, or has been, visually designed in JBuilder. (
OtherFile.java
in this example).
- Select
OtherFile.java
in the project pane, and create the following field declaration (instance variable) inside its class declaration, after any other declarations:
Frame1 f = new Frame1();
- Click the Design tab to open the UI designer for
OtherFile.java
.
- Right-click the "f" instance variable in the
Other
folder in the component tree, and choose Serialize. A message box appears, indicating the path and file name for the new serialized file.
- Click OK.
To use the serialized file when you instantiate Frame1
in your application, you need to instantiate it in the Application file using Beans.instantiate()
, as follows.
- Change the constructor for
Application1.java
from
public Application1() {
Frame1 frame = new Frame1();
//Validate frames that have preset sizes
//Pack frames that have useful preferred size info, e.g., from their layout
if (packFrame)
frame.pack();
else
frame.validate();
frame.setVisible(true);
}
to
public Application1() {
try {
Frame1 frame = (Frame1)Beans.instantiate(getClass().getClassLoader(), Frame2.class.getName());
//Validate frames that have preset sizes
//Pack frames that have useful preferred size info, e.g., from their layout
if (packFrame)
frame.pack();
else
frame.validate();
frame.setVisible(true);
}
catch (Exception x) {
}
}
- Add the following import statement to the top of
Application1.java
:
import java.beans.*;
Using customizers in the UI designer
Part of the JavaBeans Specification says that a JavaBean can name its own customizer, which is an editor especially tailored for this class of object. During design time in JBuilder, any JavaBean that has a customizer will cause a new dialog to appear when you right-click the component in the component tree and choose Customizer. This dialog is a wrapper around the customizer that lets you modify the object like you would in a property editor invoked from the Inspector. The presence of a customizer does not preclude the presence of the JBuilder Inspector. The JavaBean will hide any properties it does not want the Inspector to display.
One way to persist the results of a customized bean is through serialization. Therefore, whenever you commit the customizer, JBuilder will prompt you to save the object to a new .ser file (or overwrite the old).
- If a bean is loaded with
Beans.instantiate()
in the UI designer and is further modified by the customizer, it can be saved again, either over the old name or into a new file.
- If a bean is loaded with
Beans.instantiate()
in the UI designer and is further modified by the Inspector, JBuilder still uses its old technique of writing Java source code for those property modifications. This means a customized (and serialized) bean can be further modified with the Inspector.
JBuilder attempts to generate code for any property changes the customizer makes. Depending on how closely the customizer follows the JavaBeans specification, this may or may not be sufficient. Some sophisticated customizers make changes to the object that cannot be represented in code, leaving serialization as the only way to save the changes.
See also:
Keyboard shortcuts in the UI designer
Below are keyboard shortcuts you can use when designing your applications in JBuilder:
Keystroke |
Action |
Shift+Drag |
Drag a rectangle around multiple components to select them in UI designer. |
Ctrl+Click |
Individually select/deselect multiple components in component tree or UI designer. |
|
|
Ctrl+X |
Cut a selection from the UI designer or the component tree to the Clipboard. |
Ctrl+C |
Copy a selection to the Clipboard from the UI designer or the component tree. |
Ctrl+V |
Paste the contents of the Clipboard into the UI designer or the component tree at the location of the cursor. |
Click+Drag |
Drag the component to a new location. |
Ctrl+Drag |
Drag a copy of the selected object to a new location. |
Ctrl+Arrow |
Move the selected component one pixel in the direction of the arrow. |
Ctrl+Shift+Arrow |
Move the selected component eight pixels in the direction of the arrow. |
Shift+Drag |
Limit the move to orthogonal directions (up, down, right, left or at 45 degree angles). |
Alt+Drag |
Drag a component into a parent container. |
Ctrl+Z |
Undo the most recent action. Can use repeatedly for undoing multiple successive actions. |
Ctrl+Shift+Z |
Redo the most recent undo. Can use repeatedly for redoing multiple successive undo's. |
Ctrl+Del or Del |
Delete the selection. |
|