Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
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 05:52 Go to next message
Tobias P. is currently offline 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 &quot;create&quot; on target &quot;r183&quot; of type [message #1231819 is a reply to message #1231769] Wed, 15 January 2014 08:27 Go to previous messageGo to next message
Tim Buschtoens is currently offline Tim Buschtoens
Messages: 382
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/
Re: Custom Widget: Operation "create" on target "r183" of type "null" [message #1231860 is a reply to message #1231769] Wed, 15 January 2014 10:22 Go to previous messageGo to next message
Tobias P. is currently offline Tobias P.
Messages: 43
Registered: April 2012
Member
Hello Tim,

I believe you are right. In the documentation of InfoVis i found the following:

injectInto	required (string|element) The id of the DOM container for the visualization.  It can also be an Element provided that it has an id.


Speaking of RAP, what is the right DOM container? As far as I understand that would be
element where

this.element = document.createElement( "div" ); ?

Thx in advance.

[Updated on: Wed, 15 January 2014 10:24]

Report message to a moderator

Re: Custom Widget: Operation &quot;create&quot; on target &quot;r183&quot; of type [message #1231870 is a reply to message #1231860] Wed, 15 January 2014 10:50 Go to previous messageGo to next message
Tim Buschtoens is currently offline Tim Buschtoens
Messages: 382
Registered: July 2009
Senior Member
I don't quite understand the question, RAP doesn't allow you to access
it's own DOM elements directly. You can only append DOM elements to a
Composite widget.

Am 15.01.2014 16:22, schrieb Tobias P.:
> Hello Tim,
>
> I believe you are right. In the documentation of InfoVis i found the
> following:
>
> injectInto required (string|element) The id of the DOM container for
> the visualization. It can also be an Element provided that it has an id.
>
> Speaking of RAP, what is the right DOM container?
>
> Thx in advance.

--
Tim Buschtöns

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
Re: Custom Widget: Operation "create" on target "r183" of type "null" [message #1234141 is a reply to message #1231769] Tue, 21 January 2014 05:28 Go to previous message
Tobias P. is currently offline Tobias P.
Messages: 43
Registered: April 2012
Member
Hello Tim,

yeah i was asking the same question. Solved the issue using the following:

bindAll(this, [ "onRender", "onReady", "layout", "onSend" ]);
		this.parent = rap.getObject(properties.parent);
		this.element = document.createElement("div");
		this.id = "div_" + new Date().getTime().toString();


and later on:

var st = new $jit.ST({
			'injectInto' : element.id,
Previous Topic:Browser control and tab sequencing
Next Topic:NullPointerException while loading multiple reqeusts
Goto Forum:
  


Current Time: Wed Aug 27 11:20:03 EDT 2014

Powered by FUDForum. Page generated in 0.02140 seconds