Exercise 2: Creating an SVG UI
(25 minutes)
We will create compelling SVG menus and forms for our MIDP Application using the tools provided by NetBeans without any need
for external editors. The SVG Composer allows us to compose an SVG Form from standard form components and the Visual Designer
will embed it into the application workflow.
Background Information
Steps to Follow
-
Create a new package called svg which will contain our SVG images.
Create a new SVG image called main_form
To do this open the New File dialog by selecting New > Other... in the contextual menu of the
svg package node.
Select Other > SVG File and click Next.
Type main_form as the file name and click Finish. The main_form is created in the
svg package and an empty image is opened in SVG Composer.
-
In the Palette tab at the right find the Form Components group and expand it.
Drag and drop the Label component and from the palette to the image view in the editor
as shown in the following screenshot.
In the Navigator window you can see that id = "label_0" was added to the main_form.svg xml image file.
-
Add two Button SVG Components using the same method we used in the previous step and place them as they are
shown in the screenshot.
-
Save your changes by clicking the Save All button on toolbar or type Ctrl+Shift+S.
Open the VisualMIDlet.java file created in the previous exercise.
-
Drag and drop the main_form.svg SVG image from project tree to the svgForm component in the Flow view
of the Visual Designer.
You can see svgButton and svgButton1 elements shown in the SVG Buttons section
of the svgForm component. When you Select svgForm you can also see the elements in the
SVG Components node in the navigator.
-
You can update the image connected to the svgForm component in the SVG Image Properties window.
To open the SVG Image property editor select svgForm in the editor and the image properties will open.
Click the ellipse button (button with three dots) next to SVG Image property value.
If you switch to Recognized SVG Components in the SVG Image property editor,
you can see all of the recognized SVG From Components. You can change their tab order here if needed.
-
Now switch to the Screen view of Visual Designer. and select svgForm from combo-box,
as it is shown in the screenshot.
When the svgForm preview is opened in the editor it allows you to see an approximate view of
the component on the device screen.
-
To change the Label text to something more descriptive select the label in the Screen view to
open it's properties and change the Text property value to Collect Blocks.
You can see the new value displayed in the Screen preview.
-
Use the same steps to change the svgButton text (left button) to Play
Hint: You can see the component's instance name in the Properties window or in the Navigator tree.
The component selected on the Screen view will be selected in the navigator view.
We also need to change the svgButton1 text (right button) to Exit
-
Use the same steps we used previously to create a new SVG Image called game_result.
-
Put two labels and one button on the image as shown in the screenshot and save your changes wen finished.
-
Connect the game_result with the svgForm1 component in the VisualMIDlet Flow view by
dragging and dropping game_result from the project tree to the svgForm1 component.
Note: The svgButton2 should be shown in the svgForm1 component and the svgButton2
and two SVG labels should be shown in the Navigator window.
- Open svgForm1 in the Screen view
Select the first label and change the text value in the Properties editor to "The Winner Is."
Note: For this application we don't need to change the other two SVG elements.
Now we can assign actions to the SVG Buttons we have open.
- Open the Flow view of VisualMIDlet.
-
If a user clicks the OK button in game_result form (svgForm1 component in the Visual Designer),
we want the the main_form SVG to be opened (svgForm component in the Visual Designer). To enable this behavior,
connect the svgButton2 action of the svgForm1 component to the svgForm.
- Connect the Exit button of the svgForm (svgButton1 action) to the Mobile Device. This will stop the MIDlet after
the Exit button is clicked.
- Clicking the SVG button Play should start the game. In order to connect the svgButton action to the game
we have to create a game to use in the Visual Designer. We'll do that in the next exercise.
The solution of this exercise is provided as a "ready to build and run" NetBeans project,
<lab_root>/solutions/exercise2/MobileGame.
Summary
In this exercise you saw how to create SVG Forms using the NetBeans SVG Composer and how to use them in the VisualMIDlet workflow.
Creating SVG images in the Composer is just a starting point because you can also open these images in your favourite SVG editor
and design them as you like.
Back to top
Next exercise
