| <!-- |
| |
| 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> |
