During the Struts days, there was a library called DwR (Direct Web Remoting) that was popularly used to access the Java classes directly from JavaScript. DwR provided a JavaScript wrapper for the server side Java classes, so the code will look as if you’re directly calling the Java code from JavaScript.
A similar concept in Ext JS 4 is the Ext.direct pack. It provides you a facility to invoke the Java classes directly from Ext JS 4 code. There are multiple implementations of Ext direct available. One such implementation is DirectJNgine. DirectJNgine provides the infrastructure to invoke the Java classes directly from Ext JS 4 API.
A server side Java class “WeatherReporter” that can be invoked from client is shown below. It is decorated with the annotations provided by DirectJNgine.
package com.durasoft;
import com.softwarementors.extjs.djn.config.annotations.DirectAction;
import com.softwarementors.extjs.djn.config.annotations.DirectMethod;
@DirectAction(action="WeatherReporter")
public class WeatherReporter {
@DirectMethod
public String getTemperature(String city) {
return "Temperature of " + city + " is " + (Math.random()*100);
}
}
The Ext JS 4 code that is used to invoke WeatherReporter’s getTemperature method is shown below.
Ext.onReady(function(){
Ext.Direct.addProvider(
DuraSoft.direct.REMOTING_API
);
WeatherReporter.getTemperature(city,function(result){
alert(result);
});
});
There’s a JavaScript class WeatherReporter generated by the DirectJNgine facility. This class sends an AJAX request to a DirectJNgineServlet that actually invokes our Java class. The web.xml file is provided with all these configuration details.
The complete project created in Eclipse is available at http://durasoftindia.com/downloads/ExtDirect.rar
Came across an alpha version of a Google‘s open source project known as j2objc. This tool converts the Java code to Objective-C code targeting the iOS platform. There are plenty of language conversion tools that have been around for years. This one seems to be one of its kind as it targets the mobile platform. Not sure how successful this will be in terms of adoption, but looks interesting nevertheless.
You can get more details about this tool from https://code.google.com/p/j2objc/
There’s an interesting write-up on this tool in infoQ site as well.
Given below is an attempt at creating a jQuery plugin that displays a google map pointing out the current location of the user.
We’ve used HTML 5 Geo Location API to find out the coordinates (latitude and longitude) and pass them to the Google Map service which displays the map. The complete code has been bundled out as a jQuery plugin.
The HTML file is given below.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="jquery-maps.js"></script>
<script>
$().ready(function(){
$("#mapplaceholder").map();
});
</script>
</head>
<body>
<div id="mapplaceholder" style="width: 700px; height: 600px"></div>
</body>
</html>
The mapplaceholder element is passed as the input to the plugin method. Our map plugin method is present in jquery-maps.js. The jquery-maps.js file is shown below:
var mapObj = {
mapElement : "",
displayMap : function(){
var mpElement = this.mapElement;
navigator.geolocation.getCurrentPosition(function(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var googleMap = new google.maps.Map(mpElement,myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: googleMap,
title:"Welcome"
});
});
}
};
$.fn.map = function(){
mapObj.mapElement = document.getElementById("mapplaceholder");
$.getScript("http://maps.googleapis.com/maps/api/js?sensor=true&callback=mapObj.displayMap");
};
The mapObj object has the displayMap function which uses HTML5 geo location API and passes the coordinates to the Google maps API. In the map function we’ve used $.getScript to load the Google Maps script asynchronously. Notice the “callback=mapObj.displayMap” parameter in the query string. After loading the script the displayMap function is called automatically.
Yet another JavaScript library for mobile applications, KendoUI from Telerik has started making some noise. Few noticeable points, at a first glance about Kendo UI.
- Kendo UI provides widgets that can be used in web applications, pretty similar to jQuery UI. It looks like it’s more effective when used with ASP.NET applications.
- It provides a mobile framework that is very similar to jQuery Mobile.In fact, the examples shown in the documentation are very similar to jQuery Mobile.
- Kendo UI gives you an implementation of MVVM pattern akin to KnockOut.js.
Let me post a couple of examples after playing with it.