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