Skip Headers
Oracle® Java Micro Edition Software Development Kit Developer's Guide
Release 3.3 for Eclipse on Windows
E37550-03
  Go To Table Of Contents
Contents
Go To Index
Index

Previous
Previous
 
Next
Next
 

23 JSR 226: Scalable 2D Vector Graphics

JSR 226, the Scalable 2D Vector Graphics API (SVG), supports rendering of sophisticated and interactive 2D content. This chapter describes how to work with SVG capabilities in Java ME SDK.

Scalable Vector Graphics is a standard defined by the World Wide Web Consortium. It is an XML grammar for describing rich, interactive 2D graphics.

The Scalable Vector Graphics 1.1 specification (available at http://www.w3.org/TR/SVG11/) defines a language for describing two-dimensional graphics in XML.

SVG Tiny (SVGT) is a subset of SVG that is appropriate for small devices such as mobile phones. See http://www.w3.org/TR/SVGMobile/. SVGT is a compact, yet powerful, XML format for describing rich, interactive, and animated 2D content. Graphical elements can be logically grouped and identified by the SVG markup.

Java ME applications using SVG content can create graphical effects that adapt to the display resolution and form factor of the user's display.

SVG images can be animated in two ways. One is to use declarative animation, as illustrated in "Play SVG Animation." The other is to repeatedly modify the SVG image parameters (such as color or position), through API calls.

While it is possible to produce SVG content with a text editor, most people prefer to use an authoring tool. Here are two possibilities:

23.1 Running SVGDemo

This project contains MIDlets that demonstrate different ways to load manipulate, render, and play SVG content.

23.1.1 SVG Browser

The SVGBrowser MIDlet displays SVG files residing in the phone file system. Before running this demo, place an SVG file in your device skin's file structure. The default location is:

username\javame-sdk\3.3\work\devicename\appdb\filesystem\root1

For your device location, see "Oracle Java ME SDK Directories" and Table 7-1. Launch the demo. The application displays the contents of root1. Select your SVG file and choose the Open soft key.

23.1.2 Render SVG Image

Render SVG Image loads an SVG image from a file and renders it. Looking at the demo code you can see that the image is dynamically sized to exactly fit the display area. The output is clear and sharp.

23.1.3 Play SVG Animation

This application plays an SVG animation depicting a Halloween greeting card. Press 8 to pause, 5 to start or resume, and 0 to stop.

The SVG file contains a description of how the various image elements evolve over time to provide this short animation.

In the following code sample, the JSR 226 javax.microedition.m2g.SVGImage class is used to load the SVG resource. Then, the javax.microedition.m2g.SVGAnimator class can take all the complexity of SVG animations and provides a java.awt.Component or javax.swing.JComponent which plays the animation. The SVGAnimator class provides methods to play, pause and stop the animation.

Example 23-1 SVG File Example

import javax.microedition.m2g.ScalableGraphics;
import javax.microedition.m2g.SVGImage;
 
...
String svgURI = ...;
SVGImage svgImage = (SVGImage) SVGImage.createImage(svgURI, null);
SVGAnimator svgAnimator = SVGAnimator.createAnimator(svgImage);
 
// If running a JSE applet, the target component is a JComponent.
JComponent svgAnimationComponent = (JComponent) svgAnimator.getTargetComponent();
...
 
svgAnimator.play();
...
svgAnimator.pause();
...
svgAnimator.stop();

23.1.4 Create SVG Image from Scratch

This demo builds an image using API calls. It creates an empty SVGImage, populates it with a graphical content, and then displays that content.

23.1.5 Bouncing Balls

Bouncing Balls plays an SVG animation. Press 8 to play, 5 to start, and 0 to stop. If you press 8, pressing 5 resumes the animation. If you press 0, pressing 5 starts the animation from the beginning.

23.1.6 Optimized Menu

In this demo, selected icons have a yellow border. As you move to a new icon, it becomes selected and the previous icon flips to the unselected state. If you navigate off the icon grid, selection loops around. That is, if the last icon in a row is selected, moving right selects the first icon in the same row.

This demo illustrates the flexibility that combining UI markup and Java offers: a rich set of functionality (graphics, animations, high-end 2D rendering) and flexibility in graphic manipulation, pre-rendering or playing.

In this example, a graphic artist delivered an SVG animation defining the transition state for the menu icons, from the unselected state to the selected state. The program renders each icon's animation sequence separately into off-screen buffers (for faster rendering later on), using the JSR 226 API.

With buffering, the MIDlet adapts to the device display resolution (because the graphics are defined in SVG format) and still retain the speed of bitmap rendering. In addition, the MIDlet is still leveraging the SVG animation capabilities.

The task of defining the look of the menu items and their animation effect (the job of the graphic artist and designer) is cleanly separated from the task of displaying the menu and starting actions based on menu selection (the job of the developer). The two can vary independently provided both the artist and the developer observe the SVG document structure conventions.

23.1.7 Picture Decorator

In this sample you use the phone keys to add decorations to a photograph. The key values are:

Key Action

1

key shrink

2

key next picture

3

key grow

4

key help

5

key horizontal flip

6

key vertical flip

7

key rotate counter-clockwise

8

key previous picture

9

key rotate clockwise

#


display picker options


This demo provides 16 pictures for you to decorate.

Use the 2 and 8 keys to page forward and back through the photos.

To decorate, press # to display the picker. Use the arrow keys to highlight a graphic object. The highlighted object is enlarged. Press Select to choose the current graphic or press the arrow keys to highlight a different graphic. Press Select again to add the graphic to the photo. When the decoration is added you see a red + on the graphic, indicating it is selected and can be moved, resized, and manipulated.

Figure 23-1 Adding a Graphic

Description of Figure 23-1 follows
Description of "Figure 23-1 Adding a Graphic"

Use the navigation arrows to move the graphic. Use 1 to shrink the graphic, and 3 to enlarge the graphic. Use 5 or 6 to flip, and 7 or 9 to rotate. When you are satisfied with the position, press Select. Look for a green triangle. This is a cursor. Use the navigation keys to move the green triangle around the picture. When the cursor is over an object it is highlighted with a red box. Press Select. The red + indicates the object is selected and it can be manipulated or removed.

Figure 23-2 Highlighting a Graphic

Description of Figure 23-2 follows
Description of "Figure 23-2 Highlighting a Graphic"

To remove a decoration (a property), select an object, then click the Menu soft key and choose Remove prop.

23.1.8 Location Based Service

Launch the application. A splash screen (also used as the help) appears. The initial view is a map of your itinerary - a walk through San Francisco. The bay (in blue) is on the right of your screen. Press 1 to start following the itinerary. The application zooms in on your location on the map. Turn-by-turn directions appear in white boxes on the horizontal axis. While the itinerary is running, Press 7 to rotate the map counter-clockwise. Note, the map rotates and the text now appears on the vertical axis. Press 7 again to restore the default orientation. Press 4 to display the help screen.

Figure 23-3 A Location-Based Service Screen

Description of Figure 23-3 follows
Description of "Figure 23-3 A Location-Based Service Screen"

23.2 Running SVGContactList

This application uses different skins to display the same contact list information and a news banner. The skins feature different colors and fonts.

Select SVGContactlist(skin 1) or SVGContactlist(skin 2), then click Launch.

Use the up and down arrows to navigate the list of contacts. The selected name is marked with a special character (a > or a dot) and is displayed in a larger font.

Press > or the select button to see more information for the selected name. When you are in the detailed view you can traverse the detail entries using the up or down arrows.

Press < or the select button to return to the contact list.

Press the left soft button to go back to the demos MIDlet list and view another skin.