Rogue Wave JViews Maps  > Developing with design tools > Using the Symbol Editor > Getting started with the Symbol Editor > The BAM Dashboard example > Creating the dashboard symbols > Customizing the progress bar
INDEX | PREVIOUS  NEXT

Customizing the progress bar

In this section, you will extend the progress bar made in Working with symbols to match the progress bar defined in Definition of the dashboard.
In Transforming symbols using parameters you were shown how to define the transformation necessary for this symbol to display percentage progress. You will now concentrate on updating object graphic styles to match the look and feel defined in the dashboard definition.
Graphic styles define the appearance of an object. They are customized using the Paint tab in the Styling Customizer. The appearance of an object is separated into two parts: the fill style and the stroke style. The fill style is the graphic rendering of anything inside an object, the stroke style defines the object border.
To extend the progress bar, you will proceed in four stages:

Changing the fill style

To change the fill style for the basicprogressbar, use the Paint Editor.
  1. Open the basicprogressbar symbol from the bampalette.
    For more information, see Closing and opening symbols and palettes.
  2. Select the progressbar object in the Symbol Outline pane.
  3. Click the Paint tab in the Styling Customizer.
  4. Click the button on the right of the Fill Paint field.
    The Paint Editor opens.
    diasym_painteditor52.png
    The Paint Editor
    As shown in the figure above, the Paint Editor contains tabs for controlling the color, gradient, texture, and pattern of the object. The color can be set using one of the following options:
    • Swatches
    • HSBA (Hue, Saturation, Brightness, Alpha) codes
    • RGBA (Red, Green, Blue, Alpha) codes
    • JViews Disk
    The gradient can be set using linear, radial or standard tools.
  5. Click the Pattern tab.
  6. Click the button in the Foreground field.
    The Color dialog box opens.
  7. Click the RGB tab.
  8. Type 71, 231, 71 in the Red, Green, and Blue fields.
  9. Click OK.
  10. Select the bars pattern as shown in the following figure.
    diasym_painteditorpatternchooser53.png
    The Paint Editor pattern chooser
  11. Clear the Transparent check box.
  12. Click the button in the Background field.
    The Color dialog box opens.
  13. In the Swatches tab, select the color white in the upper left.
  14. Click OK.
  15. Click Apply.
The color scheme of the progress bar now matches the dashboard definition in figure A dashboard definition. Before continuing, save the changes you have made to the symbol by pressing Ctrl+S.
Note
The graphic manipulation shown in this example is very basic. For information about more advanced graphics, see Exploiting advanced graphics features.

Changing the stroke

The stroke refers to the border surrounding an object.
To change the stroke for the basicprogressbar symbol:
  1. Open the basicprogressbar symbol.
  2. Select the progressbar object in the Symbol Outline pane.
    The Styling Customizer opens on the last tab you used, in this case, the Paint tab.
  3. Click the button next to the Stroke paint field.
    The Paint Editor opens.
  4. Click the Color tab; then click the JViews Disk tab.
  5. Use the sliders to select a light gray tone.
    diasym_painteditorjviewsdisk54.png
    The JViews Disk color chooser
  6. Click Apply.

Adding shapes to a symbol

In the dashboard definition, the progress bar advances on a white background. To create this effect, you need to make a background object with the same width and length as the fully extended progress bar.
  1. Open the basicprogressbar symbol from the bampalette.
    For more information, see Closing and opening symbols and palettes.
  2. Click Add Shape in the toolbar.
    The Choose Shape dialog box opens.
    diasym_addshapebutton55.png
    The Add Shape button
  3. Select the Rectangle shape and click OK.
    The Rectangle object is added to your symbol, it is the current selected object.
    diasym_chooseshape56.png
    The Choose Shape dialog box
  4. In the General tab, change the Attachment Point and Anchor Point to match the following figure.
    diasym_attachmentanchorpoints57.png
    Change the attachment and anchor points
    The Rectangle shape is now aligned with the left of the basicprogressbar.
    Note
    The direction in which a transformation occurs is controlled by an object’s attachment point. For example, if the object is attached to the base object from the left as in figure Change the attachment and anchor points, changes in width are reflected by the object expanding to the right of the attachment point.
  5. In the Transform tab, type 30 in the Height field.
  6. Type 120 in the Width field.
  7. In the Paint tab, change the Fill paint color to white using the Paint Editor.
    For more information, see Changing the fill style.
  8. Set the Stroke paint to gray.
    For more information, see Changing the stroke.
The basicprogressbar symbol now contains all the objects necessary to match the dashboard definition.

Changing symbol layers

The arrangement of the objects in a symbol is calculated in reference to the base object, in terms of position and layer. As shown in Adding shapes to a symbol, you can change the relative position of an object. Symbols are made up of objects stored in layers. The base object is the bottom layer, on which all other objects in the Symbol are stacked. Using the Symbol Editor, you can change the level of an object in the layer stack.
In the basicprogressbar symbol, the background image is currently in a layer higher than the progress bar. If you test the symbol, you will see that, as the value of the progress parameter increases, the background rectangle moves to the right.
To rectify this behavior, make the background rectangle the base symbol:
  1. Right-click the Rectangle object in the Symbol Outline pane.
  2. In the pop-up menu, click Order > Send to Back.
  3. In the Confirm New Base dialog box, click Yes.
  4. Save the symbol.
The basicprogressbar symbol is now complete. Test the symbol using the procedure described in Testing your symbol.
Current section
PREVIOUS  NEXT
© Copyright Rogue Wave Software, Inc. 2016. Legal Terms