You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by bi...@apache.org on 2017/12/21 20:31:43 UTC
[royale-website] branch develop updated: Add UI with Monaco Editor
for editing code
This is an automated email from the ASF dual-hosted git repository.
bigosmallm pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-website.git
The following commit(s) were added to refs/heads/develop by this push:
new 7b618c9 Add UI with Monaco Editor for editing code
7b618c9 is described below
commit 7b618c9e7643d953b60d258c5eea9ae829e1fb2d
Author: Om Muppirala <om...@mz.com>
AuthorDate: Thu Dec 21 12:26:16 2017 -0800
Add UI with Monaco Editor for editing code
---
.gitignore | 4 ++
try-it-now/server/README.md | 15 +++--
try-it-now/server/package.json | 13 +++++
try-it-now/server/server.js | 8 ++-
try-it-now/server/static/ui/index.html | 100 +++++++++++++++++++++++++++++++++
5 files changed, 133 insertions(+), 7 deletions(-)
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 @@ in server.js and point it to your local "Royale jsonly SDK"
# 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 @@ var fs = require('fs');
// 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 @@ server.get(/\/static\/?.*/, restify.plugins.serveStatic({
directory: __dirname
}));
+server.get(/\/node_modules\/?.*/, restify.plugins.serveStatic({
+ directory: __dirname
+}));
+
/**
* Build compiler command... mostly hardcoded for now
@@ -61,12 +65,12 @@ function buildCompilerCommand(sourcePath, targetFile) {
// 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 [...]
+ ].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
--
To stop receiving notification emails like this one, please contact
['"commits@royale.apache.org" <co...@royale.apache.org>'].