6dollarmillions.in

Creating Flex Spring Maven project in minutes

1. Create a new web project using myeclipse for spring 8.6.1 and click the check box for add maven dependencies

2. follow the remaining steps mentioned in this post http://sureshpaleti.blogspot.com/2010/10/adding-flex-nature-to-myeclipse-web.html

Adding Flex nature to MyEclipse web project

Following are the steps for creating a fully functional flex project with MyEclipse for Spring 8.6.1 (make sure you have 8.6.1. if you dont have it go to the software center and click on the software tab, check for the update version 8.6.1 and click update, once done it will ask for restart, so go and restart my eclipse for spring)

Here are the steps to follow:

1. Create a new web project and scaffold a spring crud flex application.

you have to do this for that right click on the project go to MyEclipse > Scaffold spring CRUD application...

a. select the database schema check box and click next
b. select MyEclipseDerby (default) and click next
c. in the catalog drop down select classiccars and select required tables (ex: customer,payment and click add you should see those tables in the scaffolding list)
d. select Customer as the parent and click next
e. give your own package (ex: com.suresh.test) it will update in all fields and click next.
f. now select the flex check box (if you have problem in clicking next after selecting flex check box, maximize the scaffol spring crud application window, now you should be able to see it) click next
g. select the flex sdk home if you have one or use the default one (i am using flex 4.5.0.17077) and slect the Flex 4.0 radio button and click next
h. in the next screen keep default and click next
i. in the next screen keep default and click next
j. in the next screen keep default and click next
k. final screen is the summary screen click finish.

it will take some time to scaffold the crud application be patient.
ok now the scaffolding is done.

2. Right-click the project > Add/Change Project Type > Add Flex Project Type

3. In that wizard set the Application server type: J2EE, Use remote object access service > BlazeDS

4. Click Next:
-- Root Folder: WebRoot of project
-- Root URL: update URL with project name
-- Context Root: project name

ex:
-- Root folder: C:\Documents and Settings\suresh.paleti\Workspaces\MyEclipse for Spring 8.6\TestFlexSpring\WebRoot
-- Root url: http://localhost:8080/TestFlexSpring
-- Context Root: TestFlexSpring

then click validate configuration and click next

5. An error about Cannot create HTML wrapper will appear. Right-click the error to resolve the issue. If you don’t see the right-click context menu item, it can be resolved by right-clicking on the project > Flex Compiler > un-check "Generate HTML wrapper file". Click OK. Then go back into the Project properties, Flex Compiler and check "Generate HTML wrapper file" to turn it on, and click Ok. clean the project.

6. There will also be an error on the index.template.html file. You can read more about what that file does by following the link, but essentially it's not essential to compiling the flash file or running the application. So, you can turn off the javascript "build" validation for javascript if you want to remove that error. Window > Preferences > Validation > uncheck javascript Build validation

7. Right-click project >Properties > Flex Build Path > Main source folder: change to flex_src. Click OK to apply.

8. Back in project properties > Flex Applications.
-- Remove [project].mxml
-- Add... Manage*.mxml, set one of them as default.
-- Click OK.

9. Notice the Manage*.html and Manage*.swf files are now being generated in the output folder specified in the project Properties > Flex Server > Output folder. The default is WebRoot\[projectname]-debug,

10. Now right click on the project Runas > Myeclipse server application thats it you can see the working application
or
You can start the server, and browse to: http://localhost:8080/[projectname]/[projectname]-debug/Manage[domainobjectname].swf

Hooking Flash builder 4 into Myeclipse for spring

1. First install any version of eclipse i installed eclipse ide for jee developers here is the link http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/heliossr1

2. Next install the flash builder 4 eclipse plugin, you can dowload it from this link https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder

3. while you are installing flash builder eclipse plugin it will ask you to point to the already installed eclipse and follow the next steps.

4. once you are done with the installation go to the eclipse (helios) folder, you will find dropins folder open it in that you will see com.adobe.flexbuilder.feature.core.nl1.link file, copy this and paste it into the dropins folder of the myeclipse for spring and you are done.

Eclipse Plug-ins

you can find at http://marketplace.eclipse.org

Most Useful Plug-ins

1. Subclipse (SVN)
http://subclipse.tigris.org/update_1.6.x or
http://subclipse.tigris.org/update_1.4.x
if this doesnot work use
http://subclipse.tigris.org/update_1.2.x (3.2+)
http://subclipse.tigris.org/update_1.0.x (3.0/3.1)

Free SVN hosting services
http://www.straw-dogs.co.uk/09/20/6-free-svn-project-hosting-services/

2. Spring IDE(select core,extensions(incubation),extensions/incubation)
http://springide.org/updatesite

3. QuickRex (http://www.bastian-bergerhoff.com/eclipse/features/web/installation.html)
http://www.bastian-bergerhoff.com/eclipse/features

4. Eclipse SQL Explorer
http://eclipsesql.sourceforge.net/

5. M2Eclipse
http://m2eclipse.sonatype.org/sites/m2e or
http://m2Eclipse.sonatype.org/update

6. VeloEclipse
http://veloeclipse.googlecode.com/svn/trunk/update/

7. Log4E
http://log4e.jayefem.de/update

8. EclipseUtilPlugins (https://eclipseutilplugins.dev.java.net/)

9. Ldap Tools
http://cyrone.com/eclipseupdates/

10. Hibernate Synchronizer (http://hibernatesynch.sourceforge.net)

11. HTML Tidy (http://sourceforge.net/projects/eclipsetidy/)

12. JSEditor (http://jseditor.sourceforge.net/)

13. JBoss plugin - improves hibernate productivity
you can find the update sites here https://www.jboss.org/tools/download.html
for galileo - http://download.jboss.org/jbosstools/updates/stable/galileo/

14. Flex pmd eclipse plugin
http://opensource.adobe.com/svn/opensource/flexpmd/plugin/trunk/flex-pmd-eclipse-plugin-site

Flex Certification

1. updateComplete
  • dispatched after a component has gone through its validation process, called after commitProperties(),measure(), updateDisplayList()
2. The preinitialize event occurs too early in the component life cycle for most initialization activities. It is useful, however, in the rare situations where you must set the properties on a parent before the children are created.

3.To configure a component before Flex has determined its visual appearance, use the initialize event. For example, use this for setting properties that affect its appearance, height, or width.

4. Use the creationComplete event for actions that rely on accurate values for the component's size or position when the component is created. If you use this event to perform an action that changes the visual appearance of the component, Flex must recalculate its layout, which adds unnecessary processing overhead to your application.

5. Use the updateCompleteevent for actions that must be performed each time a component's characteristics change, not just when the component is created.

6. FileModeConstants
  • Read - read file
  • Write - write file
  • Update -
  • Append - write to the end of an existing file
7. Two methods of File class to write simpler code without setting up eventlisteners
  • copyTo()
  • getDirectoryListing()
  • both are synchronous versions
8. Some methods in file class
  • File.copyTo() and File.copyToAsync()
  • File.deleteDirectory() and File.deleteDirectoryAsync()
  • File.deleteFile() and File.deleteFileAsync()
  • File.getDirectoryListing() and File.getDirectoryListingAsync()
  • File.moveTo() and File.moveToAsync()
  • File.moveToTrash() and File.moveToTrashAsync()
9. DataService object methods
  • DataService.fill()
  • DataService.commit()
  • DataService.getItem()
  • DataService.createItem()
  • DataService.releaseItem()
  • DataService.releaseCollection()
  • DataService.disconnect()
  • DataService.setCredentials()
  • DataService.logout()
  • DataService.release()
  • DataService.merge()
  • DataService.revertChanges()
10. drag-and-drop api transfer formats
  • Bitmaps (png,jpeg,gif..)
  • Files
  • HTML-formatted text
  • Text
  • URLs
  • Serialized objects
  • Object references(only valid within the origination application)
11. Flex containers with absolute layout
  • Canvas always uses absolute positioning
  • Application and Panel controls - specify layout property "absolute"
12. once you apply transition to a component, you cannot apply an effect - False
  • transition - one or more effects grouped together to play when view state change occurs
13. Components used to connect to a REST-style service API
  • HTTPService - HTTP GET or POST
  • Webservice - soap web services
  • RemoteObject - AMF remoting services
  • HTTPService is also known as REST-style webservice
  • REST - Representational State Transfer
14. how to find the value of the last inserted row identifier from the SQLResult after an insert statement is executed
  • lastInsertRowID will contain the identifier for the last inserted row
15. NativeDragOptions class properties allow initiating and target objects to cooperate in a drag-and-drop exchange
  • allowCopy
  • allowLink
  • allowMove
16. Access Modifiers:
  • internal (default) - visible to references inside the same package
  • private - visible to references in the same class
  • protected - visible to references in the same class and derived classes
  • public - visible to references everywhere
  • static - a property belongs to the class
  • static properties not inherited (code will cause run-time error)
17. Methods for using regular expressions with strings
  • exec() - returns an array with matching substring
  • test() - returns boolean

18. String class methods
  • match()
  • replace()
  • search()
  • split()
19. Repeater (properties)
  • currentItem - to reference the currently processing data item
  • currentIndex - counter that refers to the item's order in the data set
20. Metadata tags donot compile into executable code, but provide information to control how portions of your code get compiled. (True)
  • They are used to provide information to the adobe flex compiler

21. CSS selector types
  • class selector
  • type selector
  • descendant selector
  • id selector
  • pseudo selector (viewstates)

22. Methods used to change between viewstates in your app
  • using currentState property (or)
  • by calling the setCurrentState() method of UIComponent class
Creating root menu object

var root:NativeMenu = new NativeMenu();


Setting the application menu

NativeApplication.nativeApplication.menu = root;


Setting a window menu

nativeWindowObject.menu = root;


Setting a context menu on an interactive object

interactiveObject.contextMenu = root;


setting a dock icon menu

DockIcon(NativeApplication.nativeApplication.icon).menu = root;


Setting a system tray icon menu

SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = root;


Displaying a menu as a pop-up

root.display(stage,x,y)


Creating a submenu

var editorMenuItem:NativeMenuItem = root.addSubMenu(new NativeMenu(),"Edit");

(or)

var editMenuItem:NativeMenuItem = root.addItem("Edit",false);
editMenuItem.subMenu = new NativeMenu();


Create a menu command

var copy:NativeMenuItem = new NativeMenuItem("Copy",false);
copy.addEventListener(Event.SELECT,onCopyCommand);
editMenu.addItem(copy);


Creating a menu separator line

var separatorA:NativeMenuItem = new NativeMenuItem("A",true);
editMenu.addItem(separatorA);


23. In a class that implements an interface, implemented methods must do the following:
  • Use the public access control identifier.
  • Use the same name as the interface method.
  • Have the same number of parameters, each with data types that match the interface method parameter data types.
  • Use the same return type.
Note: The method declaration inside an interface definition cannot have any access control specifiers (if it contains then code will cause a compile-time error)

Problems faced to make Roo project to work using STS

  • Create new Roo Project
  • persistence setup --provider HIBERNATE --database H2_IN_MEMORY
  • flex setup
  • Add the required entities and fields
  • Now go to command prompt and run mvn eclipse:eclipse
  • ex: C:\Documents and Settings\suresh.paleti\Documents\workspace-sts-2.3.3.M2\rooexample>mvn eclipse: eclipse
  • Now open eclipse and refresh the project
  • In the src/main/webapp/ you should see the swf files if you are not able to see them then clean the project (click on Project > clean...), now you should see the swf files.
  • Once you are done go to command prompt and run mvn clean install
  • ex: C:\Documents and Settings\suresh.paleti\Documents\workspace-sts-2.3.3.M2\rooexample>mvn clean install
  • Now in the target folder you should be able to see the war file. Copy this war and deploy in tomcat webapps folder and start the server.
  • Finally go to flash builder perspective, right click on the project and run as > Web Application. That's it you should be able to see the flex application running.

Note: ctrl + R (popup to type roo command)

urlrewrite error in STS

Flex addon problem with Roo 1.1.0 M2

when you create a roo project and run flex setup, flex nature is not added you have to go to the command prompt with appropriate project and enter mvn eclipse:eclipse manually.

Ex: C:\Documents and Settings\suresh.paleti\Documents\workspace-sts-2.3.3.M2\rooexample>mvn eclipse: eclipse

then it will start downloading all the jars from the sonatype repository, after it is done go to eclipse and refresh your project.

Still you have to create html template from problem view quick fix (right click on the error in the problem view and recreate html template)

But you still have the urlrewrite error in STS for that just change 3.0 to 3.2

<!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 3.2//EN"
"http://tuckey.org/res/dtds/urlrewrite3.2.dtd">

when you are done with this refresh the project and all errors will be gone.

Installing Maven eclipse plugin

Here are the step to install eclipse maven plugin

1. Run eclipse and click Help --> Install New Software



2. Then in the next screen which pops up just enter the update site url http://m2eclipse.sonatype.org/sites/m2e

if you are unable to see the Maven Integration for Eclipse under the name

dont worry here is the solution just uncheck Group Items by Category and you will be able to see and install it just click Next ..... and finally Finish and it is required to restart eclipse.



Note: Similarly install m2eclipse extras plugin.

Eclipse maven plugins update site url

m2eclipse Core Update Site: http://m2eclipse.sonatype.org/sites/m2e

m2eclipse Extras Update Site: http://m2eclipse.sonatype.org/sites/m2e-extras

reference: http://m2eclipse.sonatype.org/installing-m2eclipse.html

HLOCChart Example

HLOCChart.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;

   [Bindable]
   private var _chartData:ArrayCollection = new ArrayCollection([
    {Month: "January '03",   open:88,  high: 18,  low:91, close: 51  },
    {Month: "February '03",  open:68,  high: 94,  low:2, close: 64  },
    {Month: "March '03",   Widgets:63,  high: 44,  low:33, close: 7 },
    {Month: "April '03",   open:94,  high: 84,  low:4 , close: 8}, 
    {Month: "May '03",    open:70,  high: 58,  low:56, close: 93  },
    {Month: "June'03",    open:70,  high: 58,  low:6, close: 10  },
    {Month: "July '03",   open:45,  high: 39,   low:7, close: 11  },
    {Month: "August '03",   open:38,  high: 74,  low:84, close: 12  },
    {Month: "September '03",  open:53,  high: 26,  low:9, close: 43  },
    {Month: "October '03",   open:68,  high: 47,  low:10, close: 14  },
    {Month: "November '03",  open:82,  high: 24,  low:71, close: 15 },
    {Month: "December '03",  open:80,  high: 82,  low:12, close: 36 }
    ]);

   private function formatThousands(val:Number):String
   {
    return Math.floor(val/100)/10 +  "K";
   }

  ]]>
 </mx:Script>

 <mx:Panel title="Sample Chart" width="100%" height="100%">
  <mx:HLOCChart id="hlocChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">

   <mx:verticalAxis>
    <mx:LinearAxis title="LinearAxis"/>
   </mx:verticalAxis>

   <mx:series>
    <mx:HLOCSeries openField="open" closeField="close" highField="high" lowField="low" displayName="Ticker">
     <mx:stroke>
      <mx:Stroke weight="1" color="black" />
     </mx:stroke>
     <mx:openTickStroke>
      <mx:Stroke weight="2" color="black"/>
     </mx:openTickStroke>
     <mx:closeTickStroke>
      <mx:Stroke weight="3" color="black"/>
     </mx:closeTickStroke>
    </mx:HLOCSeries>
   </mx:series>

  </mx:HLOCChart>
  <mx:Legend dataProvider="{hlocChart}" direction="horizontal"/>
 </mx:Panel>
 <mx:Style source="ChartStyles.css"/>
</mx:Application>


ChartStyles.css
/* CSS file */

HLOCChart
{
 fontWeight: normal;
 gridLinesStyleName: hLOCChartGridLines;
 fontFamily: Arial;
}
.hLOCChartGridLines
{
 direction: both;
 verticalShowOrigin: true;
}
@font-face
{
 fontFamily: Arial;
 fontWeight: normal;
 fontStyle: normal;
 src: local("Arial");
}


The executable swf for the above example is as shown below:

CandleStickChart Example

CandleStickChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var _chartData:ArrayCollection = new ArrayCollection([
{Month: "January '03", open:88, high: 18, low:91, close: 51 },
{Month: "February '03", open:68, high: 94, low:2, close: 64 },
{Month: "March '03", Widgets:63, high: 44, low:33, close: 7 },
{Month: "April '03", open:94, high: 84, low:4 , close: 8},
{Month: "May '03", open:70, high: 58, low:56, close: 93 },
{Month: "June'03", open:70, high: 58, low:6, close: 10 },
{Month: "July '03", open:45, high: 39, low:7, close: 11 },
{Month: "August '03", open:38, high: 74, low:84, close: 12 },
{Month: "September '03", open:53, high: 26, low:9, close: 43 },
{Month: "October '03", open:68, high: 47, low:10, close: 14 },
{Month: "November '03", open:82, high: 24, low:71, close: 15 },
{Month: "December '03", open:80, high: 82, low:12, close: 36 }
]);

private function formatThousands(val:Number):String
{
return Math.floor(val/100)/10 + "K";
}

]]>
</mx:Script>

<mx:Panel title="Sample Chart" width="100%" height="100%">
<mx:CandlestickChart id="candleStickChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">

<mx:verticalAxis>
<mx:LinearAxis title="LinearAxis" displayName="Units Sold"/>
</mx:verticalAxis>

<mx:series>
<mx:CandlestickSeries openField="open" closeField="close" highField="high" lowField="low" displayName="Ticker">
<mx:fill>
<mx:SolidColor color="red"/>
</mx:fill>
<mx:declineFill>
<mx:SolidColor color="green"/>
</mx:declineFill>
<mx:stroke>
<mx:Stroke weight="1" color="black"/>
</mx:stroke>
</mx:CandlestickSeries>
</mx:series>

</mx:CandlestickChart>
<mx:Legend dataProvider="{candleStickChart}" direction="horizontal"/>
</mx:Panel>
<mx:Style source="ChartStyles.css"/>
</mx:Application>



ChartStyles.css

/* CSS file */


CandlestickChart
{
fontWeight: normal;
gridLinesStyleName: candlestickChartGridLines;
fontFamily: Arial;
}
.candlestickChartGridLines
{
direction: both;
verticalShowOrigin: true;
}
@font-face
{
fontFamily: Arial;
fontWeight: normal;
fontStyle: normal;
src: local("Arial");
}


The executable swf for the above example is as shown below:

LineChart Example

LineChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var _chartData:ArrayCollection = new ArrayCollection([
{Month: "January '03", Widgets:885202, Blinkies: 184454, monthIdx:1 },
{Month: "February '03", Widgets:683392, Blinkies: 945385, monthIdx:2 },
{Month: "March '03", Widgets:638820, Blinkies: 442383, monthIdx:3 },
{Month: "April '03", Widgets:949932, Blinkies: 841201, monthIdx:4 },
{Month: "May '03", Widgets:704302, Blinkies: 587449, monthIdx:5 },
{Month: "June'03", Widgets:704302, Blinkies: 587449, monthIdx:6 },
{Month: "July '03", Widgets:453552, Blinkies: 393039, monthIdx:7 },
{Month: "August '03", Widgets:387254, Blinkies: 746652, monthIdx:8 },
{Month: "September '03", Widgets:537254, Blinkies: 263652, monthIdx:9 },
{Month: "October '03", Widgets:686254, Blinkies: 472652, monthIdx:10 },
{Month: "November '03", Widgets:820254, Blinkies: 246652, monthIdx:11 },
{Month: "December '03", Widgets:800254, Blinkies: 826652, monthIdx:12 }
]);

private function formatThousands(val:Number):String
{
return Math.floor(val/100)/10 + "K";
}

]]>
</mx:Script>

<mx:Panel title="Sample Chart" width="100%" height="100%">
<mx:LineChart id="lineChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month" displayName="Month"/>
</mx:horizontalAxis>

<mx:verticalAxis>
<mx:LinearAxis displayName="Units Sold"/>
</mx:verticalAxis>

<mx:series>
<mx:LineSeries xField="Month" yField="Widgets" displayName="TestWidgets">
<mx:fill>
<mx:SolidColor color="#82C9EB"/>
</mx:fill>
</mx:LineSeries>
<mx:LineSeries xField="Month" yField="Blinkies" displayName="TestBlinkies"/>
</mx:series>

</mx:LineChart>
<mx:Legend dataProvider="{lineChart}" direction="horizontal"/>
</mx:Panel>
<mx:Style source="ChartStyles.css"/>
</mx:Application>



ChartStyles.css

/* CSS file */

LineChart
{
fontWeight: normal;
gridLinesStyleName: lineChartGridLines;
fontFamily: Arial;
}
.lineChartGridLines
{
direction: both;
verticalShowOrigin: true;
}
@font-face
{
fontFamily: Arial;
fontWeight: normal;
fontStyle: normal;
src: local("Arial");
}


The executable swf for the above example is as shown below:



Different varieties in Line charts:

BarChart Example

BarChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var _chartData:ArrayCollection = new ArrayCollection([
{Month: "January '03", Widgets:885202, Blinkies: 184454, monthIdx:1 },
{Month: "February '03", Widgets:683392, Blinkies: 945385, monthIdx:2 },
{Month: "March '03", Widgets:638820, Blinkies: 442383, monthIdx:3 },
{Month: "April '03", Widgets:949932, Blinkies: 841201, monthIdx:4 },
{Month: "May '03", Widgets:704302, Blinkies: 587449, monthIdx:5 },
{Month: "June'03", Widgets:704302, Blinkies: 587449, monthIdx:6 },
{Month: "July '03", Widgets:453552, Blinkies: 393039, monthIdx:7 },
{Month: "August '03", Widgets:387254, Blinkies: 746652, monthIdx:8 },
{Month: "September '03", Widgets:537254, Blinkies: 263652, monthIdx:9 },
{Month: "October '03", Widgets:686254, Blinkies: 472652, monthIdx:10 },
{Month: "November '03", Widgets:820254, Blinkies: 246652, monthIdx:11 },
{Month: "December '03", Widgets:800254, Blinkies: 826652, monthIdx:12 }
]);

private function formatThousands(val:Number):String
{
return Math.floor(val/100)/10 + "K";
}

]]>
</mx:Script>

<mx:Panel title="Sample Chart" width="100%" height="100%">
<mx:BarChart id="barChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="Month" displayName="Month"/>
</mx:verticalAxis>

<mx:horizontalAxis>
<mx:LinearAxis displayName="Units Sold"/>
</mx:horizontalAxis>

<mx:series>
<mx:BarSeries yField="Month" xField="Widgets" displayName="TestWidgets">
<mx:fill>
<mx:SolidColor color="#82C9EB"/>
</mx:fill>
</mx:BarSeries>
<mx:BarSeries yField="Month" xField="Blinkies" displayName="TestBlinkies"/>
</mx:series>

</mx:BarChart>
<mx:Legend dataProvider="{barChart}" direction="horizontal"/>
</mx:Panel>
<mx:Style source="ChartStyles.css"/>
</mx:Application>



ChartStyles.css

/* CSS file */

BarChart
{
fontWeight: normal;
gridLinesStyleName: barChartGridLines;
fontFamily: Arial;
}
.barChartGridLines
{
direction: both;
verticalShowOrigin: true;
}
@font-face
{
fontFamily: Arial;
fontWeight: normal;
fontStyle: normal;
src: local("Arial");
}


The executable swf for the above example is as shown below:

AreaChart Example

AreaChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var _chartData:ArrayCollection = new ArrayCollection([
{Month: "January '03", Widgets:885202, Blinkies: 184454, monthIdx:1 },
{Month: "February '03", Widgets:683392, Blinkies: 945385, monthIdx:2 },
{Month: "March '03", Widgets:638820, Blinkies: 442383, monthIdx:3 },
{Month: "April '03", Widgets:949932, Blinkies: 841201, monthIdx:4 },
{Month: "May '03", Widgets:704302, Blinkies: 587449, monthIdx:5 },
{Month: "June'03", Widgets:704302, Blinkies: 587449, monthIdx:6 },
{Month: "July '03", Widgets:453552, Blinkies: 393039, monthIdx:7 },
{Month: "August '03", Widgets:387254, Blinkies: 746652, monthIdx:8 },
{Month: "September '03", Widgets:537254, Blinkies: 263652, monthIdx:9 },
{Month: "October '03", Widgets:686254, Blinkies: 472652, monthIdx:10 },
{Month: "November '03", Widgets:820254, Blinkies: 246652, monthIdx:11 },
{Month: "December '03", Widgets:800254, Blinkies: 826652, monthIdx:12 }
]);

private function formatThousands(val:Number):String
{
return Math.floor(val/100)/10 + "K";
}

]]>
</mx:Script>

<mx:Panel title="Sample Chart" width="100%" height="100%">
<mx:AreaChart id="areaChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month" displayName="Month"/>
</mx:horizontalAxis>

<mx:verticalAxis>
<mx:LinearAxis displayName="Units Sold"/>
</mx:verticalAxis>

<mx:series>
<mx:AreaSeries xField="Month" yField="Widgets" displayName="TestWidgets">
<mx:fill>
<mx:SolidColor color="#82C9EB"/>
</mx:fill>
</mx:AreaSeries>
<mx:AreaSeries xField="Month" yField="Blinkies" displayName="TestBlinkies"/>
</mx:series>

</mx:AreaChart>
<mx:Legend dataProvider="{areaChart}" direction="horizontal"/>
</mx:Panel>
<mx:Style source="ChartStyles.css"/>
</mx:Application>



ChartStyles.css

/* CSS file */

AreaChart
{
fontWeight: normal;
fontFamily: Arial;
gridLinesStyleName: areaChartGridLines;
}
@font-face
{
fontFamily: Arial;
fontWeight: normal;
fontStyle: normal;
src: local("Arial");
}
.areaChartGridLines
{
direction: both;
verticalShowOrigin: true;
}


The executing swf for the above example is shown below:

Example for ColumnChart

ColumnChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var _chartData:ArrayCollection = new ArrayCollection([
{Month: "January '03", Widgets:885202, Blinkies: 184454, monthIdx:1 },
{Month: "February '03", Widgets:683392, Blinkies: 945385, monthIdx:2 },
{Month: "March '03", Widgets:638820, Blinkies: 442383, monthIdx:3 },
{Month: "April '03", Widgets:949932, Blinkies: 841201, monthIdx:4 },
{Month: "May '03", Widgets:704302, Blinkies: 587449, monthIdx:5 },
{Month: "June'03", Widgets:704302, Blinkies: 587449, monthIdx:6 },
{Month: "July '03", Widgets:453552, Blinkies: 393039, monthIdx:7 },
{Month: "August '03", Widgets:387254, Blinkies: 746652, monthIdx:8 },
{Month: "September '03", Widgets:537254, Blinkies: 263652, monthIdx:9 },
{Month: "October '03", Widgets:686254, Blinkies: 472652, monthIdx:10 },
{Month: "November '03", Widgets:820254, Blinkies: 246652, monthIdx:11 },
{Month: "December '03", Widgets:800254, Blinkies: 826652, monthIdx:12 }
]);

private function formatThousands(val:Number):String
{
return Math.floor(val/100)/10 "K";
}

]]>
</mx:Script>

<mx:Panel title="Sample Chart" width="100%" height="100%">
<mx:ColumnChart id="colChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month" displayName="Month"/>
</mx:horizontalAxis>

<mx:verticalAxis>
<mx:LinearAxis displayName="Units Sold"/>
</mx:verticalAxis>

<mx:series>
<mx:ColumnSeries xField="Month" yField="Widgets" displayName="TestWidgets">
<mx:fill>
<mx:SolidColor color="#82C9EB"/>
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries xField="Month" yField="Blinkies" displayName="TestBlinkies"/>
</mx:series>

</mx:ColumnChart>
<mx:Legend dataProvider="{colChart}"/>
</mx:Panel>
<mx:Style source="ChartStyles.css"/>
</mx:Application>


ChartStyles.css

ColumnChart
{
fontFamily: Arial;
gridLinesStyleName: columnChartGridLines;
verticalAxisStyleName: linedNumericAxis;
horizontalAxisStyleName: hangingCategoryAxis;

}
@font-face
{
fontFamily: Arial;
fontWeight: normal;
fontStyle: normal;
src: local("Arial");
}


The executing SWF file for the previous example is shown below: