Flex / Air Tutorial

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
(Using Quickfixes)
(Source Files)
 
(21 intermediate revisions not shown)
Line 1: Line 1:
-
WIth FDT 4, developers not only have full Flex 4 support, but also access to FDT's Smart Editor 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 AIR web browser.
+
[[File:001_0002.png|center|600px]]
 +
With FDT 4, developers not only have full Flex 4 support, but also access to FDT's Smart Editor 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 AIR web browser.
-
= Creating Our Project =
+
= <center>Source Files</center> =
 +
[[File:Download_soruce_files.png|center|link=http://github.com/TeamFDT/Examples/blob/master/sample-projects/flex_air_finish.zip?raw=true]]
 +
 
 +
= <center>Video</center> =
 +
{{#widget:Vimeo|id=15601474|width=600|height=400}}
 +
 
 +
= <center>Creating Our Project</center> =
 +
[[File:03_004x.jpg|center]]
Once you have FDT open, you have a few different ways of creating a new project.  
Once you have FDT open, you have a few different ways of creating a new project.  
You can:
You can:
-
*Click ''Create new Flash Project'' via  the [[Welcome Screen]] [http://fdt.powerflasher.com/docs/File:03_001.jpg].
+
*Click ''Create new Flash Project'' via  the [[Welcome Screen]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_001.jpg]].
-
*Right click in the [[Flash Explorer]] and choose ''New Flash Project'' [http://fdt.powerflasher.com/docs/File:03_002.jpg].
+
*Right click in the [[Flash Explorer]] and choose ''New Flash Project'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_002.jpg]].
-
*Choose ''New Flash Project'' from the ''File>New menu'' [http://fdt.powerflasher.com/docs/File:03_003.jpg].  
+
*Choose ''New Flash Project'' from the ''File>New menu'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_003.jpg]].  
-
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 [http://fdt.powerflasher.com/docs/File:03_004.jpg]. When a valid project name has been added and a project template has been selected, the ''Finish'' button will highlight.  Click ''Finish'' to continue.
+
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_004.jpg]]. When a valid project name has been added and a project template has been selected, the ''Finish'' button will highlight.  Click ''Finish'' to continue.
-
== Our Project In The Flash Explorer ==
+
== <center>Our Project In The Flash Explorer</center> ==
-
Now we can see the 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 the basic FDT project setup and see what our ''Empty AS3 Project'' template has setup for us [http://fdt.powerflasher.com/docs/File:03_005.jpg].
+
Now we can see the 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 the basic FDT project setup and see what our template has setup for us.
-
*This top SDK icon tells us the [[Project Type]] [http://fdt.powerflasher.com/docs/File:03_006.jpg].
+
*This top SDK icon tells us the [[Project Type]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_006.jpg]].
-
*The ''src'' folder has been setup as our default [[Source Folder]] [http://fdt.powerflasher.com/docs/File:03_007.jpg].
+
*The ''src'' folder has been setup as our default [[Source Folder]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_007.jpg]].
-
*The ''bin'' folder is set as the default [[Output Folder]] [http://fdt.powerflasher.com/docs/File:03_008.jpg].
+
*The ''bin'' folder is set as the default [[Output Folder]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_008.jpg]].
-
*The ''.settings'' folder and ''.project'' file are what FDT uses to keep track of [[Project Settings]] [http://fdt.powerflasher.com/docs/File:03_009.jpg].
+
*The ''.settings'' folder and ''.project'' file are what FDT uses to keep track of [[Project Settings]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_009.jpg]].
-
= Creating Your First Class =
+
= <center>Creating Your First Class</center> =
-
To run and build a Flash Project, FDT only needs one file. If you're familiar with Flash Authoring [http://fdt.powerflasher.com/docs/File:03_010.jpg] or Flash Builder [http://fdt.powerflasher.com/docs/File:03_011.jpg], 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'' [http://fdt.powerflasher.com/docs/File:03_012.jpg].  What pops up is FDT's [[New MXML Class Wizard]] [http://fdt.powerflasher.com/docs/File:03_013.jpg]. Once here, fill in a package path ''demo.powerflasher'', add a valid class name, ''Main'' is pretty standard , and then define the superclass by clicking on the ''Browse...'' button [http://fdt.powerflasher.com/docs/File:03_014.jpg]. 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 the ''OK'' button to finish [http://fdt.powerflasher.com/docs/File:03_015.jpg].
+
To run and build a Flash Project, FDT only needs one file. If you're familiar with Flash Authoring [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_010.jpg]] or Flash Builder [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_011.jpg]], 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'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_012.jpg]].  What pops up is FDT's [[New MXML Class Wizard]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_013.jpg]]. Once here, fill in a package path ''demo.powerflasher'', add a valid class name, ''Main'' is pretty standard , and then define the superclass by clicking on the ''Browse...'' button [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_014.jpg]]. 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 the ''OK'' button to finish [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_015.jpg]].
-
FDT will now create a new Class for you automatically and open it within the [[Editor View]] [http://fdt.powerflasher.com/docs/File:03_016.jpg].  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.
+
FDT will now create a new Class for you automatically and open it within the [[Editor View]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_016.jpg]].  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.
-
== Editing MXML and ActionScript with FDT's Smart Editor Features ==
+
== <center>Editing MXML and ActionScript with FDT's Smart Editor Features</center> ==
-
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 ''Ctrl+Space'' on Windows. When auto completion is engaged, it will display 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 [http://fdt.powerflasher.com/docs/File:03_017.jpg].
+
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 ''Ctrl+Space'' on Windows. When auto completion is engaged, it will display 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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_017.jpg]].
Line 34: Line 42:
-
While editing properties of the component, the current line may begin to extend off the screen [http://fdt.powerflasher.com/docs/File:03_018.jpg]. You can tidy up things by using another of FDT's smart editor features, [[Auto Formatter]].  By default, the key binding for the auto formatter is ''Cmd+Shift+O'' (OSX) and ''Ctrl+Shift+O'' (Windows) [http://fdt.powerflasher.com/docs/File:03_019.jpg]. Learn more about customizing the auto formatter to your tastes within the [[Auto Formatter]] walkthrough.
+
While editing properties of the component, the current line may begin to extend off the screen [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_018.jpg]]. You can tidy up things by using another of FDT's smart editor features, [[Auto Formatter]].  By default, the key binding for the auto formatter is ''Cmd+Shift+F'' (OSX) and ''Ctrl+Shift+F'' (Windows) [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_019.jpg]].
-
== Creating MXML Components ==
+
== <center>Creating MXML Components</center> ==
-
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 [http://fdt.powerflasher.com/docs/File:03_020.jpg], then two buttons and a text input component [http://fdt.powerflasher.com/docs/File:03_021.jpg]. Next we'll create the HTML container to hold render the downloaded webpage [http://fdt.powerflasher.com/docs/File:03_022.jpg].
+
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_020.jpg]], then two buttons and a text input component [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_021.jpg]]. Next we'll create the HTML container to hold render the downloaded webpage [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_022.jpg]].
Line 57: Line 65:
-
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 [http://fdt.powerflasher.com/docs/File:03_023.jpg]. When expanding the [[Linked SWCs]] Icon You can see all the .SWCs that were included in the build path by default when this template was created [http://fdt.powerflasher.com/docs/File:03_024.jpg]. Exploring the linked .SWCs here, we can see references to classes associated with the Flex AIR SDK [http://fdt.powerflasher.com/docs/File:03_025.jpg].
+
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_023.jpg]]. When expanding the [[Linked SWCs]] Icon You can see all the .SWCs that were included in the build path by default when this template was created [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_024.jpg]]. Exploring the linked .SWCs here, we can see references to classes associated with the Flex AIR SDK [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_025.jpg]].
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 interact 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 interact with them.
-
== Using Quickfixes ==
+
== <center>Using Quickfixes</center> ==
 +
[[File:001_0002x.png|center]]
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 ''applicationComplete'' handler, and then write in a function that we will soon create. Write in a function ''set_up()''  and notice how FDT automatically flags this as an error.  
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 ''applicationComplete'' handler, and then write in a function that we will soon create. Write in a function ''set_up()''  and notice how FDT automatically flags this as an error.  
Line 82: Line 91:
-
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 errors 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 ''Ctrl+1'' for Windows and ''Cmd+1'' for OSX. Place your cursor on the same line as the error and invoke quickFix [http://fdt.powerflasher.com/docs/File:03_026.jpg]. 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.
+
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 errors 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 ''Ctrl+1'' for Windows and ''Cmd+1'' for OSX. Place your cursor on the same line as the error and invoke quickFix [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_026.jpg]]. 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 ''set_up'' method [http://fdt.powerflasher.com/docs/File:03_027.jpg].
+
When selected, FDT will deduce that a ''Script'' block has not been created, and will create one for us, as well as create the ''set_up'' method [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_027.jpg]].
-
Next I'll continue to add code and [http://fdt.powerflasher.com/docs/File:03_028.jpg] use FDT's auto completion to tell me what components are available and then use another quickfix to create a constant in my application [http://fdt.powerflasher.com/docs/File:03_029.jpg]. 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 [http://fdt.powerflasher.com/docs/File:03_030.jpg] [http://fdt.powerflasher.com/docs/File:03_031.jpg].
+
Next I'll continue to add code and [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_028.jpg]] use FDT's auto completion to tell me what components are available and then use another quickfix to create a constant in my application [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_029.jpg]]. 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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_030.jpg]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_031.jpg]].
Line 121: Line 130:
</syntaxhighlight>
</syntaxhighlight>
-
== Navigation Shortcut ==
+
== <center>Navigation Shortcut</center> ==
-
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. [http://fdt.powerflasher.com/docs/File:03_032.jpg]
+
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_032.jpg]].
Line 167: Line 176:
</syntaxhighlight>
</syntaxhighlight>
-
= Compiling The Application =
+
= <center>Compiling The Application</center> =
-
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'' [http://fdt.powerflasher.com/docs/File:03_033.jpg] or right click on the file within the Flash Explorer and choose ''Run As>FDT SWF Application'' [http://fdt.powerflasher.com/docs/File:03_034.jpg].
+
[[File:001_0003x.png|center|300px]]
 +
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'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_033.jpg]] or right click on the file within the Flash Explorer and choose ''Run As>FDT SWF Application'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_034.jpg]].
-
When 'Run As>FDT SWF Application' is selected, FDT will begin building your application [http://fdt.powerflasher.com/docs/File:03_035.jpg] and when it's done, it will open the [[AIR Debug Launcher (ADL)]] and run our AIR application. [http://fdt.powerflasher.com/docs/File:03_036.jpg]  
+
When ''Run As>FDT SWF Application'' is selected, FDT will begin building your application [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_035.jpg]] and when it's done, it will open the [[AIR Debug Launcher (ADL)]] and run our AIR application [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_036.jpg]].
-
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. [http://fdt.powerflasher.com/docs/File:03_037.jpg]
+
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 the [[AIR Application Descriptor File]] that FDT created for us [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_037.jpg]].
-
== Adjusting Compilation Settings ==
+
== <center>Adjusting Compilation Settings</center> ==
-
Before concluding this tutorial, we'll quickly go over making an adjustment to our [[Run Configuration]]. There's are a few things I'd like to adjust.  
+
Before concluding this tutorial, we'll quickly go over making an adjustment to our [[Run Configuration]]. There's are a few things to adjust.  
 +
* Give the launch configuration a name.
* Change the size of my application, to 800 x 600.
* Change the size of my application, to 800 x 600.
-
* Change the name of my App.
+
* Change the name of my application.
-
I'll quickly add a 'title' property and adjust the application dimensions to 800x600:
+
I'll quickly add a ''title'' property and adjust the application dimensions to 800x600:
Line 194: Line 205:
Then move on to editing my launch configuration.
Then move on to editing my launch configuration.
-
To begin, go to the ''Run'' menu and choose ''Run Configurations...'' [http://fdt.powerflasher.com/docs/File:03_038.jpg]. What opens is the [[Run Configurations Window]] [http://fdt.powerflasher.com/docs/File:03_039.jpg]. This is were developers can make changes to any launch configuration for any open projects. What makes Run configurations powerful is that they are largely independent from your project and thus have the flexibility to add an change settings very easily. To learn more check out the [[Launch Configuration Tutorial]] tutorial.
+
To begin, go to the ''Run'' menu and choose ''Run Configurations...'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_038.jpg]]. This will open the [[Run Configurations Window]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_039.jpg]]. This is were developers can make changes to any launch configuration for any open projects. What makes Run configurations powerful is that they are largely independent from your project and thus have the flexibility to add or change settings very easily. To learn more check out the [[Launch Configuration Tutorial]] tutorial.
-
Getting back to out AIR app, the first thing I'll do is change the name of the configuration to something more meaningful [http://fdt.powerflasher.com/docs/File:03_039.jpg], then I'll adjust the output name of the .SWF that FDT creates [http://fdt.powerflasher.com/docs/File:03_040.jpg].  Next I'll jump to the ''Start'' tab [http://fdt.powerflasher.com/docs/File:03_041.jpg] where I can tell FDT how I want to preview this app [http://fdt.powerflasher.com/docs/File:03_042.jpg]. I'll need to make sure that the name of my new .SWF is added here - otherwise it will open the .SWF I created last time - and change the the settings of the viewer to match the settings of my application. [http://fdt.powerflasher.com/docs/File:03_043.jpg]
+
Getting back to our AIR app, the next thing to do is to change the name of the configuration to something more meaningful, let's call it''AIR Web Browser'' then adjust the output name of the .SWF that FDT creates to ''MyApp.swf''  [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_040.jpg]].  Next jump to the ''Start'' tab [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_041.jpg]] where I can tell FDT how I want to preview this app [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_042.jpg]]. I'll need to make sure that the name of my new .SWF is added here - otherwise it will open the .SWF I created last time - and change the the settings of the viewer to match the settings of my application [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_042.jpg]].
-
In this case, the ADL will automatically fit the size of the application I set here; however, not all Flex or AS3 projects are using these same components, and some distortion will occur if the viewer I'm using is a different size than the application I'm building. If you've ever opened a .swf with the stand alone player or a web browser without any HTML, you'll know what I mean by scaling issues.
+
In this case, the ADL will automatically fit the size of the application I set here; however, not all Flex or AS3 projects are using these same components, and some distortion will occur if the viewer I'm using is a different size than the application I'm building. If you've ever opened a .SWF with the stand alone player or a web browser without any HTML, you'll know about scaling issues.
-
Recompile and see our new AIR preview. [http://fdt.powerflasher.com/docs/File:03_044.jpg]
+
Recompile and see our new AIR preview [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_044.jpg]].
-
=Wrap Up=
+
= <center>Wrap Up</center> =
 +
Congratulations, you’ve built an AIR application using FDT and Flex. From here, you’ll probably want to learn more about editing Launch Configurations and compiler options such as .SWF size and background color. See our  [[Launch Configuration Tutorial]] for more info on that.
-
Download the finished project [http://188.40.67.159/download/wiki_examples/flex_air_finish.zip here]. Learn about importing this project in the [[Sharing and Archiving Projects]] tutorial.
 
FAQ
FAQ
Line 210: Line 221:
*A: Check out the [[Launch Configuration Tutorial]] tutorial to learn about different ways to compile and view your Flash Applications
*A: Check out the [[Launch Configuration Tutorial]] tutorial to learn about different ways to compile and view your Flash Applications
-
*Q: Does my class need to be named 'Main'.
+
*Q: Does my class need to be named ''Main''.
*A: Not at all - any legal class name works. FDT has a very powerful and flexible way of building and running your applications. Check out [[Launch Configuration Tutorial]] for more info.
*A: Not at all - any legal class name works. FDT has a very powerful and flexible way of building and running your applications. Check out [[Launch Configuration Tutorial]] for more info.
*Q: Why is it that when I click on my project within the Flash Explorer and then go to the [[Run Menu]], I don't see my ''Main'' class, ''(no launch history)'' or I see ''Run As>FDT SWC Library''
*Q: Why is it that when I click on my project within the Flash Explorer and then go to the [[Run Menu]], I don't see my ''Main'' class, ''(no launch history)'' or I see ''Run As>FDT SWC Library''
*A: FDT works  differently than other IDEs. It uses [[Launch Configurations]] and doesn't force you to hardcode any settings. This includes compiler options, your 'Main' class or the name of your output .swfs. You can even create many different launch configurations for one project. Learn more with the [[Launch Configuration Tutorial]].
*A: FDT works  differently than other IDEs. It uses [[Launch Configurations]] and doesn't force you to hardcode any settings. This includes compiler options, your 'Main' class or the name of your output .swfs. You can even create many different launch configurations for one project. Learn more with the [[Launch Configuration Tutorial]].

Latest revision as of 12:10, 2 June 2012

001 0002.png

With FDT 4, developers not only have full Flex 4 support, but also access to FDT's Smart Editor 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 AIR web browser.

Contents

Source Files

Download soruce files.png

Video

Creating Our Project

03 004x.jpg

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 Img preview.png.
  • Right click in the Flash Explorer and choose New Flash Project Img preview.png.
  • Choose New Flash Project from the File>New menu Img preview.png.

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 Img preview.png. When a valid project name has been added and a project template has been selected, the Finish button will highlight. Click Finish to continue.

Our Project In The Flash Explorer

Now we can see the 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 the basic FDT project setup and see what our template has setup for us.

Creating Your First Class

To run and build a Flash Project, FDT only needs one file. If you're familiar with Flash Authoring Img preview.png or Flash Builder Img preview.png, 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 Img preview.png. What pops up is FDT's New MXML Class Wizard Img preview.png. Once here, fill in a package path demo.powerflasher, add a valid class name, Main is pretty standard , and then define the superclass by clicking on the Browse... button Img preview.png. 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 the OK button to finish Img preview.png.

FDT will now create a new Class for you automatically and open it within the Editor View Img preview.png. 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.

Editing MXML and ActionScript with FDT's Smart Editor Features

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 Ctrl+Space on Windows. When auto completion is engaged, it will display 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 Img preview.png.


<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" 
    paddingLeft="0" paddingRight="0" paddingTop="0">


While editing properties of the component, the current line may begin to extend off the screen Img preview.png. You can tidy up things by using another of FDT's smart editor features, Auto Formatter. By default, the key binding for the auto formatter is Cmd+Shift+F (OSX) and Ctrl+Shift+F (Windows) Img preview.png.

Creating MXML Components

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 Img preview.png, then two buttons and a text input component Img preview.png. Next we'll create the HTML container to hold render the downloaded webpage Img preview.png.


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
	paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
 
	<mx:ApplicationControlBar width="100%" height="40">
		<mx:Button label="Home" id="home"/>
		<mx:Button label="Go" id="go"/>
		<mx:TextInput id="urlTextbox" text="" width="235"/>
	</mx:ApplicationControlBar>
 
	<mx:HTML id="htmlControl" width="100%" height="100%"/>
</mx:WindowedApplication>


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 Img preview.png. When expanding the Linked SWCs Icon You can see all the .SWCs that were included in the build path by default when this template was created Img preview.png. Exploring the linked .SWCs here, we can see references to classes associated with the Flex AIR SDK Img preview.png.

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 interact with them.

Using Quickfixes

001 0002x.png

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 applicationComplete handler, and then write in a function that we will soon create. Write in a function set_up() and notice how FDT automatically flags this as an error.


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
	paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
	applicationComplete="set_up()"> 
	<mx:ApplicationControlBar width="100%" height="40">
		<mx:Button label="Home" id="home"/>
		<mx:Button label="Go" id="go"/>
		<mx:TextInput id="urlTextbox" text="" width="235"/>
	</mx:ApplicationControlBar>
 
	<mx:HTML id="htmlControl" width="100%" height="100%"/>
</mx:WindowedApplication>


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 errors 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 Ctrl+1 for Windows and Cmd+1 for OSX. Place your cursor on the same line as the error and invoke quickFix Img preview.png. 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 set_up method Img preview.png.

Next I'll continue to add code and Img preview.png use FDT's auto completion to tell me what components are available and then use another quickfix to create a constant in my application Img preview.png. 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 Img preview.png Img preview.png.


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
	paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
	applicationComplete="set_up()">
 
<mx:Script>
	<![CDATA[
	private static const HOME_URL : String = "http://www.fdt.powerflasher.com/";
 
	private function set_up() : void {
		urlTextbox.text = HOME_URL;
	}
 
	private function go_home(event : MouseEvent) : void {
	}
 
	private function update_url(event : MouseEvent = null):void {
	}
	]]>
</mx:Script>
 
	<mx:ApplicationControlBar width="100%" height="40">
		<mx:Button label="Home" id="home" click="go_home(event)"/>
		<mx:Button label="Go" id="go" click="update_url(event)"/>
		<mx:TextInput id="urlTextbox" text="" width="235"/>
	</mx:ApplicationControlBar>
 
	<mx:HTML id="htmlControl" width="100%" height="100%"/>
</mx:WindowedApplication>

Navigation Shortcut

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 Img preview.png.


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
	paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
	applicationComplete="set_up()">
 
<mx:Script>
	<![CDATA[
	private static const HOME_URL : String = "http://www.fdt.powerflasher.com/";
 
	private function set_up() : void {
		urlTextbox.text = HOME_URL;
		update_url();
	}
 
	private function go_home(event : MouseEvent) : void {
		urlTextbox.text = HOME_URL;
		update_url();
	}
 
	private function update_url(event : MouseEvent = null):void {
		if(urlTextbox.text.substr(0, 7) == "http://") {
			htmlControl.location = urlTextbox.text;
		} else {
	htmlControl.location = urlTextbox.text = "http://" + urlTextbox.text;
		}
	}
        ]]>
</mx:Script>
 
	<mx:ApplicationControlBar width="100%" height="40">
		<mx:Button label="Home" id="home" click="go_home(event)"/>
		<mx:Button label="Go" id="go" click="update_url(event)"/>
		<mx:TextInput id="urlTextbox" text="" width="235"/>
	</mx:ApplicationControlBar>
 
	<mx:HTML id="htmlControl" width="100%" height="100%"/>
</mx:WindowedApplication>

Compiling The Application

001 0003x.png

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 Img preview.png or right click on the file within the Flash Explorer and choose Run As>FDT SWF Application Img preview.png.

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

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 the AIR Application Descriptor File that FDT created for us Img preview.png.

Adjusting Compilation Settings

Before concluding this tutorial, we'll quickly go over making an adjustment to our Run Configuration. There's are a few things to adjust.

  • Give the launch configuration a name.
  • Change the size of my application, to 800 x 600.
  • Change the name of my application.

I'll quickly add a title property and adjust the application dimensions to 800x600:


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
	title="FDT Flex / AIR Applicaiton" width="800" height="600"	paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
	applicationComplete="set_up()">


Then move on to editing my launch configuration.

To begin, go to the Run menu and choose Run Configurations... Img preview.png. This will open the Run Configurations Window Img preview.png. This is were developers can make changes to any launch configuration for any open projects. What makes Run configurations powerful is that they are largely independent from your project and thus have the flexibility to add or change settings very easily. To learn more check out the Launch Configuration Tutorial tutorial.

Getting back to our AIR app, the next thing to do is to change the name of the configuration to something more meaningful, let's call itAIR Web Browser then adjust the output name of the .SWF that FDT creates to MyApp.swf Img preview.png. Next jump to the Start tab Img preview.png where I can tell FDT how I want to preview this app Img preview.png. I'll need to make sure that the name of my new .SWF is added here - otherwise it will open the .SWF I created last time - and change the the settings of the viewer to match the settings of my application Img preview.png.

In this case, the ADL will automatically fit the size of the application I set here; however, not all Flex or AS3 projects are using these same components, and some distortion will occur if the viewer I'm using is a different size than the application I'm building. If you've ever opened a .SWF with the stand alone player or a web browser without any HTML, you'll know about scaling issues.

Recompile and see our new AIR preview Img preview.png.

Wrap Up

Congratulations, you’ve built an AIR application using FDT and Flex. From here, you’ll probably want to learn more about editing Launch Configurations and compiler options such as .SWF size and background color. See our Launch Configuration Tutorial for more info on that.


FAQ

  • Q: How Do I change .SWF settings like background color or size?
  • A: Check out the Launch Configuration Tutorial tutorial to learn about different ways to compile and view your Flash Applications
  • Q: Does my class need to be named Main.
  • A: Not at all - any legal class name works. FDT has a very powerful and flexible way of building and running your applications. Check out Launch Configuration Tutorial for more info.
  • Q: Why is it that when I click on my project within the Flash Explorer and then go to the Run Menu, I don't see my Main class, (no launch history) or I see Run As>FDT SWC Library
  • A: FDT works differently than other IDEs. It uses Launch Configurations and doesn't force you to hardcode any settings. This includes compiler options, your 'Main' class or the name of your output .swfs. You can even create many different launch configurations for one project. Learn more with the Launch Configuration Tutorial.
Get FDT5