# Lab-5502: Your First Mobile Game

Expected Duration: 100 minutes
Contacts: Andrey Korostelev and Ivan Sidorkin

Introduction | Exercise 0 | Exercise 1 | Exercise 2 | Exercise 3 | Exercise 4 | Exercise 5 | Summary
Introduction Background Information Steps to Follow Summary ## 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 Step 1: Creating the main menu SVG Image 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`. Step 2: Connect SVG Images to the SVG Form component in the Visual Designer 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. Step 3: Customizing SVG Form Components 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` Step 4: Creating, connecting and customizing the second SVG Form Component 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. Step 5: Assigning actions to SVG Buttons 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