Type of technology

Flex is a highly productive, free open source framework available for building and maintaining web applications which deploy consistently on major browsers, desktops and operating systems.

also read:

• Adobe Flex Tutorials
• Java FX Tutorials
• Charting with Flex 4.0
• New Features in Flex 4.0

Look and Feel

Drag and Drop

The support for drag and drop can be added for all Flex components. Flex includes built-in support for drag-and-drop operation for some controls such as List, Tree and DataGrid, This automates processing required to support drag and drop operation. Drag-and-drop operation has 3 main stages: initiation, dragging, and dropping. A drag-and-drop operation will either copy or move data from drag initiator to drop target. On successful drop, Flex adds the data to drop target and, optionally, deletes it in case of a move from the drag initiator.

Type of Technology

Adobe Flex is a collection of technologies based on Adobe Flash platform. Currently Adobe Flex applications are build using Flex 3 SDK. Other technologies used with it are Livecycle Data Services (J2EE application integration). Flex applications are viewed on Adobe Flash Player.

Application architecture

Most of the web applications are usually build in MVC architecture in the case of a Flex RIA. The Controller can take form of the Service (or business object) on the application server which reads and updates a Database (the Model).When it receives the requests from the Flex application and itself, represents the Database records to the user.

Environment

For render response in terms of web pages, it requires a browser having Adobe Flash plugin installed on the client machine. For deployment purpose Flex 3 SDK is required on the server machine.

Tools Availability

Flash Builder 4 is the IDE for developing a Flex application. It has end to end support for building a Flex application, component etc. It has all the components given in palettes to that the designing of front end becomes very easy. However, flex application can be written in any text based tool and executed on machine having Flex 3 SDK.

Community Support

Since Flex is a very popular framework for developing RIAs, a huge community support is available. One very popular among them is CFLEX (Community Adobe Flex). This community is dedicated to Adobe Flex.

Frameworks supported

In Flex you have several options to choose for back-end server software (ranging from JEE to Dotnet etc). Few examples are –

• Flex with Struts:

With Flex, you can provide a rich front end to your Struts applications. There are two approaches for integrating Flex with Struts application which are based on 2 different ways a Flex application communicates with remote systems i.e. By using the traditional HTTP request/response mechanism or by using SOAP to invoke methods on remote services. Basically Flex can be taken as part of the View in a distributed MVC framework.

• Flex with Spring:

This integration is done with the help of Flex Data services i.e. BlazeDS. The BlazeDS adds Remoting Service, Message Service, and Proxy Service to the Flex application. Using Remoting Service a Flex application directly invokes methods of Java objects deployed in the application server. Spring beans are Java objects and so can be accessed using the remoting service of BlazeDS. BlazeDS supports the concept of a factory to configure the Spring container for instantiating Spring beans. The role of the factory is simply to provide ready to use instances of components for BlazeDS (instead of letting BlazeDS instantiate these components).

• Flex with Ruby on Rails:

Using this we can do more with very less code. Using Flex we can create the user interface for displaying data. Then we can design this user interface using Flex components for nice look and feel. Then setup the corresponding rails application. Flex can then talk to rails by using the HTTPService to call the different methods in your Rails application.

Animation/ Multimedia support

Flex is developed by Adobe Systems and so is closely related to Flash. Both Flash and Flex Work using ActionScript 3.0, both outputs a SWF format, and both of them use Flash Player to display their content. But Flash is good in animation and Flex by contrast is best at the developing applications and things that are associated with it—charting, handling data, and such. So, Flex can focuses on animations such as transitions that place as menus expand, or items such as image scaling to different sizes and in different states. To add more animation capability we can integrate Flash and Flex in three ways: By using Flash for creating skins and component animations, by adding complex timeline animations, and by adding in Flash multimedia clips that can be controlled in Flex.

Ease of testing

Flex Builder comes with debugging tools which helps in unit testing of a Flex application. Breakpoints can be set both in ActionScript as well as in MXML code that allow application execution to pause at a specified code location. Flex 3 comes with an option of profiling the application. The profiler helps in identifying the performance bottlenecks and memory leaks in the application. It tells about Call frequency, Method duration, Call stacks, Number of instances, Object size and Garbage collection. Apart from these many external tools are available for testing flex application like FlexMonkey, FunFx, QuickTestProfessional etc

Flexibility and Scalability

Flex application is backend agnostic and can work with any kind of backend server till it sends and receive data in the format/protocol supported by Flex. Scalability of Flex application basically depends upon the underlying application server. The Flex application scales upto the level of support provided by the application server.

Browsers dependence

Flex is doesn’t directly depend on the type of browser but is dependent on the Flash Player web browser plug-in. But as per the statistics 98% of browsers available currently have Flash Player plug-in with version 7-9 installed. So, a Flex-generated code works on each client regardless of browser/platform. So, flex has a limitation in this respect that they are limited by the constraints of Flash Player and cannot display anything outside the boundaries of the player’s space embedded in the web page.

Network performance

The Flex client-side processing model and configuration ability helps in improving the network performance. For example, the network bandwidth and connections can be improved by embedding the product images within the SWF file. The SWF file would increase to 60K (or, a total size of 260K), but the application would require 15 fewer network connections to the server. A second potential improvement is to disable the Flex history management feature if it is not required; this prevents the Flex application from transmitting the history management HTML page, thereby reducing network overhead. (Source: Macromedia White Paper, Flex Performance Brief: A Comparison of Flex and Java Server Pages Applications May 2004)

Client Performance

Flex offers the ability to create Rich Internet Applications (RIAs). Misusing this power can result in areas of poor performance. Flex is like any other programming model because certain coding practices can be detrimental to the overall performance of the client. So, depending upon the coding techniques follow are affected at client side:

• Startup time
• Playing complex effects smoothly
• Performance of charting components
• Streaming of multimedia content

Client Validation Support

As we know, Flex is best used for good user interface. The data that user enters in user interface control might or might not be appropriate for our application. Adobe Flex applications, uses a validator to ensure that values in the fields of the form meet certain criteria.

Flex includes some set of validators for common types of user input datas, such as zip code, phone numbers, and credit card numbers etc. Validators are created in MXML by using a validator tag such asor. Validators uses following 2 properties to specify the item which needs to be validated:

• source: This specifies the object which contains the property to be validated .We can set this for an instance of a component or to a data model. You can use data binding syntax in MXML for specifying the value for the source property.
• property: A String that specifies the name of the source property that contains value to validate. This property support dot-delimited Strings for specifying nested properties.

Working with BlazeDS Remote Data Services using Flex 4.0

What is BlazeDS?

BlazeDS is a collection of data services that help and simplify building of data driven RIA. They also improve the performance of remote data access operations. BlazeDS supports and enables real time data push and asynchronous collaborative applications. BlazeDS service is deployed on Java EE web/application server.

also read:

• Adobe Flex Tutorials
• Java FX Tutorials
• Charting with Flex 4.0
• New Features in Flex 4.0

The Flex components like Remote Object, Producer, Consumer, HTTPService and WebService interact with a BlazeDS server.

BlazeDS supports with three varieties of key services:

• The Remoting Service: This enables Flex application to directly interact and invoke methods of remote Java objects that are deployed in application server.
• The Message Service: This supports and enables Flex application to interact with publish/subscribe mechanism to publish and subscribe messages to a messaging destination. This enhances the building of application with real time data push and collaboration.
• The Proxy Service: This enables Flex application to implement secure and reliable using cross domain service requests. Flex applications can access services from different domains.

BlazeDS looks after instantiating and managing the remote objects’ life cycle configured in remoting-config.xml.

Working with Remote Objects using BlazeDS

• Step 1: BlazeDS environment setupThe BlazeDS server can be downloaded from the Adobe open source. It works with Tomcat to deploy its services.
• Step 2: Create a Java Web project FlexWebAppUpdate the web.xml with the following:

  configuring web.xml
  [code lang=”xml”] <!– Http Flex Session by binding listener support –>
  <listener>
  <listener-class>flex.messaging.HttpFlexSession</listener-class>
  </listener>

  <!– Servlet : MessageBroker –>
  <servlet>
  <servlet-name>MessageBrokerServlet</servlet-name>
  <display-name>MessageBrokerServlet</display-name>
  <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
  <!– loading the services-config.xml –>
  <init-param>
  <param-name>services.configuration.file</param-name>
  <param-value>/WEB-INF/flex/services-config.xml</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
  <servlet-name>MessageBrokerServlet</servlet-name>
  <url-pattern>/messagebroker/*</url-pattern>
  </servlet-mapping>[/code]

• Step 3: Copy and paste the required jars from BlazeDS turnkey server to WEB-INF/lib folder
• Step 4: Create a folder called flex and place the xml files like messaging-config, proxy-config, remoting-config and services-config inside downloaded from BlazeDS server.The services-config.xml includes and loads the above mentioned xml files.
• Step 5: Update the remoting-config.xml with following entry:
  [code lang=”xml”] <!—creating the destination for the StockQuoteService remote Java object
  <destination id="stockQuote">
  <properties>
  <source>mypack.StockQuoteService</source>
  </properties>
  </destination>[/code]
• Step 6: Create the Flex client application as below:
  [code lang=”xml”] <?xml version="1.0" encoding="utf-8"?>
  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
  <!– declaring the remote object in the declaration to connect to BlazeDS destination –>
  <fx:Declarations>
  <s:RemoteObject id="myStock" destination="stockQuote"/>
  </fx:Declarations>
  <s:Panel title="Stock Quotes" width="600" height="240"
  horizontalCenter="0"
  verticalCenter="0" backgroundColor="#7DE4D9" contentBackgroundColor="#BEBB5D" chromeColor="#6CB6B3" rollOverColor="#7792BC">
  <s:layout>
  <s:VerticalLayout/>
  </s:layout>
  <!– connecting the data provider of data grid to the remote onject –>
  <mx:DataGrid width="100%" dataProvider="{myStock.getStocks.lastResult}" />
  <!– invoking the method of the remote object –>
  <s:Button label="Get Stocks" click="myStock.getStocks()"/>
  </s:Panel>
  </s:Application>[/code]

Creating server side Java object

• Step 7: Create the Java application and deploy to the BlazeDS web application
  [code lang=”java”] package mypack;
  import java.util.HashMap;
  public class StockQuoteService {
  HashMap stocks[]=new HashMap[5];
  public StockQuoteService()
  {
  for(int i=0;i<5;i++){
  stocks[i]=new HashMap();
  stocks[i].put("Stock1",Math.random()*100);
  stocks[i].put("Stock2",Math.random()*100);
  stocks[i].put("Stock3",Math.random()*100);
  }
  }
  public HashMap[] getStocks()
  {
  return stocks;
  }
  }[/code]
  The .class of above Java class must be placed in the classes/mypack folder.
• Step 8: The J2EE BlazeDS server details need to be configured either when the Flex application is created or update in the Flex server details of flex application as follows:

• Step 9: Restart tomcat
• Step 10 : run the flex applicationThe data grid incorporates the receiving result from the remote object and prepares the grid accordingly.

Conclusion

The BlazeDS server consists of a Java EE web application. A Flex client sends a request thru a channel then the request is directed tiwards to an endpoint/post on the BlazeDS server. Then the request is further routed thru a chain of Java objects including the MessageBroker , a service, a destination, and adapter objects. The adapter checks to get the request served locally or remote server.

Flex 4 Charting

Charting is a mechanism of depicting data using graphical elements known as charts.Flex charts are persuasive with using static charts and as well animated. Flex enables to create interactive and attractive dashboards also.

also read:

• Adobe Flex Tutorials
• Java FX Tutorials
• Charting with Flex 4.0
• New Features in Flex 4.0

This article describes how to create charts, the customization, use multiple axes, and support user interaction using Flex. Flex Charts can also be programmed to work with drag-and-drop operations and draw selections on a collection of data points.

All the Flex charts extend either the Cartesian or the PolarChart class. Cartesian charting works with on the basis of the Cartesian coordinate system using x and y points to describe data points on vertical & horizontal axes.The PolarChart class is base for pie chart that helps to describe regions within a rounded or radial space.

Charts can be created using MXML components or ActionScript classes.

Components in Chart:

• Chart: The chart is the structure that connects to various parts.
• Series: A compilation of associated data points
• Axes: Two type as Horizontal and vertical axes. Flex’s charts are the two-dimensional Flex charts can have can have multiple axes.
• Axis renderers: for Rendering lines and labels
• Elements: Various parts like points, annotations, grid lines etc to be displayed.
• Labels: Labeling the aces and series

Flex provides various types of charts including Area, Bar, Bubble, Candlestick, Column, HLOC, Line, Pie and Plot.It also provides the corresponding Chart classes and Series component classes for the above list.

Series are collections of associated information used for charts to display. Every chart can have at least one series. Each chart type associates with a corresponding series component. The series data can be statically defined or retrieved from remote objects or web services.

How to create Chart?

Creating a chart involves selecting a chart type and using its analogous series component to design the data points, and supplying at least a horizontal axis.

The following Flex program displays the Area Chart:

Area Chart Example
[code lang=”xml”]<?xml version="1.0"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
height="600">
<fx:Script><![CDATA[
import mx.collections.ArrayCollection;
// using ArrayCollection as data provider
[Bindable]
public var companyExpenses:ArrayCollection = new ArrayCollection([
{Quarter:"Q1", Profit:1000, Expenses:1500, Amount:750},
{Quarter:"Q2", Profit:2000, Expenses:200, Amount:200},
{Quarter:"Q3", Profit:1500, Expenses:500, Amount:900},
{Quarter:"Q4", Profit:2500, Expenses:500, Amount:500}
]);
]]></fx:Script>
<s:Panel title="Areal Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<!– adding the Area Chart –>
<mx:AreaChart id="myAreaChart" dataProvider="{companyExpenses}"
showDataTips="true">
<!– defining the horizontal axis –>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{companyExpenses}"
categoryField="Quarter"/>
</mx:horizontalAxis>
<mx:series>
<!– Defining AreaSeries for Area Chart –>
<mx:AreaSeries
yField="Profit"
displayName="Profit"/>
</mx:series>
</mx:AreaChart>
<!– adding the legend –>
<mx:Legend dataProvider="{myAreaChart}"/>
</s:Panel>
</s:Application>
[/code]
The output shows:

Working with Line Charts

Let us consider the Mobile sales report in XML format as below:
[code lang=”html”]
<mobilesales>
<data interval="Q1" mobile="1" xSales="2.32"
mUnits="2" ySales="1.23"/>
<data interval="Q2" mobile="2" xSales="2.42"
mUnits="3" ySales="1.18"/>
<data interval="Q3" mobile="3" xSales="2.22"
mUnits="4" ySales="1.28"/>
<data interval="Q4" mobile="4" xSales="2.52"
mUnits="1" ySales="2.18"/>
</mobilesales>
[/code]
The line chart can be created as follows:
[code lang=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" >
<fx:Declarations>
<fx:XML id="dataXML" source="salesData.xml"/>
<s:XMLListCollection id="salesData"
source="{dataXML.data}"/>
</fx:Declarations>
<s:Panel title="Mobile Product Sales" width="500" height="250">
<s:layout><s:VerticalLayout/></s:layout>
<mx:Legend dataProvider="{salesChart}"/>
<mx:LineChart id="salesChart"
dataProvider="{salesData}"
height="100%" width="100%">
<mx:horizontalAxis>
<mx:CategoryAxis
categoryField="@interval"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries
yField="@mobile"
displayName="Mobiles"/>
<mx:LineSeries
yField="@mUnits"
displayName="Mobile Units"/>
</mx:series>
</mx:LineChart>
</s:Panel>
</s:Application>
[/code]
The output is shown as below:

The Y axis is called as value axis as it represents the value in the series. It by default starts at 0 value and goes to the largest value identified in the series.

The X axis is called as category axis as it represents the category. It labels by default are spread as with the width of the chart.

Chart Legends & Filters

What is Legend?

The Legend component resides outside of the chart tag. The legend connects with the chart’s id property for its source data. The legend recognizes chart’s child series and extorts the design attributes of each series.
[code lang=”xml”]
<mx:Legend dataProvider="{mobileSalesChart}"/>
[/code]
Applying Area Chart for the same data:

Area Chart Example

[code lang=”xml”]
<mx:AreaChart id="mobileSalesChart"
dataProvider="{salesData}"
height="100%" width="100%">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="@interval"/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries yField="@mobile"
displayName="Mobiles"
alpha="0.6"/>
<mx:AreaSeries yField="@mUnits"
displayName="Mobile Units"
alpha="0.6"/>
</mx:series>
</mx:AreaChart>
[/code]

The output would show as:

Converting the chart into Bar chart

Let us consider the Mobile sales report in XML format for this chart:

[code lang=”xml”]
<mx:BarChart id="salesChart"
dataProvider="{salesData}"
height="100%" width="100%">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="@interval"/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries xField="@mobile"
displayName="Mobiles"/>
<mx:BarSeries xField="@mUnits"
displayName="Mobile Units"/>
</mx:series>
</mx:BarChart>
[/code]

The output is as shown below:

How to filter Chart Data?

Flex 4 provides three techniques to filter the chart data.

• filterData
• filterDataValues
• filterFunction

filterData is the most fundamental option and holds the boolean value. If it is set to true then invalid null, invalid values in dataset, NAN, undefined, and out of range values will be removed.The default value is false.

The filterData value will be ignored, If the filterFunction or filter-DataValues properties of Series is set.filterDataValues gives the ability to filter null, undefined , NAN and out of range values from the dataset.If data Series has a filterFunction set, then filter-DataValues property will be ignored.

The filter-Function property is the most powerful way of doing the filtering. A filterFunction defined accepts an Array that relates the Series and returns an Array of items.

What is stacking chart?

Stacking is useful feature for charts when to represent the chart with accumulative visualization of series.

Area chart, Bar chart, Column chart support this stacking feature.

The following example the stacking the bar chart:
[code lang=”xml”]
<mx:BarChart type="stacked" id="salesChart"
dataProvider="{salesData}"
height="100%" width="100%">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="@interval"/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries xField="@mobile"
displayName="Mobiles"/>
<mx:BarSeries xField="@mUnits"
displayName="Mobile Units"/>
</mx:series>
</mx:BarChart>
[/code]

The output is shown as below:

Types of Charts

What is Bubble Chart?

Bubble charts enable to add a third dimension using the size of a bubble as a way of depicting scale. Flex supports normally two-dimensional charts but using this chart, that feature can be enhanced.

minRadiusis Number property specifies minimum value for a data point with defaults value as 0. Similarly maxRadius is with 50 as default.
xField property is optional and contains the related category value.
yField property contains the category/value field.
radiusField property contains the value for the size of the bubble.

The following code illustrates the Bubble chart:

using Bubble chart
[code lang=”xml”]
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var series1:ArrayCollection = new ArrayCollection( [
{"xVal": 30, "yVal": 10, "rad":Math.random()*100 },
{"xVal": 40, "yVal": 20, "rad":Math.random()*100 } ,
{"xVal": 50, "yVal":30, "rad":Math.random()*100 }]);
[Bindable]
private var series2:ArrayCollection = new ArrayCollection( [
{"xVal": 20, "yVal": 20, "rad":Math.random()*100 },
{"xVal": 30, "yVal": 30, "rad":Math.random()*100 },
{"xVal": 40, "yVal": 40, "rad":Math.random()*100 } ]);
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="The Bubble Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:BubbleChart id="myChart"
showDataTips="true">
<mx:series>
<mx:BubbleSeries
dataProvider="{series1}"
displayName="Series 1"
xField="xVal" yField="yVal"
radiusField="rad"/>
<mx:BubbleSeries
dataProvider="{series2}"
displayName="Series 2"
xField="xVal" yField="yVal"
radiusField="rad"/>
</mx:series>
</mx:BubbleChart>
<mx:Legend dataProvider="{myChart}"/>
</s:Panel>

[/code]
The output would show as:

HLOC and Candlestick charts

What are HLOC and Candlestick charts?

Candlesticks and HLOC charts require four parts in one chart. A vertical line specifies high and low values.
A rectangular box that contains the body represents on top of the line. If the box is unfilled, then the top of the box is the confirming the end value. And the bottom of the box is the starting value. If the box is filled in, the top of the box is the starting value if the box is filled in.

HLOC charts are also similar to the same. But they use left and right sticks to designate the starting and ending values.

A vertical line indicates the high and low values. This line represents the series of values.

A left tick indicates the starting value. A right tick indicates the ending value.

The variation is that candlesticks need all four data points. In spite of the HLOC’s name, the starting value is optional. The four data points are needed to build the Candlestick Series and HLOCSeries.

• highField property contains the high value
• lowField property contains the low value
• openField property contains the open value; optional for HLOCSeries
• closeField property contains the close value
• xField property contains the category value for the X axis that is optional.

Creating the Candlestick Chart:

[code lang=”xml”]
<fx:Declarations>
<fx:XML id="stockXML" source="hloc.xml"/>
<s:XMLListCollection id="stockInfo"
source="{stockXML.info}"/>
</fx:Declarations>
<s:Panel title="Mobile Stock Quotes"
width="500" height="250">
<s:layout><s:VerticalLayout/></s:layout>
<mx:CandlestickChart id="stockChart"
dataProvider="{stockInfo}"
height="100%" width="100%">
<mx:horizontalAxis>
<mx:CategoryAxis
categoryField="@sdate"/>
</mx:horizontalAxis>
<mx:series>
<mx:CandlestickSeries
highField="@high" lowField="@low"
openField="@opening" closeField="@closing"/>
</mx:series>
</mx:CandlestickChart>
</s:Panel>

===============================================
Define the XML data as below for Mobile stock values

<stockinfo>
<info sdate="03/11/2011" high="25" low="10" opening="22" closing="23"/>
<info sdate="03/12/2011" high="30" low="17" opening="28" closing="20"/>
<info sdate="03/13/2011" high="40" low="22" opening="35" closing="30"/>
<info sdate="03/14/2011" high="50" low="10" opening="45" closing="32"/>
<info sdate="03/15/2011" high="60" low="40" opening="46" closing="48"/>
</stockinfo>

[/code]

The output is as shown below:

After changing the chart to HlocChart, the output would look like

The output is as shown below:

What is Pie Chart?

This chart is used to partition the data segments. The size of each segment indicates weight and value.

Consider the following mobile profit data:
[code lang=”xml”]
<mobiledata>
<profits>
<info name="Mobile1" profit="387465"/>
<info name="Mobile2" profit="578233"/>
<info name="Mobile3" profit="467957"/>
<info name="Mobile4" profit="510647"/>
</profits>
</mobiledata>
[/code]

The pie chart can be implemented as below:
[code lang=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<fx:XML id="mobileXML" source="mydata.xml"/>
<s:XMLListCollection id="mobileData"
source="{mobileXML.profits.info}"/>
</fx:Declarations>
<mx:Legend dataProvider="{mobileProfitChart}"/>
<mx:PieChart id="mobileProfitChart"
dataProvider="{mobileData}"
height="100%" width="100%">
<mx:series>
<mx:PieSeries field="@profit" nameField="@name"
labelPosition="callout"/>
</mx:series>
</mx:PieChart>
[/code]

Types of Charts

What is Plot chart?

A plot is just like a grid and specifically defines where each data point provides. x and y coordinates will be used to plot sets of data.

Create a plot chart as below:

using Plot chart
[code lang=”xml”]
<fx:Script> <![CDATA[
import mx.collections.*;
[Bindable]
public var mydataSet:ArrayCollection;
public function init():void {
var myarray:Array = [];
for (var i:int=0;i < 10;i++) {
var setValues:Object = {
A:Math.random()*100,
B:Math.random()*100,
C:Math.random()*100,
D:Math.random()*100
};
myarray.push(setValues);
}
dataSet = new ArrayCollection(myarray);
}
]]></fx:Script>

<s:Panel title="Plotting Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:PlotChart id="myChart"
dataProvider="{dataSet}" showDataTips="true">
<mx:series>
<mx:PlotSeries
xField="A"
yField="B"
displayName="Series X"/>
<mx:PlotSeries
xField="C"
yField="D"
displayName="Series Y"/>
</mx:series>
</mx:PlotChart>
<mx:Legend id="l1" dataProvider="{myChart}"/>
</s:Panel>
[/code]
The output of plot chart is:

Customizing charts

How to customize charts?

Flex API enables us to work with various charts and provides support to customize them as well.

What is Series stroke?

A stroke enhances the visualization of the line or the outside of the series. To apply a stroke,Property needs to be identified to use for a specified series.

Changing the previous chart by adding the color

[code lang=”xml”]
<fx:Declarations>
<fx:XML id="mobileXML" source="mydata.xml"/>
<s:XMLListCollection id="mobileData"
source="{mobileXML.profits.info}"/>
<fx:Array id="coloring">
<s:SolidColor color="Yellow" alpha="0.5"/>
<s:SolidColor color="Maroon" alpha="0.5"/>
<s:SolidColor color="Red" alpha="0.5"/>
<s:SolidColor color="Blue" alpha="0.5"/>
</fx:Array>
</fx:Declarations>

<mx:Legend dataProvider="{mobileProfitChart}"/>
<mx:PieChart id="mobileProfitChart"
dataProvider="{mobileData}"
height="100%" width="100%" >
<mx:series>
<mx:PieSeries field="@profit" nameField="@name"
labelPosition="callout" fills="{coloring}"/>
</mx:series>
</mx:PieChart>
[/code]

Conclusion

Charting in Flex is very powerful as it can be used to implement various charts for the requirements and building dashboards.

Charts consists of many parts that include series, axes, labels, sub charts , and elements.

Flex provides support for implementing nine types of charts that are required to address to the common requirements. The stroke and fills features can be used to enhance the charts display for effective customization.

This article is based on Flex4 in Action, published on 10-November-2010. It is being reproduced here by permission from Manning Publications. Manning publishes MEAP (Manning Early Access Program,) ebooks and pbooks. MEAPs are sold exclusively through Manning.com. All print book purchases include an ebook free of charge. When mobile formats become available all customers will be contacted and upgraded. Visit Manning.com for more information.

also read:

• Adobe Flex Tutorials
• Java FX Tutorials
• Charting with Flex 4.0
• New Features in Flex 4.0

Flex 4 Components ExposedThis article is taken from the book Flex 4 in Action. The authors discuss Spark component architecture and explain how to create custom components. The article also features skinning with the SparkSkin Object.

You’ve used components since the start of this book. They range from controls like the simple Button that accept input from the user, to container components like the VBox. Custom components are “home-brewed” so to speak, and are created by extending the same base classes as the default components that are part of the Flex framework.

Now we’ll tell you about the underlying foundation of the Spark component architecture in Flex 4. Most importantly, you will learn key facets of that are specific to the Flex 4 Spark architecture. This will get you on your way toward building your own collection of Spark-based components that take advantage of Spark architecture.

Spark Component Architecture

If you’ve been a Flex developer for a little while now, or you’ve used a different framework for client side interface creation, you may have heard of the conceptual Model-View-Controller (MVC) architecture. The Flex 4 Spark component architecture puts a little spin on the MVC pattern, and adds a fourth part – the skin. This means that every Spark-based component has the following four pieces to it:

• Model: Properties and business logic are contained here, and are usually written in ActionScript. For the sake of best practice, you really should not be placing visual or behavioral logic along with the model. We will elaborate on that in a moment.
• View: Contains logic used mostly for the layout and positioning of the component on the stage during runtime. This information can be its own ActionScript class, but it is usually more logical to either: A) abstract the logic into a base class so it can be reused by other components, or B) add it to the component’s
  controller class.
• Controller: This is responsible for defining the behavior of the component, the states that are contained within it, and provides definitions of the sub-parts that are declared in the Skin class using variable names. This typically comes in the form of ActionScript.
• Skin: Declares all of the visual elements that make up the component. This is usually an MXML file (largely thanks to FXG), and is tightly coupled with the Controller.

There is currently a lot of debate on what we will explain next, and you will ultimately have to exercise best judgment using a combination of your logical reasoning skills, along with the knowledge that you are gaining in this article.

As you saw a moment ago, there are four pieces that make up the Spark component architecture. Where this gets confusing is that you will often only see two classes for these four parts, one in ActionScript and the other MXML. The ActionScript class typically wraps the model, view, and the controller pieces into a single class, while the MXML is strictly meant to act as the skin for the respective component. According to the Flex 4 documentation:

“The general rule is any code that is used by multiple skins belongs in the component class, and any code that is specific to a particular skin implementation lives in the skin.”

This makes sense in theory, but does not usually provide enough of what we often refer to as separation of concerns. This is why you might notice that the better Flex developers are using three layers for their components:

1. Component: The controller and the view logic, often written in ActionScript
2. Presentation Model: Contains the code for the model.
3. Skin: The MXML skin file

With this method, it is reasonable to suggest that this takes things back to the core concept of the Model-View- Controller again; whereas the Component class is the controller, the presentation model class is the model, and the Skin becomes the view element of the MVC architecture.

Let’s put all this theory into practice by taking a look at some real-life situations.

The many flavors of custom components

Creating a custom component means extending a pre-existing class that either directly or indirectly extends one of the Flex framework classes. Picture three 2010 Ford Mustangs side-by-side. The first is the base Mustang Coupe with the standard V6 engine. The second is the Mustang GT with a 4.6-liter V8, upgraded wheels, and some other upgrades. The third is a Shelby Cobra, sporting 510-horsepower, and premium sound and navigation system among other upgrades. The second and third mustangs both extend the base mustang, so they inherit all of the properties of the first, and then add their own additional amenities.

Similarly, the Cobra extends the GT, so the Cobra inherits the properties of the GT and the standard Mustang, while adding its additional features. But wait! How could the Cobra and the GT inherit the properties of the standard Mustang if the engines are different? The answer is that the GT overrides the engine property of the standard Mustang, and the Cobra overrides the engine of the GT.The relationship between these three automobiles is illustrated in the simple class diagram shown in
Figure 1.

When you extend classes in the Flex framework, you inherit the properties, functions, events, and styles from the class you are extending. This makes code a lot more manageable and is one of the fundamental characteristics of object oriented programming and code reusability. Let’s take a look at two different component types.

Simple vs. Composite

There are two major types of custom components: simple and composite. A simple custom component extends a single, pre-existing component.

The fun doesn’t stop there though. When developing Flex applications, you will find it valuable to group simple components together, keeping your application better organized. You can create components that group disparate components in what’s called a composite component, which is a container that holds any number of additional components inside of it.

MXML vs. ActionScript

When developing custom components, you have the option of creating your component in either MXML or ActionScript. In most cases, either one will do. The main advantage of MXML is that you can usually write the code needed with fewer lines. However, some flexibility is lost in regard to object customization, so advanced custom components are almost always written as ActionScript classes.

Creating your component in MXML is often a popular choice for composite components that are not very advanced in nature. An excellent example of this is a shipping information form. It is useful to have a reusable shipping form component because there are many applications that it can be used for. This means that if the component is created with loose couplingin mind,it can be a highly reusable composite component that can be built using MXML.This approach is the easiest to get started with.

MIGRATION TIP
In Flex 3, MXML composite components were usually based on the Flex Canvas container from the Halo library.
In Flex 4, MXML composite components are created using the MXMLComponent base class or the Group class from the Spark library.

Your second option is to create your component in ActionScript. This technique is more advanced because it requires stronger ActionScript skills.You can override the functions of the component class you’re extending from, and you have fine-grained control.

The advantage of this method is that you have far greater power to turn the coolness factor on your custom component into overdrive.The disadvantage is that if you are building a composite component, you can no longer lay out the controls in Flash Builder’s design view. Advanced developers consider this a small price to pay for the increased flexibility, while others feel that it slows down the development process. Finding the formula that works best for you is just a matter of trial-and-error.

Now that you have learned about the options available, the first custom component you will build is of the simple type.

TIP
When it comes to making custom components, your goal should be to make it simple for other developers to use your component (even if it’s complicated inside). Later, we’ll give you tips on how to achieve this goal.

Creating simple custom components

At the most fundamental level, a viewable component (one which is added to the display list of your application) can be categorized according to the purpose served by the component. This includes: controls, containers, item renderers, effects, and skins.

The first custom component that you will build is an extension of the Flex ComboBox, and is considered a control because it is used to control application behavior by initiating an action or sequence of actions when the value is changed.

Build your own home-grown simple ComboBox

Let’s walk through a simple example. Say your application is geocentric, meaning that pieces of information tend to carry location data. As a result, a few forms require the user to specify an address of some sort. To help your users, you want to provide a drop-down menu of U.S. states, as figure 2 demonstrates.

Wouldn’t it be awesome if any part of your application could display this list by calling a single line of code? OK, that’s a loaded statement, but the example is as simple as this:
Listing 1 CBStates.mxml: ComboBox-based custom component

[code lang=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<mx:dataProvider>
<mx:Object stateCode="AK" label="Alaska"/>
<mx:Object stateCode="AL" label="Alabama"/>
<!– the rest of the US states –>
</mx:dataProvider>
</mx:ComboBox>
[/code]

In code listing 1, you are presented with an example of simple custom ComboBox control that shows a listing of U.S. states when clicked, and allows selection of a state to be submitted as a data object. This type of component is highly reusable, since it is often needed when creating an address submission form. Listing 2 demonstrates how the component is instantiated with MXML in a Flex application.

Listing 2 Main application file for CBStates

[code lang=”xml”]
2
3
4
5
6
7

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
backgroundColor="white" xmlns:local="*">
<local:CBStates/>
</s:Application>
[/code]
If you save the two files to the same directory and then run the application, you should end up with a drop-down combo box that lists all the U.S. states, as shown earlier in Figure 1.

One advantage of extending pre-existing Flex user interface components is that anyone who uses it will know its general properties and behaviors as a result of inheritance. In this case, if they know your simple custom component is based on a ComboBox, then they also know your component supports the same properties, events, styles, and functions as the Flex ComboBox control. Now you will take what you just learned and relate it to the Flex 4 Spark library and architecture.

Simple Spark Components

A visual object on the stage is considered a Spark component when it inherits the Spark component architecture by extending a Spark visual component base class. This includes:

• SkinnableContainer
• SkinnableDataContainer
• Group
• DataGroup
• MXMLComponent
• ItemRenderer
• SkinnableComponent
• Any Spark library component (e.g. a Spark List)
• UIComponent

If you are familiar with Flex 3, you may be wondering about the last item in the list, UIComponent. Technically, all visual components in Flex are subclasses of UIComponent, regardless of the component library that the component comes from.
However, certain facets of a component that extends the base UIComponent class can make it a Spark component. For example, if an ActionScript composite component extends UIComponent as the base class, and then instantiates a Group or SkinnableContainer object to hold a set of display objects, then we would refer to it as a Spark composite component.

Most of the time, custom Spark-based components will extend the SkinnableComponent class, as you will see in the examples that will come later.But first, it’s time for some discussion on skins and how the SparkSkin object fits into the picture.

Migration Tip
Beware! One of the biggest compatibility issues that haunted the Flex 4 beta releases involved placing Spark components inside of a Canvas container. The problem reared its ugly head in some unusual ways, even after it was thought to have been resolved. In one of my own experiences, the problem caused compile errors within Flash Builder beta of type “unknown” and source “unknown”. The source of the problem turned out to be a SkinnableContainer that was instantiated inside of a Canvas. The moral of the story here is: if you find yourself debugging and feeling like you are chasing a ghost, consider checking your application to see if you have any Canvas objects before you start banging your head against the wall. If you do, try switching the Canvas to a Group. If that doesn’t fix the problem, we still suggest leaving the Group in place of the Canvas as we have generally found the Group container to be more reliable and functional than Canvas.

Skinning with the SparkSkin object

The decoupling of display logic is one of the most valuable architectural enhancements in the Spark library.

SparkSkin basics

Imagine you just built an application with a set of five custom components. If your five components each extend one of the classes listed earlier from the Spark library, you can create an unlimited number of skins for each of your five custom Spark-based components and keep them organized in an entirely separate package or library. You can then declare a different default skin for each instance of the same component, or even swap skins on the fly by triggering an event during runtime from a user initiated behavior or sequence. Isn’t that cool? Code listing 3 is an example of a Spark skin component.
Listing 3 Example of a skin for a Spark Button
[code lang=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" #A
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ai="http://ns.adobe.com/ai/2008" #B
xmlns:d="http://ns.adobe.com/fxg/2008/dt" #C
minWidth="21" minHeight="21">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<!– FXG exported from Adobe Illustrator. –>
<s:Graphic version="1.0" viewHeight="30"
viewWidth="100" ai:appVersion="14.0.0.367" d:id="mainContainer">
<s:Group x="-0.296875" y="-0.5" d:id="firstGroup"
d:type="layer" d:userLabel="Group One">
<s:Group d:id="secondGroup"> #D
<s:Rect x="0.5" y="0.5" width="100"
height="30" ai:knockout="0">
<s:fill>
<s:LinearGradient x="0.5" y="15.5" scaleX="100" rotation="-0">
<s:GradientEntry color="#ffffff" ratio="0"/>
<s:GradientEntry ratio="1"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#0000ff" caps="none"
weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Rect>
</s:Group>
</s:Group>
</s:Graphic>
<s:Label id="labelElement" horizontalCenter="0" #E
verticalCenter="1" left="10" right="10"
top="15" bottom="2">
</s:Label>
</s:SparkSkin>

#A Skins ALWAYS extend SparkSkin in Flex 4
#B Namespace declaration for Illustrator graphics
#C Namespace declaration for FXG graphics
#D Group object followed by design
#E Label declaration followed by style information
[/code]
When you create Spark components, you will usually create two classes for every component. The component class holds behavioral logic, such as events that are dispatched by the component, the component’s data model, skin parts that are implemented by the skin class, and view states that the skin class supports.

The skin class on the other hand, is responsible for managing visual appearance of the component and visual sub components, including how everything is laid out and sized. It must also define the supported view states, graphics, and the data representation.

Migration Tip
FXG stands for “Flash XML Graphics”, and in essence, does for MXML what CSS did for HTML. However, FXG has quite a bit more power under the hood, so while its relationship to Flash and Flex components can be loosely compared to the relationship between CSS and HTML, it does not make logical sense to compare FXG directly to CSS. Many of the limitations imposed on CSS do not exist with FXG. Although it may seem strange to compare FXG to CSS, FXG theoretically accomplishes the same thing that CSS does: It separates layout structure and behavioral code from design and graphics code. This makes it easier to create components that can be quickly and easily integrated into any application without even having to look at the component’s code base.

Using Metadata to Bind Component Skins

The component and skin classes must both contain certain metadata in order for them to work properly together.

The component class must:

• Define the skin(s) that correspond to it
• Identify skin parts with the [SkinPart] metadata tag
• Identify view states that are supported by the component using the [SkinState] tag

The skin class must:

• Use the [HostComponent] metadata tag to specify the corresponding component
• Declare view states and define the appearance of each state
• Define the way skin parts should appear on the stage

Let’s take a look at the three basic essentials of a skin component in further detail, starting with the SkinState
metadata tag.

Migration Tip:
Note that skin parts must have the same name in both the skin class and the corresponding component class or your application will show compile errors or throw runtime errors.

CUSTOM COMPONENT VIEW STATES

The view states that are supported by a component and its corresponding skin must be defined by placing a [SkinState] tag for every view state. These tags are placed directly above the class declaration, as seen in Listing 4.

Listing 4 View states are defined directly above the class statement.

[code lang=”html”]
package
{
import spark.components.supportClasses.SkinnableComponent;
[SkinState("default")] #A
[SkinState("hover")]
[SkinState("selected")]
[SkinState("disabled")]
public class SkinStateExample extends SkinnableComponent
{
public function SkinStateExample()
{
super();
}
}
}
#A SkinState tags preceed the class declaration
[/code]
You can now control the state of the component by setting the currentState property with the component
declaration in MXML, as seen in Listing 5.
Listing 5 Controlling custom component state
[code lang=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:MyComp="myComponents.*">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label text="Login or Register"
fontSize="14" fontWeight="bold"/>
<MyComp:SkinStateExample currentState="default"/> #A
</s:Application>
#A Use currentState to set the component’s state

[/code]
While states are defined in a component’s implementation class and controlled in the skin, skin parts are defined in the MXML skin and controlled by the implementation class.

DEFINING SKIN PARTS

The importance of the [SkinPart] metadata tag is another critical facet of understanding the relationship between component classes and skin classes in the Spark architecture. As you will see in a moment, this metadata tag is especially useful for creating custom components.

The implementation of the SkinPart metadata is simple. First, define skin parts in the same way as you would declare objects in a standard MXML file. For example, if one of your skin parts was a Spark Button with an id property of myButton, you would define it with the code:
[code lang=”xml”]<s:Button id="myButton" width="100" height="20" x="0" y="0"/>
[/code]
Next, declare the skin parts in the component using the [SkinPart] metadata tag. Make sure that the variable is typed the same as what you just defined in the MXML skin, and that the id of the object in the MXML skin matches the name of the variable in the component. The component code for the myButton skin part that you just saw is illustrated in Listing 6.
Listing 6 The SkinPart tag binds component variables to MXML skin part definitions
[code lang=”java”]
public class CustomComponent extends SkinnableComponent
{
public function CustomComponent()
{
super();
}
[SkinPart(required="true")] #A
public var myButton:Button;
}
#A SkinPart metadata binding on the myButton variable
[/code]
Notice the use of the required property after the SkinPart metadata tag is declared. Make sure you declare this property because required is – pardon the pun – required.

You have now learned two of the three essentials to Spark skinning. The third essential element is tying the component implementation to the skin using the HostComponent metadata.

WARNING
In order for your skin part bindings to work, you must be sure to type the respective variable the same as the
MXML object definition and the variable must be named the same as the id attribute that is set on the respective
MXML object definition.

DECLARING THE HOST

The last of the three basic essentials to using skins with custom Spark components is the declaration of the host component in the skin. To accomplish this, you use the [HostComponent] metadata tag. An excellent example of this was provided in the example skin at the beginning of this article, in Listing 3. The code from listing 3 that is used for the declaration of the host component is provided again in Listing 7.
Listing 7 Use HostComponent metadata to bind a skin to a component class
[code lang=”xml”]
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>

[/code]

Introduction

Flex provides 3 classes to communicate with servers namely HttpService,WebService and RemoteObject HTTPService component of Flex 4 can be used with any kind of server-side technology, including PHP pages, ColdFusion Pages, JavaServer Pages (JSPs), Java servlets. This article aims at discussing the httpservice component with JSP for the following task.

• To send a request to retrive data from Database
• To send a request with parameters to insert data into the database.

also read:

• Adobe Flex Tutorials
• Java FX Tutorials
• Charting with Flex 4.0
• New Features in Flex 4.0

To send a request to retrive data from Database

First let us look at the HttpService tag
[code lang=”java”] <S:HTTPService
id="No default."
method="GET|POST|HEAD|OPTIONS|PUT|TRACE|DELETE"
resultFormat="object|array|xml|e4x|flashvars|text"
url="No default."
fault="No default."
result="No default."
>
[/code]

Explanation

• id-refers to the name of the HttpService instance.
• Method-Mentions the way how the request is send to the server.
• resultFormat-configured to specify the format the way the result is expected
• URL-The URL to which the request is send
• Fault-A event handling mechanism which makes a call to the handlercode if there is a exception.
• result-A event handling mechanism which makes a call to the handlercode when the result is recieved from the server.

Example:

The Example shows a Flex application which invokes a JSP page that retrives data from database. The data is formated by JSP code as XML and sent to the flex application and displayed on a data provider.

Files in the project

1. FlexJSPdemo.mxml:The Flex application that invokes a JSP page
2. Itemlist.jsp :The JSP page that retrieves data from database using JPA and formats the result in XML format
3. Product.java :The Entity class that is mapped to Product Table in the database using JPA.
4. ProductRetriever.java:The Java class that is contacted by JSP to interact with database using JPA.

FlexJSPDemo.mxml
[code lang=”xml”] <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" color="#196F82" fontWeight="bold">
<fx:Style source="CopyofFlex4_demos2.css"/>
<fx:Declarations>
<s:HTTPService id="myserv" url="http://localhost:8080/JSPDEMONET/ItemList.jsp"/>
</fx:Declarations>
<s:Panel x="26" y="97" width="705" height="350" title="Using the HttpService">
<mx:DataGrid dataProvider="{myserv.lastResult.Data.Item}" width="508" height="158" enabled="true" color="#3B8FA1" x="81" y="40"/>
<s:Button label="Fetch Data" click="myserv.send()" x="248" y="235"/>
</s:Panel>[/code]
ItemList.jsp
[code lang=”xml”] <%@page import="a.ProductRetriever,
a.Product,
java.util.*"%>
<?xml version="1.0" encoding="utf-8"?>
<Data>
<%
ProductRetriever srv = new ProductRetriever();
List list = null;
list = srv.getData();
for (int i=0; i<list.size(); i++)
{
Product product = (Product)list.get(i);
%>
<Item itemid='<%= product.getProductId()%>’>
<name><%= product.getProductCode() %></name>
<description><%= product.getDescription() %></description>
</Item>
<%}% > </Data>[/code]
Product.java
[code lang=”java”] /*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package a;

import java.io.Serializable;
import javax.persistence.Basic;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.NamedQueries;
import javax.persistence.NamedQuery;
import javax.persistence.Table;

/**
*
* @author RekhaKG_Nair
*/
@Entity
@Table(name = "PRODUCT")
@NamedQueries({@NamedQuery(name = "Product.findAll", query = "SELECT p FROM Product p"), @NamedQuery(name = "Product.findByProductId", query = "SELECT p FROM Product p WHERE p.productId = :productId"), @NamedQuery(name = "Product.findByProductCode", query = "SELECT p FROM Product p WHERE p.productCode = :productCode"), @NamedQuery(name = "Product.findByDescription", query = "SELECT p FROM Product p WHERE p.description = :description")})
public class Product implements Serializable {
private static final long serialVersionUID = 1L;
@Id
@Basic(optional = false)
@Column(name = "PRODUCT_ID")
private Integer productId;
@Column(name = "PRODUCT_CODE")
private String productCode;
@Column(name = "DESCRIPTION")
private String description;

public Product() {
}

public Product(Integer productId) {
this.productId = productId;
}

public Integer getProductId() {
return productId;
}

public void setProductId(Integer productId) {
this.productId = productId;
}
public String getProductCode() {
return productCode;
}
public void setProductCode(String productCode) {
this.productCode = productCode;
}

public String getDescription() {
return description;
}

public void setDescription(String description) {
this.description = description;
}

@Override
public int hashCode() {
int hash = 0;
hash += (productId != null ? productId.hashCode() : 0);
return hash;
}
@Override
public boolean equals(Object object) {
// TODO: Warning – this method won’t work in the case the id fields are not set
if (!(object instanceof Product)) {
return false;
}
Product other = (Product) object;
if ((this.productId == null && other.productId != null) || (this.productId != null && !this.productId.equals(other.productId))) {
return false;
}
return true;
}
@Override
public String toString() {
return "a.Product[productId=" + productId + "]";
}
}[/code]
ProductRetriever.java
[code lang=”java”] package a;

import java.util.List;
import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;
import javax.persistence.Query;

/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

/**
*
* @author RekhaKG_Nair
*/
public class ProductRetriever {
EntityManagerFactory emf;
EntityManager em;
public ProductRetriever()
{
emf = Persistence.createEntityManagerFactory("JSPDEMOPU");
em=emf.createEntityManager();
}
public List getData()
{
Query q=em.createNamedQuery("Product.findAll");
return q.getResultList();
}
}[/code]
Persistence.xml
[code lang=”xml”] <?xml version="1.0" encoding="UTF-8"?>
<persistence version="1.0" xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">
<persistence-unit name="JSPDEMOPU" transaction-type="RESOURCE_LOCAL">
<provider>org.eclipse.persistence.jpa.PersistenceProvider</provider>
<class>a.Product</class>
<exclude-unlisted-classes>true</exclude-unlisted-classes>
<properties>
<property name="eclipselink.jdbc.password" value="rekha"/>
<property name="eclipselink.jdbc.user" value="rekha"/>
<property name="eclipselink.jdbc.driver" value="org.apache.derby.jdbc.ClientDriver"/>
<property name="eclipselink.jdbc.url" value="jdbc:derby://localhost:1527/JPA"/>
</properties>
</persistence-unit>
</persistence>[/code]
Output:

How to insert data to a database using Flex and JSP?

In the last section we have seen how to make a request to the server and retrieve the information. This sesction
we will look at sending some parameters as well with our request.We will modify our previous application by

• creating a new mxml file(SendtoJSPDemo.mxml) to capture input from the user and send it to the server.
• Modify the ProductRetriver.Java class to perform the insertion operation.
• Creating a Upload.jsp which gets the request from our Flex code.

SendtoJSPDemo.mxml.

[code lang=”xml”] <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" color="#196F82" fontWeight="bold">
<fx:Style source="CopyofFlex4_demos2.css"/>
<fx:Declarations>
<s:HTTPService id="myservsd" url="http://hydhtc130252d:8080/JSPDEMONET/upload.jsp" resultFormat="text" fault="faulthand(event)"
result="callme(event)" >
<s:request xmlns="">
<PID>
{PID.text}
</PID>
<Name>
{Name.text}
</Name>
<Disc>
{Disc.text}
</Disc>
</s:request>
</s:HTTPService>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
function callme(event:ResultEvent)
{

var k:String=event.result.toString();
msg.text=k.substr(42,k.length);
}
function faulthand(faulte:FaultEvent)
{
mx.controls.Alert.show(faulte.fault.faultString);
}
]]>
</fx:Script>

<s:Panel x="20" y="110" width="726" height="350" chromeColor="#D5CECE">
<s:TextInput x="141" y="88" id="PID" width="150"/>
<s:TextInput x="141" y="158" id="Name"/>
<s:TextInput x="141" y="219" id="Disc" width="154"/>
<s:Button x="120" y="268" label="ok" click="myservsd.send()"/>
<s:Label x="14" y="98" text="Productid :" width="95" color="#101212"/>
<s:Label x="9" y="158" text="Product Code:" width="124" color="#0B0C0C"/>
<s:Label x="10" y="219" text="Description :" color="#101212"/>
<s:Label x="62" y="25" text="Item Detail Form" width="159" color="#090B0B"/>
<s:Label x="466" y="66" text="Message:" width="149" color="#0C0D0D"/>
<s:RichText x="470" id="msg" y="99" text="Wait….." width="208" height="157" color="#9B2929"/>
</s:Panel>
<s:Label x="184" y="68" text="HttpService" width="329" fontSize="35" color="#111111"/>
</s:Application>[/code]

Explanation:

• Look at the HTTPService instance that was created ,there is the request tag which configures the data that can be posted.

[code lang=”xml”] <s:request xmlns="">
<PID>
{PID.text}
</PID>
<Name>
{Name.text}
</Name>
<Disc>
{Disc.text}
</Disc>
</s:request>[/code]
Here the code shows that we are sending the parameters PID,Name,Disc so formating as XML.

• The Event handler code when a result or fault event is generated by HttpService
  The highlighted code below shows the string returned by our JSP code.

[code lang=”java”] function callme(event:ResultEvent)
{
var k:String=event.result.toString();
msg.text=k.substr(42,k.length);
}
function faulthand(faulte:FaultEvent)
{
mx.controls.Alert.show(faulte.fault.faultString);
}[/code]

ProductRetriver.Java

Let us Modify the ProductRetriver.Java to add the Java code to insert data to the database using JPA and sends a boolean value true if insertion was successful otherwise sends false.
[code lang=”java”] public boolean insertProduct(Product p)
{
boolean b =true;
try
{
em.getTransaction().begin();
em.persist(p);
em.getTransaction().commit();
}
catch(Exception e)
{
em.getTransaction().rollback();
b=false;
}
if(b)
return true;
else
return false;
}[/code]

Upload.jsp.

[code lang=”java”] <%@page import="a.ProductRetriever,
a.Product,
java.util.*"%>
<?xml version="1.0" encoding="utf-8"?>
<%
Product product = new Product();
System.out.println("1"+request.getParameter("PID"));
System.out.println("2"+request.getParameter("Name"));
product.setProductId(Integer.parseInt(request.getParameter("PID")));
product.setProductCode(request.getParameter("Name"));
product.setDescription(request.getParameter("Disc"));
boolean b=new ProductRetriever().insertProduct(product);
if(b)
{
out.print("done saved the data about:["+product.getProductId()+","+product.getProductCode()+","+product.getDescription()+"]");
}
%>[/code]
Output:

Conclusion

Flex can not only connect to java but even other server-based applications like ColdFusion, PHP, ASP.NET.
You can retrieve plain text or XML data using HTTP.

Introduction

This article explains the new features introduced in the latest version Flex 4.0. Initial version of Adobe Flex has been released in 2004. In 2008 Adobe has released the version Flex 3.0. But, the latest version of Flex has many improvements compare to its previous releases. If you are not familiar with developing applications using the Flex framework, please read our previous article on Creating RIA with Adobe Flex framework. That article explains more about the setting up the flex environment and writing the simple hello world example. It is recommended to read before jumping into this article.

also read:

• Adobe Flex Tutorials
• Java FX Tutorials
• Charting with Flex 4.0
• New Features in Flex 4.0

In this article, we will go through the following new features in detail:

• Spark component architecture
• Component layout
• Themes
• Skinning
• FXG

Spark component architecture

Flex 4 has introduced new skinning and component architecture called Spark. Most of the components from the previous version has been reimplemented using this architecture. In the previous version Flex 3.0, the underlying component architecture was Halo. In the Flex 4, it has been replaced by Spark. The main intention of creating Spark is to seperate the Themes, Skin, etc from its core logic.Spark component set includes a drastically redesigned component skinning architecture that combines the ease of MXML-based programming with the power of Flash Player’s visual rendering capabilities.
The following are few important points about the spark component:

• Spark component architecture is based on existing Flex classes, such as mx.core.UIComponent and mx.effects.Effect.
  So we can have an application developed with the old components with the new architecture.
• Separate the appearance and the functional logic of the component.
• A set of components that can be easily customized rather than reimplementing it.for e.g. If the layout of a container
  has to be changed we need to just change the layout property of the container rather than creating a custom container.
• These components are found in the spark.* package.
• Some components found in the mx package has not been reimplemeted in the new version. Those components are:

[code] mx.controls.Alert mx.controls.OLAPDataGrid mx.containers.Accordion
mx.controls.AdvancedDataGrid mx.controls.PopUpButton mx.containers.DividedBox
mx.controls.ColorPicker mx.controls.PopUpMenuButton mx.containers.Form
mx.controls.DataGrid mx.controls.ProgressBar mx.containers.Grid
mx.controls.DateChooser mx.controls.RichTextEditor mx.containers.TabNavigator
mx.controls.DateField mx.controls.Tree mx.containers.ViewStack
mx.controls.Menu All chart classes in the mx.charts.* packages
mx.controls.MenuBar All Flex AIR components in the mx.controls package[/code]

Let us look at our first example using the new Spark components

 

[code lang=”xml”] <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600">
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
<s:Panel x="103" y="75" width="387" height="200" title="FirstPanel">
<s:Label x="21" y="29" text="My First Program" width="157" height="24"/>
</s:Panel>
</s:Application>[/code]

Notes:

• fx namespace to reference top-level ActionScript elements, such as Object and Array, and for tags built in to the MXML compiler, such as <fx:Style>
• The s namespace is used to reference the spark components .s defines the below mentioned namespace library://ns.adobe.com/flex/spark
• mx namespace is used refers to the mx components.

Component Layout

Layout determines how the child components have to be sized and placed in a Parent Component. In Spark Component architecture the Layout mechanism is decoupled from the individual component. ie.we can set the layout of the component declaratively in MXML or can be modified at runtime. All the predefined layouts can be found in the package Spark.layouts.package.

Some examples of Layouts are

• BasicLayout
• HorizontalLayout
• VerticalLayout
• TileLayout

Example:Let us look at how we can modify the Layout of a Group to Vertical

[code lang=”xml”] <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>

<fx:Script>
<![CDATA[
import spark.layouts.HorizontalLayout;
import spark.layouts.VerticalLayout;

var vert:Boolean=false;
function callme()
{

if(vert==true)
{

mygroup.layout=new VerticalLayout();
}
if(vert==false)
{
mygroup.layout=new HorizontalLayout();
}

}

]]>
</fx:Script>

<s:Group x="10" y="20" width="200" height="200" id="mygroup">

<s:Label x="10" y="10" text="A group whose Layout is changed to Vertical or Horizontal on clicking the Buttons"/>
<s:Button x="10" y="50" label="Vertical" click="vert=true;callme()"/>
<s:Button x="90" y="50" label="Horizontal" click="vert=false;callme()"/>
</s:Group>
</s:Application>[/code]

Output:The initial Screen.The component placed as per the x,y coordinates mentioned.

Output:On Clicking the Button with label Vertical</p>

Output:On Clicking the Button with label Horizontal

Themes

A theme defines the appearance of an application built in Flex.The default theme for all Flex 4 components is called Spark.In the earlier version the default theme was called Halo. In Flex 4, MX components also use the Spark theme by default. In case the older theme has to be used we can do it in 2 ways.

• need to use the theme compiler option to point to the Halo theme swc file or
• Set the compatibility-version compiler option to 3.0.
  If you use the Halo theme, the theme is applied to all Halo components in your application.
  The Spark components continue to follow the Spark theme unless specifically not overridden

Skinning

In Flex 4 every Spark Components encapsulates the functional behavior of a Component and associated with those Spark Component is a Skin which controls the Visual element of a component including layout.This gives the developer a greater control of how their components look like.Earlier MX components that used the Halo theme for their skins defined their look and feel mostly through style properties. Spark skin classes are written in MXML When creating skins, there is no need to subclass existing skin classes. Instead, copy the source of an existing skin class and create a new class.

Let us look at an example where we are changing the Skin of a Button.

a)Button1.mxml-The Skin being defined

[code lang=”xml”] <?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">

<!– states –>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>

<!– border and fill –>
<s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="0xff22ff" color.down="0x11ff11"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x131313" weight="3"/>
</s:stroke>
</s:Rect>

<!– text –>
<s:Label text="Button!" color="0x131313"
textAlign="center" verticalAlign="middle"
horizontalCenter="0" verticalCenter="1"
left="12" right="12" top="6" bottom="6" />

</s:Skin>[/code]

b)Applying the skin

[code lang=”xml”] <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<s:Group x="115" y="55" width="200" height="115">
<s:Button skinClass="Buttonskin1" x="10" y="10"/>
<s:Button label="A Normal Button" x="10" y="66"/>
</s:Group>
<s:Label x="194" y="23" text="A Skin Demo" width="183" height="24"/>
</s:Application> [/code]

Flash XML Graphics (FXG)

Flex 4 support FXG(Flash XML Graphics) a XML syntax to define vector graphics in applications. It is an interchange format with other Adobe tools. i.e using a graphics tool, such as Adobe PhotoShop,Adobe Illustrator, or Adobe Flash Catalyst, we can design and then export as an FXG document, and then use the FXG document as the property of a skin class for a component.

Conclusion

The article was about some of the new features of Adobe Flex 4.There are plenty more new and exciting features in Flex 4 that helps in building RIA in an easy and simple manner.