Visual Studio Code - apache/royale-asjs GitHub Wiki

• Download and install Visual Studio Code.

• Install the ActionScript & MXML extension for VSCode by Bowler Hat LLC. (Searching within VSCode's Extensions view is the easiest way to do this.)

• In the Explorer view, if no workspaces are currently open, there should be a Create ActionScript Project button.

  

  (Alternatively, go to the View menu and choose Command Palette…. Search for and run the ActionScript: Create New Project… command.)

  

• The command will ask you to select a directory for your new ActionScript project.

• Then, the command will ask you to select the Apache Royale SDK for your workspace.

• The project will open automatically. It should have a directory structure similar to the following.

  MyRoyaleProject/
  |
  + -- .vscode/
  |    |
  |    \ -- settings.json
  |
  + -- libs/
  |
  + -- src/
  |    |
  |    \ -- MyRoyaleProject.mxml
  |
  + -- asconfig.json
  

  • The file 'asconfig.json' will contain:

    {
        "config": "royale",
        "compilerOptions": {
            "targets": [
                "JSRoyale"
            ],
            "source-path": [
                "src"
            ],
            "library-path": [
                "libs"
            ]
        },
        "mainClass": "MyRoyaleProject"
    }

  • The '.mxml' file in the 'src' directory will contain:

    <?xml version="1.0" encoding="utf-8"?>
    <js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:js="library://ns.apache.org/royale/basic">
        <fx:Declarations>
        </fx:Declarations>
    
        <js:valuesImpl>
            <js:SimpleCSSValuesImpl/>
        </js:valuesImpl>
    
        <js:initialView>
            <js:View>
                <js:Label text="Hello, Apache Royale!"/>
            </js:View>
        </js:initialView>
    
        <fx:Script>
            <![CDATA[
    
            ]]>
        </fx:Script>
    </js:Application>

• Select Tasks > Run Build Task... to build. Or use the Ctrl+Shift+B keyboard shortcut (or Command+Shift+B/ on macOS).

• Open bin/js-debug/index.html or bin/js-release/index.html in your browser and you should see the "Hello, Apache Royale!" message.

For instructions on more integrated debugging, please refer to the extension documentation for Chrome, Firefox or Node JS.