Announcement

**Isomorphic** · 28 Jul 2010, 13:10

Are you using contentsType:"page" or "fragment"?

With "page" you are in a different frame entirely, hence a different JavaScript VM. To talk back and forth with the main page, you would need to write browser-specific code to traverse the frame boundary (use Google to find out what this is like - nothing to do with SmartGWT).

With "fragment" you should not be returning <html> or <body> tags. You're in the same page, but in JSNI, if you're calling a function that you've made global, you'll need to use $wnd.makeText() for example. Here again, not something unique to SmartGWT but GWT in general, and Googling would help.

**salman** · 29 Jul 2010, 06:04

OK so the default contentsType for HTMLFlow is "fragment" but I set it explicitly anyway. Here's what I do:

1. Create the <SVG> tag in the HTMLFlow object
2. Shift the Javascript used to build the image into the head of my html file (function makeText())
3. Using JSNI to call function makeText()

My html page:

Code:

<head>
.......
   <script>    
	var svgns = "http://www.w3.org/2000/svg";

	function makeText(doc,element,x,y,id,cssclass,anchor,text){
			var t0 = doc.createElementNS(svgns, "text");
			t0.setAttribute("x", x);
			t0.setAttribute("y", y);
			t0.setAttribute("text-anchor", anchor);
			t0.setAttribute("id", id);
			t0.setAttribute("class", cssclass);
			t0.appendChild(document.createTextNode(text ));
			element.appendChild(t0);
			return t0;
	}

   </script>

   <script> var isomorphicDir = "xi/sc/"; </script>
	
   <script type="text/javascript" language="javascript" src="xi/xi.nocache.js"></script>
       
</head>

SmartGWT code:

Code:

	    final Canvas canvas = new Canvas();
		
	    final HTMLFlow htmlFlow = new HTMLFlow();
	    htmlFlow.setContentsType(ContentsType.FRAGMENT);
	    htmlFlow.setShowEdges(true);
	    htmlFlow.setHeight(500);
	    htmlFlow.setWidth(900);
	    
	    // If the svg tags are surrounded by text, that text appears
	    htmlFlow.setContents("<svg xmlns=\"http://www.w3.org/2000/svg\" id=\"svgelement\" width=\"2000\" height=\"2000 \"></svg>");

	    // IButton used to called JSNI funtion
	    IButton test = new IButton("test");
	    test.addClickHandler(new ClickHandler() {
			
			public void onClick(ClickEvent event) {
				build();
			}

		});

	    // Add contents
	    canvas.addChild(htmlFlow);
	    this.addMember(canvas);
	    this.addMember(test);
	    this.addMember(tabSet);

JSNI method called to populate the SVG element

Code:

	private native String build() /*-{
		var e = $doc.getElementById("svgelement");
		//$wnd.alert(e.innerHTML);
      		
		$wnd.makeText($doc, e, 200, 100, "textid", "textclass", "middle","Hello, world!");
		//$wnd.alert(e.innerHTML);
         
	}-*/;

Now the svg tag is present in the underlying html. but its contents are never drawn .

Should I be using something like com.smartgwt.client.widgets.plugins.SVG (have tried and failed)?. Is HTMLFlow designed to handle svg?

**Isomorphic** · 29 Jul 2010, 09:06

HTMLFlow does a simple DOM insertion. What we'd recommend is to just use GWT's low-level direct DOM insertion APIs to get the SVG tag into the DOM. That way you can eliminate the SmartGWT's relatively trivial involvement in this scenario (again, just a DOM insertion), because really, whatever is going wrong likely has to do with this third party library and how it expects to be loaded, what DOCTYPE it expects, etc, so you are probably on the wrong forum.

**salman** · 9 Aug 2010, 03:05

Originally posted by Isomorphic

HTMLFlow does a simple DOM insertion. What we'd recommend is to just use GWT's low-level direct DOM insertion APIs to get the SVG tag into the DOM. That way you can eliminate the SmartGWT's relatively trivial involvement in this scenario (again, just a DOM insertion), because really, whatever is going wrong likely has to do with this third party library and how it expects to be loaded, what DOCTYPE it expects, etc, so you are probably on the wrong forum.

OK, I understand it's to do with xhtml and the underlying GWT framework. Got my wires crossed because on sjivan's blog he mentions a new feature "Browser Plugins as widgets - SVG widget" for SmartGWT 2.1

And I'm not sure what he meant by this: http://www.jroller.com/sjivan/

**Isomorphic** · 9 Aug 2010, 06:44

The SVG component implements a container for static SVG documents - it doesn't really relate to a third party library which appears to have specific needs about when SVG elements exist, and where in the DOM they are.

Announcement

SVG & JavaScript Integration with SmartGWT

Comment

Comment

Comment

Comment

Comment