Java Beans dot Asia - javascript category

Enriching Rich Internet Applications with rule-based reasoning

Mon, 22 Feb 2010 14:00:00 GMT

I came across a Firefox Add-On today by Matthias Tylkowski, that lets user to modify the browser view of his/her preferred web pages. For example, user can modify the appearance of cnn.com to suit his/her needs.

The add-on or the web rules is a JSON-based rule language, where each rule is a JSON object. In addition, Javascript is used for method calls. The web rules use Drools-like condition language:

{"id":"rule101",
  "appliesTo": [
       "http://www.cnn.com"
     ],
 "condition":
  "$X:Element( class == 'note',
               $Y:firstChild
             )
             &&
             ($Y.nodeName == 'ul')",
 "actions":[
  "changeBackground($Y, 'blue')"
   ]
 }

For all elements of class note having as first child an ul, change the first child background color to blue.

I think its a quite cool add-on.

Resources:
JSON Rules

Social Bookmarks :

Related Posts
There are no related posts for this blog entry

Redefining web applications with AJAX, Servlets and JSON

Sun, 13 Sep 2009 04:00:00 GMT

In this article I would like to show how JSON (JavaScript Object Notation) and Java servlet can be used together in a little AJAX (Asynchronous JavaScript and XML) application.

To give brief description to those who are not closely familiar with JSON -
JSON is a lightweight syntax for representing data, which makes working with it much more pleasant than with XML and makes AJAX applications faster. Also, when working with JSON, there is no need for an XML parsing.

In the following example, I am going to create a callback servlet that fetches and parses an RSS feed. Then the parsed feed data is passed to the client side in a form of JSON. The data then formatted and presented to the user. The client uses AJAX call to query the servlet.

For this application, I used three third-party libraries:

JSON library provided by JSON.org and extended by JSON-RPC-Java which allows to create and easily parse JSON data through Java code. This library can run in a Servlet container such as Tomcat, JBoss and other J2EE Application servers.
Project ROME
ROME is an set of open source Java tools for parsing, generating and publishing RSS and Atom feeds.
JDOM XML parser
JDOM is a Java-based "document object model" for XML files. JDOM serves the same purpose as DOM, but is easier to use

The libraries are included in the source code which accompanies this article. This application example is also included as a WAR archive, ready to be deployed on Tomcat.

The following is my servlet implementation. The servlet fetches and parses feed data. The JSON library mentioned previously allows me easily to create and populate JSON object.

package asia.javabeans.json;

import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONObject;

import com.sun.syndication.feed.synd.SyndEntry;
import com.sun.syndication.feed.synd.SyndFeed;
import com.sun.syndication.fetcher.FeedFetcher;
import com.sun.syndication.fetcher.FetcherException;
import com.sun.syndication.fetcher.impl.FeedFetcherCache;
import 
com.sun.syndication.fetcher.impl.HashMapFeedInfoCache;
import com.sun.syndication.fetcher.impl.HttpURLFeedFetcher;
import com.sun.syndication.io.FeedException;

/**
 * @author Alexander Zagniotov (http://javabeans.asia)
 * 
 */
public class JsonServlet extends HttpServlet {

private static final long serialVersionUID = 1L;
private static final String BLOG_URL = 
		"http://javabeans.asia/rss.xml";
private static final String CONTENT_TYPE = 
			"application/json";
private FeedFetcherCache feedInfoCache = null;
private FeedFetcher feedFetcher = null;

public void init(ServletConfig config) 
			throws ServletException {
	super.init(config);

	feedInfoCache = 
		HashMapFeedInfoCache.getInstance();
	feedFetcher = 
		new HttpURLFeedFetcher(feedInfoCache);
}

public void doGet(HttpServletRequest request, 
			HttpServletResponse response)
		throws ServletException, IOException {

	SyndFeed feed = this.feedFethcer(BLOG_URL);

  if (feed != null) {
	String json = this.feedToJSON(feed);
	response.setContentType(CONTENT_TYPE);
	response.setHeader("Cache-Control", "no-cache");
	response.getWriter().write(json);
  } 
}

private SyndFeed feedFethcer(String url) {
	SyndFeed feed = null;
	try {
		feed = feedFetcher.retrieveFeed(
		new URL(BLOG_URL));
	} catch (IllegalArgumentException e) {
		e.printStackTrace();
	} catch (FeedException e) {
		e.printStackTrace();
	} catch (FetcherException e) {
		e.printStackTrace();
	} catch (MalformedURLException e) {
		e.printStackTrace();
	} catch (IOException e) {
		e.printStackTrace();
	}

	return feed;
}

private String feedToJSON(SyndFeed feed) {

	JSONObject jsonObj = new JSONObject();
	JSONArray jsonEntryTitles = new JSONArray();

	jsonObj.put("blogtitle", feed.getTitle());
	jsonObj.put("blogdescription", feed.getDescription());
	jsonObj.put("bloglanguage", feed.getLanguage());
	jsonObj.put("bloglink", feed.getLink());
	jsonObj.put("author", feed.getCopyright());

	List<?> feedEntries = feed.getEntries();

	for (Object c : feedEntries) {
	     SyndEntry syndicateEntry = (SyndEntry) c;
	     jsonEntryTitles.put(syndicateEntry.getTitle());
	}

	jsonObj.put("blogentrytitles", jsonEntryTitles);
	return jsonObj.toString();
  }
}

As you can see it is very easy to construct JSON objects and arrays on the server side and pass them to the client. For the purpose of this example I am getting my data from RSS feed, but the data can also be coming from DB etc.

The following is my client implementation. The client queries the servlet using AJAX call. When an AJAX call returns a response from the servlet in a form of JSON object, the object data is formatted and information about the RSS feed is presented to the client:

<html>
<head>

<title>Java Beans dot Asia</title>

<script language="JavaScript" type="text/javascript">
		
	var httpRequest = null;
	
function getDescriptionAsJSON() {

	var description = 
		document.getElementById('description');
	description.innerHTML = "Loading, please wait ...";

	var url = "http://localhost:8080/json/json";
	if(window.XMLHttpRequest){
		httpRequest = new XMLHttpRequest();
	}
	else if(window.ActiveXObject){
		httpRequest = 
			new ActiveXObject("Microsoft.XMLHTTP");
	}

	httpRequest.open("GET", url, true);
	httpRequest.onreadystatechange = handler;
	httpRequest.send(null);
}

function handler() {
	if (httpRequest.readyState == 4) {
		if (httpRequest.status == 200) {
		    processJSON(httpRequest.responseText);
		}
	}
}

function processJSON(jsonObjectString) {

	var description = 
		document.getElementById('description');
	
      //Since JSON is a subset of JavaScript, I am using 
      //JavaScript's own compiler to parse JSON in one line!
      var jsonObject = eval('(' + jsonObjectString + ')')

	var text = "";
	
	text += "Author: " + jsonObject.author + "< br />";
	text += "Blog Name: " + 
		jsonObject.blogtitle + "< br />";
	text += "Blog URL: " + 
		jsonObject.bloglink + "< br />";
	text += "Blog Description: " + 
		jsonObject.blogdescription + "< br />";
	text += "Blog Language: " + 
		jsonObject.bloglanguage + "< br />";
	
	description.innerHTML = text;
	var entries = "Last " + 
                  jsonObject.blogentrytitles.length 
	+ " blog entries are:\n\n";

	for (var index = 0; 
		index < jsonObject.blogentrytitles.length; 
							index ++) {
		entries += (index + 1) + ": " + 
			jsonObject.blogentrytitles[index] + "\n";
	} 
	alert(entries);
}
	
</script>

</head>
<body>
<img src="images/javabeansmugshot_120x120.jpg" border="1" />
< br />
< br />
<div id="description"></div>
< br />
< br />
<a href="javascript:void(0)" 
             onclick="return getDescriptionAsJSON();">
Click to get description!</a>
</body>
</html>

As you could see, JSON data can be easily parsed on the client side with the help of Java script eval() function. To remind - JSON is a subset of Java script, therefore eval() will produce a valid object.

Keep in mind, that there is a need for extra care when using eval. The problem is that eval will compile and execute Java script code that coming back from the response. This could cause a security risk if the response data is coming from an untrusted source.

That's it. I hope this example was clear and helpful :)

Please note that this example was tested by me and its working fine. The source code as mentioned previously is included as Eclipse project. You can simply create a new Java project from the existing Ant build.xml file.

Comments/flames are appreciated :)

Cheers

Social Bookmarks :

Related Posts
There are no related posts for this blog entry

How to prevent iFrame breakaway

Sun, 29 Mar 2009 06:37:00 GMT

Few days ago I was searching for a solution to the problem I've encountered - I needed to prevent a third party page to break out of iframe inside a web page of my web application. For people who are not closely familiar with JavaScript, the following JS snippet will make it more clear how page can break out of iframe:

  if (top.location.href != self.location.href)
     top.location.href = self.location.href;

If the current page is not the parent window - become the parent window.

I needed to implement something on my end, that would block or prevent the above script or similar to it from executing. I've spent several hours browsing the Net, talking to people on IRC and simply playing trial and error.

After some time, I understood that I wont be able to find a solution to my problem, simply because there is none unfortunately. But, having said that, I have some findings to share:

There is iframe security attribute which only works on IE. Setting this attribute to security="restricted", will prevent iframe to break out. Its always "nice" to see that MS have few tricks up their sleeve :). Also, on one of the forums, someone mentioned that the same attribute will work under Opera as well as under IE. I personally haven't tested it my self under Opera, I can just say that it works for IE and not FF.
To make use of window.onbeforeunload event and prompt user with a dialog that requires user's input if he agrees to navigate away from the current page. If user disagrees (clicks "cancel"), he will remain on the current page. So here in a sense iframe breakaway was canceled. By the way, there is no way to suppress the dialog prompt and make event from clicking "cancel" default.
To grab the content of third party page using PHP Curl lib and to create your own placeholder page for that content. Then the placeholder page can be put inside iframe. The page or the grabbed content will not attempt to breakout, but any request submitted to the placeholder page (hyper link or button click on the grabbed content) will cause page to unload.

Also, while researching, I came across this post that talks about preventing iframe breakaway and click jacking with the help of 204 header response code.

After all that, my conclusion is:
If the page inside iframe is not yours, in other words it is a page hosted under another domain, its not possible actually to stop a page from unloading. Having something like that, would allow malicious sites to "trap" a user indefinitely.

I would love to hear any other suggestions regarding iframe breakout you may have dear readers.

Cheers

Social Bookmarks :

Detecting an Internet connection with Javascript

Sat, 24 Jan 2009 07:26:00 GMT

The other day I was developing small client-server application where I needed to check using Javascript on the client's side whether active Internet connection exists, before submitting request to the server.

Javascript does not allow you to do ping, and even so many websites protect against ping requests (ICMP echo), so I had to come up with some alternatives.

One of the nice solutions that I have found is to create an Image object and to specify as image source, URL to an image located on a remote server. Then to test, if the newly created Image object has height or width greater than zero.

If it is greater, what it means is that there is active Internet connection, since it was possible to create Image object using image or icon located on a remote server.

The downside here is that path to the image or image filename may change in the future on the target remote server, and as a result of that your Javascript function will stop working.

While thinking what image should I link to, I decided to use Google's favicon. I tend to think that the favicon is not something that is going to change very often. I also considered to use Goggle logo, but favicon is much smaller in size.
(Another thing worth remembering is to allow some time to retrieve the remote image, which is another reason why I went for the favicon).

The solution is:

function testConnection() {
   var googleFavIcon = new Image();
   googleFavIcon.src = 
               "http://www.google.com/favicon.ico";

   if(googleFavIcon.height>0)  {
       //do something
    } 
    else {
      //warn user
    }
}

Just keep in mind, that the remote image is cached once you got it. If you decide to test connection again, you have to make sure that you are not using the cached image, but trying to retrieve it again from the remote server. To prevent caching, you can add some random parameter to the URL:

http://www.google.com/favicon.ico?param=[random-value]

Social Bookmarks :

Related Posts
How to prevent iFrame breakaway