http://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&feed=atom&action=historyFlex / Air Tutorial - Revision history2024-03-29T13:54:08ZRevision history for this page on the wikiMediaWiki 1.16.0http://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&diff=3627&oldid=prevAklement: /* Source Files */2012-06-02T12:10:08Z<p><span class="autocomment">Source Files</span></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 12:10, 2 June 2012</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 3:</td>
<td colspan="2" class="diff-lineno">Line 3:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Source Files</center> =</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Source Files</center> =</div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>[[File:Download_soruce_files.png|center|link=http://github.com/TeamFDT/Examples/<del class="diffchange diffchange-inline">tree</del>/master/sample-projects]]</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>[[File:Download_soruce_files.png|center|link=http://github.com/TeamFDT/Examples/<ins class="diffchange diffchange-inline">blob</ins>/master/sample-projects<ins class="diffchange diffchange-inline">/flex_air_finish.zip?raw=true</ins>]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Video</center> =</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Video</center> =</div></td></tr>
</table>Aklementhttp://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&diff=3625&oldid=prevAklement: /* Source Files */2012-06-02T12:07:14Z<p><span class="autocomment">Source Files</span></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 12:07, 2 June 2012</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 3:</td>
<td colspan="2" class="diff-lineno">Line 3:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Source Files</center> =</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Source Files</center> =</div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>[[File:Download_soruce_files.png|center|link=http://github.com/<del class="diffchange diffchange-inline">downloads</del>/<del class="diffchange diffchange-inline">Powerflasher</del>/<del class="diffchange diffchange-inline">FDT-Resources</del>/<del class="diffchange diffchange-inline">flex_air_finish.zip</del>]]</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>[[File:Download_soruce_files.png|center|link=http://github.com/<ins class="diffchange diffchange-inline">TeamFDT</ins>/<ins class="diffchange diffchange-inline">Examples</ins>/<ins class="diffchange diffchange-inline">tree</ins>/<ins class="diffchange diffchange-inline">master/sample-projects</ins>]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Video</center> =</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Video</center> =</div></td></tr>
</table>Aklementhttp://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&diff=2017&oldid=prevBfonzi: /* Video */2010-12-10T00:59:49Z<p><span class="autocomment">Video</span></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 00:59, 10 December 2010</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 6:</td>
<td colspan="2" class="diff-lineno">Line 6:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Video</center> =</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Video</center> =</div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">::::</del>{{#widget:Vimeo|id=15601474}}</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>{{#widget:Vimeo|id=15601474<ins class="diffchange diffchange-inline">|width=600|height=400</ins>}}</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Creating Our Project</center> =</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= <center>Creating Our Project</center> =</div></td></tr>
</table>Bfonzihttp://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&diff=1887&oldid=prevAklement at 21:32, 4 November 20102010-11-04T21:32:12Z<p></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 21:32, 4 November 2010</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 2:</td>
<td colspan="2" class="diff-lineno">Line 2:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div> </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">= <center>Source Files</center> =</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:Download_soruce_files.png|center|link=http://github.com/downloads/Powerflasher/FDT-Resources/flex_air_finish.zip]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:Download_soruce_files.png|center|link=http://github.com/downloads/Powerflasher/FDT-Resources/flex_air_finish.zip]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
</table>Aklementhttp://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&diff=1884&oldid=prevAklement at 21:22, 4 November 20102010-11-04T21:22:50Z<p></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 21:22, 4 November 2010</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 3:</td>
<td colspan="2" class="diff-lineno">Line 3:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>[[File:<del class="diffchange diffchange-inline">Download_arrow</del>.png|<del class="diffchange diffchange-inline">30px</del>|]] <del class="diffchange diffchange-inline">Visit the [[Downloads]] page to download the source code used in this tutorial!</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>[[File:<ins class="diffchange diffchange-inline">Download_soruce_files</ins>.png|<ins class="diffchange diffchange-inline">center</ins>|<ins class="diffchange diffchange-inline">link=http://github.com/downloads/Powerflasher/FDT-Resources/flex_air_finish.zip</ins>]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">[[File</del>:<del class="diffchange diffchange-inline">Videoicon.png</del>|<del class="diffchange diffchange-inline">30px]] This tutorial has a video, check out the [[Videos]] page to watch it.</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">= <center>Video</center> =</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>:<ins class="diffchange diffchange-inline">:::{{#widget:Vimeo</ins>|<ins class="diffchange diffchange-inline">id=15601474}}</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div> </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>= <ins class="diffchange diffchange-inline"><center></ins>Creating Our Project<ins class="diffchange diffchange-inline"></center> </ins>=</div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>= Creating Our Project =</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:03_004x.jpg|center]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:03_004x.jpg|center]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Once you have FDT open, you have a few different ways of creating a new project. </div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Once you have FDT open, you have a few different ways of creating a new project. </div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 19:</td>
<td colspan="2" class="diff-lineno">Line 19:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>== Our Project In The Flash Explorer ==</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>== <ins class="diffchange diffchange-inline"><center></ins>Our Project In The Flash Explorer<ins class="diffchange diffchange-inline"></center> </ins>==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 27:</td>
<td colspan="2" class="diff-lineno">Line 27:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>*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]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>*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]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>= Creating Your First Class =</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>= <ins class="diffchange diffchange-inline"><center></ins>Creating Your First Class<ins class="diffchange diffchange-inline"></center> </ins>=</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>== Editing MXML and ActionScript with FDT's Smart Editor Features ==</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>== <ins class="diffchange diffchange-inline"><center></ins>Editing MXML and ActionScript with FDT's Smart Editor Features<ins class="diffchange diffchange-inline"></center> </ins>==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 44:</td>
<td colspan="2" class="diff-lineno">Line 44:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>== Creating MXML Components ==</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>== <ins class="diffchange diffchange-inline"><center></ins>Creating MXML Components<ins class="diffchange diffchange-inline"></center> </ins>==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 69:</td>
<td colspan="2" class="diff-lineno">Line 69:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>== Using Quickfixes ==</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>== <ins class="diffchange diffchange-inline"><center></ins>Using Quickfixes<ins class="diffchange diffchange-inline"></center> </ins>==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:001_0002x.png|center]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:001_0002x.png|center]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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. </div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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. </div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 130:</td>
<td colspan="2" class="diff-lineno">Line 130:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div></syntaxhighlight></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div></syntaxhighlight></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>== Navigation Shortcut ==</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>== <ins class="diffchange diffchange-inline"><center></ins>Navigation Shortcut<ins class="diffchange diffchange-inline"></center> </ins>==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 176:</td>
<td colspan="2" class="diff-lineno">Line 176:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div></syntaxhighlight></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div></syntaxhighlight></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>=Compiling The Application=</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>= <ins class="diffchange diffchange-inline"><center></ins>Compiling The Application<ins class="diffchange diffchange-inline"></center> </ins>=</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:001_0003x.png|center|300px]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:001_0003x.png|center|300px]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 184:</td>
<td colspan="2" class="diff-lineno">Line 184:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>== Adjusting Compilation Settings ==</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>== <ins class="diffchange diffchange-inline"><center></ins>Adjusting Compilation Settings<ins class="diffchange diffchange-inline"></center> </ins>==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Before concluding this tutorial, we'll quickly go over making an adjustment to our [[Run Configuration]]. There's are a few things to adjust. </div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Before concluding this tutorial, we'll quickly go over making an adjustment to our [[Run Configuration]]. There's are a few things to adjust. </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 213:</td>
<td colspan="2" class="diff-lineno">Line 213:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Recompile and see our new AIR preview [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_044.jpg]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Recompile and see our new AIR preview [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_044.jpg]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>=Wrap Up=</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>= <ins class="diffchange diffchange-inline"><center></ins>Wrap Up<ins class="diffchange diffchange-inline"></center> </ins>=</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
</table>Aklementhttp://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&diff=1704&oldid=prevAklement at 22:08, 8 October 20102010-10-08T22:08:18Z<p></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 22:08, 8 October 2010</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 4:</td>
<td colspan="2" class="diff-lineno">Line 4:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:Download_arrow.png|30px|]] Visit the [[Downloads]] page to download the source code used in this tutorial!</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:Download_arrow.png|30px|]] Visit the [[Downloads]] page to download the source code used in this tutorial!</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">[[File:Videoicon.png|30px]] This tutorial has a video, check out the [[Videos]] page to watch it.</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
</table>Aklementhttp://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&diff=1601&oldid=prevAklement: /* Our Project In The Flash Explorer */2010-10-05T19:11:39Z<p><span class="autocomment">Our Project In The Flash Explorer</span></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 19:11, 5 October 2010</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 18:</td>
<td colspan="2" class="diff-lineno">Line 18:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>== Our Project In The Flash Explorer ==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>== Our Project In The Flash Explorer ==</div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>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 <del class="diffchange diffchange-inline">''Empty AS3 Project'' </del>template has setup for us .</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>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.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>*This top SDK icon tells us the [[Project Type]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_006.jpg]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>*This top SDK icon tells us the [[Project Type]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_006.jpg]].</div></td></tr>
</table>Aklementhttp://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&diff=1600&oldid=prevAklement at 18:27, 5 October 20102010-10-05T18:27:39Z<p></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 18:27, 5 October 2010</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:001_0002.png|center|600px]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:001_0002.png|center|600px]]</div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">Wioth </del>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.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">With </ins>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.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
</table>Aklementhttp://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&diff=1599&oldid=prevAklement at 18:11, 5 October 20102010-10-05T18:11:27Z<p></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 18:11, 5 October 2010</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:001_0002.png|center|600px]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[File:001_0002.png|center|600px]]</div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">WIth </del>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.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">Wioth </ins>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.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 26:</td>
<td colspan="2" class="diff-lineno">Line 26:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= Creating Your First Class =</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>= Creating Your First Class =</div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>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]].</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>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<ins class="diffchange diffchange-inline">, </ins>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]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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.</div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 40:</td>
<td colspan="2" class="diff-lineno">Line 40:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>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+<del class="diffchange diffchange-inline">O</del>'' (OSX) and ''Ctrl+Shift+<del class="diffchange diffchange-inline">O</del>'' (Windows) [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_019.jpg]]<del class="diffchange diffchange-inline">. Learn more about customizing the auto formatter to your tastes within the [[Auto Formatter]] walkthrough</del>.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>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+<ins class="diffchange diffchange-inline">F</ins>'' (OSX) and ''Ctrl+Shift+<ins class="diffchange diffchange-inline">F</ins>'' (Windows) [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:03_019.jpg]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>== Creating MXML Components ==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>== Creating MXML Components ==</div></td></tr>
</table>Aklementhttp://fdt.powerflasher.com/w/index.php?title=Flex_/_Air_Tutorial&diff=1548&oldid=prevAklement: /* Compiling The Application */2010-10-04T23:55:39Z<p><span class="autocomment">Compiling The Application</span></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 23:55, 4 October 2010</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 174:</td>
<td colspan="2" class="diff-lineno">Line 174:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div></syntaxhighlight></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div></syntaxhighlight></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>= Compiling The Application =</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>=Compiling The Application=</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[File:001_0003x.png|center|300px]]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>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]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
</table>Aklement