Flex / Air Tutorial

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
(Created page with "WIth FDT 4, developers not only have full Flex 4 support, but also access to FDT's power editing features such as quickfixes and auto completion while editing both Action...")
Line 22: Line 22:
Getting back to application, so far we've only coded MXML components. If we were to launch this application now, we'd only see Flex components on the screen, but nothing would happen when we interacted with them.
Getting back to application, so far we've only coded MXML components. If we were to launch this application now, we'd only see Flex components on the screen, but nothing would happen when we interacted with them.
-
The first thing I want to happen is, I want FDT to automatically download a preset home page when the application loads. Lets do this by using FDT's auto completion for an applicaitionComplete handler, and then write in a function that we will soon create. Write in a function 'setup()' and notice of FDT automatically flags this as an error. This is because FDT knows this event handler doesn't exist yet, and it's letting us know. To correct this we'll use what many consider one of FDT's most powerful feaures, [[QuickFixes]].  A quickfix is something coders use to write code faster and correct erros quickly. In this case, an error, invoking Quickfix will cause FDT to determine possible corrections depending on the type of error. By default, the Quickfix key stroke is 'alt+1' for WIndows and 'cmd+1' for OSX.
+
The first thing I want to happen is, I want FDT to automatically download a preset home page when the application loads. Lets do this by using FDT's auto completion for an applicaitionComplete handler, and then write in a function that we will soon create. Write in a function 'setup()' and notice of FDT automatically flags this as an error. This is because FDT knows this event handler doesn't exist yet, and it's letting us know. To correct this we'll use what many consider one of FDT's most powerful feaures, [[QuickFixes]].  A quickfix is something coders use to write code faster and correct erros quickly. In this case, an error, invoking Quickfix will cause FDT to determine possible corrections depending on the type of error. By default, the Quickfix key stroke is 'alt+1' for WIndows and 'cmd+1' for OSX. In this case, FDT is suggesting that the error can be fixed by creating a method 'set_up. That is exactly what I want so I will select that.
 +
 
 +
When selected, FDT will deduce that a 'Script' block has not been created, and will create one for us, as well as create the our 'set_up' method. Next I'll use FDT's auto completion to tell me what components are available and then use another quickfix to create a constant in my application. Next thing I want to do is create more event handlers for my Flex components, again using a combination of auto completion and quick fixes to have FDT write the code for me.
 +
 
 +
I'll then quickly jump to one of the callbacks by using the [[Navigation Shortcut]] F3.  By default, F3 will take me right to the declaration of whatever property or method I currently have my cursor over. Now I'll just fill in some code to make the application function.
 +
 
 +
To build and run this AIR app all you need to do is right click on our 'Main' file within the editor and choose 'Run As>FDT SWF Application' or right click on the file within the Flash Explorer and choose 'Run As>FDT SWF Application'.
 +
 
 +
When 'Run As>FDT SWF Application is selected', FDT will begin building your application and when it's done, it will open the [[AIR Debug Launcher (ADL]]) and run our AIR application.
 +
 
 +
After viewing your .swf, close the ADL and confirm your .swf was created by opening up your 'bin' output folder and looking for 'Main.swf' as well a the [[AIR Application Descriptor File]] that FDT created for us.

Revision as of 04:27, 14 September 2010

WIth FDT 4, developers not only have full Flex 4 support, but also access to FDT's power editing features such as quickfixes and auto completion while editing both Actionscript and MXML. For this tutorial, we'll use the Flex framework to build a simple web browser.

Once you have FDT open, you have a few different ways of creating a new project. You can click "Create new Flash Project" via the Welcome Screen, right click in the Flash Explorer and choose 'New Flash Project' or choose 'New Flash Project' from the 'File>New menu' ( OSX ). Right away you'll see FDT's new Project Template Wizard open. Give the project a new name, 'AIR App' will work fine, and choose the 'Empty Flex 4 AIR Project' template from the 'Desktop' folder on the left. When a valid project name has been added and a project template has been selected, the 'Finish' button will highlight. Click finish to continue.

Now we can see our project FDT created for us within the Flash Explorer. Click on the little arrow next to the project icon to expand it's contents. Here you can see a basic FDT project setup and see what our 'Empty AS3 Project' template has setup for us:

To run and build a Flash Project, FDT only needs one file. If you're familiar with Flash Authoring or Flash Builder, this is like creating your 'Document Class' or 'Main' class. Create this file by right clicking on the 'src' folder and choosing 'new>MXML Class'. What pops up is FDT's New ActionScript Class Wizard. Once here, fill in a package path 'demo.powerflasher', a valid class name, 'Main' is pretty standard, and then define the superclass by clicking on the 'Browse...' button. For this AIR application we'll use a WindowedApplication component. Filer the component by beginning to type 'Windowed' within the search input box on the top and when you see "WindowedApplication - mx.core" click on that and hit the 'OK' button. Finally hit hit the 'OK' button to finish.

FDT will now create a new Class for you automatically and open it within the Editor View. If some reason it didn't open for you, double click on the 'Main.mxml' file within the Flash Explorer. With our 'Main.mxml' file open, let's being by setting some application settings.

Using FDT's Auto Completion begin filling in properties for this application. By default, FDT's auto completion is triggered by hitting 'ctrl+space' on OSX and 'alt+space' on Windows. When auto completion is engaged, it will a preview of properties and methods associated with this component. Continue typing the name of the desired property and FDT will being filtering the results. When you're close to what you want, use the up and down arrows to select the desired property and hit enter.

Next lets add some Flex components. Let's begin by creating a navigation bar for the application. Again, using auto completion create an application control bar, then two buttons and a text input component. Next well create the HTML container to hold render the downloaded webpage.

If your wondering why we have access to the HTML container, it's because this project template has been defined as a Flex AIR application. You can see all the .swcs that were included in the build path by default when this template was created. Exploring the linked .swcs here, we can see references to classes associated with the Flex AIR SDK and we can see that the project type has been set as 'Flex 4 AIR'.

Getting back to application, so far we've only coded MXML components. If we were to launch this application now, we'd only see Flex components on the screen, but nothing would happen when we interacted with them.

The first thing I want to happen is, I want FDT to automatically download a preset home page when the application loads. Lets do this by using FDT's auto completion for an applicaitionComplete handler, and then write in a function that we will soon create. Write in a function 'setup()' and notice of FDT automatically flags this as an error. This is because FDT knows this event handler doesn't exist yet, and it's letting us know. To correct this we'll use what many consider one of FDT's most powerful feaures, QuickFixes. A quickfix is something coders use to write code faster and correct erros quickly. In this case, an error, invoking Quickfix will cause FDT to determine possible corrections depending on the type of error. By default, the Quickfix key stroke is 'alt+1' for WIndows and 'cmd+1' for OSX. In this case, FDT is suggesting that the error can be fixed by creating a method 'set_up. That is exactly what I want so I will select that.

When selected, FDT will deduce that a 'Script' block has not been created, and will create one for us, as well as create the our 'set_up' method. Next I'll use FDT's auto completion to tell me what components are available and then use another quickfix to create a constant in my application. Next thing I want to do is create more event handlers for my Flex components, again using a combination of auto completion and quick fixes to have FDT write the code for me.

I'll then quickly jump to one of the callbacks by using the Navigation Shortcut F3. By default, F3 will take me right to the declaration of whatever property or method I currently have my cursor over. Now I'll just fill in some code to make the application function.

To build and run this AIR app all you need to do is right click on our 'Main' file within the editor and choose 'Run As>FDT SWF Application' or right click on the file within the Flash Explorer and choose 'Run As>FDT SWF Application'.

When 'Run As>FDT SWF Application is selected', FDT will begin building your application and when it's done, it will open the AIR Debug Launcher (ADL) and run our AIR application.

After viewing your .swf, close the ADL and confirm your .swf was created by opening up your 'bin' output folder and looking for 'Main.swf' as well a the AIR Application Descriptor File that FDT created for us.

Get FDT5