Adobe Flex: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 5: Line 5:


{{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.


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).
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).
Line 12: Line 14:
* ActionScript 2/3 programming
* ActionScript 2/3 programming


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.
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 ==
== Installing the free Flex SDK ==
Line 39: Line 45:
* Unzip it somewhere (I put it under /Applications/flex_sdk/flex_sdk2/)
* 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.
* 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 have textmate installed). Add the path to the file.
* 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/
  export PATH=$PATH:/Applications/flex_sdk/flex_sdk_2/bin/
Save the file. Then make sure the profile file is being initiated.  
Save the file. Then make sure the profile file is being initiated.  
Line 50: Line 56:
* Educators and students can get a serial number for free use by [https://freeriatools.adobe.com/ filling in a form]
* Educators and students can get a serial number for free use by [https://freeriatools.adobe.com/ filling in a form]


== Writing Flex Applications ==
== Writing ActionScript / MXML Applications ==
 
The starting point is the writing of a mxml document or an [[Actionscript 3]] program.
 
A Flex program is a text file that contains a combination of xml elements and optionally actionscript instructions.
 
A basic mxml document would look something like this:
 
file myFirstApplication.mxml
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalAlign="center" verticalAlign="middle"
    width="300" height="160"
>
    <mx:Panel
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
        title="My First Application" 
    >
        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>
 
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
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.
 
SWF files generated by Flex require Flash Player 9 or above.


This is part of the [[Flash]] series of articles. But it is '''not''' a tutorial !!
See:
 
* [[MXML]] (for a short intro to MXML, the layout language)
See also:
* [[Actionscript 3]] (an entry point for various introductory Actionscript tutorials)
* [[Actionscript 3]] as an entry point for learning Actionscript programming.
* [[Flash ActionScript 3 overview]] (a short overview of ActionScript 3 and related tools).
* [[Flash ActionScript 3 overview]]


== Editing software / IDEs ==
== Editing software / IDEs ==


* 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 can also check out [[Web_authoring_system#Programmer.27s_editors_with_HTML_support web editors]].
* 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 editors]]. Basically you follow the same logic as Java development without IDE.


Otherwise check out:
Otherwise check out:
Line 98: Line 73:


== Links ==
== Links ==
(see other entries AS entries for more)


=== Adobe tutorials ===
=== Adobe tutorials ===
Line 109: Line 86:
* [http://www.phpbuilder.com/columns/daniel_williams20071005.php3 PHP and Adobe Flex], by Daniel Williams, Php Builder, 2007.
* [http://www.phpbuilder.com/columns/daniel_williams20071005.php3 PHP and Adobe Flex], by Daniel Williams, Php Builder, 2007.


* [http://flex.org/php/ Flex for PHP Developers]
* [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://blog.flexexamples.com/ Flexexamples.com] Peter deHaan's blog (He works in the Flex team at Adobe)  

Revision as of 14:03, 28 August 2008

Draft

<pageby nominor="false" comments="false"/>

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

There exist 2 versions (in Aug 2008), both are free
  • A kit that includes proprietary software
  • A kit that only includes open source and free software
Getting the Flex SDK from Adobe
  • Download this free SDK from Adobe:
http://www.adobe.com/products/flex/flexdownloads/

The Adobe Flex2 Software Development Kit (SDK) is a platform independant compiler that needs Java 6 (or better) installed.

Installing the Adobe Flex2 Software Development Kit (SDK) for Windows
  • Unzip it somewhere
  • Edit the Environment variables through the configuration panel to include the bin directory in the path: I.e. something like Parameters->Config Panel->System->Advanced (I don't have an English System at hand).
Installing the Adobe Flex2 Software Development Kit (SDK) for Ubuntu
  • Unzip it somewhere (I put it under /usr/local/flex)
  • Under Linux change permissions of the shell scripts in the bin directory, in particular mxmlc
  • 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
Installing the Adobe Flex2 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

Writing ActionScript / MXML Applications

See:

Editing software / IDEs

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

(see other entries AS entries for more)

Adobe tutorials

Other

]

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Adobe_Flex&oldid=18122"