Section IV: Reference

Components

Aria UI Components

Aria adds many user interface (UI) components to the Aria framework, while some of these components are non-visual components, the extensions offered by Aria can greatly improve the overall visual impact of your application. This section documents some of the Aria specific components. The components fall into a number of categories although some components are related.

Graphical Components

Shape

Class : org.formaria.swing.Shape

The shape component is a simple graphical object that renders some simple shapes. The component itself is of limited benefit on its own but it can be used with some of Aria's flowed text components to nest other objects that would otherwise have a rectangular area.

In the example below an image component is embedded in an ellipse shape, and the shape then interacts with a FlowedText component to alter the text layout. The shape may also be defined programmatically.

The XML for the above example is shown below:

Nesting an image within a shape

  1.  <Components>
  2.    <Panel name="textPanel" x="10" y="10" w="800" h="600" border="1" style="palePanel">
  3.      <FlowedText antialias="false" name="flowedTextArea" cols="1" 
  4.                x="200" y="10" w="680" h="580" style="base/edit" 
  5.                content="<b>Lorem ipsum..." opaque="false"/>
  6.      <Shape name="myShape" x="10" y="10" w="400" h="400" mode="13"  style="blue">
  7.        <Image name="imageA" x="0" y="0" w="400" h="400" content="glyph.jpg"/>
  8.      </Shape>
  9.    </Panel>        
  10.    <Button name="backBtn" content="Back" x="10" y="670" w="100" h="20"/>
  11.    <Button name="modeBtn" x="710" y="670" w="100" h="20" content="Mode" />
  12.  </Components>

The component is also used to draw some simple adornments like lines using the component foreground and background colors.

Shape drawing modes

Mode

Description

RECTANGLE = 0

A plain rectangle

ORTHO_LINE = 1

An orthogonal line

EXTRABOLD_HORIZONTAL = 2

Draws an extra bold line horizontally across the top of the component (3 pixels deep)

BOLD_HORIZONTAL = 3

Draws an bold line horizontally across the top of the component

NORMAL_HORIZONTAL = 4

Draws an line horizontally across the top of the component (1 pixel deep)

THIN_HORIZONTAL = 5

Draws an thin line horizontally across the top of the component

EXTRABOLD_VERTICAL = 6

Draws an extra bold line vertically across the top of the component (3 pixels deep)

BOLD_VERTICAL = 7

Draws an bold line vertically across the top of the component (2 pixels deep)

NORMAL_VERTICAL = 8

Draws an line vertically across the top of the component (1 pixel deep)

THIN_VERTICAL = 9

Draws an thin line vertically across the top of the component ( < 1 pixel deep)

RIGHT_TOP_LINE = 10

Draws a line from the top left to the bottom right

LEFT_TOP_LINE = 11

Draws a line from the top right to the bottom left.

ELLIPSE = 12

Draws an ellipse

SOLID_ELLIPSE = 13

Draws and fills an ellipse

SOLID_DIAMOND = 14

Draws a diamond

DIAMOND = 15

Fills a diamond

USER = 16

Draws a user defined shape

USER_FILL = 17

Fills a user defined shape

USER_FILL_DRAW = 18

Fills and draws a user defined shape

EasterEgg

Class : org.formaria.swing.EasterEgg

The easter egg component is an unusual component in that most of its function is designed to be hidden from the average user. The component is designed to allow restricted access to key features of an application, typically for a project administrator.

Under the hood the EasterEgg component is an extension of the Image component, so normally it will display an image and uses the image controls normal attributes.

The component relies on the org.formaria.event.ClickListener class to monitor the user interaction. Using this interface you can define a special key sequence of set of mouse clicks, or a click on a particular area to enable access to a restricted part of the application. By default the component responds to a mouse click anywhere within the component's client area by popping up a password dialog.

Ultimately when the required interaction has occurred a password dialog can be displayed. On successful login the user can then navigate to a restricted page or whatever the author decides via a callback method specified with the setCallback api.

ReflectedImage

The reflected image component displays an image and a reflection of that image. For example:

In the above image the top half of the image is the unadorned image and the bottom half is the dynamically generated reflection.

Attribute

Description

shear

The factor by which to shear the image reflection (0-100)

content

The image name

tooltip

The tooltip text for this component

opaque

true if the component is to fully paint the client area

CaptionedImage

The captioned image component displays an image and a caption below that image. Both the component itself and the image it contains may draw a border.

Attribute

Description

border

0 for no border, 1 for an outer border and 2 for an inner and outer border

captionStyle

The style name for the caption text

imageStyle

The stylename for the image and its border

style

The style name for the components main area

fill

true to fill the background

pad

The amount of padding around the image in pixels

arc

The amount of rounding on the borders

caption

The caption text

minHeight

The minimum component height

minWidth

The minimum component width

opaque

true if the component is to fully paint the client area

buffered

true if the component is to buffer its painting operations

tooltip

The tooltip text

align

The caption text alignment

alignment

The caption text alignment

shadow

true to draw a shadow on the image

imageName

The filename of the image

content

The filename of the image

enabled

true if the component is enabled/selectable

blend

true if the backgroudn painter is to blend into its parent

translucent

true if the component is translucent

laf

true to use the look and feel settings

painter

the class name of the background painter

titlePos

The position of the title text on the main component

titleStyle

The style for the title text

title

The text for the title

RollupBar

Class: org.formaria.swing .RollupBar

An outlook style roll-up bar. The methods are modelled on the JTabbedPane.

Attribute

Description

alignment

Set the component alignment (Left | Right | Center | Leading | Trailing)

icon

The filename of the icon

iconpressed

The filename of the pressed icon

iconrollover

The filename of the rollover icon

imagename

The filename of the image

pressed

The filename of the pressed image

rollover

The filename of the rollover image

disabled

The filename of the disabled image

style

The style for the component and its children

buttonheight

The height of the buttons contained within the component

painter

The class name of a painter for the buttons, for example org.formaria.swing.painter.GradientButtonPainter or
org.formaria.swing.painter.GradientToggleButtonPainter

antialias

Turn antialias on or off, true to turn it on or false to turn it off

ProgressIndicator

Class: org.formaria.swing.ProgressIndicator

Provides an animated circular area consisting of bars which gives an indicator of progress.

HyperLabel

Class: org.formaria.swing.HyperLabel

The hyper label allows hyper linking within an application, showing an underline when unde the cursor and enabling button like actions on mouse click events.

Attribute

Description

antialias

Turn antialiasing on or off, true to turn anitaliasing off or false to turn it off.

alignment

The text alignment

tooltip

The tooltip text for this component

Text Components

As you may have already noticed the components provided by Aria generally work in concert with one another. The text components interact with one another and with components like the Shape component described above. This section provides some details of the text rendering components.

If you don't find the text manipulation that you need remember that you can always create your own component using Java and Java2D. Employing such a component within a Aria application is pretty easy. The text components presented here form a hierarchy and all use such a mechanism and are easily extended and customized.

FlowedTextComponent

Class : org.formaria.swing.FlowedTextComponent

The flowed text component is a text component that flows text around components that overlap the area belonging to this component. The components may be any sibling of the component including images, shapes and other user interface components. Most components are rectangular but some of Aria's components like the shape component can define other areas.

The flowed text components are designed to allow desktop publishing like presentations and layouts. To achieve overlapping components you need to either choose the null layout or some other layout that can support overlapping components. Aria's GuideLayout can do just this.

The layout for the above page is defined as follows:

XML for a flowed text component

  1.  <Page class="aria.samples.charts.Flows" >
  2.    <Components>
  3.       <Panel name="overlayPanel" x="10" y="10" w="800" h="600" style="blue" opaque="false"/>
  4.       <Panel name="textPanel" x="10" y="10" w="800" h="600" style="blue">
  5.         <Label content="Aria Times" x="10" y="0" w="300" h="50" style="blue/title"/>
  6.         <Label content="Your source for Aria news." x="10" y="45" w="300" h="30" 
  7.                style="blue/subtitle" opaque="false"/>
  8.         <Label content="City Edition" x="430" y="15" w="80" h="55" style="blue/sidebar" 
  9.                opaque="true" align="center"/>
  10.           <Shape mode="2" x="10" y="80" w="500" h="5" style="blue/title" />
  11.           <Shape mode="5" x="10" y="85" w="500" h="5" style="blue/title" /></P>
  12. </TD>
  13. </TR>
  14. <TR>
  15. <TD ROWSPAN="1" COLSPAN="1">
  16. <P>
  17.           <Image name="imageA" x="10" y="260" w="160" h="120" content="trophy.jpg"/>
  18.           <Image name="imageB" x="350" y="150" w="160" h="120" content="measure.jpg"/>
  19.           <FlowedTextComponent name="flowedTextArea" x="10" y="100" w="500" h="480" style="blue" 
  20.                 content="Lorem ipsum dolor ...." opaque="false"/>
  21.  &nbsp;</P>
  22. </TD>
  23. </TR>
  24. <TR>
  25. <TD ROWSPAN="1" COLSPAN="1">
  26. <P>
  27.        </Panel>
  28.        <Button name="backBtn" content="Back" x="10" y="670" w="100" h="20"/>
  29.        <Button name="overlayBtn" x="380" y="670" w="100" h="20" content="Overlay" />
  30.        <Button name="clipBtn" x="490" y="670" w="100" h="20" content="Clip" />
  31.        <Button name="showBtn" x="600" y="670" w="100" h="20" content="Show"/>
  32.        <Button name="hideBtn" x="710" y="670" w="100" h="20" content="Hide"/>
  33.      </Components></P>
  34. </TD>
  35. </TR>
  36. <TR>
  37. <TD ROWSPAN="1" COLSPAN="1">
  38. <P>
  39.      <Events>
  40.      <Event method="showPrevious" target="backBtn" type="ActionHandler"/>
  41.      <Event method="showImages" target="showBtn" type="ActionHandler"/>
  42.      <Event method="hideImages" target="hideBtn" type="ActionHandler"/>
  43.      <Event method="clipImages" target="clipBtn" type="ActionHandler"/>
  44.      <Event method="overlayImages" target="overlayBtn" type="ActionHandler"/>
  45.   </Events>
  46.  </Page>

The properties for the flowed text component are:

Attribute

Description

antialias

Turn antialiasing on or off, true to turn anitaliasing off or false to turn it off.

content

The text to flow within the component. Within the text some HTML like tags can be specified, such as for bold, for italic, for strike through, and
for a break

text

A synonym for content

imagetype

A flag indicating how the animation is drawn. 0=create a buffered image for rendering, 1=don't use a buffer, >1 the value is used to get the BufferedImage type constant i.e. a value of 2 creates a BufferedImage with type BufferedImage.TYPE_INT_ARGB.

cols

The number of columns

colSpacing

The column spacing

HtmlText

Class : org.formaria.swing.HtmlText

For compatibility reasons some of the text components in Aria do not handle html markup, even in the case of the Swing widgets. This component bypasses that rendering and provides an editor pane with Swing's HTMLEditorKit. The component is not a full HTML renderer like a web browser but it can accommodate some hyper linking within the text.

PolygonalTextArea

Class : org.formaria.swing.PolygonalTextArea

Using this component you can flow text within an arbitrary polygon. The component, like the FlowedTextArea clips any siblings from its area. The component is ideal for flowing text around things like images.

Similar to the example above for the FlowedTextComponent the layout for the PolygonalTextArea can be defined as follows:

 

  1.  <Page class="aria.samples.charts.Flows" >
  2.    <Components>
  3.       <Panel name="overlayPanel" x="10" y="10" w="800" h="600" style="blue" opaque="false"/>
  4.       <Panel name="textPanel" x="10" y="10" w="800" h="600" style="blue">
  5.         <Label content="Aria Times" x="10" y="0" w="300" h="50" style="blue/title"/>
  6.         <Label content="Your source for Aria news." x="10" y="45" w="300" h="30" 
  7.                style="blue/subtitle" opaque="false"/>
  8.         <Label content="City Edition" x="430" y="15" w="80" h="55" style="blue/sidebar" 
  9.                opaque="true" align="center"/>
  10.           <Shape mode="2" x="10" y="80" w="500" h="5" style="blue/title" />
  11.           <Shape mode="5" x="10" y="85" w="500" h="5" style="blue/title" /></P>
  12. </TD>
  13. </TR>
  14. <TR>
  15. <TD ROWSPAN="1" COLSPAN="1">
  16. <P>
  17.           <Image name="imageA" x="10" y="260" w="160" h="120" content="trophy.jpg"/>
  18.           <Image name="imageB" x="350" y="150" w="160" h="120" content="measure.jpg"/>
  19.           <PolygonalTextArea name="flowedTextArea" x="10" y="100" w="500" h="480" style="blue" 
  20.                points="0,0,500,0,500,40,350,40,350,90,460,185,500,185,500,480,0,480,
  21.                        0,280,80,280,160,220,70,145,0,145,0,0" 
  22.                content="Lorem ipsum dolor sit amet, consecte..." opaque="false"/></P>
  23. </TD>
  24. </TR>
  25. <TR>
  26. <TD ROWSPAN="1" COLSPAN="1">
  27. <P>
  28.        </Panel>
  29.        <Button name="backBtn" content="Back" x="10" y="670" w="100" h="20"/>
  30.        <Button name="overlayBtn" x="380" y="670" w="100" h="20" content="Overlay" />
  31.        <Button name="clipBtn" x="490" y="670" w="100" h="20" content="Clip" />
  32.        <Button name="showBtn" x="600" y="670" w="100" h="20" content="Show"/>
  33.        <Button name="hideBtn" x="710" y="670" w="100" h="20" content="Hide"/>
  34.      </Components></P>
  35. </TD>
  36. </TR>
  37. <TR>
  38. <TD ROWSPAN="1" COLSPAN="1">
  39. <P>
  40.      <Events>
  41.      <Event method="showPrevious" target="backBtn" type="ActionHandler"/>
  42.      <Event method="showImages" target="showBtn" type="ActionHandler"/>
  43.      <Event method="hideImages" target="hideBtn" type="ActionHandler"/>
  44.      <Event method="clipImages" target="clipBtn" type="ActionHandler"/>
  45.      <Event method="overlayImages" target="overlayBtn" type="ActionHandler"/>
  46.   </Events>
  47.  </Page>

The properties for the flowed text component are:

Attribute

Description

antialias

Turn antialiasing on or off, true to turn anitaliasing off or false to turn it off.

content

The text to flow within the component. Within the text some HTML like tags can be specified, such as for bold, for italic, for strike through, and
for a break

text

A synonym for content

clip

true to clip the sibling components from the flow area.

points

A series of X-Y value pairs defining the flow area's polygon.

imagetype

A flag indicating how the animation is drawn. 0=create a buffered image for rendering, 1=don't use a buffer, >1 the value is used to get the BufferedImage type constant i.e. a value of 2 creates a BufferedImage with type BufferedImage.TYPE_INT_ARGB.

cols

The number of columns, if a value of less than 1 is specified then the value is ignored.

colSpacing

The column spacing in pixels

ReflectedText

Class : org.formaria.swing.ReflectedText

Draws a single line string with a reflection of that string, this component is of limited use but may be useful for things like captions and titles.

The attributes of the component are detailed below:

Attribute

Description

antialias

Turn anti-aliasing on or off, true to turn anit-aliasing off or false to turn it off.

content

The text to flow within the component. Within the text some HTML like tags can be specified, such as for bold, for italic, for strike through, and
for a break

text

A synonym for content

imagetype

A flag indicating how the animation is drawn. 0=create a buffered image for rendering, 1=don't use a buffer, >1 the value is used to get the BufferedImage type constant i.e. a value of 2 creates a BufferedImage with type BufferedImage.TYPE_INT_ARGB.

shear

The X-axis shear factor / 100

RotatedText

Class : org.formaria.swing.RotatedText

Text can be rotated to any angle using this component.as illustrated below

The properties of the component are much like the other text components with the following properties

Attribute

Description

antialias

Turn anti-aliasing on or off, true to turn anti-aliasing off or false to turn it off.

content

The text to flow within the component. Within the text some HTML like tags can be specified, such as for bold, for italic, for strike through, and
for a break

text

A synonym for content

angle

The angle of rotation in degrees

cols

The number of columns, if a value of less than 1 is specified then the value is ignored.

colSpacing

The column spacing in pixels

Animations

AnimatedText

Class : org.formaria.swing.AnimatedText

This component fades text into view by cycling the opacity of the text from transparent to opaque and from an unsaturated version of the foreground color to the fully saturated foreground color.

Attribute

Description

antialias

Turn anti-aliasing on or off, true to turn anti-aliasing off or false to turn it off.

align

The horizontal text alignment. Values can be left , right or center

autostart

Automatically starts the animation when the component is displayed if a value of true is set, otherwise the animation does not commence till started by a call to the start method.

content

The text to flow within the component. Within the text some HTML like tags can be specified, such as for bold, for italic, for strike through, and
for a break

text

A synonym for content

imagetype

A flag indicating how the animation is drawn. 0=create a buffered image for rendering, 1=don't use a buffer, >1 the value is used to get the BufferedImage type constant i.e. a value of 2 creates a BufferedImage with type BufferedImage.TYPE_INT_ARGB.

sleep

The sleep time between animation steps in milliseconds, the default is 100 milliseconds

step

The step size in percent, the default is a 1% step

CreditsText

Class : org.formaria.swing.CreditsText

Just like the credits at the end of a movie this component scrolls the text vertically from top to bottom. At the top and bottom ends of the component the text is faded in and out.

The attributes for the credits component are described below

Attribute

Description

antialias

Turn anti-aliasing on or off, true to turn anti-aliasing off or false to turn it off.

align

The horizontal text alignment. Values can be left , right or center

autostart

Automatically starts the animation when the component is displayed if a value of true is set, otherwise the animation does not commence till started by a call to the start method.

content

The text to flow within the component. Within the text some HTML like tags can be specified, such as for bold, for italic, for strike through, and
for a break

text

A synonym for content

imagetype

A flag indicating how the animation is drawn. 0=create a buffered image for rendering, 1=don't use a buffer, >1 the value is used to get the BufferedImage type constant i.e. a value of 2 creates a BufferedImage with type BufferedImage.TYPE_INT_ARGB.

sleep

The sleep time between animation steps in milliseconds, the default is 100 milliseconds

step

The step size in percent, the default is a 1% step

fade

The percentage of the component's width over which the text is faded in and out. The default is zero, for which no fading occurs.

MarqueeText

Class : org.formaria.swing.MarqueeText

As an alternative to the credits text this component scrolls the text horizontally across its area, much like a ticker type component..

Attribute

Description

antialias

Turn anti-aliasing on or off, true to turn anti-aliasing off or false to turn it off.

align

The horizontal text alignment. Values can be left , right or center

autostart

Automatically starts the animation when the component is displayed if a value of true is set, otherwise the animation does not commence till started by a call to the start method.

content

The text to flow within the component. Within the text some HTML like tags can be specified, such as for bold, for italic, for strike through, and
for a break

text

A synonym for content

imagetype

A flag indicating how the animation is drawn. 0=create a buffered image for rendering, 1=don't use a buffer, >1 the value is used to get the BufferedImage type constant i.e. a value of 2 creates a BufferedImage with type BufferedImage.TYPE_INT_ARGB.

sleep

The sleep time between animation steps in milliseconds, the default is 100 milliseconds

step

The step size in percent, the default is a 1% step

fade

The percentage of the component's width over which the text is faded in and out. The default is zero, for which no fading occurs.

Input Controls

BaseTable

Class : org.formaria.swing.BaseTable

An extension of the basic table wrappers in the Aria framework. This table component adds some additional features, including...

The component is due to be consolidated into the Aria Table component in due course.

CheckList

Class : org.formaria.swing.CheckList

This component presents a list with check boxes for each list item, The component functions pretty much as a plain list except that the list items are rendered with checkboxes so that the user can make multiple selections. The component is useful when there are a lot of items to be selected.

DateEdit

Class : org.formaria.swing.DateEdit

The component provides facilities for editing dates, complete with an integrated visual date picker. The date picker shows the currently entered date and upon return updates the date field.

The current date is highlighted (dark blue/green) and moving the cursor highlights the selection (orange). In the title bar, four buttons allow changes of year and month in the forward and backwards direction.

Attribute

Description

format

The date format, an argument for the java.text.SimpleDateFormat class

style

The basic style for the chooser/edit field

selectedstyle

The style for the selected day

weekendstyle

The style name for the weekend days

highlightstyle

The style name for the highlighted day

headerstyle

The style name for the header

threedstyle

The style name for the 3D elements - buttons etc...

Keypad

Class : org.formaria.swing.Keypad

A simple numeric keypad designed for user in point-of-sale or kiosk situations where there may be no keyboard available for input. The keypad can be operated with the mouse.

The attributes are:

Attribute

Description

style

The basic style

selected3d

The style for the 3d elements

styleShade

The style for the shaded border

MoneyEdit

Class : org.formaria.swing.MoneyEdit

An edit field for monetary values. The user can specify an ISO 4217 currency code and a currency format along with a locale country and language.

Attribute

Description

format

The currency format

currency

The ISO 4217 currency code

language

The country code for the currency e.g 'EN', 'DA', 'FR'

country

The locale country code e.g 'IE', 'US', 'FR'

usePrefix

Turn the currency prefix flag on or off, true to turn it on or false to turn it off

useSuffix

Turn the currency suffix flag on or off, true to turn it on or false to turn it off

Spinner

Class : org.formaria.swing.Spinner

A spinner or up/down control. The component does not much in terms of functionality above what is available with the equivalent Swing component (in fact it's a very thin wrapper), however it does provide some useful integration with databings and so on.

The attributes are:

Attribute

Description

min

The minimum values

max

The maximum value

step

The step or value increment used to change the value

Slider

Class : org.formaria.swing.Slider

A slider for choosing a value within a continuous range of value, the slider can be arranged vertically or horizontally . The component does not much in terms of functionality above what is available with the equivalent Swing component (in fact it's a very thin wrapper), however it does provide some useful integration with databings and so on.

The attributes are:

Attribute

Description

min

The minimum values

max

The maximum value

step

The step or value increment used to change the value

Progress

Class : org.formaria.swing.Progress

An visual indicator of progress. The progress bar can also include an icon.(not shown below)

The attributes are:

Attribute

Description

progress

The current progress level in percent.

cue

The cue image filename. The cue is an icon displayed to the left of the progress bar.

bars

The number of bars to display.

step

The step or value increment used to change the value

max

The maximum progress value

PasswordDlg

Class: org.formaria.swing.PasswordDlg

A dialog box which can be used to handle password inputs.

Data Components

Graph

Class : org.formaria.swing.Graph

A graphing/charting component. Various chart types can be displayed including line, bar and pie charts. The component features rollover and tooltips to help users identify an area of the graph. Using these feedback mechanisms a user may also select an area of the chart as an input value. (The terms chart and graph are used interchangeably here rather than in the strict computer science terms).

The first step involved in setting up a chart is to define or locate the data for the chart. There are two options for setting the data, first you can pass the chart component a series of x-y data points or values (one complete series followed by the next series if any), or you can reference a model node. Using a model node is probably the most convenient mechanism and allows you to use database tables and queries as a source of data for the chart.

In the following examples we will use the data from the SugarCRM sample database. The data can be retrieved using the following query (note that in a real deployment situation you may not actually access the data directly as shown here). The SQL for the example is shown below in the table data sources XML file.

A query to select some sample data

  1.  <ResultSet id="Outcome" conn="SugarConn" 
  2.  sql="SELECT lead_source,sales_stage,sum(amount_usdollar/1000) as total,
  3.            count(*) as opp_count 
  4.       FROM opportunities 
  5.       WHERE opportunities.lead_source IN ('','Cold Call','Existing Customer',
  6.            'Self Generated','Employee','Partner','Public Relations',
  7.            'Direct Mail','Conference','Trade Show',
  8.            'Web Site','Word of mouth','Email',
  9.            'Other') 
  10.       AND opportunities.deleted=0 
  11.       GROUP BY sales_stage,lead_source 
  12.       ORDER BY lead_source,sales_stage"/>

Once you have setup a data source you can very quickly setup a chart, for example the following shows a simple page contain just a chart:

Adding a graph to a page

  1.  <Page class="aria.samples.charts.LineChart">
  2.      <Components>
  3.          <Graph name="lineChart" x="10" y="10" 
  4.            w="800" h="600" mode="1" labels="false" 
  5.            markers="true" border="true" legendPos="4"/>
  6.      </Components>
  7.  </Page>

Once the chart has been added to the page it is necessary to connect the data (later we will see how to do this with a data binding). Within the Java code we may want to change the data displayed by the chart or even the chart type used for display purposes so we create a setup method. Normally this setup method would be called from the pageCreated method to initialize the chart.

Setting up the chart data

  1.  protected void setupChart( boolean animate, boolean outputTable )
  2.    {
  3.      DataModel root = ProjectManager.getModel();
  4.      DataModel chartData = (DataModel)root.get( "Outcome" );
  5.      if ( chartData != null ) {
  6.        chart.setTitle( "Opportunities by Outcome" );
  7.        chart.setXScale( -45, 20, 0, "Outcome", null );
  8.        chart.setYScale( chart.LINEAR, "Value" );</P>
  9.  
  10. <P>
  11.        chart.setModelStructure( chart.SERIES, 1 );
  12.        chart.setModelStructure( chart.LABELS, 0 );
  13.        chart.setModelStructure( chart.VALUES, 2 );
  14.        chart.setModel( chartData );
  15.      }
  16.    </P>
  17. </TD>
  18. </TR>
  19. <TR>
  20. <TD ROWSPAN="1" COLSPAN="1">
  21. <P>
  22.    else {
  23.        // Alternatively setup some dummy data for DEMO purposes
  24.        numSeries = 5;
  25.        int numPoints = 14;
  26.        int seriesPts = numPoints * 2 * numSeries;
  27.        capacityPoints = new double[ seriesPts ];
  28.  &nbsp;
  29.        double te[] = { -45.0, -40.0, -35.0, -30.0, -25.0, -20.0, 
  30.                         -15.0, -10.0, -5.0, 0.0, 5.0, 10.0, 
  31.                         15.0, 20.0 };
  32.        double ts[] = { 0.9, 1.0, 1.1, 2.0, 2.1 };
  33.  &nbsp;
  34.        int idx = 0;
  35.        for ( int j = 0; j < numSeries; j++ ) {
  36.          for ( int i = 0; i < numPoints; i++ ) {
  37.            capacityPoints[ idx++ ] = te[ i ];
  38.            capacityPoints[ idx++ ] = te[ i ] * te[ i ] * ts[ j ];
  39.          }
  40.   &nbsp;
  41.       }
  42.       showChart( 1, seriesNames, animate );
  43.      }
  44.    }
  45.  &nbsp;

In setting up the data in conjunction with a data model the important thing to do is to tell the chart where the data is found. The chart expects a tabular structure within the data even if the data does not originate in a database (you can define the data in static XML or in any other model so long as it conforms to the tabular structure that the chart expects). The setModelStructure method is used to tell the chart which attributes (field/columns) of each record contain the series names, the x-values or labels and the y-values. If you can also store the data series in a set of fields for each row or x-value, in which case you do not specify a column as identifying the series.

The data for the sample charts can be seen below:

By changing the mode of the chart either through the XML mode attribute or programmatically via the setMode method you can change how the data is displayed. Using exactly the same data the chart is shown in various modes..

First off, the scatter plot mode. Normally this chart type is used to show discrete data or values that are not closely linked to one another. For the sample data you can probably see that the scatter plot is not very informative. Moving the mouse over a point highlights the point and a tooltip is displayed indicating the values associated with that point.

Next a line chart is shown. This type of chart is similar to the scatter plot except that the points in the series are connected. Normally such a chart is used for data that exhibits some sort of trend or pattern.

Bar charts are frequently used in business applications and they can help illustrate trends and relationships between small data sets. Bar charts are normally used where the various data points represent discrete samples (whereas a line chart is more typically used to represent continuous samples). In the case of the sample data there are probably too many data points to make this chart really useful, but reducing the number of series displayed would make the chart a lot clearer.

A variation of this chart type is the stacked bar chart where the data from each series (at corresponding x-value) are stacked upon one another vertically. In a business case stacked bar charts are often used to illustrate cumulative results. In the case of the sample data this is probably the most useful chart type.r

Finally pie charts. The pie charts are slightly different to other chart types in that they only display a single series

If you need charting capabilities beyond these simple chart types you can extend the component or alternatively you can plug-in a more complete charting package such as the open source JFreeChart or any of the commercial charting libraries.

TreeTable

Class : org.formaria.swing.TreeTable

An advanced tree-table component. The first column of the table is represented by a tree so that recurring data or families of rows can be represented by a single row in the table.

The attributes are:

Attribute

Description

headingstyle

Set the heading style name

selectionstyle

Set the name of the style for the current selection

borderstyle

The border style

updatemodel

true to update the model with the current selection state

See the API documentation for more details on other methods for configuring the tree table.

Multimedia Components

Audio

Class : org.formaria.swing.Audio

This component allows you play an audio stream. Support for sound file formats varies depending upon the availability of Sun's Java Media Framework and the installation of codecs. However for the built-in file types no additional software is required.

Video

Class : org.formaria.swing.Video

This advanced component allows you play a video stream. Support for video file formats varies depending upon the availability of Sun's Java Media Framework and the installation of codecs.

The component can also support nested components that overlap the video playback area. Good visual effect can be obtained by using say a looping vido clip as the background to something like a logon screen where otherwise there may be a lot of empty space.

The above screen can be created very easily, here's the XML:

Creating a video backed logon screen.

  1.  <Page layout="border">
  2.    <Components>
  3.        <Video name="myVideo" loop="true" start="true" content="myVideo.mpg" controller="false"
  4.              constraint="center">
  5.          <Panel x="150" y="150" w="330" h="160" style="synthPanelLight" blend="true" 
  6.              painter="org.formaria.swing.LogoBackground" border="2">
  7.            <Panel x="1" y="1" w="328" h="40" style="synthPanelLight">
  8.              <Image x="10" y="5" w="30" h="30" content="users.gif"/>
  9.              <Label x="45" y="10" w="250" h="20" opaque="false" 
  10.                  content="Please enter you logon credentials" style="title"/>
  11.             </Panel>
  12.           <Label x="30" y="60" w="80" h="20" align="right" opaque="false" content="Username" 
  13.                style="base/prompt"/>
  14.           <Label x="30" y="80" w="80" h="20" align="right" opaque="false" content="Password" 
  15.                style="base/prompt"/></P>
  16. </TD>
  17. </TR>
  18. <TR>
  19. <TD ROWSPAN="1" COLSPAN="1">
  20. <P>
  21.         <Edit x="120" y="60" w="190" h="19" align="right" opaque="false" content="sa" 
  22.                style="base/edit"/>
  23.         <Password x="120" y="82" w="190" h="19" align="right" opaque="false" content="" 
  24.                style="base/edit"/>
  25.         <ImageButton x="120" y="110" w="90" h="30" opaque="true" 
  26.                imageName="button.png" text="Cancel" rollover="button_over.png" 
  27.                pressed="button_pressed.png" style="base/imagebutton"/>
  28.         <ImageButton x="220" y="110" w="90" h="30" opaque="true" 
  29.                text="Logon" imageName="button.png" 
  30.                rollover="button_over.png" pressed="button_pressed.png" 
  31.                style="base/imagebutton"/>
  32.        </Panel>
  33.      </Video>        
  34.    </Components>
  35.  </Page>

Note how the video component is effectively used as a panel within which to host other controls. This is a slight trick and some caution is needed in using this approach as the first component nested must be a panel, failing to allow for this can lead to unpredicatble painting or even invisible children, but fortunately you should be able to simple insert the extra panel in most situations.

The start and loop attributes control the playback, initiating automatic playback on start-up and then repeated or loop playback once the end of the video clip is reached. A small control panel can also be displayed to control playback (ideally for longer clips) by setting the controller attribute to true .

The attributes for the video component are:

Attribute

Description

content

Set the name of the video file to play

loop

true to loop the video, restarting the video playback

start

true to autostart the video

controller

true to show the video controller/progress bar

Navigation Components

  • BreadcrumbBar
Class: org.formaria.swing.BreadcrumbBar

The Breadcrumb Bar can be used to present a navigation history by listing links to the pages used to navigate to the current page.

If the visible navigation history exceeds the size of the component the component will scroll the navigation either left or right via arrow keys automatically prefixed and appended to the component.

When a link is selected an ActionEvent is fired and the listener can respond to the event. The page name associated with the link is passed with the event as the action command. Once the link has been clicked the links to the right of the select link are removed and the bar is refreshed.