In this 3 part of jsni we will see some more parts of java Script native interface. As we have seen in out previous blogs how to access a java script function written in Html page from out Gwt code. So see some more complex examples,
We can even assign a value to the existing field in the Html page , consider the sample code,
I have just placed a input element in html page
<input type="text" name=firstName value="Click Me"/>
So now from my Gwt application , I can assign the value for the “firstName” element by using
public native static void setValue(String s)/*-{
$wnd.firstName.value=s;
}-*/;
Some times we need to include a 3rd party java script file into out application.The easiest way would be to use the application .Gwt.xml .We can use
What happens when we include a 3rd party java script file into our module tag.This indicates the Gwt compiler that the file should be loaded before the application get started.The file is to be placed inside the public package.
Lets create a sample example as how to access a 3rd party java script library
Lets say we have written a java script file called “Script.js” .the contents will very simple
function alertBuddy(){
alert("This Is A Call From Gwt");
}
Save this as “Script.js” and save the file in public package
So now we are going to access the java Script functions that are defined in other Script file and we are going to access them from out Gwt Code.
Include the above <Script> code in your application .gwt.xml file.
The src tag is self-explanatory. It tells the location of the JavaScript file. This code is a java script written in Jsni code. This return “true” if the file loaded correctly or false if not.Even though we can include the src file in the plain html file, but we want the script to be loaded and work by the single threaded java script interpreter.
So now in out Gwt application we can call the function defined in our “Script.js” file like
public class JsniApplication implements EntryPoint {
public void onModuleLoad() {
RootPanel.get().add(new Button("Click Me", new ClickListener() {
public void onClick(Widget sender) {
callMe();
}
}));
}//Close of OnModuleLoad()
public native static void callMe()/*-{
$wnd.alertBuddy();
}-*/;
}
U can see I have just written a jsni method to call the function I have written.
Now we be looking at the magic Overlay Types . There is an object called “JavaScriptObject” in Gwt which helps to represent as a form java Object.Many times wee need to include java script methods deeply to interact with the data. Some times it becomes more complicate, so we need a Object which interacts with the Java script object and should be usefull as a java Object . JavaScriptObject gives us the flexiablilty.
An Overlay Type is defined as a sub-class of JavaScriptObjecct.An Overlay type can be describes as a Java Object overlaying on the Java Script Object.
Restriction’s of an OverLay Type
All Methods in a overlay type should be final or a member of a final class or private , since these methods should not be overridden.
Overlay types cannot implement interfaces that define methods.
Overlay types cannot have instance methods or instance fields.
Should contain a protected, zero-args constructor. This constructor should be empty.
New Keyword cannot be used with overlay types.This eliminates creating a new Instance using the new Keyword. A new Instance can only be generated from the jsni.
Now lets check a sample code of accessing a json data from java script using Overlay types,
Iam creating a OverLay Object called “person”.here is how Person class looks
public class Person extends JavaScriptObject {
protected Person(){
}
public native final String getFirstName()
/*-{
return this.firstName;
}-*/;
public native final String getLastName()
/*-{
return this.lastName;
}-*/;
}
Now in out Application.html file , create a script tag and place the
Array as follows.
<script type="text/javascript">
var jsonData = [
{ "firstName" : "Jimmy", "lastName" : "Webber" }
];
</script>
This is an example of json data . iam now returning a json object containing both “firstName” and “lastName”.In my Application.java class looks like this ,
public class Application implements EntryPoint {
//OnModuleLoad
public void onModuleLoad() {
RootPanel.get().add(new Button("Click Me", new ClickListener() {
public void onClick(Widget sender) {
Person p=getPersonData();
Window.alert(p.getFirstName());
}
}));
}//OnModuleLoad()
public static native Person getPersonData()/*-{
return $wnd.jsonData[0];
}-*/;
}
Hi by this I complete the basics of jsni part , you can get more information about jsni from gwt Official Site.
No comments :
Post a Comment