Load/Save text from/inro the server [message #1729905] |
Wed, 20 April 2016 08:17 |
Leonid Yavorskyi Messages: 6 Registered: April 2016 |
Junior Member |
|
|
Hi,
i have created a Vaadin UI application with integrated widget for DSL editing. This widget is the Xtext editor (implementation of the AbstractJavaScriptComponent).
My next step is to save text from Xtext editor into my repository and load text from repository into the editor. This functionality have to be implemented through DslRepository class which is responsible to store dsl's into the DB.
resourceId option will be created dynamically depending on which check boxes will be pressed.
I have just read documentation (http://www.eclipse.org/Xtext/documentation/330_web_support.html#getting-text-content) but don't clearly understand how to implement this functionality. How to delegate save and load functionality to DslRepository? I want to iplement this without JavaScript.
Thanks a lot!
[Updated on: Wed, 20 April 2016 15:41] Report message to a moderator
|
|
|
|
|
Re: Load/Save text from/inro the server [message #1729993 is a reply to message #1729985] |
Wed, 20 April 2016 17:45 |
|
here are some starting points
<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="xtext/2.9.2/xtext-ace.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.1.20/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: {
"jquery": "webjars/jquery/2.1.4/jquery.min",
"ace/ext/language_tools": "webjars/ace/1.2.0/src/ext-language_tools",
"xtext/xtext-ace": "xtext/2.9.2/xtext-ace"
}
});
require(["webjars/ace/1.2.0/src/ace"], function() {
require(["xtext/xtext-ace"], function(xtext) {
var editor = xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mode-mydsl7"
});
jQuery('#save-button').bind("click", function(e){
var data = {
resource : $("#rid").val(),
fullText : editor.getValue()
};
console.log(data);
jQuery.post('http://localhost:8080/xtext-service/save', data, function(result){
console.log("saved");
});
e.preventDefault();
});
jQuery('#load-button').bind("click", function(e){
var data = {
resource : $("#rid").val(),
};
console.log(data);
jQuery.get('http://localhost:8080/xtext-service/load', data, function(result){
editor.setValue(result.fullText);
console.log("loaded " + result.fullText);
});
e.preventDefault();
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Example MyDsl Web Editor2</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mydsl7"></div>
</div>
<div class="button-wrapper">
<input id="rid" name="rid" value="example1.mydsl7" type="text"/>
<button id="save-button" value="Save" title="Save">Save</button>
<button id="load-button" value="Load" title="Load">Load</button>
</div>
</div>
</body>
</html>
div.button-wrapper {
background-color: red;
display: block;
position: absolute;
top: 90px;
bottom: 0;
left: 640px;
right: 0;
padding: 4px;
border: 1px solid #aaa;
}
class MyDslWebModule extends AbstractMyDslWebModule {
def Class<? extends IServerResourceHandler> bindIServerResourceHandler() {
// your own impl here
FileResourceHandler
}
// only needed for FileResourceHandler
def void configureIResourceBaseProvider(Binder binder) {
binder.bind(IResourceBaseProvider).toInstance(
new ResourceBaseProviderImpl("."))
}
}
you may have a look at the saveResource and loadResource methods in xtextEditor.services client side as well - but tthis works with a static resource id as well
(=> you have to recreate the stuff on a change)
Twitter : @chrdietrich
Blog : https://www.dietrich-it.de
|
|
|
|
|
Re: Load/Save text from/inro the server [message #1730086 is a reply to message #1730084] |
Thu, 21 April 2016 10:39 |
Leonid Yavorskyi Messages: 6 Registered: April 2016 |
Junior Member |
|
|
index.html in dsl.web project:
<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.10.0-SNAPSHOT/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="../webjars/requirejs/2.1.20/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.14/text",
"jquery": "webjars/jquery/2.1.4/jquery.min",
"xtext/xtext-orion": "xtext/2.10.0-SNAPSHOT/xtext-orion"
}
});
require(["orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "../xtext-resources/generated/ilang-syntax"
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Example ILang Web Editor</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="ilang"></div>
</div>
</div>
</body>
</html>
xtextEditor.js in my web Vaadin project:
com_inatec_pgw_portal_backoffice_XTextEditor = function () {
var e = this.getElement();
e.innerHTML =
"<div class='container' style='height:100%; width:100%;'><div id='xtext-editor' data-editor-enable-save-action='true' data-editor-xtext-lang='ilang'>"
+
(this.getState().value == undefined ? "" : this.getState().value) + "</div></div>";
// baseUrl needs to be reffered to [host]:[port]/[appContexts]
// in the demo app the editor is used under [host]:[port]/[appContexts]/ui path
var baseUrl = window.location.pathname + "../";
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.14/text",
"jquery": "webjars/jquery/2.1.4/jquery.min",
"xtext/xtext-orion": "xtext/2.10.0-SNAPSHOT/xtext-orion"
}
});
var connector = this;
require(["orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
var editor = xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/ilang-syntax",
serviceUrl: baseUrl + "xtext-service"
});
$("#load-button").click(function() {
console.error("rule = " + editor.getValue())
});
});
});
}
Vaadin XText widget:
@SuppressWarnings("serial")
@StyleSheet(value = {"../../../xtext/2.10.0-SNAPSHOT/xtext-orion.css", "../../../orion/code_edit/built-codeEdit.css", "xtextEditor.css"})
@JavaScript(value = {"../../../webjars/requirejs/2.1.20/require.min.js", "xtextEditor.js"})
public class XTextEditor extends AbstractJavaScriptComponent {
private static final Logger logger = LoggerFactory.getLogger(BackOfficeLayout.class);
public XTextEditor() {
getState().value = "First State Value >>>>>>>>>>>>>>>>>>>>>>>>>";
}
public interface ValueChangeListener extends Serializable {
void valueChange();
}
ArrayList<ValueChangeListener> listeners = new ArrayList<ValueChangeListener>();
public void addValueChangeListener(ValueChangeListener listener) {
listeners.add(listener);
}
public String getValue() {
return getState().value;
}
public void setValue(String value) {
getState().value = value;
}
@Override
protected XTextEditorState getState() {
return (XTextEditorState) super.getState();
}
}
editor.getValue doesn't work.
but this.getState().value correctly return "First State Value >>>>>>>>>>>>>>>>>>>>>>>>>"
|
|
|
Re: Load/Save text from/inro the server [message #1730087 is a reply to message #1730086] |
Thu, 21 April 2016 10:46 |
|
HI,
why do you call createEditor twice? i have no idea what happens when you do what,
another Point is that you seem to use Orion.
maybe getValue is not proper supported there.
since i dont have the time to Setup everything myself and read on vaadin i cannot give further hints
i have no idea what role your AbstractJavaScriptComponent XTextEditor plays
Twitter : @chrdietrich
Blog : https://www.dietrich-it.de
|
|
|
|
|
|
|
Powered by
FUDForum. Page generated in 0.06345 seconds