Contents
The main area of SEditor is a split pane with the gallery (left) and the layout tree area (right).
Gallery
The gallery contains all GUI elements (components, layout managers, borders) that may be added to the component tree.
Among these elements are both primitive nodes without any child, for example <label>, and small subtrees,
for example <borlay> (border layout manager) with <p> childs for the layout regions.
The gallery may be easily extended by copying a node from the current layout tree to the gallery.
It is recommended to extend the gallery by frequently used parts of GUI layouts, so that these preconfigured elements
are immediately available when building a new GUI.
The contents of the gallery is loaded from the file gallery.xml.
It is permitted to modify this XML file outside the SEditor by an ASCII editor like notepad,
for example to change the order of elements. However, be careful not to violate XML syntax!
The tree area is the place where you build up the GUI.
There are several ways to select a node:
(1) clicking on the node with the mouse or using the keyboard to change selection. Clicking with the right mouse button
on a tree node pops also up the Node Menu. (2) searching and selecting the node by Main Menue - Search - Search by Name
(3) open the preview frame and click on the component with the Find Tool crosshair cursor.
The default setting is that SEditor displays the entire layout tree. To restrict the visible part of the tree to a
subtree see node menu - Tree View - Subtree.
The property dialog can be opened from the Node Menu. It belongs to the selected tree area node and serves to modify
the node properties. A help area of this dialog shows help information about the selected property item.
The help button leads to extended help about the selected node.
When the Set button is clicked, the new properties are saved - just in memory -, so when focussing other nodes and
returning to this node, the new properties will still be valid. This dialog is non modal and remains open when selecting
other nodes.
Some of the properties show a button with the label "..." when selected. Clicking on this button pops up another dialog
like a color chooser. For the "image" property, the Image Chooser Dialog will appear.
Properties that are common to most tree nodes are
- id: the application program will use this id to obtain a reference to the object represented by the node.
- and class: Each node (<grid>, <list>, <frame>, ..) is representing an object, typically a GUI component, a layout or a frame. To generate these objects (=targets), a default class (GridBagLayout, JList, JTree) will be provided. If you need an object that is a subclass of the default class,
set the "class" property to the fully qualified name of this class.
This frame displays a preview of the subtree starting at the selected node. "Preview" means: the Swing components and all their childs are created within the frame and (if the Find Tool is switched off) behave like in your application, so that you can for example enter text into editable text components.
Open the Preview Frame by selecting "Preview" from the Node Menu. It is possible to select any Swing component in the component tree to display the preview. However, in some cases, for example if you select just a JTextComponent or a JLabel, the preview will not be very useful. If the selection in the component tree is changed, the preview will still display the same subtree as before. To focus the preview to another node, you must select that node and launch the preview again from the Node Menu.
If properties of components are changed by the Property Dialog, that changes are immediately applied to the preview.
This is a tool to select a component in the Component Tree by clicking on that component in the Preview Frame. The tool is switched on/off by Main menu - Search - Find Tool or by the find button in the main menu bar. If it is on, the Preview Frame shows a crosshair cursor and clicking on a component in the preview causes the selection of the corresponding node in the tree area.
This dialog is used to select an image for nodes having "image" property like buttons. Two important points are:
- SEditor can find and display .gif and .jpg files (eg. for icons) only if they come from .zip or .jar files.
- The filename and path of these .zip and .jar files must be known by SEditor.
For this reason, the ImageChooser Dialog is used
- to include archives that should be searched
- and to select the desired image file.
To bring up the Image Chooser just to modify the archive search path, you must also select any of your nodes that has an image property and edit this property.
Some items appear also in the popup menu, thus see also the Node Menu.
File - New: A new file is opened.
File - Open: Opens an existing GUI definition for editing.
File - Recent Files: Shows a list of recent files for fast opening.
File - Save: Saves the current GUI file.
File - Save As: Saves the current file with a new filename.
File - Save Gallery: Saves the gallery if it has been modified.
File - Export As Java File: If the XML file has the filename "Demo1.xml", a .java file with the filename SMJdemo1.java will be created in the same directory. See "SMaker API Guide" about how this file can be integrated into your application.
Search - Find Tool: switches the Find Tool on and off, see "Find Tool"
Search - Search by Name: Displays a list of all nodes with a nonempty ID.
If an item in the list is selected, the corresponding node in the Tree Area is selected and becomes the current node.
View - Look and Feel: A dialog box pops up to allow selection of the look and feel of SEditor.
After changes the application must be restarted to switch to the new setting.
The node menu is opened by a right mouse button click on a node in the tree area.
Its menu items can also be found in the menu of the main frame. The items are:
Properties: Opens the "Properties Dialog" to modify parameters of GUI elements.
Preview: opens the preview frame for the selected node.
Tree View - Show Full Tree: in the tree area, the entire component tree, starting at the root is shown.
Tree View - Show Subtree: in the tree area, a subtree starting at the selected root is shown.
Tree View - Parent Subtree: in the tree area, a subtree, starting at the parent of the selected root is shown.
Child from Gallery: the selected gallery node (together with all its childs) is inserted as a child of the selected tree area node. This means: To build up the tree, select a node in the gallery (the node that should be added to the tree) and, select a node in the tree area (the node that should be the parent), and then click on this menu item.
Above from Gallery: the selected gallery node (together with all its childs) is inserted at the same hierarchy level, above the selected tree area node.
Below from Gallery: the selected gallery node (together with all its childs) is inserted at the same hierarchy level, above the selected tree area node.
Copy: copies the subtree starting at the selected node to the paste buffer. See also "Copy and Paste".
Cut: cuts the selected node and all its childs into the paste buffer.
Paste Child: pastes a subtree as a child of the selected tree area node.
Paste Above: pastes a subtree at the same hierarchy level, above the selected tree area node.
Paste Below: pastes a subtree at the same hierarchy level, below the selected tree area node.
Delete: deletes the selected node and all its childs.
Help: Displays help for the selected node.
This menu is opened by a right mouse button click on a node in the gallery.
The menu items are partially the same as in the Node Menu. Use the "Paste" menu to extend the gallery, pasting
nodes from the current report definition.
Help: Displays help for the selected node.
Paste Child: Pastes a subtree as a child of the selected tree area node.
Paste Above: Pastes a subtree at the same hierarchy level, above the selected tree area node.
Paste Below: Pastes a subtree at the same hierarchy level, below the selected tree area node.
Cut: Cuts the selected node and all its childs into the paste buffer. It is only possible to remove
nodes from the gallery that have been added by the user.
Change Node Label: Permits to change the label of a node. For example, if several versions of a <comp>
node have been added to the gallery, the label helps to distinguish among the versions.
To add a child node to the component tree, select the node you want to add in the gallery and the node
that should be the parent in the component tree, and from the Node Menu, select Child From Gallery.
A node can also be inserted at the same hierarchy level above or below the selected component tree node,
by clicking "Above From Gallery" or "Below From Gallery" in the Node Menu.
Copy and paste not only works within one instance of SEditor! It is also possible to
- copy and paste between different instances of SEditor,
- and to copy and paste between SEditor and an ASCII editor.
In the ASCII editor the nodes appear in pure XML format.
It's even possible to enter parts of the GUI definition in XML format in the ASCII editor and then paste
the XML code into the Tree Area of SEditor.
To display help for a node, select that node either in the gallery or in the tree area, open the Node Menu
(by a right mouseclick), and select "Help".
SEditor supports the following look and feel settings: (1) System, (2) Java ("Metal"), (3) Motif and, optionally (4) a custom look and feel which requires that you supply a starter class.The look and feel is selected from Main Menu – View – Look and Feel. After changing the look and feel the SEditor must be restarted.
To install a custom look and feel, perform the following steps:
- download and install the look and feel of your choice, for example the SkinLF from http://www.L2FProd.com/.
- Write a look and feel starter class. The class may be a direct subclass of Object, no interface implementation is required. However, it must implement the following method
public static void startLookAndFeel(String[] args)
SEditor uses the reflection API to search for that method. The purpose of startLookAndFeel() is to switch to the custom look and feel. In simple cases it may contain just one line of code:
UIManager.setLookAndFeel(...);
The args parameters come from the settings in the properties file (see step 3) and may be used if the custom look and feel needs additional parameters like a themepack. Inspect the code of SkinLookAndFeelStarter.java for details.
- Edit the file seditor.properties. You will find this file in the working directory of SEditor and it contains the current user settings for the SEditor application. Add the following line:
lookAndFeelStarter=startername arg1 arg2 ...
where startername is the fully qualified name of the starter class and arg1, arg2, etc. are optional parameters. Example:
lookAndFeelStarter=vnas.smaker.SkinLookAndFeelStarter xplunathemepack.zip
|
