Introduction
In addition to a Ruby on Rails web application, SongLynx also has an Apache Flex component. As SongLynx’s technical founder, being able to develop Flex applications is a primary requirement for my computer. This post is the third in a series detailing how I set up a web development environment on a Samsung XE303C12 Chromebook. The first post, which you can read here, describes why I needed to do so, as well as getting a Linux environment with Ruby on Rails, Emacs, Git, and PostgreSQL set up so that I can work on projects stored in Git repositories on BitBucket and push the changes to a live site hosted on Heroku. The second (much shorter) post, located here, details how I configured Emacs more to my liking. This post details how I set up the Apache Flex SDK and integrated it into my workflow. My goals are:
- Download and install SDK
- SDK Setup (Command-line Access, etc.)
- Editor Setup (An Emacs Editing Mode)
- Hello World and Test in Chrome under ChromeOS
Downloading and Installing the SDK
Installing and configuring the Apache Flex SDK proved to be a lot more difficult than I originally anticipated. I think there were several things at work: 1) there are a couple of “official” places to get the SDK, and they each have conflicting instructions; 2) the community has invested a decent amount of time and effort to get things running, but many of those posts have become outdated; and 3) support for Flex-allied technologies is not uniform across operating systems — Adobe’s AIR, for example, is no longer supported on Linux. At any rate, on with the show.
Note: the instructions that follow are distilled from a fair amount of dead-ends; I’ve tried to ensure that I’ve untangled the various leads I followed and have only presented what’s necessary, but I can’t be sure that’s the case.
The first thing I did was download the SDK from its GitHub repository [1], navigated inside the directory, and switched branches:
git clone https://github.com/apache/flex-sdk.git cd flex-sdk git checkout develop
I followed the README in the cloned repository (also available at the GitHub repository webpage) pretty closely; it seemed to work where the instructions on the Apache Flex web page and in Apache’s Wiki did not. That being said, I think that some of the instructions are presented out-of-order; for example, telling you to set environment variables for packages that you don’t have yet seems a little odd.
The next thing I did was install the necessary additional packages: a legacy version of Adobe’s AIR SDK, an Adobe Flash Player content debugger, an Adobe Flash Player, Apache Flex Text Layout Framework, Apache Flex BlazeDS, Ant, and a Java SDK.
Note: I started in the directory /home/bill/Documents/workspace/flex. workspace is where I keep subdirectories like ror and flex with sub-subdirectories for each of my projects. Some packages we install below expect to be in the same parent directory as the Flex SDK; if you don’t do that, you need to set some additional environment variables.
Adobe’s AIR SDK
wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRSDK.tbz2 mkdir air-sdk mv AdobeAIRSDK.tar air-sdk/ cd air-sdk/ tar -xvf AdobeAIRSDK.tar cd ..
Flash Player Content Debugger
wget https://fpdownload.macromedia.com/pub/flashplayer/updaters/11/flashplayer_11_sa_debug.i386.tar.gz mkdir flashplayer-debugger mv flashplayer_11_sa_debug.i386.tar.gz flashplayer-debugger/ cd flashplayer-debugger/ gunzip flashplayer_11_sa_debug.i386.tar.gz tar -xvf flashplayer_11_sa_debug.i386.tar cd ..
Flash Player
mkdir playerglobal cd playerglobal/ wget http://download.macromedia.com/get/flashplayer/updaters/11/playerglobal11_1.swc mkdir 11.1 cp playerglobal11_1.swc 11.1/playerglobal.swc cd ..
Apache Flex Text Layout Framework
git clone https://git-wip-us.apache.org/repos/asf/flex-tlf.git flex-tlf cd flex-tlf git checkout develop cd ..
Apache Flex BlazeDS
git clone https://git-wip-us.apache.org/repos/asf/flex-blazeds.git flex-blazeds cd flex-blazeds cd ..
Ant
sudo apt-get install ant
Java Development Kit
sudo apt-get install openjdk-7-jdk
Miscellaneous Configuration & Building
Then I needed to create ANT_HOME and JAVA_HOME environment variables and add them to my path. I added the following code to the end of my ~/.bashrc file:
### Added by me to install Apache Flex export ANT_HOME="/usr/share/ant" export JAVA_HOME="/usr/lib/jvm/java-1.7.0-openjdk-armhf" export PATH="$PATH:$ANT_HOME/bin:$JAVA_HOME/bin"
Next, I moved into the flex-sdk directory and set up and environment properties file:
cp env-template.properties env.properties
I added the following lines (you’ll see the start of each line commented out waiting for you to uncomment and fill it in). Note that you’ll need to replace “bill” with your username.
env.AIR_HOME=/home/bill/Documents/workspace/flex/air-sdk env.FLASHPLAYER_DEBUGGER=/home/bill/Documents/workspace/flex/flashplayer-debugger env.PLAYERGLOBAL_HOME=/home/bill/Documents/workspace/flex/playerglobal
Then, I built the SDK with
ant main
And I also built the the ASDoc tool with
ant asdoc-package
Command-Line Access
Next, I added the Flex SDK that I just compiled to my path, so that I needn’t specify the location of mxmlc every time I want to compile a program. To do so, I added the following code to my .bashrc file:
### Added by me for access to the Flex command-line tools export FLEX_HOME="/home/bill/Documents/workspace/flex/flex-sdk" export PATH="$PATH:$FLEX_HOME/bin"
Emacs Configuration
I installed a mode for actionscript via M-x package-install RET actionscript-mode and adding the following to my ~/.emacs file:
;;===== Flex specific ===== ;;(setq auto-mode-alist (append (list \ ;; '("\\.as\\'" . actionscript-mode) \ ;; '("\\.\\(xml\\|xsl\\|rng\\|xhtml\\|mxml\\)\\'" . nxml-mode) \ ;; ;; add more modes here \ ;; ) auto-mode-alist))
When I open a .mxml, it’ll use nxml-mode. When I open a .as, it’ll use actionscript-mode.
End-to-End Test
Now that the SDK is installed, we’ve got access to the utilities from the command line without specifying the full path, and we’ve made editing our code in Emacs a little easier, I wanted to perform an end-to-end test. I started by creating a simple Flex project:
cd .. mkdir test-project touch helloWorld.mxml
Then, I put the following code into helloWorld.mxml:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="640" height="480"> <s:layout> <s:BasicLayout /> </s:layout> <s:Label text="Hello World!" horizontalCenter="0" verticalCenter="0" /> </s:Application>
After, I built the application from within its directory with:
mxmlc helloWorld.mxml
Finally, I copied it to my ~/Downloads folder and tested it in Chrome under ChromeOS. Success!
Loose Ends
The steps I’ve described thus far give you sort of a minimally acceptable Flex development environment under Linux. There are some loose ends that could be tied up to improve the experience, but I haven’t had time to track them all down. Here’s a (non-exhaustive) list:
- An Emacs editing mode that’ll properly account for files with both MXML and ActionScript components in them. I think you could tinker with some of the existing multi-mode packages to do this — like mumamo, polymode, or multi-mode.
- Having the SDK installed in a user directory is probably less than ideal. I probably should have built it in /usr/local.
- I haven’t been able to get the flash player debugger to work. With simple projects it’s not such a big deal: you can build and then test under ChromeOS, but for projects where you actually need to debug, you might be in trouble.
- I haven’t yet built or modified projects of any appreciable complexity; it’s probably a pain to build them unless you use Ant.
Summary
If you’ve followed along, at this point you should be able to develop and test Flex applications on your Samsung XE303C12. There are definitely things that can be improved, some of which I’ve listed in the Loose Ends section above.
References
- apache / flex-sdk. https://github.com/apache/flex-sdk. Retrieved 2016-05-03.
- tgrk / .emacs. https://github.com/tgrk/.emacs/blob/e71769ceb48a809dddcd52a162ed3a0e81bf279e/.emacs. Retrieved 2016-05-03.