Inject javascript in the UiBinder file

[Vikram Kohli]

Hi All,


I need to include a java script in my UiBinder composite view.I am preety new to GWT world. So following is what I have done so far to achieve this:-


1) Have put up an entry in my gwt module xml file

<script  src="js/anythingslider.js"></script>

2) Following is my Composite Code

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui">
	<ui:style>
		
	</ui:style>
	<g:ScrollPanel width="100%" height="100%">
		<g:HTMLPanel>
			<div id="wrapper_sec">
				<div id="masthead">


					<div id="banner">
						<div class="left">
							<div class="anythingSlider">

								<div class="wrapper">
									<ul>
										<li>
											<a >
												<img   />
											</a>
										</li>
										<li>
											<a >
												<img   />
											</a>
										</li>
										<li>
											<a >
												<img   />
											</a>
										</li>
									</ul>
								</div>

							</div>
						</div>



					</div>
				</div>




				<div class="clear"></div>
			</div>
		</g:HTMLPanel>
	</g:ScrollPanel>
</ui:UiBinder> 

3) Following code is there in my UiBinder corresponding java file

public class HomeView extends Composite implements Presenter{

	@Override
	protected void onAttach() {
		// TODO Auto-generated method stub
		super.onAttach();
		bind();
	}

	private static HomeViewUiBinder uiBinder = GWT
			.create(HomeViewUiBinder.class);

	private HandlerManager eventBus =null;

	interface HomeViewUiBinder extends UiBinder<Widget, HomeView> {
	}

	public HomeView() {
		initWidget(uiBinder.createAndBindUi(this));
	}

	@Override
	public void activated(Object... params) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void deactivated(Object... params) {
		// TODO Auto-generated method stub
		/*jhjh*/
	}

	@Override
	public void initalizeView(HandlerManager eventBus) {
		this.eventBus=eventBus;
		
	}
	
	private static native void bind() /*-{
	$(function() {

	$('.anythingSlider').anythingSlider({
		easing : "easeInOutExpo", // Anything other than "linear" or "swing"
									// requires the easing plugin
		autoPlay : true, // This turns off the entire FUNCTIONALY, not just
							// if it starts running or not.
		delay : 3000, // How long between slide transitions in AutoPlay mode
		startStopped : false, // If autoPlay is on, this can force it to start
								// stopped
		animationTime : 600, // How long the slide transition takes
		hashTags : true, // Should links change the hashtag in the URL?
		buildNavigation : true, // If true, builds and list of anchor links to
								// link to each slide
		pauseOnHover : true, // If true, and autoPlay is enabled, the show
								// will pause on hover
		startText : "Go", // Start text
		stopText : "Stop", // Stop text
		navigationFormatter : formatText
	// Details at the top of the file on this use (advanced use)
	});

	$("#slide-jump").click(function() {
		$('.anythingSlider').anythingSlider(6);
	});

	});
	}-*/;

}

4) And finally code in my javascript file

function formatText(index, panel) {
	return index + "";
}

$(function() {

	$('.anythingSlider').anythingSlider({
		easing : "easeInOutExpo", // Anything other than "linear" or "swing"
									// requires the easing plugin
		autoPlay : true, // This turns off the entire FUNCTIONALY, not just
							// if it starts running or not.
		delay : 3000, // How long between slide transitions in AutoPlay mode
		startStopped : false, // If autoPlay is on, this can force it to start
								// stopped
		animationTime : 600, // How long the slide transition takes
		hashTags : true, // Should links change the hashtag in the URL?
		buildNavigation : true, // If true, builds and list of anchor links to
								// link to each slide
		pauseOnHover : true, // If true, and autoPlay is enabled, the show
								// will pause on hover
		startText : "Go", // Start text
		stopText : "Stop", // Stop text
		navigationFormatter : formatText
	// Details at the top of the file on this use (advanced use)
	});

	$("#slide-jump").click(function() {
		$('.anythingSlider').anythingSlider(6);
	});

});

My Problem is still I ma getting the following error while running my GWT app. Please help to solve the issue
Caused by: com.google.gwt.core.client.JavaScriptException: (ReferenceError): '$' is undefined
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:237)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:132)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
at com.praclabs.client.view.HomeView.bind(HomeView.java)
at com.praclabs.client.view.HomeView.onAttach(HomeView.java:16)
at com.google.gwt.user.client.ui.Widget.setParent(Widget.java:470)
at com.google.gwt.user.client.ui.Panel.adopt(Panel.java:127)
at com.google.gwt.user.client.ui.LayoutPanel.insert(LayoutPanel.java:195)
at com.google.gwt.user.client.ui.LayoutPanel.add(LayoutPanel.java:134)
at com.praclabs.client.AppController.onValueChange(AppCon

Regards,
Vikram

[Benjamin Possolo]

the jquery object ($) is bound to the window object.

within JSNI methods, you access the window object via $wnd.

therefore to access the jquery object within a JSNI method you need to do:

$wnd.$('#someSelector')

or for clarity, access the jquery object by its long name:
$wnd.jQuery('#someSelector')

[Maneesh Godbole]

Welcome to the Ranch Benjamin!