Java tutorial
// -*- mode: java; c-basic-offset: 2; -*- // Copyright 2009-2011 Google, All Rights reserved // Copyright 2011-2017 Massachusetts Institute of Technology, All rights reserved // Released under the Apache License, Version 2.0 // http://www.apache.org/licenses/LICENSE-2.0 package com.google.appinventor.client.jsdesigner; import com.google.gwt.user.client.ui.HTMLPanel; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Element; import com.google.gwt.core.client.ScriptInjector; import com.google.gwt.user.client.Window; import com.google.appinventor.shared.rpc.project.ProjectRootNode; import com.google.appinventor.client.editor.designer.DesignerEditor; import com.google.appinventor.client.editor.ProjectEditor; import com.google.appinventor.client.editor.FileEditor; import com.google.appinventor.client.Ode; public class JSDesignerPanel extends HTMLPanel { private FileEditor fileEditor; public JSDesignerPanel() throws Exception { super("<!DOCTYPE html><html lang=\"en\"> <head> <meta charset=\"utf-8\"> <title>Editor</title> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"> <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css\" integrity=\"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ\" crossorigin=\"anonymous\"> <link rel=\"stylesheet\" href=\"css/editor.css\"> </head> <body> <div class=\"container-fluid\" id=\"container\"> <div class=\"row\" id=\"container-row\"> <div class=\"col-2\" id=\"left-panel\"> <div class=\"wide-button wide-inactive\" id=\"box\"> Box </div> <div class=\"wide-button wide-inactive\" id=\"cone\"> Cone </div> <div class=\"wide-button wide-inactive\" id=\"cylinder\"> Cylinder </div> <div class=\"wide-button wide-inactive\" id=\"dodecahedron\"> Dodecahedron </div> <div class=\"wide-button wide-inactive\" id=\"icosahedron\"> Icosahedron </div> <div class=\"wide-button wide-inactive\" id=\"octahedron\"> Octahedron </div> <div class=\"wide-button wide-inactive\" id=\"sphere\"> Sphere </div> <div class=\"wide-button wide-inactive\" id=\"tetrahedron\"> Tetrahedron </div> <hr> <div class=\"wide-button wide-inactive\" id=\"ambient\"> Ambient Light </div> <div class=\"wide-button wide-inactive\" id=\"directional\"> Directional Light </div> <div class=\"wide-button wide-inactive\" id=\"hemisphere\"> Hemisphere Light </div> <div class=\"wide-button wide-inactive\" id=\"point\"> Point Light </div> <div class=\"wide-button wide-inactive\" id=\"spot\"> Spot Light </div> <hr> <div class=\"parameter-label-large\"> World </div> <div class=\"parameter-label\"> Gravity </div> <div class=\"row parameter-row\"> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"gravity-x\" type=\"number\" value=\"0.000\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"gravity-y\" type=\"number\" value=\"-98.000\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"gravity-z\" type=\"number\" value=\"0.000\" step=\"0.001\"> </div> </div> <div class=\"parameter-label\"> Camera </div> <div class=\"row parameter-row\"> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"camera-x\" type=\"number\" value=\"20.000\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"camera-y\" type=\"number\" value=\"20.000\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"camera-z\" type=\"number\" value=\"10.000\" step=\"0.001\"> </div> </div> <div class=\"parameter-label\"> Background </div> <div class=\"parameter-row\"> <input class=\"input-text parameter-box\" id=\"background\" type=\"text\"> </div> <div class=\"wide-button wide-inactive\" id=\"labels\"> Labels </div> <div class=\"wide-button wide-inactive\" id=\"shadows\"> Shadows Disabled </div> </div> <div class=\"col-8\" id=\"editor-panel\"> <div id=\"editor\"> </div> <div id=\"controls-left\"> <div class=\"control-button control-button-left control-inactive\" id=\"vr\"> VR </div> <div class=\"control-button control-button-left control-active\" id=\"translate\"> Translate </div> <div class=\"control-button control-button-left control-inactive\" id=\"rotate\"> Rotate </div> <div class=\"control-button control-button-left control-inactive\" id=\"scale\"> Scale </div> <div class=\"control-button control-button-left control-inactive\" id=\"duplicate\"> Duplicate </div> <div class=\"control-button control-button-left control-inactive\" id=\"import\"> Import </div> <input type=\"file\" id=\"import-json\"> <div class=\"control-button control-button-left control-inactive\" id=\"export\"> Export </div> </div> <div id=\"controls-right\"> <div class=\"control-button control-button-right control-inactive\" id=\"delete\"> Delete </div> <div class=\"control-button control-button-right control-inactive\" id=\"clear\"> Clear </div> </div> </div> <div class=\"col-2\" id=\"right-panel\"> <div class=\"parameter-tabs\"> <div class=\"parameter-label-tab objects-tab-active\" id=\"objects-tab\"> Objects </div> <div class=\"tab-divider\"> </div> <div class=\"parameter-label-tab lights-tab-inactive\" id=\"lights-tab\"> Lights </div> </div> <div id=\"objects-tab-body\"> <div id=\"object-list\"> </div> <div id=\"parameter-wrapper-1\"> <hr> <div class=\"parameter-label\"> Position </div> <div class=\"row parameter-row\"> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"object-position-x\" type=\"number\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"object-position-y\" type=\"number\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"object-position-z\" type=\"number\" step=\"0.001\"> </div> </div> <div class=\"parameter-label\"> Rotation </div> <div class=\"row parameter-row\"> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"object-rotation-x\" type=\"number\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"object-rotation-y\" type=\"number\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"object-rotation-z\" type=\"number\" step=\"0.001\"> </div> </div> <div class=\"parameter-label\"> Scale </div> <div class=\"row parameter-row\"> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"scale-x\" type=\"number\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"scale-y\" type=\"number\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"scale-z\" type=\"number\" step=\"0.001\"> </div> </div> <div class=\"parameter-label\"> Color </div> <div class=\"parameter-row\"> <input class=\"color\" id=\"object-color\" type=\"color\"> </div> <div class=\"parameter-label\"> Texture </div> <div class=\"parameter-row\"> <input class=\"input-text parameter-box\" id=\"texture\" type=\"text\"> </div> <div class=\"parameter-label\"> Mass </div> <div class=\"row parameter-row\"> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"mass\" type=\"number\"> </div> </div> <hr> </div> <div id=\"parameter-wrapper-2\"> </div> <div id=\"parameter-wrapper-3\"> <hr> <div class=\"parameter-label\"> Linear Velocity </div> <div class=\"row parameter-row\"> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"linear-velocity-x\" type=\"number\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"linear-velocity-y\" type=\"number\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"linear-velocity-z\" type=\"number\" step=\"0.001\"> </div> </div> <div class=\"parameter-label\"> Angular Velocity </div> <div class=\"row parameter-row\"> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"angular-velocity-x\" type=\"number\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"angular-velocity-y\" type=\"number\" step=\"0.001\"> </div> <div class=\"col-4 parameter-item\"> <input class=\"input-text parameter-box\" id=\"angular-velocity-z\" type=\"number\" step=\"0.001\"> </div> </div> </div> </div> <div id=\"lights-tab-body\"> <div id=\"light-list\"> </div> <div id=\"parameter-wrapper-4\"> </div> </div> </div> </div> </div> <div id=\"labels-background\"></div> <div id=\"labels-modal\"> <div id=\"label-buttons\"> <div class=\"control-button control-inactive\" id=\"add-label\"> Add </div> <div class=\"control-button control-inactive\" id=\"delete-label\"> Delete </div> </div> <div id=\"labels-container\"> </div> </div> </body></html>"); ScriptInjector.fromUrl("combined.js").inject(); //super(new String(Files.readAllBytes(Paths.get("editor.html")))); //super("<div id=\"root\"></div>"); //ScriptInjector.fromUrl("main.9de011e5.js").inject(); } public void show() { Ode.getInstance().switchToJSDesignView(); } public void loadFile(FileEditor fileEditor) { this.fileEditor = fileEditor; exportJSFunctions(); openProjectInJSDesigner(fileEditor.getRawFileContent()); } public native void openProjectInJSDesigner(String rawFileContent)/*-{ var parsedJson = JSON.parse(rawFileContent.replace(/^\#\|\s\$JSON/, "").replace(/\|\#$/, "").replace(/\$Name/g, "name").replace(/\$Type/g, "componentType").replace(/\$Version/g, "version").replace(/\$Components/g, "children")); var flattenedArray = []; var jsonNodes = [parsedJson.Properties]; while(jsonNodes.length > 0) { var component = Object.assign({}, jsonNodes.shift()); if (component.children !== undefined) { jsonNodes = jsonNodes.concat(component.children); component.children = component.children.map(function(child) { return child.Uuid; }); } flattenedArray.push(component); } $wnd.jsDesignerLoadProject(flattenedArray); }-*/; public native void exportJSFunctions()/*-{ $wnd.jsDesignerToJS = { getProjectJSON: $entry((this.@com.google.appinventor.client.jsdesigner.JSDesignerPanel::getProjectJSON()).bind(this)) }; }-*/; public String getProjectJSON() { if (this.fileEditor != null) { return this.fileEditor.getRawFileContent(); } return "{}"; } }