Flash Builder 4.7

Follow these instructions to use Flash Builder 4.7 for developing Royale applications. These instructions will guide you through building the Royale SDK and making modifications to your Flash Builder 4.7 installation so that it recognizes Royale.

Modify Flash Builder 4.7 Installation

You need to upgrade Flash Builder to run with Java 7 or Java 8. This link will take you to those instructions: http://blogs.adobe.com/flashplayer/2016/09/running-adobe-flash-builder-on-mac-with-java-78.html

Build Royale SDK

As of this writing, an official release is not yet available for Royale, so these instructions use a nightly build of Royale instead. Bear in mind that a nightly build is not guaranteed to work. Unlike an official release - which is checked and tested by members of the Apache Royale committee - a nightly build is just an assembly of that day's commits to the repository. We try to make sure it always works, but sometimes it is broken. Should that happen, try a day earlier.

Download a nightly build of the Apache Royale SDK: http://apacheflexbuild.cloudapp.net:8080/job/royale-asjs/. If you want to build SWFs and well as generate JS output, choose the "apache-royale-0.9.0-bin" package. If you only want JS output, you can choose the "apache-royale-jsonly-0.9.0-bin" package.

Once downloaded, decompress it. The resulting directory contains a "royale-asjs" folder which contains binary executables for the Royale compiler as well as source and binaries for the Royale application frameworks.

To be able to use the Flash Builder Launch Configurations, set the current directory to the royale-asjs/ide/flashbuilder folder and run:

% ant -f antscripts.xml setup

If you want SWF output, set the current directory to the royale-asjs folder and run and follow the instructions in:

% ant -f InstallAdobeSDKs.xml

The InstallAdobeSDKs.xml ANT script requires additional items to be downloaded. The script will not download them for you, but will give you instructions and pause so you can download them yourself. Once each piece is downloaded, press any key to move to the next until all parts have been downloaded.

The script then finishes on its own and the royale-asjs repository is now ready for you to use with Flash Builder 4.7.

Configure Flash Builder 4.7

Add the Royale SDK

Start Flash Builder and open its preferences. Navigate to the "Flash Builder" section and "Installed Flex SDKs". In the dialog that is presented, use the "Browse" button to locate the royale-asjs folder you just built and configured with ANT. Pick "OK" to install it.

As an option, you can select it from the list and make it the default SDK if you plan on creating mostly Royale applications.

Import Launch Configurations

In Flash Builder, "launch configurations" provide scripts that perform useful tasks. The Royale package comes with a set of launch configurations to do things like build a JavaScript version of your application. Follow these steps to bring the Royale launch configurations into Flash Builder:

1. In Flash Builder, select the "File" menu and "Import".
2. Find the "Run/Debug" section and expand it.
3. Pick "Launch Configurations", then "Next".
4. In the dialog that appears, browse to the "royale-asjs/ide/flashbuilder" sub-directory in the Royale SDK directory.
5. Select "flashbuilder" in the left pane or pick the check box next to it, selecting all of the launch configurations.
6. Pick Finish.

The launch configurations will be imported and appear in the "Run" - "External Tools" menu.

Creating a Royale Project

As a test, create a sample Royale application. Keep in mind that Flash Builder will refer to these as Flex projects.

Go to the "File" menu and pick "New Flex Project". In the dialog that appears, enter the name for your sample (e.g., "Hello World") and select the Royale SDK you have just installed. Pick "Finish".

Flash Builder will create a sample application, but it will not have the correct Royale code in it:

<?xml version="1.0" encoding="utf-8"?>
    <application xmlns:fx="http://ns.adobe.com/mxml/2009" layout="absolute"min_size>	
</application>

You can convert this initial file into a working Royale application as follows:

1. Select the project's name in the Package Explorer.
2. From the "Run" menu, pick "External Tools" and then "Convert New Flex Project to Royale Project".

After a few moments the file's contents will be replaced with:

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:js="library://ns.apache.org/royale/basic" >
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    <js:initialView>
        <js:View>
    	<js:Label text="Hello World!" />
        </js:View>
    </js:initialView>
</js:Application> 

Now you can run it as a Web Application.

At this point, if you set up SWF output support, you can create, run, and debug Royale applications from Flash Builder. The applications will use the Flash Player.

Building Applications for the Browser

Flash Builder normally builds applications to run in the Flash Player. But Royale is designed to also output JavaScript/HTML to be run natively in the browser. Whether you set up SWF output or not, on each compile, the Royale compiler should have also generated a "bin" folder next to your "bin-debug" folder, and in it should be a js-debug folder containing JavaScript cross-compiled (or "transpiled") from your Royale ActionScript and MXML source files. You can launch the application by opening the index.html file in the output folder in your browser.