Apache RoyaleでHelloWorldアプリを作る

はじめに

Apache Royale を使って、Hello Worldを表示するWebアプリを作成します。
IDEは利用せずに、コマンドプロンプトにてコンパイル等を行います。

アプリの完成イメージ

試した環境/バージョン

Windows 10
Chrome 105
Apache Royale 0.9.8

環境作成

以下から、apache-royale-0.9.8-bin-js.zipをダウンロード
https://github.com/apache/royale-asjs/releases

ダウンロードしたzipを解凍
（今回はD:\apache-royale-0.9.8-bin-jsに解凍）

Hello World アプリの作成、実行

mxmlの作成

アプリの画面デザインをMXMLで、処理をActionScriptで記述する
srcフォルダーを作成し、その下に以下のMain.mxmlを作成する

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.apache.org/royale/spark"
               xmlns:mx="library://ns.apache.org/royale/mx"
               width="100%" height="100%">

    <fx:Style>
        * {
            font-family: "Meiryo";
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function showMessage():void {
                Alert.show("Hello World");
            }

        ]]>
    </fx:Script>

    <s:Label left="10" top="10" text="Click the button."/>
    <s:Button left="10" top="40" label="Click Me" click="showMessage();" />

</s:Application>

コンパイル（デバッグ用）

コマンドプロンプトで以下を実行するとbinフォルダーが作成される

> D:\apache-royale-0.9.8-bin-js\royale-asjs\js\bin\mxmlc +configname=flex -debug=true -source-map=true src\Main.mxml

アプリのデバッグ

ブラウザーでbin\js-debug\index.htmlを開くと画面が表示される

ChromeのデベロッパーツールのSourcesタブでMain.mxmlを開き、ブレークポイントを指定する等してデバッグすることが可能

コンパイル（リリース用）

コマンドプロンプトで以下を実行するとbinフォルダーが作成される

> D:\apache-royale-0.9.8-bin-js\royale-asjs\js\bin\mxmlc +configname=flex -js-dynamic-access-unknown-members=true src\Main.mxml

※リリース用のコンパイルは少し時間がかかります。

アプリの実行

ブラウザーでbin\js-release\index.htmlを開くと画面が表示される

とりあえず今回はここまで