Home » Eclipse Projects » Remote Application Platform (RAP) » Custom Widget: Operation "create" on target "r183" of type "null" fai
| Custom Widget: Operation "create" on target "r183" of type "null" fai [message #1231769] |
Wed, 15 January 2014 10:52  |
 Tobias P.
Messages: 43
Registered: April 2012 |
Member |
|
|
Hello guys,
i am trying to Develop an Custom Widget based on the
JavaScript InfoVis Toolkit http://philogb.github.io/jit/index.html.
I am using the CkEditor as a template: http://git.eclipse.org/c/rap/incubator/org.eclipse.rap.incubator.richtext.git
Since I have no experience with Javascript, i created a minimal HTML Site which works fine.
st.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spacetree - Tree Animation</title>
<!-- CSS Files -->
<link type="text/css" href="css/base.css" rel="stylesheet" />
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="jit-yc.js"></script>
<!-- Example File -->
<script language="javascript" type="text/javascript" src="example1.js"></script>
</head>
<body onload="init();">
<div id="center-container">
<div id="infovis"></div>
</div>
<div id="log"></div>
</div>
</body>
</html>
Example1.js
function init(){
//init data
var json = "{id:\"node02\", name:\"Phenazone\", data:{}}";
//end
//A client-side tree generator
var getTree = (function() {
var i = 0;
return function(nodeId, level) {
var subtree = eval('(' + json.replace(/id:\"([a-zA-Z0-9]+)\"/g,
function(all, match) {
return "id:\"" + match + "_" + i + "\""
}) + ')');
$jit.json.prune(subtree, level); i++;
return {
'id': nodeId,
'children': subtree.children
};
};
})();
//Implement a node rendering function called 'nodeline' that plots a straight line
//when contracting or expanding a subtree.
$jit.ST.Plot.NodeTypes.implement({
'nodeline': {
'render': function(node, canvas, animating) {
if(animating === 'expand' || animating === 'contract') {
var pos = node.pos.getc(true), nconfig = this.node, data = node.data;
var width = nconfig.width, height = nconfig.height;
var algnPos = this.getAlignedPos(pos, width, height);
var ctx = canvas.getCtx(), ort = this.config.orientation;
ctx.beginPath();
if(ort == 'left' || ort == 'right') {
ctx.moveTo(algnPos.x, algnPos.y + height / 2);
ctx.lineTo(algnPos.x + width, algnPos.y + height / 2);
} else {
ctx.moveTo(algnPos.x + width / 2, algnPos.y);
ctx.lineTo(algnPos.x + width / 2, algnPos.y + height);
}
ctx.stroke();
}
}
}
});
//init Spacetree
//Create a new ST instance
var st = new $jit.ST({
'injectInto': 'infovis',
//set duration for the animation
duration: 800,
//set animation transition type
transition: $jit.Trans.Quart.easeInOut,
//set distance between node and its children
levelDistance: 50,
//set max levels to show. Useful when used with
//the request method for requesting trees of specific depth
levelsToShow: 2,
//set node and edge styles
//set overridable=true for styling individual
//nodes or edges
Node: {
height: 20,
width: 40,
//use a custom
//node rendering function
type: 'nodeline',
color:'#23A4FF',
lineWidth: 2,
align:"center",
overridable: true
},
Edge: {
type: 'bezier',
lineWidth: 2,
color:'#23A4FF',
overridable: true
},
//This method is called on DOM label creation.
//Use this method to add event handlers and styles to
//your node.
onCreateLabel: function(label, node){
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function(){
st.onClick(node.id);
};
//set label styles
var style = label.style;
style.width = 40 + 'px';
style.height = 17 + 'px';
style.cursor = 'pointer';
style.color = '#fff';
//style.backgroundColor = '#1a1a1a';
style.fontSize = '0.8em';
style.textAlign= 'center';
style.textDecoration = 'underline';
style.paddingTop = '3px';
},
});
//load json data
st.loadJSON(eval( '(' + json + ')' ));
//compute node positions and layout
st.compute();
//emulate a click on the root node.
st.onClick(st.root);
//end
}
Based on the CKEditor template and this minimal approach, here is my RAP Code:
SpaceTree.java
@SuppressWarnings("serial")
public class SpaceTree extends Composite {
private static final String RESOURCES_PATH = "resource/";
private static final String REGISTER_PATH = "jitjs/";
private static final Logger LOG = LoggerFactory
.getLogger(WorkbenchUtil.DEFAULT_LOGGER);
private static final String[] RESOURCE_FILES = { "jit.js", "jit-yc.js",
"handler.js" };
private static final String REMOTE_TYPE = "spaceTree";
private final RemoteObject remoteObject;
private final OperationHandler operationHandler = new AbstractOperationHandler() {
};
public SpaceTree(Composite parent, int style) {
super(parent, style);
registerResources();
loadJavaScript();
Connection connection = RWT.getUISession().getConnection();
remoteObject = connection.createRemoteObject(REMOTE_TYPE);
remoteObject.setHandler(operationHandler);
remoteObject.set("parent", WidgetUtil.getId(this));
}
private void loadJavaScript() {
JavaScriptLoader jsLoader = RWT.getClient().getService(
JavaScriptLoader.class);
ResourceManager resourceManager = RWT.getResourceManager();
jsLoader.require(resourceManager.getLocation(REGISTER_PATH
+ "handler.js"));
jsLoader.require(resourceManager.getLocation(REGISTER_PATH + "jit.js"));
jsLoader.require(resourceManager.getLocation(REGISTER_PATH + "jit-yc.js"));
}
private void registerResources() {
ResourceManager resourceManager = RWT.getResourceManager();
boolean isRegistered = resourceManager.isRegistered(REGISTER_PATH
+ RESOURCE_FILES[0]);
if (!isRegistered) {
try {
for (String fileName : RESOURCE_FILES) {
register(resourceManager, fileName);
}
} catch (IOException ioe) {
throw new IllegalArgumentException("Failed to load resources",
ioe);
}
}
}
private void register(ResourceManager resourceManager, String fileName)
throws IOException {
ClassLoader classLoader = SpaceTree.class.getClassLoader();
InputStream inputStream = classLoader
.getResourceAsStream(RESOURCES_PATH + fileName);
try {
resourceManager.register(REGISTER_PATH + fileName, inputStream);
LOG.debug("registered: " + fileName);
} finally {
inputStream.close();
}
}
// //////////////////
// overwrite methods
@Override
public void setLayout(Layout layout) {
throw new UnsupportedOperationException(
"Cannot change internal layout of SpaceTree");
}
@Override
public void dispose() {
remoteObject.destroy();
super.dispose();
}
}
handler.js
(function(){
'use strict';
rap.registerTypeHandler( "spaceTree", {
factory : function(properties) {
return new spaceTree( properties );
},
} );
spaceTree = function(properties) {
this.parent = rap.getObject(properties.parent);
this.element = document.createElement("div");
var onRender = function() {
if( element.parentNode ) {
rap.off( "render", onRender );
init();
}
};
parent.append( element );
rap.on( "render", onRender );
};
function init(){
//init data
var json = "{id:\"node02\", name:\"Phenazone\", data:{}}";
//end
//A client-side tree generator
var getTree = (function() {
var i = 0;
return function(nodeId, level) {
var subtree = eval('(' + json.replace(/id:\"([a-zA-Z0-9]+)\"/g,
function(all, match) {
return "id:\"" + match + "_" + i + "\""
}) + ')');
$jit.json.prune(subtree, level); i++;
return {
'id': nodeId,
'children': subtree.children
};
};
})();
//Implement a node rendering function called 'nodeline' that plots a straight line
//when contracting or expanding a subtree.
$jit.ST.Plot.NodeTypes.implement({
'nodeline': {
'render': function(node, canvas, animating) {
if(animating === 'expand' || animating === 'contract') {
var pos = node.pos.getc(true), nconfig = this.node, data = node.data;
var width = nconfig.width, height = nconfig.height;
var algnPos = this.getAlignedPos(pos, width, height);
var ctx = canvas.getCtx(), ort = this.config.orientation;
ctx.beginPath();
if(ort == 'left' || ort == 'right') {
ctx.moveTo(algnPos.x, algnPos.y + height / 2);
ctx.lineTo(algnPos.x + width, algnPos.y + height / 2);
} else {
ctx.moveTo(algnPos.x + width / 2, algnPos.y);
ctx.lineTo(algnPos.x + width / 2, algnPos.y + height);
}
ctx.stroke();
}
}
}
});
//init Spacetree
var id = this.element.getAttribute("id");
//Create a new ST instance
var st = new $jit.ST({
'injectInto': id,
//set duration for the animation
duration: 800,
//set animation transition type
transition: $jit.Trans.Quart.easeInOut,
//set distance between node and its children
levelDistance: 50,
//set max levels to show. Useful when used with
//the request method for requesting trees of specific depth
levelsToShow: 2,
//set node and edge styles
//set overridable=true for styling individual
//nodes or edges
Node: {
height: 20,
width: 40,
//use a custom
//node rendering function
type: 'nodeline',
color:'#23A4FF',
lineWidth: 2,
align:"center",
overridable: true
},
Edge: {
type: 'bezier',
lineWidth: 2,
color:'#23A4FF',
overridable: true
},
//This method is called on DOM label creation.
//Use this method to add event handlers and styles to
//your node.
onCreateLabel: function(label, node){
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function(){
st.onClick(node.id);
};
//set label styles
var style = label.style;
style.width = 40 + 'px';
style.height = 17 + 'px';
style.cursor = 'pointer';
style.color = '#fff';
//style.backgroundColor = '#1a1a1a';
style.fontSize = '0.8em';
style.textAlign= 'center';
style.textDecoration = 'underline';
style.paddingTop = '3px';
},
});
//load json data
st.loadJSON(eval( '(' + json + ')' ));
//compute node positions and layout
st.compute();
//emulate a click on the root node.
st.onClick(st.root);
//end
}
}());
When i add an Instance of SpaceTree to my RAP Application, i am running into an endless loop and in the FireFox Console i get the Following errors:
GET http://localhost:8888/daios/rwt-resources/jitjs/handler.js [HTTP/1.1 200 OK 1ms]
11:38:01.052 ReferenceError: assignment to undeclared variable spaceTree handler.js:10
11:38:01.105 GET http://localhost:8888/daios/rwt-resources/jitjs/jit.js [HTTP/1.1 200 OK 6ms]
11:38:01.106 GET http://localhost:8888/daios/rwt-resources/jitjs/jit-yc.js [HTTP/1.1 200 OK 4ms]
11:38:01.175 Error: Operation "create" on target "r183" of type "null" failed:
spaceTree is not defined
Properties:
parent = w182
If i am not using strict mode, i get the following errors:
Error: Operation "create" on target "r183" of type "null" failed:
element is not defined
Properties:
parent = w182
I believe there is something wrong with my JavaScript Code? Any help is appreciated. If you need further Information, please feel free to ask
|
|
|
| Re: Custom Widget: Operation "create" on target "r183" of type [message #1231819 is a reply to message #1231769] |
Wed, 15 January 2014 13:27  |
Tim Buschtoens
Messages: 396
Registered: July 2009 |
Senior Member |
|
|
Hi.
As far as I can tell your code references an html element with a
specific id, but you never assign an id in your typeHandler. However,
using a static id would mean you could not have two instances of your
widget at the same time in the application. I suggest you find another
way to give the parent element to your init code. (I don't know anything
about InfoVis, but I think it's very likely it's possible to do that.)
Greetings,
Tim
Am 15.01.2014 11:52, schrieb Tobias P.:
> Hello guys,
>
> i am trying to Develop an Custom Widget based on the JavaScript InfoVis
> Toolkit http://philogb.github.io/jit/index.html.
> I am using the CkEditor as a template:
> http://git.eclipse.org/c/rap/incubator/org.eclipse.rap.incubator.richtext.git
>
>
> Since I have no experience with Javascript, i created a minimal HTML
> Site which works fine.
>
> st.html
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
> <title>Spacetree - Tree Animation</title>
>
> <!-- CSS Files -->
> <link type="text/css" href="css/base.css" rel="stylesheet" />
>
>
> <!--[if IE]><script language="javascript" type="text/javascript"
> src="../../Extras/excanvas.js"></script><![endif]-->
>
> <!-- JIT Library File -->
> <script language="javascript" type="text/javascript"
> src="jit-yc.js"></script>
>
> <!-- Example File -->
> <script language="javascript" type="text/javascript"
> src="example1.js"></script>
> </head>
>
> <body onload="init();">
>
> <div id="center-container">
> <div id="infovis"></div> </div>
>
>
>
> <div id="log"></div>
> </div>
> </body>
> </html>
>
>
>
> Example1.js
> function init(){
> //init data
> var json = "{id:\"node02\", name:\"Phenazone\", data:{}}";
> //end
> //A client-side tree generator
> var getTree = (function() {
> var i = 0;
> return function(nodeId, level) {
> var subtree = eval('(' +
> json.replace(/id:\"([a-zA-Z0-9]+)\"/g, function(all, match) {
> return "id:\"" + match + "_" + i + "\"" }) + ')');
> $jit.json.prune(subtree, level); i++;
> return {
> 'id': nodeId,
> 'children': subtree.children
> };
> };
> })();
> //Implement a node rendering function called 'nodeline' that plots a
> straight line
> //when contracting or expanding a subtree.
> $jit.ST.Plot.NodeTypes.implement({
> 'nodeline': {
> 'render': function(node, canvas, animating) {
> if(animating === 'expand' || animating === 'contract') {
> var pos = node.pos.getc(true), nconfig = this.node,
> data = node.data;
> var width = nconfig.width, height = nconfig.height;
> var algnPos = this.getAlignedPos(pos, width, height);
> var ctx = canvas.getCtx(), ort = this.config.orientation;
> ctx.beginPath();
> if(ort == 'left' || ort == 'right') {
> ctx.moveTo(algnPos.x, algnPos.y + height / 2);
> ctx.lineTo(algnPos.x + width, algnPos.y + height /
> 2);
> } else {
> ctx.moveTo(algnPos.x + width / 2, algnPos.y);
> ctx.lineTo(algnPos.x + width / 2, algnPos.y +
> height);
> }
> ctx.stroke();
> } }
> }
> });
> //init Spacetree
> //Create a new ST instance
> var st = new $jit.ST({
> 'injectInto': 'infovis',
> //set duration for the animation
> duration: 800,
> //set animation transition type
> transition: $jit.Trans.Quart.easeInOut,
> //set distance between node and its children
> levelDistance: 50,
> //set max levels to show. Useful when used with
> //the request method for requesting trees of specific depth
> levelsToShow: 2,
> //set node and edge styles
> //set overridable=true for styling individual
> //nodes or edges
> Node: {
> height: 20,
> width: 40,
> //use a custom
> //node rendering function
> type: 'nodeline',
> color:'#23A4FF',
> lineWidth: 2,
> align:"center",
> overridable: true
> },
> Edge: {
> type: 'bezier',
> lineWidth: 2,
> color:'#23A4FF',
> overridable: true
> },
> //This method is called on DOM label creation.
> //Use this method to add event handlers and styles to
> //your node.
> onCreateLabel: function(label, node){
> label.id = node.id; label.innerHTML = node.name;
> label.onclick = function(){
> st.onClick(node.id);
> };
> //set label styles
> var style = label.style;
> style.width = 40 + 'px';
> style.height = 17 + 'px'; style.cursor = 'pointer';
> style.color = '#fff';
> //style.backgroundColor = '#1a1a1a';
> style.fontSize = '0.8em';
> style.textAlign= 'center';
> style.textDecoration = 'underline';
> style.paddingTop = '3px';
> },
> });
> //load json data
> st.loadJSON(eval( '(' + json + ')' ));
> //compute node positions and layout
> st.compute();
> //emulate a click on the root node.
> st.onClick(st.root);
> //end
> }
>
> Based on the CKEditor template and this minimal approach, here is my RAP
> Code:
>
> SpaceTree.java
> @SuppressWarnings("serial")
> public class SpaceTree extends Composite {
>
> private static final String RESOURCES_PATH = "resource/";
> private static final String REGISTER_PATH = "jitjs/";
>
> private static final Logger LOG = LoggerFactory
> .getLogger(WorkbenchUtil.DEFAULT_LOGGER);
>
> private static final String[] RESOURCE_FILES = { "jit.js",
> "jit-yc.js",
> "handler.js" };
>
> private static final String REMOTE_TYPE = "spaceTree";
>
> private final RemoteObject remoteObject;
>
> private final OperationHandler operationHandler = new
> AbstractOperationHandler() {
>
> };
>
> public SpaceTree(Composite parent, int style) {
> super(parent, style);
> registerResources();
> loadJavaScript();
> Connection connection = RWT.getUISession().getConnection();
> remoteObject = connection.createRemoteObject(REMOTE_TYPE);
> remoteObject.setHandler(operationHandler);
> remoteObject.set("parent", WidgetUtil.getId(this));
> }
>
> private void loadJavaScript() {
> JavaScriptLoader jsLoader = RWT.getClient().getService(
> JavaScriptLoader.class);
> ResourceManager resourceManager = RWT.getResourceManager();
> jsLoader.require(resourceManager.getLocation(REGISTER_PATH
> + "handler.js"));
> jsLoader.require(resourceManager.getLocation(REGISTER_PATH +
> "jit.js"));
> jsLoader.require(resourceManager.getLocation(REGISTER_PATH +
> "jit-yc.js"));
>
> }
>
> private void registerResources() {
> ResourceManager resourceManager = RWT.getResourceManager();
> boolean isRegistered = resourceManager.isRegistered(REGISTER_PATH
> + RESOURCE_FILES[0]);
> if (!isRegistered) {
> try {
> for (String fileName : RESOURCE_FILES) {
> register(resourceManager, fileName);
> }
> } catch (IOException ioe) {
> throw new IllegalArgumentException("Failed to load
> resources",
> ioe);
> }
> }
> }
>
> private void register(ResourceManager resourceManager, String
> fileName)
> throws IOException {
> ClassLoader classLoader = SpaceTree.class.getClassLoader();
> InputStream inputStream = classLoader
> .getResourceAsStream(RESOURCES_PATH + fileName);
> try {
> resourceManager.register(REGISTER_PATH + fileName,
> inputStream);
> LOG.debug("registered: " + fileName);
> } finally {
> inputStream.close();
> }
> }
>
> // //////////////////
> // overwrite methods
>
> @Override
> public void setLayout(Layout layout) {
> throw new UnsupportedOperationException(
> "Cannot change internal layout of SpaceTree");
> }
>
> @Override
> public void dispose() {
> remoteObject.destroy();
> super.dispose();
> }
>
> }
>
>
> handler.js
> (function(){
> 'use strict';
> rap.registerTypeHandler( "spaceTree", {
> factory : function(properties) {
> return new spaceTree( properties );
> },
>
> } );
>
> spaceTree = function(properties) {
>
> this.parent = rap.getObject(properties.parent);
> this.element = document.createElement("div");
> var onRender = function() {
> if( element.parentNode ) {
> rap.off( "render", onRender );
> init();
> }
> };
> parent.append( element );
> rap.on( "render", onRender );
> };
>
>
>
> function init(){
> //init data
> var json = "{id:\"node02\", name:\"Phenazone\", data:{}}";
> //end
> //A client-side tree generator
> var getTree = (function() {
> var i = 0;
> return function(nodeId, level) {
> var subtree = eval('(' +
> json.replace(/id:\"([a-zA-Z0-9]+)\"/g, function(all, match) {
> return "id:\"" + match + "_" + i + "\"" }) + ')');
> $jit.json.prune(subtree, level); i++;
> return {
> 'id': nodeId,
> 'children': subtree.children
> };
> };
> })();
> //Implement a node rendering function called 'nodeline' that plots a
> straight line
> //when contracting or expanding a subtree.
> $jit.ST.Plot.NodeTypes.implement({
> 'nodeline': {
> 'render': function(node, canvas, animating) {
> if(animating === 'expand' || animating === 'contract') {
> var pos = node.pos.getc(true), nconfig = this.node,
> data = node.data;
> var width = nconfig.width, height = nconfig.height;
> var algnPos = this.getAlignedPos(pos, width, height);
> var ctx = canvas.getCtx(), ort = this.config.orientation;
> ctx.beginPath();
> if(ort == 'left' || ort == 'right') {
> ctx.moveTo(algnPos.x, algnPos.y + height / 2);
> ctx.lineTo(algnPos.x + width, algnPos.y + height /
> 2);
> } else {
> ctx.moveTo(algnPos.x + width / 2, algnPos.y);
> ctx.lineTo(algnPos.x + width / 2, algnPos.y +
> height);
> }
> ctx.stroke();
> } }
> }
> });
>
> //init Spacetree
> var id = this.element.getAttribute("id");
> //Create a new ST instance
> var st = new $jit.ST({
> 'injectInto': id,
> //set duration for the animation
> duration: 800,
> //set animation transition type
> transition: $jit.Trans.Quart.easeInOut,
> //set distance between node and its children
> levelDistance: 50,
> //set max levels to show. Useful when used with
> //the request method for requesting trees of specific depth
> levelsToShow: 2,
> //set node and edge styles
> //set overridable=true for styling individual
> //nodes or edges
> Node: {
> height: 20,
> width: 40,
> //use a custom
> //node rendering function
> type: 'nodeline',
> color:'#23A4FF',
> lineWidth: 2,
> align:"center",
> overridable: true
> },
> Edge: {
> type: 'bezier',
> lineWidth: 2,
> color:'#23A4FF',
> overridable: true
> },
> //This method is called on DOM label creation.
> //Use this method to add event handlers and styles to
> //your node.
> onCreateLabel: function(label, node){
> label.id = node.id; label.innerHTML = node.name;
> label.onclick = function(){
> st.onClick(node.id);
> };
> //set label styles
> var style = label.style;
> style.width = 40 + 'px';
> style.height = 17 + 'px'; style.cursor = 'pointer';
> style.color = '#fff';
> //style.backgroundColor = '#1a1a1a';
> style.fontSize = '0.8em';
> style.textAlign= 'center';
> style.textDecoration = 'underline';
> style.paddingTop = '3px';
> },
> });
> //load json data
> st.loadJSON(eval( '(' + json + ')' ));
> //compute node positions and layout
> st.compute();
> //emulate a click on the root node.
> st.onClick(st.root);
> //end
> }
>
> }());
>
> When i add an Instance of SpaceTree to my RAP Application, i am running
> into an endless loop and in the FireFox Console i get the Following errors:
>
> GET http://localhost:8888/daios/rwt-resources/jitjs/handler.js [HTTP/1.1
> 200 OK 1ms]
> 11:38:01.052 ReferenceError: assignment to undeclared variable spaceTree
> handler.js:10
> 11:38:01.105 GET http://localhost:8888/daios/rwt-resources/jitjs/jit.js
> [HTTP/1.1 200 OK 6ms]
> 11:38:01.106 GET
> http://localhost:8888/daios/rwt-resources/jitjs/jit-yc.js [HTTP/1.1 200
> OK 4ms]
> 11:38:01.175 Error: Operation "create" on target "r183" of type "null"
> failed:
> spaceTree is not defined
> Properties: parent = w182
>
> If i am not using strict mode, i get the following errors:
>
> Error: Operation "create" on target "r183" of type "null" failed:
> element is not defined
> Properties: parent = w182
>
> I believe there is something wrong with my JavaScript Code? Any help is
> appreciated. If you need further Information, please feel free to ask
--
Tim Buschtöns
Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/
Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
|
|
| | | |
Goto Forum:
Current Time: Fri Apr 19 03:23:02 GMT 2024
Powered by FUDForum. Page generated in 0.02032 seconds |
] 
Search
Help
Register
Login
Home
