GWT使用JSNI與外部javascript整合

(1) 範例一：使用外部的javascript library 來做MD5

首先在html檔中引用javascript檔案：

<script language="javascript" src="http://pajhome.org.uk/crypt/md5/md5.js">
</script>

然後定義一個新class，並利用JSNI宣告member function：

public class MD5 {

public native static String getHexHMACMD5(String password, String challenge )
/*-{

return hex_hmac_md5(password, challenge)

}-*/;

}

注意：JSNI語法要用/*- 以及 -*/ 包裝起來。
上面的程式碼將js的一個function包裝(warp)成一般的java function，這樣就可以用下列方式來存取：

String hash = MD5.getHexHMACMD5( password.getText(), challenge );

(2) 範例二：Google Map - 使用外部的javascript library來建立user interface

同樣需要在HTML檔案中引用js檔：

<script src="http://maps.google.com/
maps?file=api&amp;v=2&amp;key=ABQIAAAACeDba0As0X6mwbIbUYWv-RTbvLQlFZmc2N8bgWI8YDPp5FEVBQUnvmfInJbOoyS2v-
qkssc36Z5MA" type="text/javascript"></script>

建立新的widget，並記得要繼承HTML widget

public class GoogleMap extends HTML{

private static int nextId = 0;
private JavaScriptObject map;

public GoogleMap()
{

String id = "map"+(++nextId);
setStyleName("gwtapps-GoogleMap"); /* 設定對應的CSS */
setHTML("
"); /* google map 需要div element，並設定為自訂的ID */
RootPanel.get().add( this ); /* 取得預設的Root Panel，加入自己 */
map = initMap(id); /* 取得javascript的map object，之後可以用來呼叫其他API */

}

public void setCenter( final double lon, final double lat )
{

setCenterImpl( map, lon, lat );

}

private native static JavaScriptObject initMap( String id )
/*-{

var map = new $wnd.GMap2( $doc.getElementById(id) ); /* 初始化GMap時將自訂ID當成參數 */
return map;

}-*/;

private native static void setCenterImpl(JavaScriptObject map, double lon, double lat )
/*-{

map.setCenter(new $wnd.GLatLng(lon, lat), 13);

}-*/;

}