A couple of days ago, Jeffry Houser and John Wilker of The Flex Show gave me the chance to talk about Jangaroo. Thank you again! Today, the episode has been published, so I'll repeat some of the things mentioned in the interview here and provide some updated information you may need to get started with Jangaroo.
John and Jeffry asked for the differences between AS3 and Jangaroo, which are documented here.
You can find the Flash / Jangaroo demo mentioned in the interview here. It is an example of how to use Jangaroo to run a Flash demo without a Flash plugin. The AS3 source code, borrowed from Andre Michelle, is compiled to JavaScript with the Jangaroo compiler, using the Jangaroo Flash Library (which is still quite incomplete, but suffices for this demo). With only a few lines of JavaScript, that code is loaded and run in any browser supporting the HTML5 canvas element (i.e. not IE). If you are connected to the Internet and your browser has a Flash plugin, you can also see the original demo running in a Flash player at the right side. Don't they look like twins?
My personal project, the game "Jangaron", completely developed using Jangaroo, is located at http://www.jangaron.net.
In the interview, I mention the Maven build process.
- Download and install Maven 2.2.1.
- Download and unpack the demo source code.
- Point a command line to the directory where you unpacked the demo source code and run
mvn package
If this is your first Maven build, you have to be online and it may take a while. - When the build process has finished successfully, a full Web application has been created under target/flash-lines-0.1.1-SNAPSHOT. Simply open the following file in any browser but IE (alas: no canvas!):
target/flash-lines-0.1.1-SNAPSHOT/index.html
If you'd rather use a free, Open Source IDE, since there is no free AS3 support for Eclipse yet, I recommend Flash Develop. I'm not an expert for FD, but I managed to edit Jangaroo source code with FD, and it felt quite nice. I'm sure the FD guys will help you getting started!
Getting started with IDEA
- Install the Jangaroo Language Plugin (see below).
- Import the demo Maven project (see below). Only do this after installing the plugin, as it also plugs into IDEA's Maven import process!
- Open "Settings", "Plugins".
- Select the "Available" tab.
- Find the "Jangaroo Language" plugin. As of today, latest version is
0.3.229.0.7.0.0. - Right-click, "Download and Install".
- IDEA asks you to let it restart. Do so.
- Create a new project (from the start screen or "File", "New Project").
- Select "Import from external model", "Next".
- Select "Maven", "Next".
- Select the root directory of the downloaded demo sources (the one that contains the pom.xml), "Next".
- The only Maven project found is preselected. "Next".
- Confirm name and project with "Finish".
- After the import is finished, in the "Maven Projects" window, click "Download artifacts" (the third button in "Maven Project" window's top toolbar). After that, the AS3 code should be "green" (or "yellow", but not "red").
After that, you can use IDEA's make process to a) get a quicker turn-around and b) jump to error locations directly with a double-click. Use "Make Project" (Ctrl-F9) to build incrementally, which is way faster than a Maven build and provides better compiler error messages. After building, simply reload the page in your browser. You may need to reload without cache (Ctrl-R) or even clear the browser cache for changes to take effect. For Firefox, there is a nice plugin for that called "Clear Cache Button".
Now, you can develop a JavaScript based Web application with a level of convenience never achieved before. The key to that is that ActionScript, as a typed language, gives the IDE far more options to offer correct completions and refactorings than JavaScript. Go ahead a try IDEA's completion (Ctrl-space), quick documentation lookup (Ctrl-Q), parameter info (Ctrl-P), or goto declaration (Ctrl-B). Try rename refactoring or "introduce variable". Granted, not all refactorings known from Java are yet available, but Jetbrains are continuously improving AS3 support. Enjoy!
If you have any problems or questions, feel free to comment here, post in the Jangaroo developer group, or contact us directly.