Symbian Java Platform 3 updated to feature JSR 226 (SVG)

My Rating Score

Back

November 24, 2006 Symbian Java Platform 3 updated to feature JSR 226 (SVG)	[Back]

Sony Ericsson's Symbian Java

Platform 3 (SJP-3) is strengthened with the addition of the Scalable 2D Vector Graphics API (JSR 226). Besides outlining how the W950, M600 and P990 UIQ 3-based phones will support JSR 226, we present the JSRs supported by SJP-3, outline the graphical and animation elements used in SVG, provide an overview of JSR 226 and give a code example to create a SVG document dynamically.

The Sony Ericsson Developers' Guidelines for Java ME CLDC are updated and available to download here>>

Symbian Java Platform and JSR 226

Sony Ericsson uses a platform approach to Java ME implementation allowing developers to focus on a platform rather a variety of different product names. Two platform branches exist, supporting Symbian OS (SJP) and non-Symbian OS, Java ME (JP) based phones respectively. The platforms are implemented through an evolutionary approach in order to ensure forwards compatibility between platform versions.

The current SJP-3, used in the UIQ 3-based W950, M600 and P990 series of Sony Ericsson phones, has been strengthened to include support for JSR 226 (Scalable 2D Vector Graphics API for J2ME).

The W950 Walkman® phone will ship with JSR 226 support whilst the M600 messaging device and P990 smartphone will be retro-actively fitted with JSR 226 support from software revision R5A05 and R4A05 respectively.

W950 with a JSR 226 example.

As a developer this can pose a fragmentation problem in ensuring that the end-user has the JSR 226 package. The recommended approach is to limit JSR 226 dependant content to the W950 initially whilst, through software releases offered through Sony Ericsson Update Service, JSR 226 support will permeate through to M600 and P990 end-users. The browser user-agent includes a software version that can be used to identify phones able to support JSR 226 content.

The updated Symbian Java Platform branch currently consists of three platforms:

Sony Ericsson Symbian Java platform	Features	Phones
SJP-1	CLDC 1.0, MIDP 1.0	P800 series
SJP-2	CLDC 1.0, MIDP 2.0, WMA 1.0 (JSR 120), MMAPI (JSR 135), Java APIs for Bluetooth (JSR 82)	P900 and P910 series
SJP-3	CLDC 1.1, MIDP 2.0, JTWI (JSR 185), Nokia UI API 1.1, WMA 1.0 (JSR 120), WMA 2.0 (JSR 205), MMAPI (JSR 135), Mobile 3D Graphics API (JSR 184), PDA optional packages (JSR 75), Java APIs for Bluetooth (JSR 82), Java ME Web Services (JSR 172), Scalable 2D Vector Graphics API for J2ME (JSR 226)	P990, M600 and W950 series

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is an open-standard vector graphics language that allows images to be described using XML. In 2001, the World Wide Web Consortium (W3C) approved SVG as a standard for XML vector graphics on the web. Since it is based on XML and is an open standard, SVG has become a component of many industry initiatives and Enterprise solutions

SVG comes in three profiles:

Full (for desktop applications)
Basic (for portable devices like PDAs)
Tiny (for mobile phones)

Typically, Basic and Tiny are labeled together as SVG Mobile. The mobile subset of the SVG specification, called SVGT or SVG Tiny, has been adopted by the 3GPP, OMA (Open Mobile Alliance) and other leading mobile-standardization bodies. The most notable difference between SVG Tiny and the full SVG profile is the limited interactivity support.

There are three types of graphic objects components used in the composition of an SVG:

1. Vector graphic shapes
Vector graphics rely on geometrical primitive objects such as lines, circles, polygons. Since they are based on geometry, vector graphics can be easily manipulated without lose of accuracy.

<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

2. Raster Graphics
Raster graphics contrast vector graphics by representing images as a collection of pixels, such a typical digital photograph.

<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="300" height="80"
style="fill:rgb(242,135,62);stroke-width:1;
stroke:rgb(49,85,159)"/>
<image width="200" height="40" xlink:href="semc_cmyk_b_s.jpg" />
</svg>

3. Text
Text elements can be incorporated into an SVG graphic in a smiliar manner using the text attribute,

<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="300" height="80"
style="fill:rgb(242,135,62);stroke-width:1;
stroke:rgb(49,85,159)"/>
<image width="200" height="40" xlink:href="semc_cmyk_b_s.jpg" />
<text x="0" y="60" font-size="20" fill="black">Sony Ericsson</text>
</svg>

Animation and interaction of SVG is supported in two ways:

1. Animation elements
The SVG language includes animation elements that allow motion paths, effects and transformation to be applied.

<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="myanimation">
<text x="0" y="0" font-size="20" fill="black">Sony Ericsson</text>
<animateMotion path="M 0 0 L 100 100" dur="3s" fill="freeze"/>
</g>
</svg>

2. Document Object Model (DOM)
DOM is the interface that allows for programmatic access to the individial elements and content of an XML document with methods for retrieving and setting properties of the elements. Through DOM, SVG allows for animiation and interaction using Javascript (ECMAScript) or SMIL (Synchronized Multimedia Integration Language).

Interaction is supported through the use of event handers, such as onclick or onmouseover attributed to SVG components or groups of componenets.

Scalable 2D Vector Graphics API for J2ME (JSR 226)

JSR 226 is a small package closely aligned to the capabilities of the SVG Tiny format and designed to meet the needs of the Mobile 2D Graphics (M2G) API. M2G provides support for loading and displaying SVG Tiny files, manipulating SVG Tiny content and creating SVG Tiny content, such as dynamic data-driven graphics.

M2G is built upon a subset of SVG Micro DOM (uDOM) corresponding to SVG Tiny 1.1, itself a subset of SVG and XML DOM for SVG Mobile (Tiny and Basic profiles). It is extended with javax.microedition.m2g for usage with the Java ME platform.

M2G consists of four basic packages:

1. javax.microedition.m2g
ScalableGraphics: This is the fundamental class for 2D rendering
ScalableImage: This class represents a scaleable image
SVGImage: SVGImage extends ScaleImage to support SVG Tiny
SVGAnimator: The SVGAnimator is essentially an animated SVG player that is used with the Canvas
SVGEventListener: The platform-specific SVG event listener interface can be implemented to receive events such as keyPressed or PointerPressed when a user interacts with the SVG
ExternalResourceHandler: The resource handler is used in conjunction with the SVGImage class. It can be implemented to allow resources, such as referenced raster graphics, to be loaded from a JAR or other source

2. org.w3c.dom
Document: The Document interface represent an SVG document
Node: Node interface describes nodes in an SVG document tree
Element: Element extends the Node as a means to ensure compatibility with DOM specification
DOMException: General exception class for DOM errors

3. org.w3c.dom.svg.events
EventListener: By implementing the event listener the application can receive DOM related events, as opposed to platform event such as keyPressed handled by SVGEventListener
EventTarget: An object, such as an SVGElement, can implement the EventTarget interface to allow the object to receive an EventListener
Event: The Event interface represents a DOM event (click, DOMActivate, DOMFocusIn, DOMFocusOut)

4. org.w3c.dom.svg
SVGElement: The SVGElement interface represents an element in the SVG document. It allows traversing elements in the SVG document and reading and manipulate the traits of properties associated with an SVGElement
SVGAnimationElement: SVGAnimiationElement extends SVGElement to support animated SVG elements with support for timing
SVGLocatableElement: SVGLocatableElement extends SVGElement to support "drawable" elements such as <rect>, <circle> and <line>. It provides support to get the bounding box of the drawable element
SVGMatrix: The SVGMatrix interface represents a matrix for affine transformation (linear mapping to other 2D coordinates that preserves the "straightness" and "parallelness" of lines). It can be used to read and modify the values of the transform attribute such as inverse, multiply, rotate or scale
SVGPath: SVGPath represents the path data attribute which describes the line and curve elements of a vector shape
SVGPoint: SVGPoint reprenets the X and Y coordinates of a point
SVGRect: The SVGRect intereface represents a rectangle shape
SVGRGBColor: A datatype interface to store the red, green, and blue value of an elements color traits
SVGSVGElement: The SVGSVGElement interfaces represents the <svg> attribute of the SVG document allowing manipulate of rotation, scaling and animation time sequence and creation of SVGRect and SVGPath objects within the SVG document
SVGException: General exception class for the SVG package

Developing for JSR 226

The Sun Wireless Toolkit 2.5 (beta 2) includes runtime and compilation support for JSR 226 and three example applications. The Sony Ericsson SDK for the Java ME Platform provisions compile time through the add-on 1 package.

The code snippet below shows a simple HelloWorld type application, creating an SVG document dynamically

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

import javax.microedition.m2g.ScalableGraphics;
import javax.microedition.m2g.SVGImage;

import org.w3c.dom.Document;
import org.w3c.dom.svg.SVGElement;
import org.w3c.dom.svg.SVGSVGElement;
import org.w3c.dom.svg.SVGRGBColor;

public class HelloSVG extends MIDlet {

protected SVGImageCanvas svgCanvas = null;

public HelloSVG() {

}

public void startApp() {
    SVGImage svgImage = SVGImage.createEmptyImage(null);
    Document doc = svgImage.getDocument();
    SVGSVGElement svg = (SVGSVGElement) doc.getDocumentElement();
    SVGElement textElement = (SVGElement) doc.createElementNS("http://www.w3.org/2000/svg", "text");
    textElement.setTrait("#text", "Hello JSR-226 !");
    textElement.setFloatTrait("x", 50.0f);
    textElement.setFloatTrait("y", 50.0f);
    SVGRGBColor textColor = svg.createSVGRGBColor(0, 0, 0);
    textElement.setRGBColorTrait( "stroke", textColor);

svg.appendChild(textElement);

svgCanvas = new SVGImageCanvas(svgImage);
Display.getDisplay(this).setCurrent(svgCanvas);
}

public void pauseApp() {
}

public void destroyApp(boolean unconditional) {
}
}

class SVGImageCanvas extends Canvas {

protected SVGImage svgImage;

protected ScalableGraphics sg = ScalableGraphics.createInstance();

    protected SVGImageCanvas(final SVGImage svgImage) {
        this.svgImage = svgImage;
    }

    public void paint(Graphics g) {
        g.setColor(255, 255, 255);
        g.fillRect(0, 0, getWidth(), getHeight());
        sg.bindTarget(g);
        svgImage.setViewportWidth(getWidth());
        svgImage.setViewportHeight(getHeight());
        sg.render(0, 0, svgImage);
        sg.releaseTarget();
    }
}

More information:

Back

My Rating Score

Select a bookmark:

Member Login

Select a bookmark:

Member Login

Themes Creator tool

Video interviews and tutorials