---

Tutorial About SVG and JSR226 in NetBeans Mobility Pack 5.5.1

IN PROGRESS

'it's a DRAFT only'

SVG and JSR226 Basics

SVG

SVG - Scalable Vector Graphics is an XML grammar for rich, dynamic 2D graphics. Read more

• SVG Tiny Specification by W3C
• Intro to SVG (with samples)

JSR226

JSR226 - Scalable 2D Vector Graphics API is an optional package for the Java Platform, Micro Edition (Java ME) platform that provides an API for rich, animated and interactive 2D graphics.

• Intro to JSR226 (with samples)|https://meapplicationdevelopers.dev.java.net/uiLabs/IntroTo226.html]

What Is It Good For?

The SVG provides way to define rich 2D images.

1. The images are scalable -> fits to any device display
2. The images are vectors -> the image quality is still great
3. The images are described by XML -> their size is small.
4. The images have animations

The Scalable 2D Vector Graphics API (JSR226) enables creation and manipulation of SVG images. You can dynamically change the image properties, look etc. You can create the SVG image from scratch.

Create Your Own Application

NetBeans Mobility Pack provides set of custom components for SVG for its Visual Designer. These components are SVGImage, SVGAnimationWrapper, SVGSplashScreen, SVGWaitScreen, SVGMenu, SVGMenuElement.

To create an application with SVG images you don't have to write a simple line of code. You can just drag and drop those SVG components then assign a svg image to them and your application will display the svg images. You will need an emulator platform/SDK/device that supports the Scalable 2D Vector Graphics API (JSR226), of course. The generic platform is bundled with NetBeans Mobility Pack 5.5.1 (Sun Java Wireless Toolkit 2.5.1)

Steps to follow

• Create New Project
  1. Create File > New Project. The category is Mobile and Project is Mobile Application
  2. Click Next button
  3. Name the project SVGMobileApplication. Unselect the Create Hello MIDlet checkbox. Click Next button.
  4. Check that the Emulator Platform is Sun Java Wireless Toolkit 2.5.1 for CLDC (or another platform that supports JSR 226). Click Finish button. You won't be able to compile/run the project if your platform doesn't support the JSR226. You can easily check what optional packages, MIDP and CLDC version are available in your project in project properties at Platform category.

• Create New Visual MIDlet
  1. Right click on the project you just created and select *New > File/Folder*. A New File wizard appears.
  2. Select MIDP category and Visual MIDlet file type. Click Next.
  3. Enter *SVGMobileApplication* as the name of the file. Use *mysvg* as package name. Click Finish button.
  4. New visual midlet is created in your project and the file opens in Editor

• Add SVG Images to Project

We have to add the SVG images to our project to be able to use it in the application. There are images prepared by NB designer that we will copy to the sources of the project.

1. 1. Copy the svg files from the zip to your project

• Add SVG Components to the Visual MIDlet

Lets create the UI of the application

1. 1. Add *SVGSplashScreen* component
   2. Add *SVGWaitScreen* component
   3. Add *SVGAnimatorWrapper* component
   4. Add *SVGMenu* component
   5. D'n'd drop images to the components...

• Create Application Flow

• Run Application

• Modify the Application to Be Dynamic

There is element with ID=dataTime