Working With Flash Builder [Part - II]

Creating Charts:

As we know that, the charts are the visual representation of data and which help in understanding and analyzing the result. The chart types available in flash builder are Area Chart, Bar Chart, Bubble Chart, Candlestick Chart, Column Chart, HLOC Chart, Legend, Line Chart, Pie Chart, and Plot Chart. This chart component is available in the Design Mode, components Tab. The data input for the chart can be given through Arrays. Let us see an example of creating a bar chart.

Creating a bar chart Example:

First create a new MXML application in an existing Flex Project, Navigate to  File > New > MXML Application, Enter the file name and click finish. Then delete the default code set that appears and start the coding like below.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

Now let us define array data for the chart input data. The “[Bindable]” tag is used to intimate the flash to copy the changes to destinations using this variable whenever a change is occurred. Let us create a array named data having the datum of bikes and mileage

<mx:Script>
<![CDATA[
[Bindable] public var datas:Array = [
{bike:'Pulsar 220',mileage:35},
{bike:'Super Splendor',mileage:60},
{bike:'TVS XL Super',mileage:55},
{bike:'Discover DTSi',mileage:76},
{bike:'Shine',mileage:66}
];       
]]>
</mx:Script>

Now let us create a bar chart, for creating the bar chart use the tag <mx:BarChart>, then the data input can be given by attribute dataprovider={<Array name>} in our case we have to use dataProvider="{datas}"  then give the attribute id="mchart" 

<mx:BarChart dataProvider="{datas}" id="mchart">

Now for defining the label, tick marks and data position in the chart <horizontalAxis > tag is opened. Now for creating the labels in the x axis for showing the category use <mx:CategoryAxis> tag with attribute categoryField=”bike” and also mention the dataProvider name with array name.

<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{datas}" categoryField="bike"/>
</mx:horizontalAxis>

  To give the data for the chart to render the data, open the <mx:Series> tag . Use the <mx:ColumnSeries> for rendering the data and give the attribute like data provider, Xaxis, Yaxis like below.

<mx:series>
<mx:ColumnSeries dataProvider="{datas}" xField="bike" yField="mileage" />
</mx:series>

 Now close the previously opened <mx:BarChart> tag and <mx:Application> tag.

</mx:BarChart>
</mx:Application>

Creating Video Player:

 For creating the Video player we have two option here, one by using the stark component and another is by using the Flash media player component. For the convienient usage we are going to use the stark video playback component now.

The stark video component can be found in the component window that appears on the side. This can be inserted simply by drag and drop. The attributes like height and width can be defined by adjusting them using the mouse.

Example

<s:VideoPlayer source="04.flv" x="83" y="64" width="380" height="282" muted="true" autoPlay="false" autoRewind="true"/>

Using CSS & Styling Properties:

                The CSS styles can be used for the styling of the text and label boxes. The normal CSS coding can be used. The CSS codes and styles in flash builder don’t vary in much. For defining the styles of your own you need to open the <mx:Style> tag and write the CSS style coding. Then these styles can be used in the component by using the style attribute.If you are familiar with CSS you can understand it very easily. Here goes an example

<mx:Style>
.style1{
font-family: 'Arial';
font-size: 12px;
font-weight: 'bold';
}
</mx:Style>

                Now the style1 is created and if you want to use it in the text box, you can use that style by attribute called “StyleName”. For example if want to use that style in text box, use like below

<mx:Label text="Hello Flex!" styleName="labelStyle" />
mx:Button label="Button"  styleName="style1"/>

Style Attribute

Applicable to

Usage

backgroundAlpha

Window, WindowedApplication

For background alpha value

backgroundColor

Application, Window, WindowedApplication

Choosing background color

borderAlpha

List, TextInput, TextArea, TabNavigator, Accordion, Panel, DateChooser

Border alpha value

borderColor

List, TextInput, TextArea, TabNavigator, Accordion, Panel, DateChooser

To specify the border color

borderVisible

List, TextInput, TextArea, TabNavigator, Accordion, Panel, DateChooser

For border visibility

cornerRadius

Button, ToggleButton, DropDownList, ComboBox, NumericStepper, Panel, PopUpButton, Spinner, Tab, DateChooser

Rounded corner radius specification

dropShadowVisible

Panel, DropDownList, ComboBox, Menu

Visibility of drop shadow mentioning

focusAlpha

all focusable components

Specifying focus ring alpha value

focusBlendMode

all focusable components

blend mode of focus ring. Useful for accessibility

focusThickness

all focusable components

weight of the focus ring, in pixels

paddingBottom

TextInput, TextArea

Bottom padding

paddingLeft

TextInput, TextArea

Left padding

paddingRight

TextInput, TextArea

Right padding

paddingTop

TextInput, TextArea

Top padding

Using data grid:

The data grid is useful in viewing the data in a organized manner, it is similar to the list control but it have multiple columns. It displays the data having multiple properties. The data rows can be selected and further events with that data also possible. The data input may be from the XML list declared or from the external source.

The data grid can be defined by using the <mx:DataGrid> tag. The data input is provided by the “dataprovider” attribute. Before which you should have defined the data list. Then you should give the titles and data field for the each column in the data grid. The data for a column can be given through the “dataField’ attribute and the title for the particular column can be given through the “headerText” attribute.

Let us see an example so you can understand this concept much easier. First declare the data for data grid input. It may be in the XML format. The xml list can be created by using the <fx:XMLList> Tag with a desired id. Like below

<fx:Declarations>
<fx:XMLList id="bike">
<bike>
<name>Unicorn</name>
<manufacturer>Honda</manufacturer>
<type>4 Stroke</type>
<available>Yes</available>
</bike>                      
<bike>
<name>XL Super</name>
<manufacturer>TVS</manufacturer>
<type>2 Stroke</type>
<available>Yes</available>
</bike>
<bike>
<name>Apache RTR</name>
<manufacturer>TVS</manufacturer>
<type>4 Stroke</type>
<available>Yes</available>
</bike>
<bike>
<name>RX 100 </name>
<manufacturer>YAMAHA</manufacturer>
<type>2 Stroke</type>
<available>No</available>
</bike>
</fx:XMLList>
<fx:Declarations>

This data can given as a input for the data grid like show below

<mx:DataGrid id="datagrid1" dataProvider="{bike}" >

The column header and column data is given by using the tag <mx:DataGridColumn>

<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="manufacturer" headerText="Manufacturer"/>
<mx:DataGridColumn dataField="type" headerText="Type"/>
</mx:columns>
</mx:DataGrid>

Write the above code inbetween the <s:application> tag to test the code

Other available attribute for the <mx:DataGrid> tag

Attribute

Data input type

Description

resizableColumns

“true” or “false”

 To allow the resize of the column by user during run time

editable

“true” or “false”

To allow the editing the data grid on run time

resizableColumns

“true” or “false”

To allow the change of column size

sortableColumns

“true” or “false”

To allow the sorting of particular column when it was clicked

draggableColumns

“true” or “false”

To allow the column to be draggable

rollOverColor

Color Code

To specify the mouse roll over color of item

selectionColor

Color Code

To specify the selection color of items

Layout controls:

H Group:

The HGroup component is used for the alignment of the components. If you are inserting components in design view and if you want a proper gap between the each component and they need to be in the same horizontal line for good looking then you should prefer the HGroup Component. In the Source mode if you want to use it open <s:HGroup> tag and write the code for other components which need to be aligned in this tag.

V Group:

The VGroup component is similar to the previous but it is for the aligning in the vertical and the components are need to in a vertical line then it is preferable. These components are found under Layout Folder in the component in the Design. And for the source if you want to use it use <s:VGroup>. Like previous seen just the write down the component to be aligned vertical under this tab.

Alert Message:

It require in every programming to view the message during runtime. Message box is the ultimate essential for this. This used to give a message to user in order to get quick notification or quick reply like save changes or Are you sure to quit. For using message box you need to import the mx.controls.Alert.  Then by simply using Alert.show with required parameters, we can get message box. In addition, it can be configured to launch another function when the user answers the message box.

Different Alert Message & their coding

Alert.show("Welcome to Application","My Web App");

Alert.show("Are you sure to quit ?","My Web App",Alert.OK|Alert.CANCEL);








}