Are you looking for help to be able to connect to your BlazeDS/LCDS server using Flash Builder?  Look no further .  I can bet you will find everything to help you out in Sujit’s blog!!

Using the multiple axis feature Flex charts one can get the following result:

Layered axis

The source code to get the above is as below:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” width=”600″ height=”500″>

<mx:Script><![CDATA[
import mx.charts.CategoryAxis;
import mx.charts.chartClasses.IAxis;
import mx.charts.chartClasses.ChartBase;
import mx.charts.chartClasses.CartesianTransform;

[Bindable]
public var SMITH1:Array = [
{date: "22-Aug-05",month: "Aug", close: 45.87, open:25.19, high:101, low:9, start:11.89},
{date: "23-Aug-05",month: "Sep", close: 45.74, open:35.29, high:201, low:20, start:31.49},
{date: "24-Aug-05",month: "Oct", close: 45.77, open:45.19, high:51, low:5, start:21.67},
{date: "25-Aug-05",month: "Nov", close: 46.06, open:15.59, high:71, low:36, start:51.04},
];
]]></mx:Script>

<mx:Array id=”bge”>
<mx:GridLines direction=”both”>
<mx:horizontalStroke>
<mx:Stroke>
<mx:color>black</mx:color>
</mx:Stroke>
</mx:horizontalStroke>
<mx:verticalStroke>
<mx:Stroke>
<mx:color>black</mx:color>
</mx:Stroke>
</mx:verticalStroke>
</mx:GridLines>
</mx:Array>

<mx:BarChart id=”chart” dataProvider=”{SMITH1}” showDataTips=”true” width=”100%” height=”100%” backgroundElements=”{bge}”>
<mx:fill>
<mx:SolidColor>
<mx:color>black</mx:color>
</mx:SolidColor>
</mx:fill>
<mx:verticalAxis>
<mx:CategoryAxis id=”v1″ categoryField = “date”/>
</mx:verticalAxis>

<mx:horizontalAxisRenderers>
<mx:AxisRenderer tickPlacement=”none” placement = “bottom” axis = “{h1}” labelRotation=”90″  showLine=”false”  color=”#00f940″/>
<mx:AxisRenderer tickPlacement=”none” placement = “bottom” axis = “{h2}” showLine=”false”  color=”#00f940″/>
<mx:AxisRenderer canDropLabels=”true” tickPlacement=”none” placement = “bottom” color=”#00f940″ axis = “{h3}” showLine=”false”/>
<mx:AxisRenderer tickPlacement=”none” placement=”bottom” axis = “{h4}” color=”#00f940″>
<mx:axisStroke>
<mx:Stroke>
<mx:color>#00f940</mx:color>
<mx:weight>1</mx:weight>
</mx:Stroke>
</mx:axisStroke>
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>

<mx:verticalAxisRenderers>
<mx:AxisRenderer tickPlacement=”none” placement = “left” axis = “{v1}”  color=”#00f940″ >
<mx:axisStroke>
<mx:Stroke>
<mx:color>#00f940</mx:color>
<mx:weight>1</mx:weight>
</mx:Stroke>
</mx:axisStroke>
</mx:AxisRenderer>
<!– <mx:AxisRenderer placement = “right” axis = “{v5}” labelRotation=”45″/> –>
</mx:verticalAxisRenderers>

<mx:series>
<mx:BarSeries xField=”close” displayName=”Close” >
<mx:horizontalAxis>
<mx:LinearAxis id=”h1″ />
</mx:horizontalAxis>
</mx:BarSeries>

<mx:BarSeries xField=”open” displayName=”Open” >
<mx:horizontalAxis>
<mx:LinearAxis id=”h2″/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:CategoryAxis id=”v5″ categoryField=”month”/>
</mx:verticalAxis>
</mx:BarSeries>

<mx:BarSeries xField=”high” displayName=”High” >
<mx:horizontalAxis>
<mx:LinearAxis id=”h3″/>
</mx:horizontalAxis>
</mx:BarSeries>

<mx:BarSeries xField=”low” displayName=”Low” >
<mx:horizontalAxis>
<mx:LinearAxis id=”h4″/>
</mx:horizontalAxis>
</mx:BarSeries>
</mx:series>
</mx:BarChart>

</mx:Application>

Well well for all those who guessed it is a chart, FULL MARKS. It is a column chart indeed. I just tried playing around with the item renderer in charts and made a simple sample which looks like the above image.  One could probably have car feature comparisons and have some cool car images as the columns.

I have attached the mxml and the assets that I have used for the sample. Hope it helps.

Q: What is startAngle?

A: Specifies the starting angle for the first slice of the PieChart control. The default value is 0, which is horizontal on the right side of the PieChart control.

Flex Pie Chart:

Flex Pie Chart with Custom Angle

Code:

<?xml version=”1.0″?>
<!– charts/PieFilling.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", Amount:200},
{Expense:"Rent", Amount:200},
{Expense:"Bills", Amount:200},
{Expense:"Car", Amount:200},
{Expense:"Gas", Amount:200},
{Expense:"Water", Amount:200},
{Expense:"Phone", Amount:200},
{Expense:"Groceries", Amount:200},
{Expense:"Hotel", Amount:200},
{Expense:"Loans", Amount:200}
]);
]]></mx:Script>

<!– Define custom colors for use as pie wedge fills. –>
<mx:SolidColor id=”sc1″ color=”#273a7b” alpha=”.1″/>
<mx:SolidColor id=”sc2″ color=”#273a7b” alpha=”.2″/>
<mx:SolidColor id=”sc3″ color=”#273a7b” alpha=”.3″/>
<mx:SolidColor id=”sc4″ color=”#273a7b” alpha=”.4″/>
<mx:SolidColor id=”sc5″ color=”#273a7b” alpha=”.5″/>
<mx:SolidColor id=”sc6″ color=”#273a7b” alpha=”.6″/>
<mx:SolidColor id=”sc7″ color=”#273a7b” alpha=”.7″/>
<mx:SolidColor id=”sc8″ color=”#273a7b” alpha=”.8″/>
<mx:SolidColor id=”sc9″ color=”#273a7b” alpha=”.9″/>

<mx:Panel title=”PieChart control with custom fills and start angle” layout=”horizontal”>
<mx:PieChart id=”pie”
dataProvider=”{expenses}”
showDataTips=”true”>
<mx:series>
<mx:PieSeries
field=”Amount”
nameField=”Expense”
labelPosition=”none”
fills=”{[sc1, sc2, sc3, sc4, sc5, sc6, sc7, sc8, sc9]}” startAngle=”130″/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider=”{pie}” direction=”vertical”/>
</mx:Panel>
</mx:Application>

Hope you guys who have hit this post found something new in the above example.

Flex Pie Chart:

Flex Pie Chart with Custom Fills and Label color

Code:

<?xml version=”1.0″?>
<!– charts/PieFilling.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", Amount:2000},
{Expense:"Rent", Amount:1000},
{Expense:"Bills", Amount:100},
{Expense:"Car", Amount:450},
{Expense:"Gas", Amount:100},
{Expense:"Food", Amount:200}
]);
]]></mx:Script>

<!– Define custom colors for use as pie wedge fills. –>
<mx:SolidColor id=”sc1″ color=”blue” alpha=”.3″/>
<mx:SolidColor id=”sc2″ color=”red” alpha=”.3″/>
<mx:SolidColor id=”sc3″ color=”green” alpha=”.3″/>
<mx:SolidColor id=”sc4″ color=”gray” alpha=”.3″/>
<mx:SolidColor id=”sc5″ color=”black” alpha=”.3″/>
<mx:SolidColor id=”sc6″ color=”yellow” alpha=”.3″/>

<mx:Panel title=”PieChart control with custom fills”>
<mx:PieChart id=”pie”
dataProvider=”{expenses}”
showDataTips=”true”
>
<mx:series>
<mx:PieSeries
field=”Amount”
nameField=”Expense”
labelPosition=”inside”
fills=”{[sc1, sc2, sc3, sc4, sc5, sc6]}” color=”yellow” fontSize=”10″ fontWeight=”bold”
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider=”{pie}” direction=”horizontal”/>
</mx:Panel>
</mx:Application>

Project: http://sites.google.com/site/flextrial/Home/WebService_Example.zip?attredirects=0

WebService: http://www.w3schools.com/webservices/tempconvert.asmx?WSDL

I built the following Flex temperature converter using the webservice-> http://www.w3schools.com/webservices/tempconvert.asmx?WSDL in less than 5 minutes:

Flex Temperature Converter

Now to the action:

1. Create a Flex Project with server type as “None”

2. Click on Data->Connect to WebService

3. Enter the details as given in the image below:

Import Web Service

4. Select both the operations and click “Finish”:

Select the operations

5. The Data/Service pane; will display the service showing the input parameters and return type. You dont have to configure absolutely anything. FB has done that for you!!! And you know better in how many minutes

Data/Services panel

6. Drag-drop 2 text boxes on DV

7. Drag-drop 2 button on DV for the conversions (Celsius to Fahrenheit, Fahrenheit to Celsius)

Design View

7. Drag-drop each conversion operation to respective buttons on the design-view

8. The control would go to source view to input the value to be converted.

9. Instead of a value give the appropriate text-box’s text:

protected function button_clickHandler(event:MouseEvent):void
{
CelsiusToFahrenheitResult.token = temperatureService.CelsiusToFahrenheit(txtToConvert.text);
}
protected function button2_clickHandler(event:MouseEvent):void
{
FahrenheitToCelsiusResult.token = temperatureService.FahrenheitToCelsius(txtToConvert.text);
}

10. Now is to get the result into the result text-box!!

11. Use the call-responder’s result handler to handle this:

protected function CelsiusToFahrenheitResult_resultHandler(event:ResultEvent):void
{
txtConverted.text = CelsiusToFahrenheitResult.lastResult.toString();
}

protected function FahrenheitToCelsiusResult_resultHandler(event:ResultEvent):void
{
txtConverted.text = FahrenheitToCelsiusResult.lastResult.toString();
}

Run the application and your Flex temperature converter is ready to use (I know I sound like as if a dish is ready to eat , aint it pretty much the same ). I have attached the project for better understanding and reference(excuse my coding).

Enjoy and hope this helped. There is another wonderful sample created by Srinivas.

Now we can bind a function(or operation) of a service to a Flex component. We can do this in the following three ways:

1. Context menu on Service (in Data/Services panel)

2. Data provider button in Property Inspector

3. Menu item Data->Bind to Data…

4. Context menu on the component in Design View

There might be reasons and occasions where one would like to rebind a Flex component to a different operation. This is possible in all the above ways. Additionally there is another way!!! If you know it, great. I am happy you discovered it, if not its ok; you will know it now!!

Once a Flex component(list-based) is bound to a service function, a data-binding icon is placed on top left corner of the component which indicates that the component is bound.

Data Binding Icon

Click on the data-binding icon to re-bind the component to another operation!! Yipeee

http://www.adobe.com/devnet/flex/tourdeflex/

I am sure you are gonna enjoy this tour.