Re: Problems using native JavaScript library (Snap)
These two examples work like hell! :-) It would be of great help if you could debug JS code somehow... Especially for future problems with SVG topics. Magnus -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscr...@googlegroups.com. To post to this group, send email to google-web-toolkit@googlegroups.com. Visit this group at http://groups.google.com/group/google-web-toolkit. For more options, visit https://groups.google.com/d/optout.
Re: Problems using native JavaScript library (Snap)
The following approaches work:
public class SnapSvgWidget extends Widget {
public SnapSvgWidget() {
setElement(Document.get().createDivElement());
drawExample(getElement());
}
private native void drawExample(Element container) /*-{ var paper =
$wnd.Snap(400,400) var circle = paper.circle(50,50,40) // paper is
not a DOM element. The svg DOM element is stored in paper.node
container.appendChild(paper.node)}-*/;
}
public class SnapSvgWidget2 extends Widget {
public SnapSvgWidget2() {
setElement(createSvgElement());
drawExample(getElement());
}
private native void drawExample(Element container) /*-{ var paper =
$wnd.Snap(container) var circle = paper.circle(50,50,40)}-*/;
private native Element createSvgElement() /*-{ return
$doc.createElementNS(http://www.w3.org/2000/svg;, svg);}-*/;
}
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.
Re: Problems using native JavaScript library (Snap)
Any idea how to solve this? An attempt was made to reference a Node in a context where it does not exist. I receive this message whenever I try to connect the svg element to a parent. Thanks Magnus -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscr...@googlegroups.com. To post to this group, send email to google-web-toolkit@googlegroups.com. Visit this group at http://groups.google.com/group/google-web-toolkit. For more options, visit https://groups.google.com/d/optout.
Re: Problems using native JavaScript library (Snap)
Code below is untested:
public class GraphicsWidget extends Widget
{
private static boolean injected = false;
public GraphicsWidget()
{
if (!injected)
{
MyGraphics.injectSnap ();
injected = true;
}
// set empty div as widget element:
Element e = Document.get().*createElement(svg); // Snap() needs a svg
element, see docs.*
setElement(e);
}
public void test () // called from Dialog Box
{
Element e = getElement();
testLib(e);
}
private native void testLib (Element container)
/*-{
var s = $wnd.Snap (container); *// should work now*
var c = s.circle (150,150,100);
}-*/;
}
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
Re: Problems using native JavaScript library (Snap)
On Wednesday, March 5, 2014 10:19:51 AM UTC+1, Jens wrote: // set empty div as widget element: Element e = Document.get().*createElement(svg); // Snap() needs a svg element, see docs.* *Yes, one overloaded method expects a svg element. I also tested this, but...* var s = $wnd.Snap (container); *// should work now* var c = s.circle (150,150,100); *Object [object Object] has no method 'circle'* It seems that the existing svg element is not recognized by the Snap constructor. This was also noticed herehttp://stackoverflow.com/questions/20045532/snap-svg-cant-find-dynamically-and-successfully-appended-svg-element-with-jqu, but the solution (adding more attributes to the element) did not make a change. Magnus -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscr...@googlegroups.com. To post to this group, send email to google-web-toolkit@googlegroups.com. Visit this group at http://groups.google.com/group/google-web-toolkit. For more options, visit https://groups.google.com/groups/opt_out.
Re: Problems using native JavaScript library (Snap)
It seems that the existing svg element is not recognized by the Snap constructor. This was also noticed herehttp://stackoverflow.com/questions/20045532/snap-svg-cant-find-dynamically-and-successfully-appended-svg-element-with-jqu, but the solution (adding more attributes to the element) did not make a change. Oh I see.. didn't know the namespace thing. Well then either do what the solution on Stackoverflow suggests (I think GWT has not build-in createElementNS() method so you would create it in a custom JSNI method) or use a div for your widget and let Snap create the SVG element (and then append it to your widget's div) -- J. -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscr...@googlegroups.com. To post to this group, send email to google-web-toolkit@googlegroups.com. Visit this group at http://groups.google.com/group/google-web-toolkit. For more options, visit https://groups.google.com/groups/opt_out.
Re: Problems using native JavaScript library (Snap)
On Wednesday, March 5, 2014 7:56:45 PM UTC+1, Jens wrote:
It seems that the existing svg element is not recognized by the Snap
constructor.
This was also noticed
herehttp://stackoverflow.com/questions/20045532/snap-svg-cant-find-dynamically-and-successfully-appended-svg-element-with-jqu,
but the solution (adding more attributes to the element) did not make a
change.
Oh I see.. didn't know the namespace thing. Well then either do what the
solution on Stackoverflow suggests (I think GWT has not build-in
createElementNS() method so you would create it in a custom JSNI method)
I tried this (because of the suggestion):
Element e = Document.get().createElement(svg);
e.setAttribute (width,400);
e.setAttribute (height,400);
e.setAttribute (xmlns,http://www.w3.org/2000/svg;);
e.setAttribute (version,1.1);
setElement(e);
But the svg element wasn't recognized by Snap.
or use a div for your widget and let Snap create the SVG element (and
then append it to your widget's div)
This is what I would prefer:
private native void testLib (Element container)
/*-{
var s = $wnd.Snap (400,400);
var c = s.circle (150,150,100);
container.appendChild (s);
}-*/;
But this leads to:
An attempt was made to reference a Node in a context where
it does not exist.
Magnus
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
Re: Problems using native JavaScript library (Snap)
I find it very strange that you do not use $wnd.SVG() or $wnd.Snap(), but
just SVG() or Snap().
When injecting your script, make sure you inject it into the top window
(setWindow(ScriptInjector.TOP_WINDOW)), then reference your globals within
$wnd.
I suppose your errors come from using nodes cross-document (the container
in the top window, the SVG in the hidden iframe that sandboxes the GWT
compiled code)
On Tuesday, March 4, 2014 2:16:46 PM UTC+1, Magnus wrote:
Hi,
I am currently testing two SVG libraries for use within my GWT application:
- SVGJS (http://svgjs.com)
- SnapSVG (http://snapsvg.io)
The first one, SVGJS, is now working for me, following a good
explanationhttps://groups.google.com/d/msg/google-web-toolkit/JmJDMdZKVH0/GsjR6CSmkKIJin
this group (thanks to Jens).
The basic idea is to pass an existing DOM element as a container to a JSNI
method, which in turn passes this element to the library's SVG constructor:
private native void drawExample(Element container) /*-{ var draw =
SVG(container) draw.text('SVG.JS')}-*/;
This approach did not work for me with the other library, SnapSVG.
When I do exactly the same:
private native void drawExample(Element container) /*-{ var s =
Snap(container); var c = s.circle(150,150,150);}-*/;
Then I get the JavaScript error:
Object [object Object] has no method 'circle'
I assume that there is no suitable constructor so that s is null.
When I do this:
private native void drawExample(Element container) /*-{ var s =
Snap(400,400); var c = s.circle(150,150,150);
container.appendChild(s);}-*/;
Then I get the error:
An attempt was made to reference a Node in a context where it does not
exist.
Note that I am testing within a DialogBox and passing its getElement() as
container to the method above.
How can you connect the generated SVG object to a widget within a
DialogBox?
Thank you
Magnus
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
Re: Problems using native JavaScript library (Snap)
Hi Thomas! I find it very strange that you do not use $wnd.SVG() or $wnd.Snap(), but just SVG() or Snap(). When I use $wnd.Snap, I get: Object [object global] has no method 'Snap' And the first library (SVGJS) works without $wnd. I inject like this: LibraryBundle b = GWT.create (LibraryBundle.class); ScriptInjector.fromString (b.svgLib().getText()).inject(); When injecting your script, make sure you inject it into the top window (setWindow(ScriptInjector.TOP_WINDOW)), then reference your globals within $wnd. How exactly would you modify the injection code above? (How does setWindow influence where the code gets injected?) I suppose your errors come from using nodes cross-document (the container in the top window, the SVG in the hidden iframe that sandboxes the GWT compiled code) How can I verify (with Chrome inspector) where the code gets injected? And can I debug JS inline code somehow? Thanks Magnus -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscr...@googlegroups.com. To post to this group, send email to google-web-toolkit@googlegroups.com. Visit this group at http://groups.google.com/group/google-web-toolkit. For more options, visit https://groups.google.com/groups/opt_out.
Re: Problems using native JavaScript library (Snap)
When I use $wnd.Snap, I get: Object [object global] has no method 'Snap' And the first library (SVGJS) works without $wnd. I inject like this: LibraryBundle b = GWT.create (LibraryBundle.class); ScriptInjector.fromString (b.svgLib().getText()).inject(); If you use $wnd you MUST inject into the top level window, so you have to change your injection as well by calling setWindow(ScriptInjector.TOP_WINDOW). When injecting your script, make sure you inject it into the top window (setWindow(ScriptInjector.TOP_WINDOW)), then reference your globals within $wnd. How exactly would you modify the injection code above? Ehh...by calling setWindow() as already mentioned? (How does setWindow influence where the code gets injected?) By default ScriptInjector uses the JS object window to inject your code. When inside an iframe window points to the iframe window, so code gets injected into the iframe. When you tell ScriptInjector to inject into the top window it will use GWT's special JS variable $wnd which always points to the top level window. I suppose your errors come from using nodes cross-document (the container in the top window, the SVG in the hidden iframe that sandboxes the GWT compiled code) How can I verify (with Chrome inspector) where the code gets injected? ScriptInjector removes the script tag it has injected automatically to keep the DOM smaller. To see the script tag you need to call setRemoveTag(false). Then take a look at the script tags of the top level document or GWT's iframe (the one having an id assigned matching your module name). -- J. -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscr...@googlegroups.com. To post to this group, send email to google-web-toolkit@googlegroups.com. Visit this group at http://groups.google.com/group/google-web-toolkit. For more options, visit https://groups.google.com/groups/opt_out.
Re: Problems using native JavaScript library (Snap)
On Tuesday, March 4, 2014 5:55:35 PM UTC+1, Jens wrote: When injecting your script, make sure you inject it into the top window (setWindow(ScriptInjector.TOP_WINDOW)), then reference your globals within $wnd. How exactly would you modify the injection code above? Ehh...by calling setWindow() as already mentioned? I was wondering which class setWindow belongs to. It's FromString. (How does setWindow influence where the code gets injected?) By default ScriptInjector uses the JS object window to inject your code. When inside an iframe window points to the iframe window, so code gets injected into the iframe. I was calling the inject code from within the constructor of my SnapWidget, which is a Widget. When you tell ScriptInjector to inject into the top window it will use GWT's special JS variable $wnd which always points to the top level window. Ok! Magnus -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscr...@googlegroups.com. To post to this group, send email to google-web-toolkit@googlegroups.com. Visit this group at http://groups.google.com/group/google-web-toolkit. For more options, visit https://groups.google.com/groups/opt_out.
Re: Problems using native JavaScript library (Snap)
Hi,
I modified the injection code like this:
class MyGraphics
{
...
public static void injectSnap ()
{
LibraryBundle b = GWT.create (LibraryBundle.class);
FromString f = ScriptInjector.fromString (b.srcSnap().getText());
f.setWindow (ScriptInjector.TOP_WINDOW);
f.inject();
}
}
Then, within my DialogBox I create a GraphicsWidget:
public class GraphicsWidget extends Widget
{
private static boolean injected = false;
public GraphicsWidget()
{
if (!injected)
{
MyGraphics.injectSnap ();
injected = true;
}
// set empty div as widget element:
Element e = Document.get().createDivElement();
setElement(e);
}
public void test () // called from Dialog Box
{
Element e = getElement();
testLib(e);
}
private native void testLib (Element container)
/*-{
//var s = $wnd.Snap (container); // does not work!
var s = $wnd.Snap (400,400);
var c = s.circle (150,150,100);
//container.appendChild (s); // does not work!
}-*/;
}
WhenI run this, I can see within chrome's inspector that a SVG tag is
created outside of the scope of the DialogBox/Widget:
https://lh3.googleusercontent.com/-1-nr1Dkb1MA/UxajnIc4w1I/AFs/N1-9ZGzZkdw/s1600/svg.png
I am still missing some code that connects the newly created svg element
to my widget.
The working code for the SVGJS library contains such a connection:
private native void testLib(Element container)
/*-{
var draw = SVG(container) // here we connect the SVG element to the
container element
var text = draw.text('SVG.JS').move(300, 0)
}-*/;
I am missing such a connection in the current example. It's because there
seems to be no matching constructor Snap(container). But I also cannot see
any equivalent statement.
Magnus
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
