I have a peculiar issue right now that I hope someone can explain/help
me with.

I've altered my module's altering the raw entry-point HTML to include
jQuery, Flot (JS graphing library), and Processing.js.

In the HTML page, I add a <canvas> element and a couple of <div>'s in
order to work with these external libraries.

For example, I have a <div id="spectrum"> and from jQuery I call:

var plot = $.plot($("#spectrum"), [ getRandomData() ], options);

Now I'd like to move the <div> and <canvas> HTML into a composite
widget, and I'm finding that jQuery is no longer able to pick up on
the HTML that is generated via the composite.

The actual source contains the appropriate/correct code but it's
wrapped inside of a <div class="gwt-html"/>.  I think the true issue
deals with the order in which the widgets are rendered on the page;
i.e. Flot is loaded before/after the <div> is rendered and therefore
is "skipped", but I don't know for sure.  I've also tried appending
the Flot script directly to the DOM from my widget, but it still will
not render properly.

Does anyone have any ideas?  Please keep in mind that everything works
accordingly when jammed into the HTML directly (but this creates
positioning headaches).

Code:
SpectrumWidget.java
public class SpectrumWidget extends Composite {
        private FlowPanel       _fpContainer;
        private SafeHtml        _html;
        private HTMLPanel       _htmlContainer;

        public SpectrumWidget(String id, String width, String height) {

                _fpContainer = new FlowPanel();

                _html = new SafeHtml() {

                        @Override
                        public String asString() {
                                return getHtml("spectrum", "700px", "150px");
                        }
                };

                _htmlContainer = new HTMLPanel(_html);
                _htmlContainer.setWidth("770px");
                _htmlContainer.setHeight("200px");

//              _fpContainer.add(_html);
                _fpContainer.setHeight(height);
                _fpContainer.setWidth(width);
                Document doc = Document.get();
                ScriptElement script = doc.createScriptElement();
                script.setSrc(GWT.getModuleBaseURL() + "js/jquery.flot.js" );
                script.setType("text/javascript");
                doc.getBody().appendChild(script);
                _fpContainer.getElement().setId("spectrum");

//              initWidget(_fpContainer);
                initWidget(_htmlContainer);
        }
        private String getHtml(String id, String width, String height) {
                String html;

                html = "<div id='" + id + "'></div>";

                return html;

        }
}



Thanks.

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Reply via email to