| Load/Save text from/inro the server [message #1729905] |
Wed, 20 April 2016 04:17  |
Eclipse User |
|
|
|
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 11:41] by Moderator |
|
|
|
|
| Re: Load/Save text from/inro the server [message #1729993 is a reply to message #1729985] |
Wed, 20 April 2016 13:45  |
| Eclipse User |
|
|
|
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)
|
|
|
|
|
| Re: Load/Save text from/inro the server [message #1730086 is a reply to message #1730084] |
Thu, 21 April 2016 06:39 |
| Eclipse User |
|
|
|
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 >>>>>>>>>>>>>>>>>>>>>>>>>"
|
|
|
|
|
|
|
|
Powered by
FUDForum. Page generated in 0.05847 seconds
Home