CREATING SVG MENU FOR NETBEANS
By: Meshack K. Musundi
The following is a tutorial on how to create an SVG menu, using Beatware Mobile DesignerTM, for use with netbeans SVG menu component.
Before starting off ensure that you have downloaded and installed Beatware Mobile DesignerTM. A trial version is available at www.beatware.com
Go through the Beatware Mobile DesignerTM user guide that is available once you install Beatware. This will assist you in getting an idea of the features of the mobile designer application.
Open Beatware Mobile DesignerTM. You are presented with a Movie Creator dialog. If the Movie Creator dialog doesn’t appear, click on File > New.
- Type Mobile Menu in the Name field of the dialog.
- Type 240 in the Width field and 320 in the Height field.
- Leave the Background as default (white) and select SVG Tiny 1.1 in the Profile dropdown menu.
- Click on Create.
Now you are going to design your own custom button that will be available in the Sharing tab in the Inspector panel.
- Click on the Button component in the Toolbox. If the New Button dialog appears select the ‘Design a New Button’ radio button and click on Ok.
- Click on the canvas to create a new button component. Don’t worry if the canvas is blank you shall deal with that next. Notice that the button component is shown in the Navigation menu of the Animation panel.
- Select the Rectangle tool in the toolbox and draw a rectangle whose width is longer than its height. You can set the width and height after you have drawn the rectangle. To do this, select the Object tab in the Inspector panel. Set the width to 24 and the height to 160.
- Select the Text tool. Select the Text tab in the Inspector panel and set the text height to 14. Set the Text Fill color to Black.
- Click in the middle of the rectangle. Type START.
- Click on the Arrow tool in the Toolbox. Your text is selected. Hold down the shift key and select the rectangle. Both the text object and the rectangle will now have a red boundary.
- Click on the Alignment tab in the Inspector panel. Ensure that the ‘To Canvas’ checkbox is not selected.
- Click on ‘Center Horizontally’ and ‘Center Vertically’. These actions center the text in the rectangle object. Click away from the canvas to deselect the objects.
You are now going to set the features for the Up State and Over State of the button. The Up State features will be visible when focus is not on our button while the Over State features will be visible when the focus is on the button.
- Ensure that ‘Up State’ is selected in the Animation panel. Select the Arrow tool if it isn’t selected. Select the rectangle. Set the Fill color of the rectangle to yellow (#ffcc00).
- Click on the Stroke tab and set the Stroke width to 2. Set the stroke color of the rectangle to black if it isn’t so. Click away from the canvas to see the result.
- Select the rectangle again and click on ‘Over State’ in the animation panel.
- Set the Fill color of the rectangle to light grey (#cccccc).
- Select the text and set the Text Fill color to red. You can select the text object by selecting it from the Object List in the Animation panel.
- Click on the Up one level button in the Animation panel. It is next to the Navigation menu. You are moved to the scene that contains the button.
- Select the button component in the object list. Right click the button component and click on ‘Rename’ in the pop-up menu. Type menuItem_0 as the new button name and press Enter.
Note: By naming your button as menuItem_0, it will by automatically recognized as an SVG menu element in netbeans.
Now you’ll add two more buttons to your menu. This shall be done using the button component that you just created that is currently available in the Sharing tab.
- Click on the Sharing tab in the Inspector panel. The button component is either the only component available or the last one in the list.
- Drag and drop the button component from the sharing tab onto the canvas.
- Drag and drop the button component from the sharing tab again to create another button for our menu.
- Select the first button that we dragged onto the canvas from Sharing i.e. our second button in the canvas. Click on the Component tab.
- In the Button label field type HELP.
- Rename the button component to menuItem_1 in the object list
- Select the last button component on the canvas and change its label to QUIT. Rename it as menuItem_2.
- Select the first button. Hold down the shift key and select the other two buttons to perform a multiple selection.
- Click on the Alignment tab. Select the ‘To Canvas’ checkbox. Select ‘Spread Vertically’ in the Distribute section. Select ‘Center Horizontally’ in the center section.
- Using the down arrow key nudge the buttons till they are at about center of the canvas. Click away from the canvas.
- Select each of the buttons from the Navigation menu. Click ‘No’ in the resulting dialog. Notice that they have the same properties for ‘Up state’ and ‘Over state’.
- Save your menu to the directory of your choice. It will be saved with an .md extension.
You’ll now export the file in SVG format for use in netbeans.
- Click on File > Export > SVG. In the Export dialog, in the SVG Options section, deselect the ‘Use GZip Compression’ checkbox, and the ‘Generate HTML’ checkbox. Select the ‘use JPEG’ radio button in the Images section and the ‘Override Export IDs’ and ‘Fit to Screen’ checkboxes.
- Click on Ok. In the Save As dialog box select the directory where you’d prefer to save the file and click on Save.
- Start netbeans. Create a new Mobile Application project. Click Next.
- Set ‘My Mobile’ as the project name and set the locations you’d like to save your project. Leave the checkboxes selected. Click Next.
- Select your preferred platform (the default settings will work just fine).
- Click Finish. The Visual flow designer for your project is shown.
- Copy the SVG file that you created into the src folder of the project. Switch back to netbeans. Your SVG file should be added to your project.
- Drag a Back Command from the Command section of the Palette onto the form component in the visual flow.
- Drag and drop an Alert component from the Displayables section of the Palette. Rename it Help (You can do this by right clicking the Alert component and selecting rename).
- Drag and drop the SVG Menu component from the SVG Components section of the Palette. Rename it myMenu.
- Drag the SVG file from the Project tree and drop it onto the SVG menu component. The menu elements are automatically recognized.
- Select Started and drag the arrow to myMenu component.
- Select menuItem_0 and drag the arrow to the form component.
- Select the backCommand in the form component and drag the arrow to myMenu component.
- Select menuItem_1 and drag the arrow to the Alert component.
- Select menuItem_2 and drag the arrow to Mobile Device, our starting point.
- Right click alert component (Help) and select Edit. Double click the < text not specified > section in the alert screen and type, ‘Help yourself!’ Press Enter.
- Run the project
- Launch the application. The menu is displayed. Scroll up and down the menu.
- Select START. The form is shown. Go back to the menu.
- Select HELP. The help alert is shown. Select Done to go back to the menu,
- Select QUIT to exit the application.
Beatware Mobile Designer and Beatware are registered trademarks of Beatware, Inc.