[Flex/Air]

Mai 2013

Code Behind with Flash Builder step by step

The basic idea is to use Action Script Classes instead of fx:Script tag and keep mxml only for design.

Here the full workflow and a Flash Builder project if you are lazy ;)

Step 1
Create your flex project

Step 2
Rename your main mxml file as Main.mxml

Step 3
Right click on src and add a package com.domain.project ( don’t put your MainClass in the root folder, FB can’t handle it )

Step 4
Add your brand new namespace

Step 5
Create your MainClass.as in your package. Note that class have to extends spark.components.WindowedApplication

Step 6
Switch back to Main.xml and link to the MainClass. Note the demo:MainClass tag

Step 7
Check if everything is Alright. Here i add a listener on the FlexEvent.APLLICATION_CREATED

Step 8
Design your view in creation mode if you have FB 4.6 and lower :/ (yup I won’t update FB)

Step 9
Add an ID to element that you want to manipulate in AS

Step 10
Then declare all those elements as public var

Step 11
Add some AS to handle interaction

And voilà :)

Here a real life use case I worked on with this method : https://www.maison-deco.com/2d-3d