Add UI with Monaco Editor for editing code
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..dbd7f8c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+.idea/
+*.iml
+node_modules/
+try-it-now/server/static/generated
diff --git a/try-it-now/server/README.md b/try-it-now/server/README.md
index e154a8e..3c00a97 100644
--- a/try-it-now/server/README.md
+++ b/try-it-now/server/README.md
@@ -3,13 +3,10 @@
# 1. Installation of NodeJS and required modules
Install [NodeJS](https://nodejs.org/en/)
-Install [Restify](http://restify.com/)
- npm install restify
-
-Instal [uuid](https://www.npmjs.com/package/uuid)
+Install all dependencies:
- npm install uuid
+ npm install
# 2. Clone server/server.js from this repo to your local machine
Search for
@@ -23,6 +20,14 @@
# 4. How to use
+**Using the UI:**
+
+Navigate to http://localhost:8080/static/ui/index.html
+Type Royale code on the left panel, Click on Run. The right panel should show the
+compiled Royale app.
+
+**Using the APIs:**
+
Send a POST request with your Royale source code as payload:
POST http://localhost:8080/apache/royale/compiler/targets/html
diff --git a/try-it-now/server/package.json b/try-it-now/server/package.json
new file mode 100644
index 0000000..f3b2661
--- /dev/null
+++ b/try-it-now/server/package.json
@@ -0,0 +1,13 @@
+{
+ "name": "apache-royale-try-it-now-server",
+ "description": "Try Apache Royale from a browser",
+ "license": "Apache-2.0",
+ "repository": "https://github.com/apache/royale-website.git",
+ "version": "0.0.1",
+ "dependencies": {
+ "monaco-editor": "0.10.1",
+ "requirejs": "2.3.5",
+ "restify": "6.3.4",
+ "uuid": "3.1.0"
+ }
+}
diff --git a/try-it-now/server/server.js b/try-it-now/server/server.js
index c70b3ab..b8d197f 100644
--- a/try-it-now/server/server.js
+++ b/try-it-now/server/server.js
@@ -30,7 +30,7 @@
// Define some constants
const sdkPath = "C:/local/apache-royale/sdks/apache-royale-jsonly-0.9.0-bin";
const projectRootURL = "http://localhost:8080";
-const targetDirName = "static";
+const targetDirName = "static/generated";
const compilerOutputFilename = "compilerOutput.txt";
const compilerErrorFilename = "compilerError.txt";
@@ -48,6 +48,10 @@
directory: __dirname
}));
+server.get(/\/node_modules\/?.*/, restify.plugins.serveStatic({
+ directory: __dirname
+}));
+
/**
* Build compiler command... mostly hardcoded for now
@@ -61,12 +65,12 @@
// Concatenate compiler command
var command = sdkPath + "/royale-asjs/js/bin/mxmlc.bat" +
- " -debug=true" +
" -source-path+=\"" + sourcePath + "\"" +
" -targets=JSRoyale" +
" -locale=en_US" +
" -external-library-path+=\"" + sdkPath + "/royale-asjs/js/libs/js.swc\"" +
" -allow-subclass-overrides=true" +
+ " -debug=true" +
" \"" + targetFile + "\"";
return command;
}
diff --git a/try-it-now/server/static/ui/index.html b/try-it-now/server/static/ui/index.html
new file mode 100644
index 0000000..64e3911
--- /dev/null
+++ b/try-it-now/server/static/ui/index.html
@@ -0,0 +1,100 @@
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+ <style>
+ html, body
+ {
+ width: 100%;
+ height: 100%;
+
+ margin: 0;
+ padding: 0;
+ }
+
+ #editor, #output
+ {
+ width: 50%;
+ height: 100%;
+ border:1px solid grey
+ }
+
+ #container, #iframe
+ {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+ </style>
+</head>
+<body>
+
+<div id="container">
+ <div id="editor"></div>
+ <button style="height: 30px !important;" onclick="requestCompilation()">Run</button>
+ <div id="output">
+ <iframe id="iframe" src=""></iframe>
+ </div>
+</div>
+
+<script src="../../node_modules/requirejs/require.js"></script>
+<script src="../../node_modules/monaco-editor/min/vs/loader.js"></script>
+<script>
+ var editor;
+ require.config({ paths: { 'vs': '../../node_modules/monaco-editor/min/vs' }});
+ require(['vs/editor/editor.main'], function() {
+ editor = monaco.editor.create(document.getElementById('editor'), {
+ value: [
+ '<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<js:Application xmlns:fx=\"http:\/\/ns.adobe.com\/mxml\/2009\"\r\n\t\t\t\txmlns:js=\"library:\/\/ns.apache.org\/royale\/basic\"\r\n\t\t\t\txmlns:local=\"*\"\r\n\t\t\t\tpageTitle=\"HelloWorld\">\r\n\t\t\t \r\n\t<js:valuesImpl>\r\n\t\t<js:SimpleCSSValuesImpl \/>\r\n\t<\/js:valuesImpl>\r\n\t\r\n\t<js:initialView>\r\n\t\t<js:View width=\"100%\" height=\"100%\">\r\n\t\t\t<js:List labelField=\"label\">\r\n <js:beads>\r\n <js:VerticalLayoutWithPaddingAndGap gap=\"10\"\r\n paddingTop=\"10\" paddingRight=\"10\" paddingBottom=\"10\" paddingLeft=\"10\"\/>\r\n <\/js:beads>\r\n\t\t\t\t<js:dataProvider>\r\n\t\t\t\t\t<fx:Array>\r\n\t\t\t\t\t\t<fx:Object label=\"OneAA\"\/>\r\n\t\t\t\t\t\t<fx:Object label=\"Two\"\/>\r\n\t\t\t\t\t\t<fx:Object label=\"Three\"\/>\r\n\t\t\t\t\t\t<fx:Object label=\"Four\"\/>\r\n\t\t\t\t\t\t<fx:Object label=\"Five\"\/>\r\n\t\t\t\t\t<\/fx:Array>\r\n\t\t\t\t<\/js:dataProvider>\r\n\t\t\t<\/js:List>\r\n\t\t<\/js:View>\r\n\t<\/js:initialView>\r\n\t\r\n <\/js:Application>\r\n'
+ ].join('\n'),
+ language: 'xml'
+ });
+ });
+
+ function requestCompilation() {
+ var xhttp = new XMLHttpRequest();
+ xhttp.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200) {
+ var r = JSON.parse(this.response);
+ document.getElementById("iframe").src = r.projectURL;
+ }
+ };
+ var payloadStr = editor.getValue();
+ var escapedPayloadStr = payloadStr.replace(/\\n/g, "\\n")
+ .replace(/\\'/g, "\\'")
+ .replace(/\\"/g, '\\"')
+ .replace(/\\&/g, "\\&")
+ .replace(/\\r/g, "\\r")
+ .replace(/\\t/g, "\\t")
+ .replace(/\\b/g, "\\b")
+ .replace(/\\f/g, "\\f");
+ xhttp.open("POST", "http://localhost:8080/apache/royale/compiler/targets/html", true);
+ xhttp.setRequestHeader("Content-type", "application/json");
+ var payload = {"source":escapedPayloadStr};
+ xhttp.send(JSON.stringify(payload));
+ }
+</script>
+</body>
+</html>
\ No newline at end of file
