Using external javascript code to add effects to a GWT generated page
I am trying to add an external javascript code to add some effects to the gwt generated part of the page.
I was provided with some static html/css from the designer, and it uses javascript to add the desired effects to the page.
Our app uses MVP architecture as described on the official GWT pages, so for the initial test I just put the static html into an UiBinder xml file of a desired view. The output was nice, and the page looked the same as the provided one when opened in the browser. The only problem is that the javascript effects don't work.
Specifically, it is the accordion effect of the Rico framework. When a mouse is over a list element, it should change colour. And when a user clicks on the list element, it expands to show more details (like a tree widget).
The script inclusion in the module's host page looks like this:
<head>
...
<script src="javascript/rico.js" type="text/javascript"></script>
<script type='text/javascript'>
Rico.loadModule('Accordion');
Rico.onLoad( function() {
new Rico.Accordion( $$('div.panelheader'), $$('div.panelContent'),
{panelHeight:66, hoverClass: 'md开发者_StackOverflowHover', selectedClass: 'mdSelected'});
});
</script>
...
</head>
All of the .js files that were provided by the designer are in the war/javascript folder, and when inspected in firebug (in both development mode and tomcat deployed), the browser seems to see those files. I can click on the src="../...js" and the browser does open the correct files.
Where could the problem be? Since the static page works and the effects are visible, i suppose the problem was in the merge with the GWT. Did I do something wrong with the inclusion, or is the external javascript having problem with accesing the gwt generated parts of the page?
In such cases I go the other way round - I call a JS function defined in the host page (just wrap what you have in the <script> tags in a function) from my GWT code via JSNI function (usually in onModuleLoad). The JSNI function would look something like this:
public final native void initRico() /*-{
$wnd.ricoInitFunction();
}-*/;
Oh, and are you sure that $$('div.panelheader') actually gets that element? If you are using UiBinder and define styles in <ui:style> tags, then they will get obfuscated (<ui:style> is converted to a CssResource at compile time). If you want to be sure you are using the right elements, you can easily pass a GWT Widget to your init function - just use the getElement() method:
public final native void initRico(Element e1, Element e2) /*-{
$wnd.ricoInitFunction(e1, e2);
}-*/;
// The actual call would then look like this:
initRico(widget1.getElement(), widget2.getElement());
Then use those elements in your code:
function ricoInitFunction(e1, e2) {
Rico.loadModule('Accordion');
Rico.onLoad( function() {
new Rico.Accordion( $$(e1), $$(e2),
{panelHeight:66, hoverClass: 'mdHover', selectedClass: 'mdSelected'});
});
}
Either way, you shouldn't try to "query" the elements you need, you should keep track of them as Widgets. Use the OO facilities that Java provides - that's one of the main reasons I use GWT :)
加载中,请稍侯......
精彩评论