(1) 範例一:使用外部的javascript library 來做MD5
首先在html檔中引用javascript檔案:
然後定義一個新class,並利用JSNI宣告member function:
上面的程式碼將js的一個function包裝(warp)成一般的java function,這樣就可以用下列方式來存取:
(2) 範例二:Google Map - 使用外部的javascript library來建立user interface
同樣需要在HTML檔案中引用js檔:
建立新的widget,並記得要繼承HTML widget
首先在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&v=2&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);
}-*/;
}