Understanding the Flow Designer

The Flow Designer visually represents the different paths that can be taken between your application's different screens. Using this view, you can add or remove screens, as well as the transitions between them. It is also possible to modify the properties of the screens and transitions.

Figure 14-11. Action dialog box

The Flow Designer is composed of four parts: the component palette, the Inspector, the Flow Design panel, and a property sheet. Following is a quick overview of these panels, as well as their respective capabilities.

Component Palette

The component palette (shown in Figure 14-12) contains groupings of all Java objects that can be added to your application with the designer. If an object does not exist in the component palette, it cannot be added to the application using the Flow Designer.

Figure 14-12. Component palette

The following categories are used:

Screens. Contains items for creating Alert, Form, List, and TextBox components.
Commands. Contains an item for each command type defined in javax.microedition.lcdui.Command. Commands are used as sources for transactions between screens.
Form Items. Contains items that can be added to screens.
Elements. Contains elements that can be added to List and ChoiceGroup components.
Resources. Resources that can be used by other items. Includes Font, Image, and Ticker.
Custom Components. Any custom components that you have added to the palette.

Special Components

The Visual Designer provides certain special components that can be used when creating applications and the standard MIDP components are not enough.

Splash Screen

Splash screen is a simple component that can be used to present logos during application startup cycle, for example. To create a splash screen, simply drag the SplashScreen component onto the Flow Design work space. Select it using the mouse and use the property editor to customize it. Image, Text, Text Font, and Timeout are amongst the most commonly used attributes.

Table

The table component is a custom component based on the MIDP CustomItem class and can be used to present data in a formatted table. The component can be used only for viewing data and it might not work properly with all real devices, as it is not fragmented and implementations of the CustomItem vary from device to device.

In order to use this component, you must first create a form and then add the Table component to the form by dragging it from the Palette window onto its icon. Using the Property Editor, you can set attributes such as fonts, preferred size, and title. You populate the table with data using your own custom code.

Wait Screen

The WaitScreen is a non-visual component that can be used as a junction box that splits the program flow. If the execute() method implemented in the get_simpleCancellableTask() method throws an exception, the program will follow the Failure route; otherwise, it will follow the Success route. The execute() method's code runs in a separate thread so the application does not freeze in the case that the task takes too long to complete.

To use the Flow Designer to create a program with a WaitScreen component as a junction:

Drag a Form component from the Palette window onto the Flow Design workspace.
Drag a ChoiceGroup item from the Palette window onto the Form component you just added.
Using the Inspector, expand the Form component, then the ChoiceGroup item and add two elements named Pass and Fail to it by twice right-clicking the Elements node and choosing Add Choice Element.
Drag WaitScreen and two Alert components onto the workspace.
Connect the components as shown in Figure 14-13.

Figure 14-13. Sample WaitScreen program flow
Using the Inspector, again select the ChoiceGroup item by clicking on it, and using the Property Editor, set the type to Exclusive.
Select the WaitScreen by clicking on it and then, again using the Property Editor, click on the Task item. This will bring up a simple Source Editor window. There you will type the following Java source code (everything starting with String and ending with ()); needs to be on the same line in the Source Editor. The only space in the line is between String and action).

   String    action=get_choiceGroup1().getString(get_choiceGroup1().getSelectedIndex(    ));    if (action.equals("Fail"))        throw new Exception("Failure");

When you run the program using your favorite emulator, you use the ChoiceGroup item to select an action, and then based on that, you will get a Fail or Pass Alert.

Inspector

The Inspector (shown in Figure 14-14) displays all objects that have been added to the visual design in a tree formation. The root node of the tree is the MIDP Design node with child nodes for Screens, Commands, and Resources. Any objects from these groups that have been added to the design appear under their respective group header nodes.

Figure 14-14. Inspector

If a node represents an object that can have action commands associated with it, it has an Assigned Commands group node containing each assigned action. Similarly, objects that support elements or items contain an Elements or Items group.

Selected objects in the Inspector are highlighted in Screen Designer or Flow Designer view (if the object appears in the currently active design view). Additionally, the object's properties are displayed in Property Sheet view.

Right-clicking a component node opens a menu consisting of standard node commands (Rename, Delete, Move Up, Move Down, and Properties).

Right-clicking the Action Command, Elements, or Items node opens a menu containing actions for adding a new node to the list or changing the order of the list.

Property Sheet

A standard property sheet is visible when the designer is open. This property sheet shows the editable properties for any object selected in Designer or Inspector view.

The property sheet contains all MIDP2 properties for the selected object. Additionally, there are some items specific to the source code and components, as described here:

Instance Name. The name of the object.
Action Source. When a transition is selected that is initiated with a command, this property appears. It defines which command object to use as the transaction source.
Lazy Initialized. Checkbox that determines when the component is initialized. If not selected, it is initialized when the MIDlet's startApp() method is invoked. If selected, it is initialized the first time the component is needed.
Action. Property that appears when an action command is selected. A special property editor is used to set this value.
Radio Buttons. Used to control which screen is shown when this transaction occurs. Selecting nothing means there is no target. Selecting Exit means the application will end when the transition is followed. Selecting Switch enables the target screen drop-down box, which can be used to select a new screen.
Target Displayable. Contains all screens available in the visual design. The selected screen is the one displayed when the command is invoked.
Forward Displayable. Select what will be displayed after an alert. Appears only when a connection is selected that targets an alert.
Additional properties are determined by what is supported by the associated object.
Several property types have special editors associated with them:
String Editor. A dialog box opens, containing a text box. Values entered in this text box are used as the property value. If the Use as Custom Code Expression checkbox is selected, the value entered in the text box is used as though it were Java code rather than as a static string. So, for example, entering getTitle() in an alert's Title property when Use as Custom Code
Expression is selected causes that component to be constructed with code like this:
```
alert = new Alert(getTitle(), "text", get_image2(), AlertType.INFO)
```
You must implement a getTitle() method for the component to work properly.
Image Dialog. Used to set the resource path for image resources. The Select Image list contains all images that will appear in the project's distribution JAR file. Selecting an image displays a preview of the image, as well as the dimensions, file size, and name of the file. Clicking OK sets the property to the path of the selected image.
Input Constraints. Selecting the Input Constraints property on TextBox objects opens the input Constraints dialog box. Use the radio button to specify the restrictive constraint setting and the checkboxes to specify any additional constraint modifiers.
Font. Editing the Font property on Font resources opens the Font dialog box. This dialog box allows you to specify which font to use. Selecting Custom from the main radio button enables the dialog box's font checkboxes; otherwise, the default or system font is used.
Layout. Editing the Layout property of any Form item opens the Layout dialog box. This dialog box allows you to specify properties that determine how the item will appear within the form.

Flow Designer

The main screen of the Flow Designer uses drag-and-drop to add and connect components in the MIDlet. All designs contain a Mobile Device element that represents the MIDlet's start point.

Displayable components (screens) can be dragged from the Palette window and dropped onto the Design screen. After a screen has been added, appropriate commands, elements, items, and resources can be added to it by dragging the object from the Palette window and dropping it on the screen.

Transition sources are displayed on the right side of the component to which they are attached. These are used to create transitions to different screens by selecting the transition source and dragging to the target screen. The connection is visualized in the design as a line.

Transitions can also be selected. Doing so paints the transition in a different color and displays the transition sources' properties in the property sheet.

Selecting a screen node highlights all transitions to and from that screen in a different color. Double-clicking a screen opens it in Screen Design view.

Toolbar

The toolbar of the Flow Designer has four items:

Snap to Grid. Toggles between displaying and hiding a dotted grid on the background of the designer page. Also determines whether screens snap to set locations or can be moved with complete freedom.
Realign Components. Realigns all existing screens to a grid pattern.
Zoom in. Zooms in on a selection.
Zoom out. Zooms out from a selection.