Adobe Flex: Difference between revisions

Latest revision as of 18:19, 22 August 2016

This article or section is a stub. It does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.

Draft

(This page needs updating to Flex 4 - Daniel K. Schneider 14:22, 9 November 2010 (CET))

Definition

“Adobe Flex is a software development kit and an IDE for a group of technologies initially released in March of 2004 by Macromedia to support the development and deployment of cross platform, rich Internet applications based on their proprietary Macromedia Flash platform.”. (Wikipedia, retrieved 15:49, 6 September 2007 (MEST)).

SWF files generated by the Flex SDK require Flash Player 9 or above.

History: In April 2007, Adobe announced that the Flex SDK would be released open source. A visual programming environment was provided in the form of the Flex Builder that was to remain proprietary and commercial. Since october 2007 it is free to students and educators (upon request).

The Adobe Flex software development kit (SDK) supports:

MXML, an XML-based user interface markup language.
ActionScript 2/3 programming

This is just a short overview article. Basically, with Flex you can write Flash applications just by coding. Roughly speaking, you have to learn how to use the Actionscript 3 classes with ECMAScript and you may use MXML for faster development of the User Interface. So - conceptually speaking - it's Java made easier. The result - of course - is a Flash "swf" (Movie) file. In a short flow formula:

ActionScript + [ MXML ] -> compilation -> Executable flash (swf)

This entry is part of the Flash and ActionScript series of articles.

Installing the free Flex SDK

Getting the Flex SDK from Adobe

Download this free SDK from Adobe:

Free Flex 4 SDK (nov 2010), else try download or search for it in some flex page

The Adobe Flex 2/3/4 Software Development Kits (SDKs) are platform independant compilers that need Java 6 (or better) installed.

Installing the Adobe Flex2 Software Development Kit (SDK) for Windows

Unzip it somewhere, e.g.

c:\soft\flex

Edit the Environment variables through the configuration panel to include the flex ./bin directory in the path: I.e. something like Parameters->Configuration Panel->System->Advanced, then select Environment Variables (I don't have an English System at hand). E.g.

%Path%;c:\soft\flex\bin

If you don't know about environment variables, read setting a value in windows. Do not delete the '%Path%' element if you edit the user Path. Alternatively, if you edit the System path, keep all the existing paths or you will be in deep trouble.

Installing the Adobe Flex 4 Software Development Kit (SDK) for Ubuntu

Unzip it somewhere (I put it under /usr/local/flex)
Then you will have to fix all the permissions, they are all wrong. E.g at least open directories and make excutable files 775 for everyone (or try better):

find . -type d -exec chmod 755 "{}" \;
find . -perm /111 -type f -exec chmod 755 "{}" \;

Then add this directory to your path. E.g. under my Ubuntu I added in file /etc/bash.bashrc:

export PATH=${PATH}:/usr/local/flex/bin

else put this line into your private ~/.bashrc

Installing the Adobe Flex 2 Software Development Kit (SDK) for Mac OSX

Unzip it somewhere (I put it under /Applications/flex_sdk/flex_sdk2/)
Open terminal, go to the flex_sdk directory. Make sure the files in the bin directory have the right permissions. Type "ls-al". File details should start with "-rwx". If no "x" appears, type "chmod u+x *" to give execution permission to all files in that directory.
Then add this directory to your system paths. Go to your home directory ("cd $home"), edit the file (in the terminal window, type "open .profile" or "mate .profile" if you haveBut it is not a tutorial !! textmate installed). Add the path to the file.

export PATH=$PATH:/Applications/flex_sdk/flex_sdk_2/bin/

Save the file. Then make sure the profile file is being initiated.

source .profile

If you have the TextMate code editing software installed, download the Flex and AS3 Bundles for TextMate.

Flex Builder

You can testdrive it for 30 days (download)
Educators and students can get a serial number for free use by filling in a form

Writing ActionScript / MXML Applications

See:

MXML (for a short intro to MXML, the layout language)
Flex includes ActionScript 3 (minus the fl.* classes plus the equivalent mx.* classes). We don't have a Flex ActionScript overview, but see these Flash / AS3 articles to understand some general principles of AS coding:
- Actionscript 3 (an entry point for various introductory Actionscript tutorials)
- Flash ActionScript 3 overview (a short overview of ActionScript 3 and related tools).

Editing software / IDEs

To work with the SDK, you can use any programming editor, but you should check if your favorite editor has an ActionScript syntax mode. At least you should have syntax highlighting JavaScript, e.g. you also can check out web authoring systems. Basically you follow the same logic as Java development without IDE.

Otherwise check out:

Flashdevelop. Free and open source tool that provides syntax support and an interface with the Flex compilers.
Adobe Flex Builder, a commercial Eclipse plugin from Adobe. It is free for education upon request.
... or use the built-in ActionScript editor in CS3.

Links

Flex components and style explorers

Component explorer Nice application that shows both a live component and corresponding MXML code.
Flex 3 Style Explorer

Adobe tutorials and resources

Flex - Getting started (As of nov 2010, quite a detailed Flex 3 tutorial that can be also consulted for platform neutral learning)

Flex developer center (Series of tutorials and further links)

flex.org (an Adobe blog) aggregates Flex news from a number of sites. It includes MXML-related stuff.

Flex Cookbook

Advanced tutorials

Creating Flex components

Examples

Flex showcase (Adobe / Flex.org)
Fillcolors A website with Flex skins make à la CSS Zen Garden. You can download zip archives with styles.

Other

Creating Flex Components by Bruce Eckel (the person who wrote what is probably the best Java book)

PHP and Adobe Flex, by Daniel Williams, Php Builder, 2007.

Flex for PHP Developers

Flexexamples.com Peter deHaan's blog (He works in the Flex team at Adobe)

Flex tutorials slides in PDF by Dai (Blog XML: Technologies de l'information et du Web, in French !). *.rar compressed files to download.

@@ Line 1: / Line 1: @@
 {{Stub}}
+<!-- <pageby nominor="false" comments="false"/> -->
+(This page needs updating to Flex 4 - [[User:Daniel K. Schneider|Daniel K. Schneider]] 14:22, 9 November 2010 (CET))
 == Definition ==
-{{quotation|Adobe Flex is a software development kit and an IDE for a group of technologies initially released in March of 2004 by Macromedia to support the development and deployment of cross platform, rich Internet applications based on their proprietary Macromedia Flash platform.}}" ([http://en.wikipedia.org/wiki/Adobe_Flex Wikipedia], retrieved 15:49, 6 September 2007 (MEST)).
+{{quotation|Adobe Flex is a software development kit and an IDE for a group of technologies initially released in March of 2004 by Macromedia to support the development and deployment of cross platform, rich Internet applications based on their proprietary Macromedia Flash platform.}}. ([http://en.wikipedia.org/wiki/Adobe_Flex Wikipedia], retrieved 15:49, 6 September 2007 (MEST)).
+SWF files generated by the Flex SDK require Flash Player 9 or above.
-In April 2007, Adobe announced that the Flex SDK would be released open source. A visual programming environment was provided in the form of the Flex Builder, that was to remain proprietary and commercial.
+History: In April 2007, Adobe announced that the Flex SDK would be released open source. A visual programming environment was provided in the form of the Flex Builder that was to remain proprietary and commercial. Since october 2007 it is free to students and educators (upon request).
-In October 2007, a press release announced that not only the price of Flex Builder was to be dramatically reduced for developers but, even better, it was to be offered for free to students and educators.
+The Adobe Flex software development kit (SDK) supports:
+* [[MXML]], an XML-based user interface markup language.
+* ActionScript 2/3 programming
-{{quotation|By making it easier for educational institutions to adopt Flex 2,
+This is just a short overview article. Basically, with Flex you can write Flash applications just by coding. Roughly speaking, you have to learn how to use the Actionscript 3 classes with ECMAScript and you may use MXML for faster development of the User Interface. So - conceptually speaking - it's Java made easier. The result - of course - is a Flash "swf" (Movie) file. In a short flow formula:
-we are ensuring that students and researchers are better equipped to
-harness the power of Web 2.0 and RIAs}}, said Peter Isaacson, vice
-president of education marketing at Adobe. ([http://investing.reuters.co.uk/news/articleinvesting.aspx?view=PR&symbol=ADBE.O&storyID=42308+24-Oct-2007+BW&type=qcna Adobe Press release at Reuteurs], retrieved 19:03, 27 October 2007 (MEST)).
-Flex can appear a bit tricky to install for a largely non technical person. Once the framework installed, it is very easy to start writing Flex applications.
+ ActionScript + [ MXML ] -> compilation -> Executable flash (swf)
-The starting point is the wirting of a mxml document. This is a text file that contains a combination of xml elements and optionally actionscript instructions.
+This entry is part of the [[Flash]] and [[ActionScript]] series of articles.
-A basic mxml document would look something like this:
+== Installing the free Flex SDK ==
-file myFirstApplication.mxml
+; Getting the Flex SDK from Adobe
+* Download this free SDK from Adobe:
+: [http://www.adobe.com/go/flex4_sdk_download/ Free Flex 4 SDK] (nov 2010), else try [http://download.macromedia.com/pub/flex/sdk/flex_sdk_4.1.zip download] or search for it in [http://www.adobe.com/products/flex/ some flex page]
-  <?xml version="1.0" encoding="utf-8"?>
+The Adobe Flex 2/3/4 Software Development Kits (SDKs) are platform independant compilers that need Java 6 (or better) installed.
+; Installing the Adobe Flex2 Software Development Kit (SDK) for Windows
+* Unzip it somewhere, e.g.
+  c:\soft\flex
+* Edit the Environment variables through the configuration panel to include the flex ./bin directory in the path: I.e. something like ''Parameters->Configuration Panel->System->Advanced'', then select ''Environment Variables'' (I don't have an English System at hand). E.g.
+ %Path%;c:\soft\flex\bin
+If you don't know about environment variables, read [[environment variable#Setting_a_value_in_windows environment variable|setting a value in windows]]. Do not delete the '%Path%' element if you edit the user Path. Alternatively, if you edit the System path, keep all the existing paths or you will be in deep trouble.
-  <mx:Application
+; Installing the Adobe Flex 4 Software Development Kit (SDK) for Ubuntu
-     xmlns:mx="http://www.adobe.com/2006/mxml"
+* Unzip it somewhere (I put it under /usr/local/flex)
-     horizontalAlign="center" verticalAlign="middle"
+* Then you will have to fix all the permissions, '''they are all wrong'''. E.g at least open directories and make excutable files 775 for everyone (or try better):
-     width="300" height="160"
+  find . -type d -exec chmod 755 "{}" \;
- >
+ find . -perm /111 -type f -exec chmod 755 "{}" \;
-     <mx:Panel
+* Then add this directory to your path. E.g. under my Ubuntu I added in file ''/etc/bash.bashrc'':
-         paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
+ export PATH=${PATH}:/usr/local/flex/bin
-         title="My First Application"
+else put this line into your private ''~/.bashrc''
-     >
+; Installing the Adobe Flex 2 Software Development Kit (SDK) for Mac OSX
-         <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
+* Unzip it somewhere (I put it under /Applications/flex_sdk/flex_sdk2/)
-     </mx:Panel>
+* Open terminal, go to the flex_sdk directory. Make sure the files in the bin directory have the right permissions. Type "ls-al". File details should start with "-rwx". If no "x" appears, type "chmod u+x *" to give execution permission to all files in that directory.
- </mx:Application>
+* Then add this directory to your system paths. Go to your home directory ("cd $home"), edit the file (in the terminal window, type "open .profile" or "mate .profile" if you haveBut it is '''not''' a tutorial !! textmate installed). Add the path to the file.
+ export PATH=$PATH:/Applications/flex_sdk/flex_sdk_2/bin/
+Save the file. Then make sure the profile file is being initiated.
+  source .profile
+If you have the TextMate code editing software installed, download the [http://www.flashalisious.com/2007/07/30/installing-as3-and-flex-bundle-for-textmate/ Flex and AS3 Bundles for TextMate].
+== Flex Builder ==
+* You can testdrive it for 30 days ([http://www.adobe.com/products/flex/flexdownloads/ download])
+* Educators and students can get a serial number for free use by [https://freeriatools.adobe.com/ filling in a form]
+== Writing ActionScript / MXML Applications ==
+See:
+* [[MXML]] (for a short intro to MXML, the layout language)
+* Flex includes ActionScript 3 (minus the fl.* classes plus the equivalent mx.* classes). We don't have a Flex ActionScript overview, but see these Flash / AS3 articles to understand some general principles of AS coding:
+** [[Actionscript 3]] (an entry point for various introductory Actionscript tutorials)
+** [[Flash ActionScript 3 overview]] (a short overview of ActionScript 3 and related tools).
-Put the text above in a text file. Save the text file as "myFirstApplication.mxml". Assuming the Flex framework is properly installed, in the terminal, type
+== Editing software / IDEs ==
- mxmlc myFirstApplication.mxml
-Information appears on the screen and about half a second later, if all is well, you get informed that a file "myFirstApplication.swf" has been produced. Open this file in a flash player or in a web browser.
-Flash 9 needs to be installed to view SWF files produced by Flex.
+* To work with the SDK, you can use any programming editor, but you should check if your favorite editor has an ActionScript syntax mode. At least you should have syntax highlighting JavaScript, e.g. you also can check out [[Web_authoring_system#Programmer.27s_editors_with_HTML_support|web authoring systems]]. Basically you follow the same logic as Java development without IDE.
-This is part of the [[Flash]] series of articles. But it is '''not''' a tutorial !! See also: [[Flash ActionScript 3 overview]]
+Otherwise check out:
+* [http://www.flashdevelop.org/ Flashdevelop]. Free and open source tool that provides syntax support and an interface with the Flex compilers.
+* [http://www.adobe.com/products/flex/ Adobe Flex Builder], a commercial Eclipse plugin from Adobe. It is free for education upon request.
+* ... or use the built-in ActionScript editor in CS3.
 == Links ==
-=== Adobe tutorials ===
+See also:
+* [[Flash and AS3 links - documentation]]
+* [[Flash and AS3 links - tutorials]]
+* [[Flash and AS3 links - toolkits]]
+* [[Flash and AS3 links - general]]
+(stuff below needs cleaning up ....)
+=== Flex components and style explorers ===
+* [http://examples.adobe.com/flex3/componentexplorer/explorer.html Component explorer] Nice application that shows both a live component and corresponding MXML code.
+* [http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html Flex 3 Style Explorer]
+=== Adobe tutorials and resources ===
+* [http://learn.adobe.com/wiki/display/Flex/Getting+Started Flex - Getting started] (As of nov 2010, quite a detailed Flex 3 tutorial that can be also consulted for platform neutral learning)
+* [http://www.adobe.com/devnet/flex/ Flex developer center] (Series of tutorials and further links)
+* [http://flex.org flex.org] (an Adobe blog) aggregates Flex news from a number of sites. It includes MXML-related stuff.
+* [http://www.adobe.com/cfusion/communityengine/index.cfm?productId=2 Flex Cookbook]
+=== Advanced tutorials ===
 * [http://www.adobe.com/devnet/flex/articles/creating_components.html Creating Flex components]
-* [http://www.adobe.com/devnet/flex/mxml_as.html MXML and ActionScript] (Series of tutorials)
+=== Examples ===
+* [http://flex.org/showcase/ Flex showcase] (Adobe / Flex.org)
+* [http://www.fillcolors.com/ Fillcolors] A website with Flex skins make à la [http://www.csszengarden.com/ CSS Zen Garden]. You can download zip archives with styles.
 === Other ===
 * [http://www.artima.com/weblogs/viewpost.jsp?thread=212818 Creating Flex Components] by Bruce Eckel (the person who wrote what is probably the best Java book)
@@ Line 59: / Line 119: @@
 * [http://flex.org/php/ Flex for PHP Developers]
 * [http://blog.flexexamples.com/ Flexexamples.com] Peter deHaan's blog (He works in the Flex team at Adobe)
+* [http://www.blogxml.net/index.php/tag/flex Flex tutorials slides in PDF by Dai] (Blog XML: Technologies de l'information et du Web, in ''French'' !). *.rar compressed files to download.
 [[Category: Multimedia]]
-[[Category: Technologies]]
-[[Category: Authoring tools]]
-[[Category: Flash]]
+[[Category: Flex]]
+[[Category: Actionscript 3]]
 [[Category: Rich internet applications]]
+[[Category:Flex tutorials]]

Adobe Flex: Difference between revisions

Latest revision as of 18:19, 22 August 2016

Contents

Definition

Installing the free Flex SDK

Flex Builder

Writing ActionScript / MXML Applications

Editing software / IDEs

Links

Flex components and style explorers

Adobe tutorials and resources

Advanced tutorials

Examples

Other

Navigation menu

Adobe Flex: Difference between revisions

Latest revision as of 18:19, 22 August 2016

Definition

Installing the free Flex SDK

Flex Builder

Writing ActionScript / MXML Applications

Editing software / IDEs

Links

Flex components and style explorers

Adobe tutorials and resources

Advanced tutorials

Examples

Other

Navigation menu

Slow Search