Adding Components


Whether you are building in SWT or Swing, most of the operations are similar. You can add components either by using the component palette, or by the context-menu options.

1) Component Palette: Choose one of the tabs, then click on the button representing the component/control you wish to add. When you move the mouse over your form, or over the Outline view, the cursor will change to a cross-hair when you are allowed to drop your new component or control. If you are not allowed to drop your component (eg, you are not allowed to add anything to a Button) the cursor will change to the "not allowed" cursor. To cancel the add operation, find somewhere where the cursor is "not allowed" and click the mouse.

Remember that sometimes it will be easier to add components to the Outline view (in cases where the current components take up all available space in a container, or when adding menu items)

You can determine whether the component palette is shown, by going to the "Windows->Preferences->Jigloo" preferences page.


2) Context-menu: right-click on the component in either the editor or in the Outline view, and choose from the menu options:

You can determine whether that part of the context menu is shown by going to the "Windows->Preferences->Jigloo" preferences page.



In either case, you will be asked to name the component (a default name will be provided for you). Also, if the component has text or image properties, if it is being added to a container which uses layout constraints, or is a container itself, you will be able to specify all these things using the dialog which will appear:



You can turn off the use of this dialog using the "Window->Preferences->Jigloo GUI Builder" preferences panel, in which case the component will be immediately added with the default name.

After adding the component, you may want to resize it - simply click and drag an edge or corner of the blue border around the component.





Adding Custom Components and Layout managers

<>
To add a custom component (a visual Swing class which extends JComponent or an SWT class which extends Widget) click on the "Custom" tab in the component palette. If you have not previously added any custom classes, there will be a single "bean" icon in the palette with a tooltip of "Add Custom Component/Control...". Select this icon, then click on the form. A Dialog will appear into which you can start typing the name of the custom class. A list of possible matches will appear below where you are typing and you can select your class. Note that your custom class must be contained in your project, or in a project referenced by your project.

After adding your class, an icon will be added to the "Custom" palette. The tooltip for the icon will let you know which class that icon represents.

By default, a "coffee bean" image will represent your custom class. But if you have created a BeanInfo class for your custom class, and defined an icon for it, then that icon will be used both in the "Custom" palette and in the Outline view. However, an icon defined in BeanInfo may not show up in Eclipse 3 unless you over-ride the loadImage method like this:
public Image loadImage(String imgUrl) {
    try {
        super.loadImage(imgUrl);
        URL url = getClass().getClassLoader().getResource(imgUrl);
        if(url != null)
            return new ImageIcon(url).getImage();
    } catch (Exception e) {
        e.printStackTrace();
    }
    return null;
}		 ** You need to override the loadImage method because Eclipse 3+ sets a ContentHandlerFactory for URLConnections which doesn't seem capable of handling gif images, and so the url.getContent() method in the SimpleBeanInfo loadImage method does *not* return an ImageProducer, and hence the method does not return an image. The above method, however, does work in Eclipse 3.0+ because it does not depend on the url.getContent().

You can add custom layout managers in exactly the same way as custom components. They will not appear in the "Custom" palette, however, but in the "Layouts" palette.

You can organize the custom components and layouts shown in the Swing or SWT "Custom" and "Layouts" palettes by using the Jigloo Preferences Page.

Selecting components


To select a component, click on it in the GUI editor, or in the Outline view.

Multi-selecting elements (CTRL key and selection marquee).
You can hold CTRL down when selecting elements in the form editor and this will multi-select the elements.

In addition, you can hold SHIFT down while dragging the mouse and a red rectangle (a selection marquee) will appear which you can drag around all the elements you wish to select (see figures). Note that to select an element you only need to intersect it with the marquee. When multiple components are selected, the properties they have in common will be shown in the "GUI Properties" view. Then any properties you change, or any resizing or moving or copy/cut/pasting you do will apply to all selected elements.

 Special Case: Menu components
The only cases where components cannot be selected in the GUI editor are with any menu component (JMenu, Menu, JMenuItem, MenuItem etc) which is not a direct child of a menu bar. These can only be selected using the Outline view.


Setting/Resetting Properties


All the editible properties are displayed in the "GUI Properties" view. Here you can set properties with text, color, font, image, number, boolean, point, rectangle, field and Swing Border values.  Properties with more complex property types will need to be set with your own user code, without the help of Jigloo. Once a property is set, the property name will appear with an asterisk after it.

If multiple components are selected, setting a property in the "GUI Properties" view will set it for all selected components.

To reset the property to it's initial value (and to cause the generated code to *not* set that property) right-click on the property name and choose "Restore Default Value". Alternatively, you can just delete the line that sets that property in the code.

If the component has a text property (such as a button's name or a tabbed panel's label) then double-clicking on that component will open a small text box in the middle of that component which will allow you to edit the text:

Changing the ordering of components


To move a component up or down inside a container, you can either drag it around in the Form editor or in the Outline view. You can simply drag-and-drop single or multiple components around inside a container or transfer them to a different container. By holding the CTRL key down (on Windows & Linux) or ALT (on a Mac) you can also copy the selected component(s). Alternatively, you can use the "Move Up" and "Move down" right-click options for that component.

To change the order of tabbed panels inside a tabbed folder you need to use the Outline view.

Transferring (and copying) components to different containers


You can transfer components using either the Form editor, or the Outline view. To transfer a component from one container to a different one, select the component(s) and drag them over the desired container. The container will be highlighted with a green border (if using the editor to do the transfer). On releasing the mouse the component(s) will be removed from their original container and placed in the new container. By holding the CTRL key down (on Windows & Linux) or ALT (on a Mac) you can also copy the selected component(s).

Renaming Components


To rename a component, you can refactor it in the java code, or use the "Rename" right-click option in the Form editor or Outline view. This will save the current configuration (and the corresponding Java code) so that it can rename the component and any references to it which might occur in the Java code.