Thursday Oct 02, 2008

Playing with SVG Rich Components in Netbeans Mobility 6.5

This time I'd like to show new feature of Netbeans Mobility 6.5 - SVG Rich Components support. The SVG Rich Components simplifies process of creation of Java ME SVG user interfaces. First part of this support is the SVG Composer which is part of Netbeans Mobility 6.5. Using this tool users are able and drag and drop SVG Components from palette to the SVG image. It's similar to building Swing/AWT UI using Netbeans GUI Builder but instead of using Java Swing/AWT components developers using special SVG Components. Users can chose from predefined components available in the Palette in section "Form Components". Screenshot below shows SVG Composer with few SVG Rich Components already added to the form (SVG image).

If you are interested in details of this technology you can find more information on netbeans wiki page:

SVG Rich Components Support in Netbeans Mobility 6.5

If you want to try this feature on your NB 6.5 installation - create new Java ME project then create SVG image (File > New > Other > SVG Image) and don't forget to "Unlock" SVG Image every time you are starting editing image in the SVG Composer (Right click on SVG image then click "Unlock" action).

When SVG UI image is ready and saved, users can use it in the Visual Midlet applications. New custom component "SVG Form" in the Visual Mobile Designer acts as a container for SVG UI images (You can find it in "SVG Components" Palette section). Simplest way to add SVG UI image to the Visual Midlet is to drag and drop SVG UI image file on SVG Form component in the Flow view or Screen Designer (Screen view) of the Visual Mobile Designer. Jave source code and necessary components should be generated automatically right after SVG UI image is drooped on SVG Form component. Screenshot below shows Flow of the Jave ME application with SVG Components including SVG Form. You can download this application at the end of this entry.

It is also possible to look up SVG UI image preview in the Visual Midlet Screen Designer.

Finally two screen shots of SVG Rich Components application running on WTK 2.5.2 and Nokia S40.

WTK 2.5.2

Nokia S40

You can download sample application here:

SVG Rich Components Sample

but you need to use recent build of Netbeans Mobility 6.5 to run it. Recommended version of Netbeans is "Java" because it contains GlassFish which is necessary to run this example.

Download Dev build of Netbeans

Friday May 09, 2008

Mobility Components Project Support and Tutorial

Since version 6.0 of the Netbeans Mobility it is possible to add Custom Components to the Visual Designer. Unfortunately it requires some knowledge of the Visual Designer architecture and could be difficult at the beginning. It'd be simpler if Netbeans could create all necessary files for Mobility Components. Thats way we decided to introduce new feature in incoming release of Netbeans Mobility: Custom Component Project Support. It helps to create and "inject" Java ME components into the Netbeans Mobility Visual Designer. Developers will have possibility to create Mobility Components Project straight from one of the categories in the New Project Wizard. The Custom Component Project Support will help to generate skeleton of the new Mobility Component including Component Descriptors, Component Producers and add another Mobility Components using wizards. If you'd like to read more about this feature look at this document:

Custom Component Project Support Specification

Final version will be available in Netbeans Mobility 6.5 and also in Netbeans daily builds.

Custom Components Project Support screenshoot

Some of you probably don't want to wait until Mobility 6.5 and maybe have some cool ideas for Mobility Components right now, in this case look at the following tutorial:

Mobility Visual Designer - Custom Components Tutorial

It contains information how to create component for Visual Designer, describes architecture of Visual Designer Components and also has example of the Custom Component project.

Stuff about Java ME, NetBeans Mobility, mobile devices and more...

Karol Harezlak is the Netbeans Visual Mobile Designer lead at Sun Microsystems


« June 2016