Code For Days

The JavaScript Native Interface (JSNI) in the Google Web Toolkit (GWT) allows you to use parts of the GWT application outside of the app, and also to use JavaScript that it not part of the GWT app. This tutorial will show you how to read in JavaScript variables set on the page, and how to call GWT functions from the html page.

Getting an external variable

Instead of making an RPC call to get a variable needed by the GWT application on the page it is possible to set a JavaScript variable to the needed data either statically or dynamically while the page is being generated with PHP or another server side language. This variable is then grabbed by a JSNI function and usable by GWT. The variable is set like normal in the HTML or in an external JavaScript file like this:

var first_name = “Frank”;

A native function can then pull grab this variable from within the GWT Java code.

public native String getFirstName()/*-{

return $wnd.first_name;

}-*/;

The native function is commented out in the Java code since it is JavaScript and not Java, but is called like a normal function in the rest of the code. $win represents the JavaScript Window object which is used here to reference our first_name variable on the page. The function will return the value of the first_name variable, and it can then be used in the GWT Java code like any other variable.

Calling a GWT function externally

Many times it is easier to call a normal JavaScript function to open a GWT popup or cause some other kind of result then it is to have GWT add buttons to the page to do this. This can be difficult since GWT will obfuscate the code and change the name of the functions making it very hard to call them externally. The solution is to use JSNI to create a JavaScript function inside of GWT with a name that will not change, and then have that function call the internal function whose name could be anything after compiling.

From inside GWT a JavaScript function can be created on the Window object which can then be called anywhere in the HTML page.

public class BlueApp implements EntryPoint {

public void onModuleLoad() {

setShowTrigger(this);

}

public void runApp() {

Window.alert(’I am a GWT function’);

}

public native void setShowTrigger(BlueApp x)/*-{

$wnd.showBlueApp = function () {

x.@com.company.client.BlueApp::runApp()();

};

}-*/;

}

When this module is loaded it creates a JavaScript function called showBlueApp(), and nothing else. This function can then be called from the HTML page and it will execute the runApp() GWT function. The runApp function is referenced in the JavaScript with its full path which includes the module name. The variable x is the class itself and is passed in using “this”. Once it is called the JavaScript alert will appear.
The showBlueApp function would then be called like any other JavaScript function from the HTML.

onclick=“showBlueApp()”

The FOR loop in Python can do a few more tricks then it can in other languages, and works in slightly different ways in what it pulls out depending on what object type you are looping on.

Looping on a String

x = “text”
for c in x:

print c

The Result:

t
e
x
t

The for loop loops over each character in the string and puts it in the c variable.

Looping on a list or tuple

Looping on a list or tuple is pretty standard, but can be done in two ways. You can go by the index number or you can let Python handle it.

Classic For Loop

myList = ["a","b","c"]
for i in range(0,len(myList)):

print myList[i]

Foreach Style

myList = ["a","b","c"]
for item in myList:

print item

Both of these have the same result, and just print out each list element.

Looping on a dictionary

Looping on a dictionary is a little different since we have a key for each element. When it is looped on the key is what is given, and if you want to access the actual value you need to use the key in the dictionary to get it out.

myDict = {}
myDict["first"] = “a”
myDict["second"] = “b”
myDict["third"] = “c”
for key in myDict:

print myDict[key]

Here is simple quick sort function written in Python to sort a list of numbers.

def qsort(toSort):

# return the list if only one is left
if len(toSort) < = 1:

return toSort

# set the value to pivot around
pivot = toSort[0] # initialize lists
less = []
greater = []
# sort the list
# skip the first value
for item in toSort[1:]:

if item < = pivot:

less.append(item)

else:

greater.append(item)

# recurse on both lists
r = qsort(less)
r.append(pivot)
r.extend(qsort(greater))
return r

# test
x = [1,99,7,0,7,7,7,99999,8,9,14,74,88]
print qsort(x)

This example is not very useful since python lists have a built in sort function, but should you have a list of tuples that you wanted to sort this function could very easily be modified to work with a value within the tuple that it pulls out instead of sorting by just the item itself.