skip to main content
Developing with design tools > Using the Symbol Editor > Using more features of the Symbol Editor > Exploiting advanced graphics features
 
Exploiting advanced graphics features
Explains how to best use the capabilities of advanced graphics in symbols.
*Supported graphic formats
*Presents the graphic formats that the Symbol Editor is able to handle.
*Importing a vector graphic
*Explains how to integrate an SVG image into a symbol.
*Converting SVG images to symbols
*Explains how to transform an imported SVG image into a JViews symbol.
*Control of group layout
*Explains the principle of layers in a symbol and how to use them to control the layout of the symbol objects.
*Adding intelligence to an advanced graphic
*Shows how to make a graphic dynamic.
Supported graphic formats
In Getting started with the Symbol Editor, you learned how to manipulate graphic objects, parameters and conditions. In this section, you will see how to apply these techniques to symbols containing imported images.
The Symbol Editor can import the following file types:
*PNG
*JPG
*GIF
*SVG
*IVL
PNG, JPG, and GIF format files are static images. This means that their appearance cannot be edited directly using the Symbol Editor. However, static images have a smaller memory footprint. You use static images to create light symbols. For more information, see Designing for performance.
Both IVL and SVG files contain vector graphics. Using the Symbol Editor, you can edit and add conditions to each object contained in an imported vector graphic.
Importing a vector graphic
Vector graphics are added to a symbol in the same way as any other object.
To import an SVG image:
1. In the Symbol Editor, create a new symbol.
For more information, see Making a new symbol.
2. In the toolbar, click Add Image.
The Choose Image File dialog box opens.
The Add Image button
3. Navigate to the following directory:
<installdir>/jviews-diagrammer/bin/symboleditor/data/examples.
4. From the Files of type list, select Scalable Vector Graphics Files.
5. Select progressbar.svg and then click Open.
The Adding Vector Graphics dialog box opens.
6. Click OK.
The progressbar image is added to your symbol.
A Symbol containing an SVG image
As shown in the figure, the imported image is named SVG in the Symbol Outline pane. If more than one SVG image is added to the symbol, additional graphics are named SVG2, SVG3, and so on automatically.
NOTE When an SVG image is added to a symbol, the Image tab is added to the Styling Customizer. This tab is used to edit the width and height of the image manually. It also contains the URL to the imported image file.
An imported image is placed in the top layer of the symbol hierarchy. However, an image can be used as the base object for the symbol.
To use the imported image as the base object of the symbol:
1. In the symbol you have just created, change the name of the imported image from SVG to progressbar.
For more information, see Performing basic object customization.
2. Delete the Shape and Text objects from your symbol.
For more information, see Deleting an object. The progressbar SVG image is now the base object.
3. Open the palette bampalette created in Using palettes and categories.
For more information, see Closing and opening symbols and palettes.
4. Save the new symbol as svgprogressbar in the progressbars category of bampalette.
See Saving a symbol for more information.
Converting SVG images to symbols
When you ungroup an SVG image, the Symbol Editor gives you access to all the objects contained in the graphic.
To ungroup the svgprogressbar symbol created in Importing a vector graphic:
1. Open the svgprogressbar symbol.
For more information, see Closing and opening symbols and palettes.
2. Click the progressbar object.
3. Click Edit > Ungroup.
An ungrouped SVG image
As shown in the figure, the Symbol Outline pane shows all the objects contained in progressbar. When an SVG image is ungrouped, the Symbol Editor gives each object a name automatically. An ungrouped image is no longer in SVG or IVL format, it is a standard Rogue Wave® JViews symbol; the Image tab is no longer displayed in the Styling Customizer when the SVG root object is selected.
Control of group layout
As shown in figure An ungrouped SVG image, an ungrouped SVG file has multiple layers. Each layer is translated as a group of objects with a base object in the Symbol Editor. When a layer base object is selected, the Layout tab is displayed in the Styling Customizer.
The layout pane
You use the different layout options to control the distribution and arrangement of the objects inside the selected layer. The default layout type is an Attachment layout. The following figure shows how object distribution changes for different layout types.
Distribution differences according to layout types
Adding intelligence to an advanced graphic
The svgprogressbar symbol created in Converting SVG images to symbols is essentially the same as the basicprogressbar created in Changing symbol layers. That is, a collection of shapes where one object is expanded to display a change in real world events. The difference is that the svgprogressbar shown in figure An ungrouped SVG image is visually more pleasing than the basicprogressbar shown in figure The region symbol. As you will now see, it is much faster to add intelligence to a symbol made with advanced graphics.
To add intelligence to an advanced graphic symbol:
*Choose the object in the graphic to be transformed.
*Create the parameters necessary for transformation.
*Bind the parameters to the object.
*Add conditions if necessary.
The svgprogressbar symbol contains 5 different objects layered one on top of the other. The GeneralPath3 object, as shown in figure An ungrouped SVG image, is a red bar.
To transform this object:
1. In the Symbol Outline pane, select the GeneralPath3 object.
2. Create the following parameters:
Parameters for the svgprogressbar symbol
Name
Type
Allowed Value
Allowed Value Name
Default Value
maxwidth
Integer
100
max
max
minwidth
Integer
0
min
min
problem
Integer
35
prob
prob
progress
float
 
 
0.1
For more information, see Adding flexibility using parameters.
3. Bind the progress, minwidth and maxwidth parameters to the width attribute of the GeneralPath3 object.
Set the Value Max parameter to 345, that is, the maximum width of the bar in pixels.
Transformation parameters
4. Set the same conditions on GeneralPath3 as shown in the Transforming symbols using conditions section.
NOTE When you test GeneralPath3 and progress is set to 100, the bar width is 345 pixels.
Symbol graphics created by graphic artists using standard graphics packages have a finer look and feel. If you Import advanced graphics into the Symbol Editor you can create symbols faste. To add intelligence to a symbol based on SVG images, use exactly the same methods as you do for a basic symbol. See Planning a project for the Symbol Editor for the recommended workflow for creating symbols.

Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.