Return-Path: X-Original-To: apmail-flex-commits-archive@www.apache.org Delivered-To: apmail-flex-commits-archive@www.apache.org Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by minotaur.apache.org (Postfix) with SMTP id 11FA111636 for ; Thu, 14 Aug 2014 17:57:19 +0000 (UTC) Received: (qmail 15601 invoked by uid 500); 14 Aug 2014 17:57:18 -0000 Delivered-To: apmail-flex-commits-archive@flex.apache.org Received: (qmail 15573 invoked by uid 500); 14 Aug 2014 17:57:18 -0000 Mailing-List: contact commits-help@flex.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@flex.apache.org Delivered-To: mailing list commits@flex.apache.org Received: (qmail 15565 invoked by uid 99); 14 Aug 2014 17:57:18 -0000 Received: from athena.apache.org (HELO athena.apache.org) (140.211.11.136) by apache.org (qpsmtpd/0.29) with ESMTP; Thu, 14 Aug 2014 17:57:18 +0000 X-ASF-Spam-Status: No, hits=-2000.0 required=5.0 tests=ALL_TRUSTED X-Spam-Check-By: apache.org Received: from [140.211.11.4] (HELO eris.apache.org) (140.211.11.4) by apache.org (qpsmtpd/0.29) with ESMTP; Thu, 14 Aug 2014 17:57:16 +0000 Received: from eris.apache.org (localhost [127.0.0.1]) by eris.apache.org (Postfix) with ESMTP id 4516D23888D2; Thu, 14 Aug 2014 17:56:56 +0000 (UTC) Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit Subject: svn commit: r1618004 - /flex/site/trunk/content/doc-getstarted.cmsPage Date: Thu, 14 Aug 2014 17:56:56 -0000 To: commits@flex.apache.org From: tomc@apache.org X-Mailer: svnmailer-1.0.9 Message-Id: <20140814175656.4516D23888D2@eris.apache.org> X-Virus-Checked: Checked by ClamAV on apache.org Author: tomc Date: Thu Aug 14 17:56:55 2014 New Revision: 1618004 URL: http://svn.apache.org/r1618004 Log: split install of SDK and install of builder, add anchor tag installer can link to Modified: flex/site/trunk/content/doc-getstarted.cmsPage Modified: flex/site/trunk/content/doc-getstarted.cmsPage URL: http://svn.apache.org/viewvc/flex/site/trunk/content/doc-getstarted.cmsPage?rev=1618004&r1=1618003&r2=1618004&view=diff ============================================================================== --- flex/site/trunk/content/doc-getstarted.cmsPage (original) +++ flex/site/trunk/content/doc-getstarted.cmsPage Thu Aug 14 17:56:55 2014 @@ -1,100 +1,102 @@ -Title: Getting Started with Apache Flex - -Before you start to learn how to program with Apache Flex, you will need to get your environment setup. The Apache Flex SDK includes everything you need to make applications except for an IDE. -You technically don't need one, but it is **HIGHLY** encouraged for you to use one. We won't cover the workflows in this document on how to create and compile applications with Notepad or vi, -just know that you can. - -There are four major IDEs available that work with Apache Flex. There are other, lesser-used IDEs and plugins for other IDEs out there as well. For the most part, the workflow is the same for -all of them. Below we will outline the steps needed to use Apache Flex with [Adobe Flash Builder 4.7][1], [JetBrains IntelliJ IDEA 13.1][2], [FlashDevelop][11] and -[FDT][13]. If you use another IDE and want to help us add to this document please contact us on the [mailing list][3]. - -

Setting up Apache Flex with Adobe Flash Builder

- -1. **Download Adobe Flash Builder** Adobe Flash Builder is available from the [Adobe Website][1]. It offers a 30-day trial and retails for about $250. It is available for both Windows and MacOS X -2. **Install Adobe Flash Builder** Follow the on-screen installation wizard. -3. **Download the SDK installer** Go to the [Download the SDK Installer][4] on the menu above and install the SDK installer. Click on the Download link on the installer badge, which will download the proper installer for your computer. -4. **Run the SDK installer** The first question you will be asked is the installation directory. If you are on a Mac, use /Applications/Adobe Flash Builder 4.7/sdks/4.13.0/. If you are on a PC, use C:\Program Files(x86)\Adobe Flash Builder 4.7\sdks\4.13.0\. You will need to create the 4.13.0 folders. Press Next. -5. **Accept SDK Licenses and Install** Check the red boxes to accept each of the licenses. Read the licenses, of course ;) Click Install to download all the components into the new 4.13.0 directory. This can take a few minutes. -6. **Run Flash Builder** Launch Adobe Flash Builder. You may need to login with your Adobe ID to activate the trial. -7. **Tell Flash Builder about the SDK** On Windows, go to the Window Menu -> Preferences. On the Mac, go to the Flash Builder menu -> Preferences. Go to the Flash Builder node, then select the Installed Flex SDKs node. Click [ADD], then choose the directory in which you saved the 4.13.0 SDK (Step 4). The name should be populated with Apache Flex 4.13.0 FP11.1 en_US. Press OK, and OK again. -8. **Create a new project** Right-click in the empty Package Explorer area, choose New -> Flex Project. Give the project a name. Under the Flex SDK version, choose Apache Flex 4.13.0. Press Finish. Flash Builder will create the new project. -9. **Start Coding!** Jump down below to make your first Hello World application. - -
Known Flash Builder Issues
-Adobe Flash Builder 4.7 and Adobe Flash Builder 4.6 both contain a bug where, -when generating the .mxml file for a new project that uses Apache Flex 4.13.0 -and Spark Application, Flash Builder will incorrectly insert the attribute: - - layout="absolute" - -This results in a compile error in the new project. The remedy is to simply -remove the errant attribute. - -A [wiki page][8] has been set up to contain the latest news on Adobe's -attempt to correct this problem. - -

Setting up Apache Flex with Jetbrains IntelliJ IDEA

-1. **Download JetBrains IntelliJ IDEA** IntelliJ IDEA is available from the [JetBrains Website][2]. They offer a 30-day trail and it retails for about $200. It is available for both Windows and MacOS X -2. **Install IntelliJ IDEA** Follow the on-screen installation wizard. -3. **Download the SDK installer** Go to the [Download the SDK Installer][4] on the menu above and install the SDK installer. Click on the Download link on the installer badge, which will download the proper installer for your computer. -4. **Run the SDK installer** The first question you will be asked is the installation directory. Note where you save the SDK (as you will need it later). Press Next. -5. **Accept SDK Licenses and Install** Check the red boxes to accept each of the licenses. Read the licenses, of course ;) Click Install to download all the components into the new 4.13.0 directory. This can take a few minutes. -6. **Run IntelliJ** Run IntelliJ. You will need to start the 30 day trial, and accept the license agreement when the app runs the first time. You will be launched into the configuration wizard. Select which VCS Plugins you want (we suggest Git Subversion). Next, select the Web/J2EE Plugins (We suggest Database, SQL and WebServices). Next, select the HTML Development tools (You must select FLash/Flex, CSS, JavaScript, JavaScript Debugger, but we suggest keeping them all selected). Finally, select which other plugins you wish to use (Select ANT, Properties, Copyright, Coverage, IntelliLang, Inspection Gadgets, Type Migration, UML. We suggest keeping most of the defaults). -7. **Create your new project** When at the welcome screen, select "Create New Project". In the left menu, choose Flash Module under the Other heading. Give the project a name, and select Next. -8. **Configure the new project** On the "New Project" screen, select Web for the target platform, and keep the rest of the options the same. Keep the Flex SDK as [none] for this step. Click Finish. -9. **Tell IntelliJ about the SDK** Right click on your project name in the Project Explorer, and click Open Module Settings. In the second pane, click the application settings (it says (app) behind the name -- it should have red squigglies under it). Go to the dependency tab. To the right of the Flex SDK drop down, select New... to add the 4.13.0 SDK to the project. Find the 4.13.0 directory you created in step 4, and select Choose. Press Ok to return to the project. Wait for IntelliJ to index the project and the new SDK. -10. **Create your Application file** Add a new MXML component under the /src/ directory by right clicking on src. Give it a name of your choosing, Template of "Flex 4 Component" and Parent Component of Application (spark.components). -11. **Finish configuring your project** Go back to the project settings (right-click on the project name in the project explorer -> Module Settings). Go to the General Tab of the app settings. Click the ... button to the right of the Main Class box, and choose the filename you just created. This will set the project root. -11. **Start Coding!** Jump down below to make your first Hello World application. - -

Setting up Apache Flex with FlashDevelop

-You can follow along the steps described in this [wiki page] [10] - -

Setting up Apache Flex with FDT

-You can follow along the steps described in this [video] [12] - -

Creating your first Hello World application

-This is a very simple, generic hello world application. You can learn a lot more by checking out some of our other resources below, or some of our [tutorial videos][5]. - -1. Set the height and width of your application. Add the following tags to the Application tag (2nd line) : `width="640" height="480"` -2. Add a new Layout tag within the Application tags. This will tell Flex how we plan on laying out our app. `` -3. Within the layout tags, add a BasicLayout tag. This will tell Flex we intend on telling it where to place our components. `` -4. Between the Layout and Application tags, Add a Label tag. We will be setting the `text` `horizontalCenter` and `verticalCenter` properties. `` -5. Find the Debug toolbar icon and click it. Your application should be launched in your default web browser and you should see the words Hello World! in the middle of the screen. - - -The complete code listing is (there may be some variations, depending on your IDE template. Just make sure what we talked about above match) : - - - - - - - - - - - - - -

Additional Resources

-* Make sure to check out our video and screencast library on the [videos page][5]. -* There are a large variety of books available online. One of our favorites is from Michael Labriola and Jeff Tapper (both Apache Flex Committers). [Amazon Link to book][6] -* There are quite a few people that blog about Flex. Check out the [official blog of Apache Flex][14], [FlashDaily.net][7] and [Adobe Feeds for Apache Flex][9] - - [1]: http://www.adobe.com/products/flash-builder-family.html - [2]: http://www.jetbrains.com/idea/ - [3]: community-mailinglists.html - [4]: installer.html - [5]: doc-videos.html - [6]: http://www.amazon.com/Adobe-Flex-4-5-Fundamentals-ebook/dp/B005EFKGCS/ - [7]: http://flashdaily.net/tagged/apacheflex - [8]: https://cwiki.apache.org/confluence/display/FLEX/Adobe+Flash+Builder+'New+Project'+Bug - [9]: http://feeds.adobe.com/index.cfm?query=bySmartCategory&smartCategoryId=5 - [10]: https://cwiki.apache.org/confluence/display/FLEX/2.3+FlashDevelop - [11]: http://www.flashdevelop.org/ - [12]: http://vimeo.com/46898669 - [13]: http://fdt.powerflasher.com/ +Title: Getting Started with Apache Flex + +Before you start to learn how to program with Apache Flex, you will need to get your environment setup. The Apache Flex SDK includes everything you need to make applications except for an IDE. +You technically don't need one, but it is **HIGHLY** encouraged for you to use one. We won't cover the workflows in this document on how to create and compile applications with Notepad or vi, +just know that you can. + +There are four major IDEs available that work with Apache Flex. There are other, lesser-used IDEs and plugins for other IDEs out there as well. For the most part, the workflow is the same for +all of them. Below we will outline the steps needed to use Apache Flex with [Adobe Flash Builder 4.7][1], [JetBrains IntelliJ IDEA 13.1][2], [FlashDevelop][11] and +[FDT][13]. If you use another IDE and want to help us add to this document please contact us on the [mailing list][3]. + +

Setting up the Apache Flex SDK

+1. **Download the SDK installer** Go to the [Download the SDK Installer][4] on the menu above and install the SDK installer. Click on the Download link on the installer badge, which will download the proper installer for your computer. +2. **Run the SDK installer** The first question you will be asked is the installation directory. If you are on a Mac, use /Applications/Adobe Flash Builder 4.7/sdks/4.13.0/. If you are on a PC, use C:\Program Files(x86)\Adobe Flash Builder 4.7\sdks\4.13.0\. You will need to create the 4.13.0 folders. Press Next. +3. **Accept SDK Licenses and Install** Check the red boxes to accept each of the licenses. Read the licenses, of course ;) Click Install to download all the components into the new 4.13.0 directory. This can take a few minutes. + +

Setting up Apache Flex with Adobe Flash Builder

+ +1. **Download Adobe Flash Builder** Adobe Flash Builder is available from the [Adobe Website][1]. It offers a 30-day trial and retails for about $250. It is available for both Windows and MacOS X +2. **Install Adobe Flash Builder** Follow the on-screen installation wizard. +3. **Run Flash Builder** Launch Adobe Flash Builder. You may need to login with your Adobe ID to activate the trial. +4. **Tell Flash Builder about the SDK** On Windows, go to the Window Menu -> Preferences. On the Mac, go to the Flash Builder menu -> Preferences. Go to the Flash Builder node, then select the Installed Flex SDKs node. Click [ADD], then choose the directory in which you saved the 4.13.0 SDK (Step 4). The name should be populated with Apache Flex 4.13.0 FP11.1 en_US. Press OK, and OK again. +5. **Create a new project** Right-click in the empty Package Explorer area, choose New -> Flex Project. Give the project a name. Under the Flex SDK version, choose Apache Flex 4.13.0. Press Finish. Flash Builder will create the new project. +6. **Start Coding!** Jump down below to make your first Hello World application. + +
Known Flash Builder Issues
+Adobe Flash Builder 4.7 and Adobe Flash Builder 4.6 both contain a bug where, +when generating the .mxml file for a new project that uses Apache Flex 4.13.0 +and Spark Application, Flash Builder will incorrectly insert the attribute: + + layout="absolute" + +This results in a compile error in the new project. The remedy is to simply +remove the errant attribute. + +A [wiki page][8] has been set up to contain the latest news on Adobe's +attempt to correct this problem. + +

Setting up Apache Flex with Jetbrains IntelliJ IDEA

+1. **Download JetBrains IntelliJ IDEA** IntelliJ IDEA is available from the [JetBrains Website][2]. They offer a 30-day trail and it retails for about $200. It is available for both Windows and MacOS X +2. **Install IntelliJ IDEA** Follow the on-screen installation wizard. +3. **Download the SDK installer** Go to the [Download the SDK Installer][4] on the menu above and install the SDK installer. Click on the Download link on the installer badge, which will download the proper installer for your computer. +4. **Run the SDK installer** The first question you will be asked is the installation directory. Note where you save the SDK (as you will need it later). Press Next. +5. **Accept SDK Licenses and Install** Check the red boxes to accept each of the licenses. Read the licenses, of course ;) Click Install to download all the components into the new 4.13.0 directory. This can take a few minutes. +6. **Run IntelliJ** Run IntelliJ. You will need to start the 30 day trial, and accept the license agreement when the app runs the first time. You will be launched into the configuration wizard. Select which VCS Plugins you want (we suggest Git Subversion). Next, select the Web/J2EE Plugins (We suggest Database, SQL and WebServices). Next, select the HTML Development tools (You must select FLash/Flex, CSS, JavaScript, JavaScript Debugger, but we suggest keeping them all selected). Finally, select which other plugins you wish to use (Select ANT, Properties, Copyright, Coverage, IntelliLang, Inspection Gadgets, Type Migration, UML. We suggest keeping most of the defaults). +7. **Create your new project** When at the welcome screen, select "Create New Project". In the left menu, choose Flash Module under the Other heading. Give the project a name, and select Next. +8. **Configure the new project** On the "New Project" screen, select Web for the target platform, and keep the rest of the options the same. Keep the Flex SDK as [none] for this step. Click Finish. +9. **Tell IntelliJ about the SDK** Right click on your project name in the Project Explorer, and click Open Module Settings. In the second pane, click the application settings (it says (app) behind the name -- it should have red squigglies under it). Go to the dependency tab. To the right of the Flex SDK drop down, select New... to add the 4.13.0 SDK to the project. Find the 4.13.0 directory you created in step 4, and select Choose. Press Ok to return to the project. Wait for IntelliJ to index the project and the new SDK. +10. **Create your Application file** Add a new MXML component under the /src/ directory by right clicking on src. Give it a name of your choosing, Template of "Flex 4 Component" and Parent Component of Application (spark.components). +11. **Finish configuring your project** Go back to the project settings (right-click on the project name in the project explorer -> Module Settings). Go to the General Tab of the app settings. Click the ... button to the right of the Main Class box, and choose the filename you just created. This will set the project root. +11. **Start Coding!** Jump down below to make your first Hello World application. + +

Setting up Apache Flex with FlashDevelop

+You can follow along the steps described in this [wiki page] [10] + +

Setting up Apache Flex with FDT

+You can follow along the steps described in this [video] [12] + +

Creating your first Hello World application

+This is a very simple, generic hello world application. You can learn a lot more by checking out some of our other resources below, or some of our [tutorial videos][5]. + +1. Set the height and width of your application. Add the following tags to the Application tag (2nd line) : `width="640" height="480"` +2. Add a new Layout tag within the Application tags. This will tell Flex how we plan on laying out our app. `` +3. Within the layout tags, add a BasicLayout tag. This will tell Flex we intend on telling it where to place our components. `` +4. Between the Layout and Application tags, Add a Label tag. We will be setting the `text` `horizontalCenter` and `verticalCenter` properties. `` +5. Find the Debug toolbar icon and click it. Your application should be launched in your default web browser and you should see the words Hello World! in the middle of the screen. + + +The complete code listing is (there may be some variations, depending on your IDE template. Just make sure what we talked about above match) : + + + + + + + + + + + + + +

Additional Resources

+* Make sure to check out our video and screencast library on the [videos page][5]. +* There are a large variety of books available online. One of our favorites is from Michael Labriola and Jeff Tapper (both Apache Flex Committers). [Amazon Link to book][6] +* There are quite a few people that blog about Flex. Check out the [official blog of Apache Flex][14], [FlashDaily.net][7] and [Adobe Feeds for Apache Flex][9] + + [1]: http://www.adobe.com/products/flash-builder-family.html + [2]: http://www.jetbrains.com/idea/ + [3]: community-mailinglists.html + [4]: installer.html + [5]: doc-videos.html + [6]: http://www.amazon.com/Adobe-Flex-4-5-Fundamentals-ebook/dp/B005EFKGCS/ + [7]: http://flashdaily.net/tagged/apacheflex + [8]: https://cwiki.apache.org/confluence/display/FLEX/Adobe+Flash+Builder+'New+Project'+Bug + [9]: http://feeds.adobe.com/index.cfm?query=bySmartCategory&smartCategoryId=5 + [10]: https://cwiki.apache.org/confluence/display/FLEX/2.3+FlashDevelop + [11]: http://www.flashdevelop.org/ + [12]: http://vimeo.com/46898669 + [13]: http://fdt.powerflasher.com/ [14]: https://blogs.apache.org/flex/ \ No newline at end of file