Designing with Matisse4MyEclipse (Deprecated)
This tutorial introduces you to the primary Matisse4MyEclipse tasks for developing a Swing user-interface. In this tutorial, you will learn how to:
- Create a Matisse form
- Open the Swing/Matisse perspective
- Use the Matisse form editor
- Preview and test a Matisse form
- Add an event listener
- Customize the Matisse palette
- Edit Matisse properties
Duration Time: 20 Minutes
Don't have MyEclipse? Download Now
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.
Before beginning, familiarize yourself with key facts about working with Matisse4MyEclipse.
- Select File>New>Java Project.
- Enter the name of your Java project (e.g., Matisse_Example), and click Finish.
- Select File>New>Matisse Form.
- 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.
- 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
- 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.
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.
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.
Sizing an Element
Select the element on the form. Resize points appear. Drag a resize point to change the size.
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.
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.
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.
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.
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.
In the Source mode, you can see the empty method that was generated. Add your event handler code in this method.
You can also see where the event handler method is registered with the button.
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.
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.
- Create a new form to be added to the palette, and save it to a project.
- Click on the Matisse palette, and select Manage Palette.
- Select the Custom folder, and click Add Form.
- Navigate to the .form file you want to add to the palette, and click OK.
- Click OK to close Palette Manager. Your form is now available in the Custom folder.
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.
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.