Search
Customizing the Appearance of Items

Different visual styles and properties can be set individually for every JDiagram object as described in the following paragraphs.

Line Width and Style

The borders of nodes and the lines of links are drawn using a pen whose width and style can be customized. Using the Pen objects, provided by JDiagram, you can specify dash pattern, color and thickness for items' contours. To assign a pen to an item, use the setPen method of the Item class. Links use the getHeadPen method to draw their heads. To change it, use the setHeadPen method of the DiagramLink class. When customizing items through styles and themes, the appearance of their border lines can be set via the setStroke and setStrokeThickness properties of DiagramItemStyle.

Color of Diagram Elements

JDiagram provides Brush objects for filling the interior of items. Brush is an abstract class. Depending to the type of interior filling you desire, you instantiate a brush object from one of the derived classes (GradientBrush, HatchBrush, SolidBrush or TextureBrush) and associate that object with the appropriate item, using its setBrush method. The Cell class provides a setBrush method, which enables setting separate brushes to individual cells.

Text

Diagram items can have attached text, displayed inside / over them.

Text of shape nodes is set using the setText method and the text alignment is specified using the setTextFormat method. The text can contain formatting specifiers, such as bold, italic and so on, which can be enabled by calling of setEnableStyledText. To make a shape node big enough to display its text without clipping, call resizeToFitText. You can add more text labels to a node by creating NodeLabel objects.

Links have their text drawn horizontally above their middle segment or rotated as specified through the setTextStyle method; the string to display can be set using the setText method. Links can display additional labels added via the addLabel method. Each label can be rendered using distinct font, color and alignment attributes as set via the LinkLabel methods.

Tables have caption text and alignment is specified by setCaption and setCaptionFormat; table cells expose setText and setTextFormat methods.

All chart items expose setFont method, specifying the name, style and size of the font of item's text.

The color of item's text is set through the corresponding setTextColor method: ShapeNode.setTextColor, DiagramLink.setTextColor, TableNode.setTextColor and Cell.setTextColor. Additionally, tables expose the setCaptionColor method for setting the color of their captions.

Images

ShapeNode can render a java.awt.Image bitmap assigned to its Image property. Call the resizeToFitImage method to set the node's dimensions to the intrinsic size of the bitmap. You can add more images to a node by creating NodeLabel objects, and treat them as clickable icons by handling nodeClicked event and checking its Label argument.

TableNode exposes Image property used to draw table's background. Each cell in the table can render its own Image as well. For example that might be used to display an icon for the key field of a database table.

Images can be positioned in different ways: they can be tiled, stretched or aligned to the containing objects' centers or sides. Use ShapeNode.setImageAlign and TableNode.setImageAlign to specify how images are placed within the corresponding nodes. An image shown inside a node is clipped in accordance with the shape of that node. The ImagePadding property specifies how much space to leave between image and node's borders.

Shadows

The shadow of each diagram item can be painted with a distinct brush, as specified by the item's setShadowBrush method. The brush can be set to null to hide an item's shadow. Shadow offsets from their items can be set individually by the setShadowOffsetX and setShadowOffsetY methods.

DiagramLink-specific Properties

The shape and orientation of link segments is specified by the setStyle method; the number of segments is specified by the setSegmentCount method. The form and size of the arrowhead shape is set using the setHeadShape and setHeadShapeSize methods. Shapes displayed at the beginning of links can be set via setBaseShape and setBaseShapeSize. Shapes can be displayed at middles of segments, helping to follow long links . They are defined by the setIntermediateShape and setIntermediateShapeSize methods. The lines of arrowhead shapes are painted using the Pen specified by the setHeadPen method.

Link crossings

Intersection points where links cross their paths can be rendered as arcs or breaks, as specified by setLinkCrossings. It depends on the z-order, which links jump over the others, or which links appear cut by the others. If LinkCrossings is set to Arcs, links with higher Z-index jump over those with lower Z-index. If set to Cut, links at lower Z position are cut by links at higher Z. Radius of arcs and breaks can be set through the setCrossingRadius method.

ShapeNode-specific properties

The shape of a node is defined using the setShape method. Shape templates can be applied to a shape node with an orientation of 0/90/180/270 degrees as specified through the setShapeOrientation method. The shape rotation can be modified through the setRotationAngle method. Your own drawing code may be invoked for a node, depending on the value specified in setCustomDraw. Shape nodes can be marked as transparent in the setTransparent method, having only their text or images rendered.

TableNode-specific properties

The outline of a table can be either a rectangle or rounded rectangle, as specified by the Shape property. Set CellFrameStyle to customize the borders of table cells. The table caption bar is painted according to CaptionFormat, CaptionBrush and CaptionBackBrush properties. You can run custom-drawing code for the whole table or its cells by setting CustomDraw or CellCustomDraw properties and handling drawNode or drawCell events.