Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    SVG & JavaScript Integration with SmartGWT

    Hello,

    I'm trying to integrate a viewer tool that has been developed separately using javascript that maniplutaes SVG components. I've attached a sample .xhtml file that can be played around with. The extension must be changed to .xhtml (I could only upload a .html file).

    Two things I would like to do:

    1. Display the output of the javascript within the <body> tags in a page containing SmartGWT widgets.
    2. Be able to call functions from within the viewer i.e. functions like makeText() with parameters from a Datasource (e.g. when someone selects a ListGrid row).

    How can this best be achieved?

    I have tried the following:

    Create a HTMLFlow object, insert all of the code between <body> tags and tried calling makeText() using JSNI on my client page. Now, when I examine my html page, the <div id="svgdiv"> exists but I can't call any functions, "makeText() is not defined" is the error I get and so I can't make the viewer display.

    Is there any easy way to achieve both aims above? Am I trying the wrong approach?

    The idea of having a separate file with this viewer code is that it can be updated easily (by simply replacing the file with the viewer code) because we maintain the same interface functions.

    This is giving me real headache, please help!! My decision to buy a pro license depends if this functionality is possible.
    Attached Files

    #2
    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.

    Comment


      #3
      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?

      Comment


        #4
        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.

        Comment


          #5
          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/

          Comment


            #6
            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.

            Comment

            Working...
            X