4 Shapes Example

4.1 Overview

In this example we want to load an SVG Tiny stream and then change it! We are going to add a couple of new SVGNode objects to the current SVG tree.

View this example as applet (Java-enabled browsers only)

The Shapes Example includes the following classes:

tinyapp.Shapes
tinyapp.ViewerCanvas
com.tinyline.app.ImageConsumer
com.tinyline.app.MIDPTiny2DProducer

The last three classes are the same classes as in the Viewer Example. So we focus on the Shapes class:

The Shapes() and startApp() have a standard TinyLine stuff in order to create pipeline objects, hook them together, and load a static SVG Tiny stream.

The Circle() and Rect() do all the business. Before we take a closer look at them, we need to say a couple of words about SVGNode class and its derived classes.

4.2 Change SVGNode properties

The SVGNode class implements the base class for all elements in the SVG language. What is important here for our example, its how you can change SVGNode object properties. (The same apply for all SVGNode based classes).

There are two different ways to change SVGNode object properties:

1. The Direct TinyLine API.

      rect.y =  80 << Tiny2D.FIX_BITS;

2. The OM (Object Model) TinyLine API

      rect.setAttribute(SVG.ATT_X, 80 << Tiny2D.FIX_BITS);

You can use both of them.

Here is the sample code using direct API:

        // Use the Direct TinyLine API to change properties
        rect.id = new TinyString("myrect".toCharArray());
        rect.x = 120 << Tiny2D.FIX_BITS;
        rect.y = 80 << Tiny2D.FIX_BITS;
        rect.width = 40 << Tiny2D.FIX_BITS;
        rect.height = 40 << Tiny2D.FIX_BITS;
        rect.fill   = yellowColor;
        rect.stroke = navyColor;
        rect.strokeWidth = 4 << Tiny2D.FIX_BITS;

Before your changes become valid you need to create the element outline:

	// Create the outline.
        rect.createOutline();
        // Repaint the damaged area.
        t2d.setClip(rect.getDevBounds(raster));
        raster.update();
        t2d.sendPixels();

4.3 Search, add, remove SVGNodes

The following code searches the SVG document for the rect element with "myrect" id. If such element is found we remove it, otherwise we create a new SVG rect element with "myrect" id and add it to the SVG document after the element which id is "whiteboad".

        // Get the raster
        SVGRaster   raster   = canvas.raster;
        // Get the SVGT document
        SVGDocument document = raster.getSVGDocument();
        // Get the graphics
        Tiny2D t2d = raster.getTiny2D();
        // Get the root of the SVGT document
        SVGSVGElem root = (SVGSVGElem)document.root;

        // If there is a node with id 'myrect' then remove it.
	// Otherwise create and add it.
        SVGNode node =
        SVGNode.getNodeById(document,
                      new  TinyString("myrect".toCharArray()));
	if(node != null)
	{
	   // Get the parent
	   SVGNode parent = node.parent;
	   int index = parent.children.indexOf(node,0);
	   // Remove the child node and update the ID cache table
           parent.removeChild(index);
           document.idTable.clear();
           document.addIds(document.root);
           // Repaint the damaged area.
           t2d.setClip(node.getDevBounds(raster));
           raster.update();
           t2d.sendPixels();
           return;
        }

        // Create a new rect element
        SVGRectElem rect =
          (SVGRectElem)document.createElement(SVG.ELEM_RECT);

        // Add the rect element AFTER the whiteboard element
        node = SVGNode.getNodeById(document,
                  new TinyString("whiteboard".toCharArray()));
	if(node != null)
	{
	   // Get the parent
	   SVGNode parent = node.parent;
	   int index = parent.children.indexOf(node,0);
	   // Add the child node and update the ID cache table
           parent.addChild(rect, index + 1);
           document.idTable.clear();
           document.addIds(document.root);
	}

Now lets talk about dynamic SVG content.