Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Modeling » TMF (Xtext) » Load/Save text from/inro the server
Load/Save text from/inro the server [message #1729905] Wed, 20 April 2016 08:17 Go to next message
Leonid Yavorskyi is currently offline Leonid YavorskyiFriend
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 #1729982 is a reply to message #1729905] Wed, 20 April 2016 16:15 Go to previous messageGo to next message
Christian Dietrich is currently offline Christian DietrichFriend
Messages: 14661
Registered: July 2009
Senior Member
Hi i am not understand your question. Is this about to add load and Save
Methods to the Server that talk with your database?


Twitter : @chrdietrich
Blog : https://www.dietrich-it.de
Re: Load/Save text from/inro the server [message #1729985 is a reply to message #1729982] Wed, 20 April 2016 16:27 Go to previous messageGo to next message
Leonid Yavorskyi is currently offline Leonid YavorskyiFriend
Messages: 6
Registered: April 2016
Junior Member
Christian Dietrich wrote on Wed, 20 April 2016 16:15

Is this about to add load and Save Methods to the Server that talk with your database?

Yes, absolutely!

[Updated on: Wed, 20 April 2016 16:28]

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 Go to previous messageGo to next message
Christian Dietrich is currently offline Christian DietrichFriend
Messages: 14661
Registered: July 2009
Senior Member
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 #1730083 is a reply to message #1729993] Thu, 21 April 2016 10:12 Go to previous messageGo to next message
Leonid Yavorskyi is currently offline Leonid YavorskyiFriend
Messages: 6
Registered: April 2016
Junior Member
Christian DietrichFriend, thanks for your answer!
1. I don't have a static dsl files. My DSLs are storing in DB and in editor I can only writing my text and then save in repository.
2. editor.getValue() - ncaught TypeError: editor.getValue is not a function
How can I basically get value from my editor?
Re: Load/Save text from/inro the server [message #1730084 is a reply to message #1730083] Thu, 21 April 2016 10:15 Go to previous messageGo to next message
Christian Dietrich is currently offline Christian DietrichFriend
Messages: 14661
Registered: July 2009
Senior Member
Hi i dont get that,. my example uses a filestore you can use whatever you like.

can you share everything needed to reproduce your stuff?


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 Go to previous messageGo to next message
Leonid Yavorskyi is currently offline Leonid YavorskyiFriend
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 Go to previous messageGo to next message
Christian Dietrich is currently offline Christian DietrichFriend
Messages: 14661
Registered: July 2009
Senior Member
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
Re: Load/Save text from/inro the server [message #1730089 is a reply to message #1730087] Thu, 21 April 2016 10:54 Go to previous messageGo to next message
Leonid Yavorskyi is currently offline Leonid YavorskyiFriend
Messages: 6
Registered: April 2016
Junior Member
Yes, I'm using Orion.
AbstractJavaScriptComponent XTextEditor is a custom Vaadin widget which is XText editor itself.
Re: Load/Save text from/inro the server [message #1730094 is a reply to message #1730089] Thu, 21 April 2016 11:03 Go to previous messageGo to next message
Christian Dietrich is currently offline Christian DietrichFriend
Messages: 14661
Registered: July 2009
Senior Member
at the point you test that the editor actually has the text?

Twitter : @chrdietrich
Blog : https://www.dietrich-it.de
Re: Load/Save text from/inro the server [message #1730097 is a reply to message #1730094] Thu, 21 April 2016 11:09 Go to previous messageGo to next message
Leonid Yavorskyi is currently offline Leonid YavorskyiFriend
Messages: 6
Registered: April 2016
Junior Member
If I don't remove line
getState().value = "First State Value >>>>>>>>>>>>>>>>>>>>>>>>>";
my editor will be instantiated with state value text.
Re: Load/Save text from/inro the server [message #1730099 is a reply to message #1730097] Thu, 21 April 2016 11:11 Go to previous message
Christian Dietrich is currently offline Christian DietrichFriend
Messages: 14661
Registered: July 2009
Senior Member
but when do you call the load button?
the load button takes the content from the xtext server and sets it to the current editor.

the save button sends it to the editor.
so this makes no sense


Twitter : @chrdietrich
Blog : https://www.dietrich-it.de
Previous Topic:Lexical Hightlighting
Next Topic:"Find references" shows classes names
Goto Forum:
  


Current Time: Thu Mar 28 10:36:43 GMT 2024

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

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

Back to the top