Apache RoyaleでJavaScriptのAPIを利用する

はじめに

Apache RoyaleでのJavaScriptのAPIの使い方を簡単にまとめます。

普通に利用できるAPI

alert、console.log、等は普通に利用できる

alert("Hello World");

console.log("Hello World");

windowを使って利用できるAPI

fetch、localStorage、等はwindowから取得することで利用できる

window["fetch"]("http://localhost:3000/xxx")
    .then(function(response:Object):Object {
        return response.json();
    }).then(function(jsonObject:Object):void {
        console.log(JSON.stringify(jsonObject));
    });

window["localStorage"].setItem("test-key", "Hello World");

サンプル

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[
            private function alertMessage():void {
                alert("Hello World");
            }

            private function logMessage():void {
                console.log("Hello World");
            }

            private function fetchMessage():void {
                window["fetch"]("http://localhost:3000/xxx")
                    .then(function(response:Object):Object {
                        return response.json();
                    }).then(function(jsonObject:Object):void {
                        console.log(JSON.stringify(jsonObject));
                    });
            }

            private function setLocalStorageMessage():void {
                window["localStorage"].setItem("test-key", "Hello World");
            }
        ]]>
    </fx:Script>

    <s:Label left="10" top="10" text="Click the button."/>
    <s:Button left="10" top="40" width="150" label="alert"
        click="alertMessage();" />
    <s:Button left="170" top="40" width="150" label="console.log"
        click="logMessage();" />
    <s:Button left="330" top="40" width="150" label="fetch"
        click="fetchMessage();" />
    <s:Button left="490" top="40" width="150" label="localStorage.setItem"
        click="setLocalStorageMessage();" />

</s:Application>