Connect to BlazeDS

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!!

Building Localized Framework Resource Bundle Files

There is this very nice post written for building localized Framework Resource bundle at http://www.chikaradev.com/blog/?p=17. Check it out. The step by step explanation is extremely good.

Layered axis using Multiple Axis

Sometime back somebody asked me if they could have a layered axis using Flex charts. Ofcourse my answer was “yes”

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>

Charts and Item Renderers

Any guesses as to which component is shown in the following image?

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.

Flex Pie Chart with start angle

Today when I was trying to do something with Pie Charts I came across this property and thought it would be useful to others.

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 with Custom Fills

I have created a simple sample where a Flex pie chart has custom fills and given a color to the series label. Hope this simple sample helps for a start.

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>

Flex Charts – Looking for something?

I am hoping to get some good responses while I write this post.  I have been noticing from my blog stats that many of you are looking for something in Flex charts and to be more precise Flex Pie chart. I would really like to know what exactly you are looking for. It would help me to write more posts in that area. Hoping to hear from all of you hitting my blog. Have a great day!

Flex Temperature converter in less than 5 minutes – WebService in Flash Builder 4

One of Flash Builder 4’s theme – Data centric development is a super cool feature!! Instead of raving about the feature, let me show some action

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.

Flex component is bound? Data Binding Icon

I am sure many of you are exploring the new Data-Centric development(DCD) features in Flash Builder ( previously known as Flex!). I just thought of sharing some tit bits that might have gone un-noticed, but might prove useful in the day to day development.

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

Tour de Flex Component Explorer- Updated!!!

For all of you who want to quickly get a hang of all the controls in Flash Builder 4 use the latest Tour de Flex component explorer:

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

I am sure you are gonna enjoy this tour.