BlackBerry Composer workspace

You can view and edit your BlackBerry Composer project in the project window, which contains the canvas and the workspace. Each project has its own window. If you open multiple projects, the BlackBerry Composer opens multiple project windows.

The BlackBerry Composer project window contains the project workspace. The workspace includes the following elements:

Element

Description

canvas

The canvas represents the viewable area.

You can change the size and the background color of the canvas.

overscan area

The overscan area is the gray area around the canvas. Objects can enter and exit the canvas from the overscan area during an animation.

You can use the overscan area to store objects for future use.

rulers

The rulers at the top and the left of the project workspace provide measurements in pixels. The rulers indicate the vertical and horizontal position of the mouse pointer.

You can show or hide the rulers.

grid

The grid is an alignment tool that is represented by regularly-spaced horizontal and vertical lines. To assist with alignment, you can specify that objects auto-align to the grid. When you create or move objects, they automatically align to a line on the grid.

By default, the grid aligns at the upper-left corner of the project window . You can change the alignment of the grid.

You can show or hide the lines on the grid, change their color and spacing, and specify the auto-align option.

guides

Guides are alignment tools that you can add wherever you need them, by dragging them from the horizontal or vertical rulers. To assist with alignment, you can specify that objects auto-align to the guides. When you create or move objects, they automatically align to a guide.

You can show or hide the guides, select the auto-align option, or lock the guides to prevent you from accidentally moving them.

limits

The limits are lines that show the edges of the canvas. You can use the limits to resize the canvas by dragging them to the appropriate size.

You can show or hide the limits, or lock them to prevent you from accidentally moving them.

Composer Inspector

The Inspector includes the following tabs:

Icon

Tab

Description

Text

Configures the font face, font size, and other text attributes for simple text objects.

Text on Curve

Configures the font face, font size, and other text attributes for text-on-curve objects.

Freehand Path

Configures the anti-aliasing property for freehand path objects.

Bézier

Configures the anti-aliasing property for Bézier objects.

Line

Configures the anti-aliasing property for line objects.

Polyline

Configures the anti-aliasing property for polyline objects and polygon objects.

Rectangle

Configures the anti-aliasing property for rectangle objects.

Rounded Rectangle

Configures the radius of round corners and the anti-aliasing property for rounded-rectangle objects.

Ellipse

Configures the anti-aliasing property for ellipse objects.

Arc

Configures the ellipse radius, axis rotation, and other arc options, and the anti-aliasing property for elliptical arc objects.

Text Area

Configures the default text and field name for text-area objects.

Selection List

Specifies the items that appear in selection-list objects.

Launch Application

Configures the application to start for a Theme button.

Theme Button Animation

or

Animation

Configures the animation options for a Theme button or previews an animation object.

Transform

Configures the object size, position, rotation, visibility, and other properties for a Theme button.

Properties

Configures the font face and font color properties for text in text area and selection list objects.

Camera

Configures the Preserve Aspect Ratio property for the view box.

Button

Configures events for a button object and previews each button state.

Stroke

Configures the stroke color, width, and style for vector shapes and text objects.

Fill

Configures the fill color or pattern for vector shapes and text objects.

Path Animation

Configures a path to bind an object to.

Transformation

Configures the rotation, dimensions, and visibility for all objects.

Bitmap Image

Configures interpolation properties for rasterized bitmap image objects.

Composite

Applies the optical composite method for bitmap image objects.

Filters

Configures filters for bitmap image objects.

Effects

Configures effects for bitmap image objects.

Toolbox

You can use the tools on the toolbox to create vector graphic shapes and text objects or you can change imported images in your BlackBerry Composer project.

Icon

Tool

Shortcut

Description

Transformation

V

You can use the Transformation tool to select an object, move an object, or change the width and height of an object.

Select

Q

You can use the Select tool to reshape an object by moving a single anchor point or Bèzier control point.

Text

T

You can use the Text tool to create a text object.

Text on Curve

C

You can use the Text on Curve tool to create text on a curve.

Freehand

F

You can use the Freehand tool to draw free-form paths. Paths are closed automatically if you specify a fill color other than None.

Bézier

P

You can use the Bézier tool to draw curved lines.

Line

L

You can use the Line tool to draw a single straight-line path.

Polyline

O

You can use the Polyline tool to draw a continuous path that has one or more straight-line segments.

Rectangle

R

You can use the Rectangle tool to draw a rectangle shape.

Rounded Rectangle

N

You can use the Rounded Rectangle tool to draw a rectangle shape that has rounded corners.

Ellipse

E

You can use the Ellipse tool to draw ellipses or circles.

Arc

A

You can use the Arc tool to draw arcs.

Text Area Form

X

You can use the Text Area Form tool to create text fields that users can type information in.

Selection Form

S

You can use the Selection Form tool to create a drop-down list with predefined options, from which users can select an option.

Theme Button

You can use the Theme Button tool to create a button object that you can add to the home screen to start an application.

Camera

M

You can use the Camera tool to define the area of the canvas that the user views. By animating the view box area, you can create panning and zooming effects.

Hand

H

You can use the Hand tool to move the canvas in the project workspace.

Zoom

Z

You can use the Zoom tool to magnify the canvas.

Stroke swatch

You can use the Stroke swatch to specify the stroke color for a selected object or to specify the default stroke color for future objects.

Fill swatch

You can use the Fill swatch to specify the fill color for a selected object or to specify the default fill color for future objects.

Default colors

You can use the Default colors button to change the Stroke and Fill swatches to the default values. The default stroke value is black and the default fill value is white.

No color

You can use the No color button to change the Fill swatch to no color.

Swap fill and stroke

You can use the Swap fill and stroke button to switch the color values of the Fill and Stroke swatches.

The keystroke shortcuts are unavailable in the following situations:
  • when the BlackBerry Composer is in text-entry mode
  • when you type a value in a field in any of the panels
  • when you move the points on a polyline or Bézier object

Animation panel

You can use the BlackBerry Composer Animation panel to control animation effects.

The Animation panel has three components:

  • playback toolbar: The playback toolbar enables you to preview the animated effects within the BlackBerry Composer.
  • key editor: The key editor displays the frames of the timeline used for key frame animation.
  • tweening editor: The tweening editor enables you to define animation behavior between key frames.