Compiling Your First Flex 4 Application
Big news today in the world of Flex! The first push of the Flex 4 source was made this afternoon (and another push was made this evening). Additionally, a lot of documentation was added to the Adobe Open Source site regarding Flex 4 (code-named “Gumbo”). Reading through the Architecture Whitepaper will leave you with a great handle around where things stand and the current direction Flex is headed.
To reward myself for reading through all of those docs this evening, I decided it would be appropriate to try to test out the new code and make my first Flex 4 application…
Step 1: Get the Latest SDK
First we’ll need to get the latest SDK. You can either download the SDK under the “Adobe Flex SDK” column on the download page listed above, or checkout the source yourself:
svn checkout http://opensource.adobe.com/svn/opensource/flex/sdk/trunk
I’ll refer to the location you’ve put the SDK to on your disk as ${FLEX4} throughout the rest of this post.
Follow the instructions on the Setup (links to Windows/Mac/Linux pages are at the bottom) and Build and Test pages to ensure the compiler is working on your system.
Assuming everything compiled and ran correctly when you did the
ant -q checkintests
command, you’re ready for the next step.
Step 2: Flex 4 - First App
Now that the SDK is setup, we’re ready to make our first Flex 4 application. First, I wanted to check out the new FXG tags, so let’s get a simple rectangle working first (this will look familiar if you’ve been playing with Degrafa):
Flex4App.mxml:
<Application xmlns="http://ns.adobe.com/mxml/2009" backgroundColor="red"> <Group> <Rect left="20" top="20" width="100" height="100"> <stroke> <SolidColorStroke color="0x00FF00" /> </stroke> <fill> <SolidColor color="0x09BDFC" /> </fill> </Rect> </Group> </Application>
Assuming you’re in the current directory that Flex4App.mxml is sitting in:
Run: ${FLEX4}/bin/mxmlc Flex4App.mxml
This should compile your code and if successful will create a Flex4App.swf file. To run it using the Flash Player 10 (since Flex 4 targets this player):
Run (if you’re on Mac): ${FLEX4}/in/player/mac/Flash Player.app/Contents/MacOS/Flash Player Flex4App.swf
If you’re on Windows or Linux, look in the ${FLEX4}/build.xml ANT script at lines 26 and 34 to see the path to the 10 player on those systems.
Assuming all went well you should see something like:
Flex4App Screenshot
Step 3: Flex 4 - Hello World!
For our final step, let’s throw in a button saying “Hello World”.
HelloWorld.mxml:
<Application xmlns="http://ns.adobe.com/mxml/2009" backgroundColor="red"> <Group> <Rect left="20" top="20" width="100" height="100"> <stroke> <SolidColorStroke color="0x00FF00" /> </stroke> <fill> <SolidColor color="0x09BDFC" /> </fill> </Rect> </Group> <Button left="20" bottom="5" label="Hello World" /> </Application>
Compile and run those…
${FLEX4}/bin/mxmlc HelloWorld.mxml
${FLEX4}/in/player/mac/Flash Player.app/Contents/MacOS/Flash Player HelloWorld.swf
and you should see
HelloWorld Screenshot
More Fun To Come…
Tomorrow or the next day I’ll try to play around with skinning a Button using a Skin file and get another post up regarding it. Happy Flex 4′ing!
July 15th, 2008 at 5:00 am
Flex 4 “Gumbo” увидеть не хотите ли?…
Ã’ÑÂѠфûõúÑÂþòðѠñûþóþÑÂфõрð ò ÑÂтрðшýþü òþûýõýøø: ÑÂþòÑÂõü ÑÂúþрþ (ÑÂчõт ýð чðÑÂы…
July 15th, 2008 at 12:31 pm
How did you get the setup.sh file to work, I am on Windows Vista and i keep getting syntax errors which i do source setup.sh in cygwin. Thanks
July 15th, 2008 at 12:36 pm
I did it on Mac and it just worked for me. Did you properly install ANT 1.7.0 and Java 1.5.0_13? If so, post what errors you’re getting.
July 15th, 2008 at 2:24 pm
I am getting,
bash: $’ \r ‘ : command not found bash: $’ \r ‘ : command not found bash: $’ \r ‘ : command not found bash: setup.sh: line 41 : syntax error near unexpected token ` $’ in \r ” ‘ ash: setup.sh: line 41 : ` case `uname` in bash: $ ‘\ r’: command not found bash: $ ‘\ r’: command not found bash: $ ‘\ r’: command not found bash: setup.sh: line 41: syntax error near unexpected token `$ ‘ in \ r” ‘ash: setup.sh: line 41: `case` uname `in
July 15th, 2008 at 2:34 pm
Looks like something to do with the way Cygwin is trying to handle line breaks, maybe google around trying to see what’s up with Cygwin handling ‘\r’ to start.
July 15th, 2008 at 6:03 pm
I got the solution if anyone is reading, basically I installed the Unix Version of cygwin and not the Dos version so what you need to do is dos2unix setup.sh to convert it to a unix format and then everything should work.
July 21st, 2008 at 4:01 am
I also faced the same problem. I rerun the setup with “Default Text File Type” as Unix. It doesn’t installs every thing again, just updates the required files.
August 2nd, 2008 at 12:46 pm
[...] Compiling Your First Flex 4 Application http://blog.smartlogicsolutions.com/2008/07/15/compiling-your-first-flex-4-application/ [...]
August 19th, 2008 at 12:37 am
if i try to get the tag then it is showing me the following namespace xmlns:ns=”library:adobe/flex/gumbo” and this is happening for all the tags and i am unable to get tag all those , i have just added new sdk to my Flex Builder 3 IDE , and configured it as the default , but when i create new project then it is showing the previous namespace only , if i manually change the namespace then some tags i am unable to get .
August 19th, 2008 at 1:24 am
I’ve just been using a text editor and the command line mxmlc to write and compile the code for my Flex 4 posts. Have you tried walking through the steps Peter outlined at http://blog.flexexamples.com/2008/08/02/using-the-beta-gumbo-sdk-in-flex-builder-3/ ?