IV. User's Guide to Form Editor

Introduction
Form Types
Manipulating Components
Using Layouts
Design/Real Mode
Using Grid
Generated Code
Loading & Saving Forms
Form Templates

IV.1 Introduction

    Form Editor is central part of visual development in Xelfi - it implements the dersign-time behaviour: dragging components, generating code, persistence.

IV.2 Form Types

    A Form is a visual representation of class that is being visually created.
    Xelfi supports visual development of these objects:

    • Application Form - a Frame with " main" method
    • Frame Form - class extending java's Frame class - "Main-window" behaviour
    • Dialog Form - class extending java's Dialog class - "window-dependent-on-another-window" behaviour
    • Applet Form - class extending java's Applet class

IV.3 Manipulating Components

IV.3.1 Adding Components to Form

    User selects component type to add in ComponentPalette or in Add Component menu (Design | Add Component).
    Then the cursor is in add mode and depending on component type:

    • non-visual components: by clicking on form, new component of selected type is added to the form
    • menu components: by clicking on form, new menu bar is added to form menus - if it is first menu added, it is set as form's menu and becomes visible (for details about using menus see: Using Menus)
    • visual components:
      • by clicking on form, new component of selected type (with default size) is added to container on which the click occured
      • by clicking and dragging, new component of selected type (with size as dragged) is added to container on which the click occured
        Note: however, the dragged size will be used only with Absolute Layout - other layouts control sizes of components themselves

    By holding "shift" during adding component (during the click is enough), it is possible to add multiple components of selected type - otherwise the palette is switched back to selection mode after adding component.

IV.3.2 Selecting & Dragging Components

    For selecting/dragging components, the cursor must be in selection mode. To select component:

    • with AWT component (component from AWT tag in ComponentPalette - except Panel) - click on the grey border at bottom of the component with left mouse button
    • with other components - click on the component with left mouse button

    Clicking with shift allows to select/deselect multiple components.

    If the component is in container with layout that allows dragging (currently Absolute Layout only), by dragging component it is possible to change its position in its parent container - in tbis version of FormEditor it is possible to drag only one component (dragging is not allowed when multiple components are selected). It is also possible to change component's position in Component Inspector by editing its X and Y properties.

IV.3.3 Resizing Components

    If the component is in container with layout that allows dragging (currently Absolute Layout only), by dragging one of 8 small rectangles in borders of selected component, it is possible to change size of this component. It is also possible to change component's size in Component Inspector by editing its Width and Height properties.

    This is example of Frame with Absolute Layout (and Grid visible) and one selected AWT component (button). The blue border around it marks it as selected and the small blue rectangles are used for resizing it. The grey border at the bottom of the button is on all AWT components - it is used for selecting the component.

IV.3.4 Using Non-visual Components

    Non-visual component are components that do not have visual representation during design time. Selecting non-visual component must be done in Choice at the top of Component Inspector.

IV.3.5 Using Menus

    It is possible to add multiple menus to Frame/Application form (other form types do not support menus). The first menu added is selected as form's main menu. It is possible to select one of added menus as the form's main menu in property Menu in Component Inspector.

IV.3.6 Components Order

    It is possible to alter order of components in container after they are added to it. It is necessary for instace in Grid Layout, where order of components determines their position in grid. To set components order, select desired container/form (only this container must be selected) and clcik on menu Components Order (Design | Components Order). A Dialog for setting order of components appears:

    The listbox contains names (with their types) of all components in selected container. By selecting some component in listbox and pressing buttons Up or Down it is possible to change its position in the order.

IV.4 Using Layouts

    Preferred way how to place components in its parent container is to use layouts. It is, however, possible to use null layout (in Xelfi called Absolute Positioning or Absolute layout) which operates with absolute positions of components (e.g. component is place at position [13,18] with size [20,10]).

    It is possible to change layout manager by editing its layout property in ComponentInspector. All the components that are already placed in the container are laid out with this new layout and so are the newly added components. Some layouts have also properties which could be changed on layout page of ComponentInspector.

    Note: To change layout properties, some of the components that are managed by that LayoutManager must be selected (e.g. when there is panel with BorderLayout and one button - to change direction in which the button is placed, you must select the button, go to the layout page in Component Inspector and then you can change the direction property.

    One nice feature of FormEditor is, that when you switch between AbsoluteLayout and some other Layouts, the size and positions of components in AbsoluteLayout stays the same even if the layout changes it.

IV.5 Design/Real Mode

    One of great features of Form Editor is a Real Mode. This is mode in which form behaves as close as possible as during final run-time - i.e. buttons push themselves when clicked, choises pull down, etc. In real mode the AWT components look as during run-time (in design mode, they have some border at bottom of it which is used to select and drag the component).

    To change between design and real mode menu item Real Mode (Design | Real Mode) is used.

IV.6 Using Grid

    Each container (i.e. forms, panels) with layout that allows dragging components (currently Absolute Layout only) supports grid - i.e. rounding component positions to multiples of some number on x and y axis.

    Default values are [10, 10] - that is component positions can be multiples of 10 in both x and y coordinates. It is possible to change this individually for each container by setting its Grid property in ComponentInspector.

    It is also possible to globally allow/forbid showing of grid in menu Show Grid (Design | Show Grid).

IV.7 Generated Code

    When the form is created, it generates skeleton of java class for the form. In the generated code, 2 types of blocks are created:

    • guarded blocks in which it is not allowed to change contents - their background is different from user blocks
    • user blocks where user can write his own code

    Some parts of code are regenerated on-the-fly when user changes some component's properties, adds component, sets new event handler, etc.

    When a new event handler is set (on event page of ComponentInspector) Xelfi automatically shows editor at first position of user block in the new event handler.

IV.8 Loading & Saving Forms

    Forms are saved into file named <Class Name>.form (e.g. TestFrame.form). The generated class is also saved in the file <Class Name>.java (e.g. TestFrame.java), but when loading form, it is completely generated again. So all the changes, user might have done outside Xelfi to the ".java" file are discarded. Use Class Browser to open forms.

IV.9 Form Templates

    It is possible to save some form as template for future use - e.g. AboutBox, Message Box, etc. The form is saved completely with all the components, properties, events and user code. Initially, there are only empty templates for all the form types. To save form as template select menu Save As Template (System | Save As Template).