Orion Web Editor: xtext-web functions are not available [message #1819563] |
Fri, 17 January 2020 11:06 |
Kevin van den Bekerom Messages: 2 Registered: January 2020 |
Junior Member |
|
|
Hi All,
I created a simple Xtext web project with Orion support. However, I am unable to follow the basic documentation succesfully, e.g. adding a Save Resource button, as can be read here https://www.eclipse.org/Xtext/documentation/330_web_support.html
So far I have tinkered with the imports, to no avail. The web editor even crashes when using the latest versions of the javascript libraries.
I used the following settings
Gradle
plugins {
id 'war'
id 'de.undercouch.download' version '3.2.0'
}
import de.undercouch.gradle.tasks.download.Download
dependencies {
compile project(':quadra.generation.data.dsl')
compile project(':quadra.generation.data.dsl.ide')
compile "org.eclipse.xtext:org.eclipse.xtext.xbase.web:2.10.0"
compile "org.eclipse.xtext:org.eclipse.xtext.web.servlet:2.20.0"
compile "org.eclipse.xtend:org.eclipse.xtend.lib:2.20.0"
compile "org.webjars:requirejs:2.3.2"
compile "org.webjars:jquery:2.2.4"
providedCompile "org.eclipse.jetty:jetty-annotations:9.4.9.v20180320"
providedCompile "org.slf4j:slf4j-simple:1.7.21"
}
def orionDir = file('src/main/webapp/orion')
def orionUrl = 'http://download.eclipse.org/orion/drops/R-20.0-201903291844/built-codeEdit.zip'
task downloadOrion(type: Download) {
src orionUrl
dest file("$buildDir/orion/built-codeEdit.zip")
}
task unpackOrion(dependsOn: downloadOrion, type: Copy) {
from(zipTree(downloadOrion.dest))
into(orionDir)
}
task jettyRun(type:JavaExec) {
dependsOn(sourceSets.main.runtimeClasspath, unpackOrion)
classpath = sourceSets.main.runtimeClasspath.filter{it.exists()}
main = 'quadra.generation.data.dsl.web.ServerLauncher'
standardInput = System.in
group = 'run'
description = 'Starts an example Jetty server with your language'
}
Html.index
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.16.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex)
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.16.0/xtext-orion",
}
});
require(["orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/qdd-syntax",
enableSaveAction: true
}).done(function(editorViewer) {
var xtextServices = editorViewer.xtextServices;
$('#save-button').click(function() {
xtextServices.saveResource();
});
$('#revert-button').click(function() {
xtextServices.revertResource();
});
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="container-content">
<div class="header">
<h1>Quadra DataDefinition Web Editor</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="qdd"></div>
</div>
<div class="status-wrapper">
<button id="save-button">Save</button>
<button id="revert-button">Revert</button>
<div id="dirty-indicator">modified</div>
<div id="status">Welcome to Xtext-Web</div>
</div>
</div>
<div class="container-footer">
<div class="footer">
<img src="images/logo-altran.png">
</div>
</div>
</div>
</body>
</html>
Please let me know if I need to do some more work to use the XtextServices. When having a working set of imports, The console complains that it cannot find the function saveResource().
|
|
|
|
|
Re: Orion Web Editor: xtext-web functions are not available [message #1820530 is a reply to message #1819594] |
Wed, 22 January 2020 09:33 |
Kevin van den Bekerom Messages: 2 Registered: January 2020 |
Junior Member |
|
|
Hi Christian,
Thanks for the reply. In order to reduce clutter, I started with a fresh Xtext project, created using the Eclipse Wizard.
Xtext web project with gradle build system. Eclipse uses by default the Ace editor. For now I have stuck to this.
I have added my own grammar, and this piece of code to the html file:
require(["webjars/ace/1.3.3/src/ace"], function() {
require(["xtext/xtext-ace"], function(xtext) {
var editor = xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mode-qdd"
});
$("#save-button").click(function() {
editor.xtextServices.saveResource();
});
});
});
Again, I get an error when pressing the save button.
(index):30 Uncaught TypeError: editor.xtextServices.saveResource is not a function
at HTMLButtonElement.<anonymous> ((index):30)
at HTMLButtonElement.dispatch (jquery.min.js:2)
at HTMLButtonElement.y.handle (jquery.min.js:2)
I am lost as to what I am missing. As for the examples on the github repo; they are great! When I have gained a bit more gradle knowledge and understand what the web editor does and does not do out of the box I will refer to them more.
Baseline question:
What are the steps to use the XtextServices functions (e.g. saveResource, generate, etc?
|
|
|
|
Powered by
FUDForum. Page generated in 0.06367 seconds