Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Modeling » TMF (Xtext) » Orion Web Editor: xtext-web functions are not available
Orion Web Editor: xtext-web functions are not available [message #1819563] Fri, 17 January 2020 11:06 Go to next message
Kevin van den Bekerom is currently offline Kevin van den BekeromFriend
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 #1819591 is a reply to message #1819563] Fri, 17 January 2020 16:49 Go to previous messageGo to next message
Christian Dietrich is currently offline Christian DietrichFriend
Messages: 14661
Registered: July 2009
Senior Member
The latest Orion Version Xtext is tested with is

http://www.eclipse.org/downloads/download.php?file=/orion/drops/R-17.0-201801111044/built-codeEdit.zip&r=1

Did you also check out the examples in github.com/eclipse/Xtext-web


Twitter : @chrdietrich
Blog : https://www.dietrich-it.de
Re: Orion Web Editor: xtext-web functions are not available [message #1819594 is a reply to message #1819591] Fri, 17 January 2020 17:45 Go to previous messageGo to next message
Christian Dietrich is currently offline Christian DietrichFriend
Messages: 14661
Registered: July 2009
Senior Member
you unpack the stuff to the wrong location:

for starting the main it should go into the WebRoot folder.


Twitter : @chrdietrich
Blog : https://www.dietrich-it.de
Re: Orion Web Editor: xtext-web functions are not available [message #1820530 is a reply to message #1819594] Wed, 22 January 2020 09:33 Go to previous messageGo to next message
Kevin van den Bekerom is currently offline Kevin van den BekeromFriend
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?
Re: Orion Web Editor: xtext-web functions are not available [message #1820535 is a reply to message #1820530] Wed, 22 January 2020 10:33 Go to previous message
Christian Dietrich is currently offline Christian DietrichFriend
Messages: 14661
Registered: July 2009
Senior Member
no this should work. have no idea why not.
i assume that somehow in your case the services object is not inited properly and this is a follow up error.
again an example to reproduce would really help


Twitter : @chrdietrich
Blog : https://www.dietrich-it.de
Previous Topic:Facing problem in cross references
Next Topic:Cross-reference without dot symbol
Goto Forum:
  


Current Time: Thu Mar 28 13:29:20 GMT 2024

Powered by FUDForum. Page generated in 0.06367 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top