Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Orion/How Tos/Code Edit
< Orion | How Tos
Revision as of 11:51, 2 July 2015 by Unnamed Poltroon (Talk) (→Code Edit Widget With Language Tooling)
Contents
Code Edit Widget With Language Tooling
- In order for users to consume the Orion editor with the complete language tooling, a new widget called "Code Edit" has been introduced.
- The widget consists of the widget core and all language tooling plugins.
- The widget is delivered as a zip file containing all the structural folders and files, making the core and the plugins all work together.
- Users consume the widget core directly. The language tooling plugins are only loaded when needed.
- The widget core is available both unminified, for debugging purpose and minified, for better loading time.
- The plugins are only available in minified version.
Getting the Build
- Users can grab the most recent "Code Edit" widget from the nightly builds or they can use the latest release available on the Orion download page.
Nightly builds & Releases
- From the Orion build page, users can click on a nightly build or a release and they will be presented with a page that now includes the code edit widget: the built-codeEdit.zip file contains all the files for you to embed the widget.
Using the Build
You can simply download the zip file and unzip it into a folder on your web server. Below is a complete run-able html file that you can host in your web server as a demo on how to consume the widget. Assume that you have created a folder named editorBuild under where your html file lives. Follow the 3 steps below and you can run the demo in just a few minutes.
- Download the code edit build and unzip it under the editorBuild folder.
- Create a demo.html and paste the example contents into the demo.html.
- Run the demo.html.
<!doctype html> <html> <head> <meta name="copyright" content="Copyright (c) IBM Corporation and others 2010, 2014." > <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Pluggable Editor Demo</title> <style type="text/css"> .demoTitle{ border: none; vertical-align: middle; overflow: hidden; text-align: left; margin-left: 15%; margin-right: 15%; padding-bottom: 5px; position: relative; } .demoBody{ border: 1px solid; vertical-align: middle; border-color: blue; overflow: hidden; text-align: left; margin-left: 15%; margin-right: 15%; margin-bottom: 15px; padding-bottom: 5px; position: relative; height: 450px; } </style> <link rel="stylesheet" type="text/css" href="editorBuild/code_edit/built-codeEdit.css"/> <script src="editorBuild/code_edit/built-codeEdit.js"></script> <script> /*globals orion */ window.onload=function(){ var codeEdit = new orion.codeEdit(); var contents = 'var foo = "bar";\n' + "var bar = foo;\n" + "/*\n" + " * test demo\n" + "*/\n" + "function test(){\n" + " var foo1 = bar.lastIndexOf(char, from);\n" + "}\n" + "//Keep editting in this demo and try the content assit, probem validations and hover service!\n" + "var foo2 = foo."; codeEdit.create({parent: "embeddedEditor", contentType: "application/javascript", contents: contents}).then(function(editorViewer) { document.getElementById("progressMessageDiv").textContent = "Plugins loaded!"; //You can call APIs from editorViewer.editor for further actions. }); }; </script> </head> <body id="orion-browser" spellcheck="false" class="orionPage"> <div class="demoTitle"> <div>This is a demo for the <b>Orion Code Edit</b> widget. This demo consumes the <b>build version</b> of the widget.</div> <div> Keep editing in this demo and try:</div> <div> 1.content assist. E.g., put cursor after "foo." at the last line and press CTRL+space.</div> <div> 2.probem validations. E.g., modify something and you will see new validation markers coming up, if any</div> <div> 3.hover service. Hover on any error markers or inside the eidtor.</div> <div> 4.syntax highlighting</div> <div> 5.Quick fix. Hover on a problem inside the eidtor, not on the ruler, e.g., (char, from) in this demo. Click on the quick fix and see.</div> <div> 6.Find declaration. Select a variable and press f3.</div> <div> 7.new tooling features coming while Orion is being improved...</div> </div> <div class="demoTitle"> <span id = "progressMessageDiv" style="color: green">Loading language tooling plugins...</span> </div> </div> <div class="demoBody" id="embeddedEditor"> </div> </body> </html>
Your demo page should look like this, if you use CTRL+space as content assist after the page is loaded.