|
|
| Re: web editor with code generation [message #1720505 is a reply to message #1720489] |
Tue, 19 January 2016 05:48   |
|
Here is what to todo
(1) Implement Generator
class MyDslGenerator extends AbstractGenerator {
override void doGenerate(Resource resource, IFileSystemAccess2 fsa, IGeneratorContext context) {
fsa.generateFile('/DEFAULT_ARTIFACT', 'People to greet: ' +
resource.allContents
.filter(typeof(Greeting))
.map[name]
.join(', '))
}
}
(2) Adapt Syling and UI
<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-SNAPSHOT/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-SNAPSHOT/xtext-ace"
}
});
require(["webjars/ace/1.2.0/src/ace"], function() {
require(["xtext/xtext-ace"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mode-mydsl2"
});
jQuery('#generate-button').bind("click", function(e){
jQuery('#generator-result').html('<iframe src="http://' + location.host + '/xtext-service/generate?resource=example1.mydsl2"></iframe>');
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="mydsl2" data-editor-resource-id="example1.mydsl2"></div>
</div>
<div class="button-wrapper">
<button id="generate-button" value="Generate" title="Generate">Generate</button>
<div id="generator-result">
Result
</div>
</div>
</div>
</body>
</html>
div.button-wrapper {
display: block;
position: absolute;
top: 90px;
bottom: 0;
left: 640px;
right: 0;
padding: 4px;
border: 1px solid #aaa;
}
Twitter : @chrdietrich
Blog : https://www.dietrich-it.de
|
|
|
|
|
Powered by
FUDForum. Page generated in 0.03275 seconds
] 
Search
Help
Register
Login
Home
