Note: Matisse4MyEclipse features are deprecated begining with MyEclipse 10.0. For Swing functions, it is recommended you use SWT/Swing Designer, which is compatible with your existing work files.

1. Create a Matisse Form

Before beginning, familiarize yourself with key facts about working with Matisse4MyEclipse.

1. Select File>New>Java Project.
2. Enter the name of your Java project (e.g., Matisse_Example), and click Finish.
3. Select File>New>Matisse Form.
4. Browse for your project’s src folder, enter a Java package name, type a Java class name for the form in the Name field, and select the JFrame template. The template is the type of interface you are creating.
   
   Note: the Java package is created for you if it does not already exist.
   
   Creating a new Matisse form
5. Click Finish. MyEclipse creates the form and its corresponding Java class, or form backing class. The form opens in the Form editor.

Upon completion of this example, your project contains the following elements:

• com.matisse.form Java package
• MatisseForm.form, the XML Matisse description file
• MatisseForm.java
• swing-layout-1.0.3.jar, added to the project and its build path

Note: swing-layout-1.0.3.jar is required to support the advanced layout manager of the Matisse Form editor.

Project structure

2. Design Using the Design Mode

The Matisse Form editor supports 2 working modes: a visual design mode and a source-editing mode. To change modes, click the tab of the desired mode in the bottom left corner of the editor.

Adding Elements to a Form 

In the Matisse palette, click the element you want to add to the form, and click the the Form editor to drop the element.

Dropping a UI control onto the Matisse form

Positioning an element

Drag the element to the new location on the form. As you move the element around the form, guidelines appear, helping you align and space elements on the form.

Using guidelines when positioning an element

Sizing an Element

Select the element on the form. Resize points appear. Drag a resize point to change the size.

Sizing an element

Editing Text

Double-click the text region of text elements, such as labels, text fields, and text areas to edit text contents. Position the cursor in any location within the text region, and enter or delete text.

Editing text

2.1 Editing Element Properties

Elements have properties that control their size, position,color, text styling, and behaviors. To modify a control’s properties, use the Properties view. By default,this view is present in the bottom-right corner of the Swing/Matisse perspective. The Properties view enables you to view and edit the properties of the element selected in the Matisse Form editor.

If the Properties view is not present, open it by right-clicking an element, and selecting Properties.

Most properties can be edited by double-clicking the property’s value cell, and entering the new value. Special property-selection and editing windows appear for properties such as fonts, colors, alignment, and even long text strings. Click to open the property’s editor window.

Opening a property editor window

3. Design Using the Java Source Mode

The Source mode is implemented using an integrated version of the Eclipse Java editor to provide a consistent and familiar Eclipse-based Java source editing experience. When in the Source mode, the standard and advanced Eclipse Java editing features are available such as code assist, formatting, and source refactoring.

The Form editor generates the Java source code required to produce the form layout at run-time. While in design mode, as elements are added, removed, resized, or their properties are edited, Matisse is actively generating the corresponding Java source code. Matisse identifies regions of generated source code using special one-line comments that include the substring pattern  ” //GEN-<the context>” to delineate the region. When you first switch to Source mode, some code regions such as the #initComponent method are initially collapsed using code folding.

Note: Do not edit code between the special //GEN- comments if you plan to use the Source mode to revise the form layout. Custom edits between these marker comments might be lost as new code is generated when you use the visual form designer.

Matisse Form editor – Source mode

4. Previewing a Matisse Form

The Matisse Form editor enables the quick preview of static form content. Click the Preview icon on the Form editor toolbar to launch a preview version of the form.

Note: The Preview mode is limited to viewing the user interface. No event handlers are active. To test an active version of the user interface, see Testing a Matisse Form.

Previewing a Matisse form

5. Adding an Event Listener

Event Listeners enable event-handling code to be associated with UI controls to process their events. The Form editor provides utilities that generate stubbed out event listeners and registers them with their target UI control. The following example illustrates creating an Action Listener for a JButton. 

Right-click the button in the form, and select Event>Action>actionPerformed. This generates an empty actionPeformed listener method into which you add your code, and registers the method as the target callback for the button.

Creating an event listener

In the Source mode, you can see the empty method that was generated. Add your event handler code in this method.

Event handler method

You can also see where the event handler method is registered with the button.

Registering the event handler method with the button

6. Testing a Matisse Form

When you create a Matisse form, the Matisse Form wizard generates a main() routing for top-level user interface components such as JFrames and Dialogs. This enables them to be launched and tested as stand-alone Java window applications.

In the Explorer, right-click the form’s backing Java class, e.g., TestForm.java, and select Run As>Java Application. This launches the form in Java virtual machine.

Matisse form launched as Swing application

7. Customizing the Matisse Palette

The Matisse Palette can be extended to include your own custom forms and widgets. After you create a form, you canadd it to the palette through a palette manager, and then your custom forms are available when designing any new form.

1. Create a new form to be added to the palette, and save it to a project.
   
   Form in a project you would like to reuse
2. Click on the Matisse palette, and select Manage Palette.
   
   Opening the Palette Manager
3. Select the Custom folder, and click Add Form.
   
   Adding the form to the Custom folder
4. Navigate to the .form file you want to add to the palette, and click OK.
   
   Selecting the form file
5. Click OK to close Palette Manager. Your form is now available in the Custom folder.
   
   Custom form included in the palette

Your custom form is available to be added to your forms like any other palette element.

Note: After custom sub-forms and Java beans are added to a form, they are not refreshed during a workspace session. Their images in the Form designer are not updated when the original forms are modified. To get them to update, a workspace restart is required.

8. Editing Preferences

Matisse4MyEclipse preferences enable you to modify behaviors such as opening the default perspective, code generation styles, and code folding.  To access Matisse4MyEclipse preferences, select Window>Preferences. Expand MyEclipse, and select Matisse4MyEclipse/Swing.