Full Representation of Rich SVG Components in Visual Mobile Designer

This document may change during the implementation of this feature.

This document is continuation this document about Rich SVG Components. Read more here



This document is overview of several new SVG related features over the Mobility Visual Designer, SVG Composer and Netbeans Java ME SVG libraries.


Motivation is to extend support for Rich SVG Components in Visual Designer to provide better and more flexible interaction with users.


Biggest challenge in implementation of this feature is synchronization underlying SVG file with Designtime state of the Visual Designer.


In version 6.5 SVG components are not editable using Visual Designer. To change parameters of SVG Components it is necessary to edit source code of created Midlet or use Mobility SVG Composer. Next version of Netbeans Mobility should contain improvements which move part of the functionality from SVG Composer to the Visual Designer. Basically most of the features available for MIDP Form and MIDP Form's Items should be available for SVGForm and SVG Components. Major part of the UI designing should be done inside of the SVG Composer but Screen Designer should allow to do some sort of easy add/remove components from the SVG file. List of improvement elements of VMD:

  • Flow Designer
  • Mobility Navigator
  • Properties Window
  • Screen Designer
  • Palette
  • New Runtime Components

Flow Designer

All components responsible for flow of the application should be available in Flow. Currently only one component responsible for Flow is SVG Button. Rest of components are available from Navigator.

Mobility Navigator

In version 6.5 only two SVG Components are visible in SVGNavigator: SVGForm and SVGButton.In next version The Mobile Navigator should show a representation (list) of the components added and recognized by the VD inside of the SVGForm. Functionality of this feature should be very similar to the MIDP Form. Behavior of the components should be similar to the MIDP Form's Items. Screenshot below shows new feature marked with red square.

Properties Window

In version 6.5 it's not possible to edit any SVG COmponents properties except SVGForm. New version should give possibility to use standard Properties Window to modify various aspects of Rich SVG Components. This feature will require direct interaction of Mobility Properties with SVG file. For example task like setting text should be available directly from Inplace Editors as well from Custom Property Editors. Parameters accessible from Properties Window should not interact with SVG image file assigned to the SVGForm, they should use Rich SVG Components API and change value through generated source code. Properties editors Set of properties available in VD based on the SVG Component:

Common properties for all components:

  • Focusable - Boolean


  • Text - String (enhancement in API to enabled this feature)


  • Text - String


  • Text - String
  • Selected - Boolean


  • Text - String
  • Selected - Boolean


  • Model - most likely some simple Model (Custom Component) for ComboBox


  • Model - most likely some simple Model (Custom Component) for List


  • Minimum - int
  • Maximum - int
  • Value - int


  • Model - most likely some simple Model (Custom Component) for Spiner


  • Text - String
  • Editable - Boolean
  • CaretVisible - Boolean - will not be present in properties because this method is called on focus event automatically. So its setting right after text field instantiation is unneeded.

Screen Designer (should be in M3)

In version 6.5 Screen Designer does not allow to any interaction with SVGForm or SVG Components except for read only viewing of the SVGForm UI. Next version should allow to selection displayed components as well simple add/remove components in SVGForm.

Feature description

Screen Designer should allow users adding and removing SVG Components from underlying SVG file. Resizing or free movement of components should be disabled. Adding of components should be allowed only based on the strict rules like in the MIDP Form and Form's Items. New component should be added at the end of the svg file. Position of the component should be calculated based on the position of the component which is situates in lowest possible place in the svg image. Synchronization of the document should be done through DOM XML structure. Implementation of the Undo and Redo should be handle through structure of DOM XML as well as rendering using Perseus. More advanced operation should be achieved through SVG Composer.


Full set of Rich SVG Components should be available from SVG Composer:

List of components avialiable in SVG Composer:

Category SVG Form Components

  • Button
  • Label
  • RadioButton
  • CheckBox
  • ComboBox
  • List
  • Slider
  • Spinner
  • TextField

New Runtime Components

New components to support Models for CheckBox, ComboBox and Spinner. Currently it's not clear if all of those components should have model components in designtime.

Improvements (should be in M3)

Adding Move Up and Move Down buttons to SVGImage custom property editor.

It's quite inconvenient to use popup menu for reordering SVG components. If we have a number of components and we need to move the last one to the top of the list of recognized components, we need to right-click an item, then click Move Up menu command, right-click the item moved up and again Move Up menu command. Two clicks per move. With the buttons it would be 2 clicks for the first move and one click for every other. By adding 2 buttons we can, among other things we discussed earlier, make a number of clicks 2 times less.

contact: Karol Harezlak

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo