Developing Flex Applications on a Chromebook

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

  1. apache / flex-sdk.  https://github.com/apache/flex-sdk.  Retrieved 2016-05-03.
  2. tgrk / .emacs.  https://github.com/tgrk/.emacs/blob/e71769ceb48a809dddcd52a162ed3a0e81bf279e/.emacs.  Retrieved 2016-05-03.

 

 

2 thoughts on “Developing Flex Applications on a Chromebook

    1. Hi. The theme is called “Booky”. I got it from creativemarket.com. They offer a rotating selection of free creative goods each week (e.g. themes, stock images, fonts, etc.), as well as a ton for purchase. I mostly grab the free weekly ones and keep them saved in case I want to use them later.

Leave a Reply

Your email address will not be published. Required fields are marked *