﻿ MobilitySVGComponents - NetBeans Wiki


SVG based Personal Information Manager created with Netbeans Mobility


You will need the NetBeans IDE 6.5 Java bundle that includes the Java ME module.

  1. Download and Install the Java bundle of the IDE


This tutorial shows you how to create a MIDlet using the SVG designer and how to use SVG components in the Netbeans Java ME runtime library. This approach provides better support for creating a compelling UI on mobile platforms using SVG technology. You can use the SVG editor in the Visual Mobile Designer that is part of NetBeans for authoring SVG elements from scratch and creating a UI form based on SVG images using components from the runtime library.


Here is result project that could be run via Netbeans http://wiki.netbeans.org/attach/MobilitySVGComponents/SVGPersonsManager_MobilitySVGComponents.zip


  1. Create new Mobility MIDP project.
    1. Name it SVGPersonsManager
    2. Don't create Hello midlet.
  2. Create MIDlet .
    1. Create java package
    2. Name it "manager".
    3. New File > MIDP > Visual MIDlet
    4. Name it Manager
  3. Connect MIDlet started event with SVG Form.
    1. Open "Flow" view ( it is opened by default ) for "Manager" Midlet and drag and drop SVG Form to this view.
    2. There will be an additional result of this action : Netbeans SVG Components will be added automatically in your configuration ( in projects explorer ) .
    3. Press left mouse button on "Started" command inside Mobile Device icon and connect the command with SVG form by releasing mouse button over the form.
    4. There will be one more form in this example. So let's create second SVG form. Connection between first and second form will be done later.
    5. The picture represents result of described actions http://wiki.netbeans.org/attach/MobilitySVGComponents/flow1_MobilitySVGComponents.jpg
  4. Now you your MIDlet has containers for SVG Components. But we need SVG files that contain visual representation of components. This representation will be placed in SVG file.
  5. Create new SVG file
    1. New File > Other > SVG file
    2. Name it "persons".
  6. Create one more SVG file for second SVG form and name it "details".
  7. Fill "persons" SVG file with two SVG components.
    1. Open "persons.svg" in SVG editor with "View" pane.
    2. Unlock image via popup menu ( it allows to edit image ).
    3. Drag and drop from palette "List" component.
    4. Resize it.
    5. Drag and drop from palette "Button" component.
    6. The picture shows result of described actions. http://wiki.netbeans.org/attach/MobilitySVGComponents/persons_MobilitySVGComponents.jpg
  8. Fill "details.svg" with other set of SVG components
    1. Drag and drop from palette "Label" component.
    2. Change its text to "Name:" ( this can be done in visual designer but also via direct XML editing ).
    3. Drag and drop from palette "Text Field" component.
    4. Drag and drop from palette "Radio Button" component.
    5. Drag and drop from palette "Label" component.
    6. Rename it to "Country:"
    7. Drag and drop from palette "Combobox" component.
    8. Drag and drop from palette "Button" component.
    9. Change its text to "<Back"
      1. Go to XML source , find generated XML snippet for this button.
      2. There should be two XML tags for text: one has suffix "_stext" in its id and other "_text".
      3. Change "OK" to "&lt;Back" inside both tags.
      4. Also change "x" attribute value for these tags to "10" and "9" respectively.
    10. Drag and drop from palette one more "Button" component.
    11. Change its name to "Save".
    12. The pucture shows result. http://wiki.netbeans.org/attach/MobilitySVGComponents/details1_MobilitySVGComponents.jpg
  9. Now switch to "Manager" MIDlet , "Screen" view. You will see svgForm on device screen.
  10. Change "Title" property value to "Persons".
  11. Set persons.svg file for this form.
    1. Double click on form, SVG Image dialog will be opened.
    2. Press "Add" button. "svgImage1" resource will be added.
    3. Choose path to "persons.svg" file in "Image Path" combobox .
    4. The picture shows result http://wiki.netbeans.org/attach/MobilitySVGComponents/svgImage_MobilitySVGComponents.jpg
    5. Press "OK" and close dialog.
  12. Add and set one more svg image resource ( for second form ).
    1. Go to "Flow" view.
    2. Double click on second form "svgForm1".
    3. "Screen" view will be opened with second form on device screen.
    4. Set "Title" property for this form to "Details".
    5. Double click on form, SVG Image dialog will be opened.
    6. Press "Add" button. "svgImage2" resource will be added.
    7. Choose path to "details.svg" file in "Image Path" combobox .
    8. Press "OK" and close dialog.
    9. Check "Manager.java" MIDlet source code. There should be generated getters for both SVG Forms , SVG Images and also for SVGList , SVGButton.
  13. Let's connect first and second form.
    1. Open "Flow" view.
    2. "svgForm" now contains "svgButton" SVG Component recognized.
    3. Connect via mouse ( press and release left mouse button ) "svgButton" and "svgForm1".
    4. Also first button on second form should switch display to the first form. So let's connect in the same way "svgButton1" and "svgForm".
    5. Here is connection result http://wiki.netbeans.org/attach/MobilitySVGComponents/connected1_MobilitySVGComponents.jpg
    6. Source code for handling button pressing will be generated. This code switch one form to another.
    7. One can check logic of source code by inspecting "public SVGButton getSvgButton()" and "public SVGButton getSvgButton1()" methods.
  14. Now we can implement logic of MIDlet.
    1. First of all we need storage and informational objects for our UI mobile application. Let's use two Java classes with source code below

package manager;


* This class is object for managing.

public class Person {

   public Person( String name , String country , boolean male ){
       this.name = name;
       this.country = country;
       this.male = male;
   public String getName(){
       return name;
   public String getCountry(){
       return country;
   public boolean isMale(){
       return male;
   public String toString(){
       return getName();
   public void setCountry(String country) {
       this.country = country;
   public void setMale(boolean male) {
       this.male = male;
   public void setName(String name) {
       this.name = name;
   private String name;
   private String country;
   private boolean male;


package manager;


* This class is storage of information.

public final class Storage {

   public static Person[] getPersons(){
       return persons;
   public static String[] getCountries(){
       return countries;
   static {
       persons = new Person[] {
           new Person("John" , "US", true),
           new Person("Mary" , "France", false),
           new Person("Kris" , "Canada", true)
   private static String[] countries = {"Canada", 
       "France" , "UK" , "US"};
   private static Person[] persons ;


    1. Now modify method "getSvgForm()" with the following code snippet ( after "// write post-init user code here" comment )
            * Initialize collection and put into this 
            * collection objects for managing.
           Vector vector = new Vector();
           Person[] persons = Storage.getPersons();
               vector.addElement( persons[I] );
            * Create extended list model based on collection and set it for SVGList
           SVGList.ListModel model = new ExtListModel(vector);           
           getSvgList().setModel( model );
    1. Create missed nested class ExtListModel.
    * Model that allows to notify about changes in its content.
   private class ExtListModel extends SVGList.DefaultListMoldel {
       ExtListModel(Vector data ){
       public void fireDataChanged() {
    1. You will need to add imports for classes and interfaces from "org.netbeans.microedition.svg" package here.
    2. Represented code snippet allows to see on first SVG form list of available persons in our storage.
    3. The result of button's pressing will be the second form with information for chosen person.
  1. Add the following source code after comments "//Some action before switch" in "getSvgButton()" code implementation:
Object selected = null; // Determine object that was selected at SVGList when button was pressed. SVGList.SelectionModel model = getSvgList().getSelectionModel(); for (int i = 0; i < getSvgList().getModel().getSize(); i++) { if (model.isSelectedIndex(i)) { selected = getSvgList().getModel().getElementAt(i); } } // Based on selected person second form will show details. if (selected != null){ setDetails( selected ); }
  1. Add the following source code after comments "//Some action after switch" in "getSvgButton1()" code implementation:
                   // Notify UI in case of list changes
  1. Add missing method "setDetails" with following implementation:
   private void setDetails(Object obj) {
       final Person person = (Person) obj;
       SVGForm form = getSvgForm1();
       // set text to person name into text field
       // set person's country in combobox
       // Choose radio button accroding person's sex
       if (person.isMale()) {
       } else {
       // Set "save" action on "Save" button
       getSvgButton2().addActionListener(new SVGActionListener() {
           public void actionPerformed(SVGComponent arg0) {
               save( person );
   // Just store new data into person object
   private void save( Person person ){
       person.setMale( getSvgRadioButton().isSelected() );
       person.setCountry( getSvgComboBox().getSelectedItem().toString() );
       person.setName( getSvgTextField().getText() );
  1. Fix imports.
  2. This code allows to show the second form. But one needs to initialize components in this form.
    1. Insert the following code snippet into method "getSvgForm1()" after "// write post-init user code here"
           /* Assign labels for their components respectively.
            * Otherwise UP/DOWN arrow pressing will stop on SVGLabel
            * also. The calls below allow to avoid stopping on labels.
            * Corresponding component will be focused instead of
            * label focusing .
           getSvgLabel().setLabelFor( getSvgTextField() );
           getSvgLabel1().setLabelFor( getSvgComboBox() );
           // Put focus on text field.
            // Put countries that we know into vector of data   
            Vector vector = new Vector();
            for (int i = 0; i < Storage.getCountries().length; i++) {
            // Set combobox model based on our data
            comboBox.setModel(new SVGComboBox.DefaultModel(vector));
            /* Add two radio buttons into
             * the same button group 
            SVGButtonGroup group = new SVGButtonGroup();
            group.add( getSvgRadioButton());
            group.add( getSvgRadioButton1());
  1. Run project.
  2. These pictures shows result of MIDlet execution. http://wiki.netbeans.org/attach/MobilitySVGComponents/personsForm_MobilitySVGComponents.jpg http://wiki.netbeans.org/attach/MobilitySVGComponents/detailsForm_MobilitySVGComponents.jpg
Not logged in. Log in, Register
