jsoup HTMLParser and Parsing Dzone Links using CSS Selectors in Java

I was working on a task to parse some of Amazon web-services. There are lots of ways to parse it Using DOM/SAX/Stax .  All of them require some amount of coding. I wanted a quick fix and i finally landed on to JSoup an opensource HTML Parser ( Other html parser i like is HTMLParser) . In this article i’m going to explain how i’m going to parse DZone HTML links in java.

I’ll be retreiving description’s of all links in Dzone using the code

Note: This is not the best way to read links from Dzone ( You can use rss feed’s instead).  This tutorial is to take you through css selectors for Java

All DZone pagination queries looks like this

http://www.dzone.com/links/?type=html&p=2

i used an opensource java library to parse this and extract link text description (jsoup)

Here is sample tags we have in dzone response

<a name="link-613399">
</a>

<div class="linkblock frontpage " id="link-613399">
	<div id="thumb_613399" class="thumb">
		<a onmouseup="track(this, 'twitter4j_oauth_on_android', ''); "
			href="http://www.xoriant.com/blog/mobile-application-development/twitter4j-oauth-on-android.html">
			<img width="120" height="90"
				src="http://cdn.dzone.com/links/images/thumbs/120x90/613399-1307624607000.jpg"
				class="thumbnail" alt="Link 613399 thumbnail"
				onmouseover="return OLgetAJAX('/links/themes/reader/jsps/nodecoration/thumb-load.jsp?linkId=613399', OLcmdExT1,
 300, 'bigThumbBody');"
				onmouseout="OLclearAJAX(); nd(100);" />
		</a>
	</div>
	<div id="hidden_thumb_613399">

	</div>
	<div class="tools">
	</div>
	<div class="details">
		<div class="vwidget" id="vwidget-613399">
			<a id="upcount-613399" href="#" class="upcount"
				onclick="showLoginDialog(613399, null); return false">7</a>

			<a id="downcount-613399" href="#"
				onclick="showLoginDialog(613399, null); return false;" class="downcount">0</a>
		</div>
		<h3>
			<a onmouseup="track(this, 'twitter4j_oauth_on_android', ''); "
				href="http://www.xoriant.com/blog/mobile-application-development/twitter4j-oauth-on-android.html"
				rel="bookmark"> Twitter4j OAuth on Android</a>
		</h3>
		<p class="voteblock">
			<a href="/links/users/profile/811805.html">
				<img width="24" height="24"
					src="http://cdn.dzone.com/links/images/std/avatars/default_24.gif"
					class="avatar" alt="User 811805 avatar" />
			</a>
		</p>
		<p class="fineprint byline">
			<a href="/links/users/profile/811805.html">RituR</a>
			via
			<a href="/links/search.html?query=domain%3Axoriant.com">xoriant.com</a>
		</p>
		<p class="fineprint byline">
			<b>Promoted: </b>
			Jun 08 / 17:27. Views:
			520, Clicks: 266
		</p>
		<p class="description">
			OAuth is an open protocol
			which allows the users to share their private information and assets
			like photos, videos etc. with another site...&nbsp;
			<a href='/links/twitter4j_oauth_on_android.html'>more&nbsp;&raquo;
			</a>
		</p>
		<p class="fineprint stats">
			<a
				href="http://twitter.com/home?status=RT+%40DZone+%22Twitter4j+OAuth+on+Android%22+http%3A%2F%2Fdzone.com%2FTBxR"
				class="twitter">Tweet</a>
			<a href="/links/twitter4j_oauth_on_android.html" class="comment">0
				Comments</a>
			<span class="linkUnsaved" id="save-link-613399"
				onclick="showLoginDialog(613399); return false;">Save</span>
			<span class="linkUnshared" id="share-link-613399"
				onclick="showLoginDialog(613399); return false;">Share</span>
			Tags:
			<a href="/links/tag/mobile.html" class="tags" rel="tag">mobile</a>
			,
			<a href="/links/tag/standards.html" class="tags" rel="tag">standards</a>
		</p>

	</div>
</div>

 

To get description we have to get data from element “P” with class “description” which is actually present in DIV with class “details” Here is how we can do that in java

 

/**
 * 
 */
package com.linkwithweb.parser;

import java.io.File;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

/****************************************************************
 * Description
 * jsoup elements support a CSS (or jquery) like selector syntax to find matching elements, that allows very powerful and robust queries.
 * 
 * The select method is available in a Document, Element, or in Elements. It is contextual, so you can filter by selecting from a specific element, or
 * by chaining select calls.
 * 
 * Select returns a list of Elements (as Elements), which provides a range of methods to extract and manipulate the results.
 * 
 * Selector overview
 * tagname: find elements by tag, e.g. a
 * ns|tag: find elements by tag in a namespace, e.g. fb|name finds <fb:name> elements
 * #id: find elements by ID, e.g. #logo
 * .class: find elements by class name, e.g. .masthead
 * [attribute]: elements with attribute, e.g. [href]
 * [^attr]: elements with an attribute name prefix, e.g. [^data-] finds elements with HTML5 dataset attributes
 * [attr=value]: elements with attribute value, e.g. [width=500]
 * [attr^=value], [attr$=value], [attr*=value]: elements with attributes that start with, end with, or contain the value, e.g. [href*=/path/]
 * [attr~=regex]: elements with attribute values that match the regular expression; e.g. img[src~=(?i)\.(png|jpe?g)]
 * : all elements, e.g. *
 * Selector combinations
 * el#id: elements with ID, e.g. div#logo
 * el.class: elements with class, e.g. div.masthead
 * el[attr]: elements with attribute, e.g. a[href]
 * Any combination, e.g. a[href].highlight
 * ancestor child: child elements that descend from ancestor, e.g. .body p finds p elements anywhere under a block with class "body"
 * parent > child: child elements that descend directly from parent, e.g. div.content > p finds p elements; and body > * finds the direct children of
 * the body tag
 * siblingA + siblingB: finds sibling B element immediately preceded by sibling A, e.g. div.head + div
 * siblingA ~ siblingX: finds sibling X element preceded by sibling A, e.g. h1 ~ p
 * el, el, el: group multiple selectors, find unique elements that match any of the selectors; e.g. div.masthead, div.logo
 * Pseudo selectors
 * :lt(n): find elements whose sibling index (i.e. its position in the DOM tree relative to its parent) is less than n; e.g. td:lt(3)
 * :gt(n): find elements whose sibling index is greater than n; e.g. div p:gt(2)
 * :eq(n): find elements whose sibling index is equal to n; e.g. form input:eq(1)
 * :has(seletor): find elements that contain elements matching the selector; e.g. div:has(p)
 * :not(selector): find elements that do not match the selector; e.g. div:not(.logo)
 * :contains(text): find elements that contain the given text. The search is case-insensitive; e.g. p:contains(jsoup)
 * :containsOwn(text): find elements that directly contain the given text
 * :matches(regex): find elements whose text matches the specified regular expression; e.g. div:matches((?i)login)
 * :matchesOwn(regex): find elements whose own text matches the specified regular expression
 * Note that the above indexed pseudo-selectors are 0-based, that is, the first element is at index 0, the second at 1, etc
 * See the Selector API reference for the full supported list and details.
 * 
 * @author Ashwin Kumar
 * 
 */
public class HTMLParser {

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		try {
			File input = new File("input/dZoneLinks.xml");
			Document doc = Jsoup.parse(input, "UTF-8",
					"http://www.dzone.com/links/?type=html&p=2");

			Elements descriptions = doc.select("div.details > p.description"); // get all description elements in this HTML file
			/*
			 * Elements pngs = doc.select("img[src$=.png]");
			 * // img with src ending .png
			 * 
			 * Element masthead = doc.select("div.masthead").first();
			 */
			// div with

			// Elements resultLinks = doc.select("h3.r > a"); // direct a after h3
			/**
			 * Iterate over all descriptions and display them
			 */
			for (Element element : descriptions) {
				System.out.println(element.ownText());
				System.out.println("--------------");
			}

		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

Mavenized code has been checked in to svn at following location

http://code.google.com/p/linkwithweb/source/browse/trunk/Utilities/HTMLParser

Njoy parsing anything easily using jsoup

 

Advertisements

PDF Generation Using Templates and OpenOffice and Itext in Java


Recently i had a task where in i had to create PDF dynamically by merging data and template. I have been using lots of pdf libraries since i started my programming to do such tasks. The previous one i admired a lot was Jasper Reports. But after researching some more time i found out that IText with Openoffice Draw is a simplest way we can generate PDF forms.

This visual tutorial first Explain’s how to Create PDF forms in Openoffice Draw

Save PDF to folder where you have your program or just change path for input source in program

Now here is java code which can convert this pdf to final pdf by filling in Values using IText

/**
 *
 */
package com.linkwithweb.reports;

import java.io.ByteArrayOutputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;

import com.lowagie.text.DocumentException;
import com.lowagie.text.pdf.PdfReader;
import com.lowagie.text.pdf.PdfStamper;

/**
 * @author Ashwin Kumar
 *
 */
public class ITextStamperSample {

	/**
	 * @param args
	 * @throws IOException
	 * @throws DocumentException
	 */
	public static void main(String[] args) throws IOException,
			DocumentException {
		// createSamplePDF();
		generateAshwinFriends();
	}

	/**
	 *
	 */
	private static void generateAshwinFriends() throws IOException,
			FileNotFoundException, DocumentException {
		PdfReader pdfTemplate = new PdfReader("mytemplate.pdf");
		FileOutputStream fileOutputStream = new FileOutputStream("test.pdf");
		ByteArrayOutputStream out = new ByteArrayOutputStream();
		PdfStamper stamper = new PdfStamper(pdfTemplate, fileOutputStream);
		stamper.setFormFlattening(true);

		stamper.getAcroFields().setField("name", "Ashwin Kumar");
		stamper.getAcroFields().setField("id", "1\n2\n3\n");
		stamper.getAcroFields().setField("friendname",
				"kumar\nsirisha\nsuresh\n");
		stamper.getAcroFields().setField("relation", "self\nwife\nfriend\n");

		stamper.close();
		pdfTemplate.close();

	}

}

Here is sample pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.linkwithweb.reports</groupId>
  <artifactId>ReportTemplateTutorial</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>ReportTemplateTutorial</name>
  <description>ReportTemplateTutorial</description>
  <dependencies>
  	<dependency>
  		<groupId>com.lowagie</groupId>
  		<artifactId>itext</artifactId>
  		<version>2.1.7</version>
  	</dependency>
  </dependencies>
</project>

 

A pdf file with data filled in placeholders is created with name test.pdf


Capture picture on Webpage with Java Backend

In most of the projects we try to capture user’s face on web page. Till recently many projects have been implementing this using either Activex objects or Using Java Plugin’s or some other media plugin’s. With advent of flash and it’s related technologies this and it’s increase in presence over the web flash has become favorite technology to build such application.  Thus making it browser agnostic as compared to ActiveX Objects.

There is a project on web named JPEGCam which is free and opensource which has capability to do that.

http://code.google.com/p/jpegcam/

My effort is to create a java backend to it’s frontend ( Default one comes with php backend). Following example explains my effort

I have created a mavenized application to make it run without any extra server deployment. Here is the description

I’ve created a simple servlet which just capture’s input stream

Stores data in a folder named uploads

Send the file url back to Client to display

Here is the code

package com.linkwithweb.jpegcam;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;

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

/**
 * Ashwin Kumar
 * Servlet implementation class PictureCaptureServlet
 */
public class PictureCaptureServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private String fileStoreURL = "";

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public PictureCaptureServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see Servlet#init(ServletConfig)
	 */
	public void init(ServletConfig config) throws ServletException {
		fileStoreURL = config.getServletContext().getRealPath("") + "/uploads";
		try {
			File f = new File(fileStoreURL);
			if (!f.exists()) {
				f.mkdirs();
			}
		} catch (Exception e) {
			// TODO: handle exception
		}
	}

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		try {
			long time = new Date().getTime();
			
			FileOutputStream fileOutputStream = new FileOutputStream(
					fileStoreURL + "/"+time+".jpg");
			int res;
			while ((res = request.getInputStream().read()) != -1) {
				fileOutputStream.write(res);
			}
			fileOutputStream.close();
			/**
			 * To make sure each url is differeent and not cached added time to tit
			 */
			response.getWriter().append(
					"http://localhost:8080/uploads/" + time
							+ ".jpg");

		} catch (Exception e) {
			e.printStackTrace();
		} finally {

		}
	}

}

Below is sample javascript which handles frontend

	<!-- First, include the JPEGCam JavaScript Library -->
	<script type="text/javascript" src="webcam.js"></script>
	
	<!-- Configure a few settings -->
	<script language="JavaScript">
		webcam.set_api_url( '/capture' );
		webcam.set_quality( 90 ); // JPEG quality (1 - 100)
		webcam.set_shutter_sound( true ); // play shutter click sound
	</script>
	
	<!-- Next, write the movie to the page at 320x240 -->
	<script language="JavaScript">
		document.write( webcam.get_html(320, 240) );
	</script>
	<!-- Code to handle the server response (see test.php) -->
	<script language="JavaScript">
		webcam.set_hook( 'onComplete', 'my_completion_handler' );
		
		function take_snapshot() {
			// take snapshot and upload to server
			document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
			webcam.snap();
		}
		
		function my_completion_handler(msg) {
			// extract URL out of PHP output
			if (msg.match(/(http\:\/\/\S+)/)) {
				var image_url = RegExp.$1;
				// show JPEG image in page
				document.getElementById('upload_results').innerHTML = 
					'<h1>Upload Successful!</h1>' + 
					'<h3>JPEG URL: ' + image_url + '</h3>' + 
					'<img src="' + image_url + '">';
				
				// reset camera for another shot
				webcam.reset();
			}
			else alert("Java Error: " + msg);
		}
	</script>

Now let me paste my pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.linkwithweb.browsercam</groupId>
	<artifactId>JPEGCamIntegration</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>JPEGCamIntegration Maven Webapp</name>
	<url>http://maven.apache.org</url>
	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
	</dependencies>
	<build>
		<finalName>JPEGCamIntegration</finalName>
		<plugins>
			<plugin>
				<groupId>org.mortbay.jetty</groupId>
				<artifactId>jetty-maven-plugin</artifactId>
				<version>8.0.0.M2</version>
				<configuration>
					<scanIntervalSeconds>3</scanIntervalSeconds>
				</configuration>
			</plugin>

			<!-- Facilitates downloading source and javadoc in Eclipse -->
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-eclipse-plugin</artifactId>
				<version>2.8</version>
				<configuration>
					<wtpversion>2.0</wtpversion>
					<downloadSources>true</downloadSources>
					<downloadJavadocs>true</downloadJavadocs>
				</configuration>
			</plugin>


			<!-- Ensures we are compiling at 1.6 level -->
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.3.2</version>
				<configuration>
					<source>1.6</source>
					<target>1.6</target>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

Here is how you run this and test

mvn jetty:run-exploded

and click this URL

http://localhost:8080

Code has been checked in to following location

http://code.google.com/p/linkwithweb/source/browse/trunk/Utilities/JPEGCamIntegration.rar

Build your own WebMockup Tool using jQuery

This article is to show the capability of Javascript and jQuery Framework’s rather than as reference implementation to create a web mockup tool.  Infact this is not the best architecture to build a mockup tool in javascript.

Sample demo is hosted at  http://linkwithweb.appspot.com/DynamicForm.html   ( It only Works in Firefox and Chrome) 🙂

Concepts like  Drag/Drop , Resizable , Context Menu , Container’s, Grouping,

Cornering element view’s etc…. are being explained through this article.

I have used following javascript libraries to create this

  1. jquery
  2. jqueryui
  3. jquery.corner.js
  4. jquery.contextmenu.js

To create any Mockup tool we first to define few things that are required to build it

  1. Creation of Draggable Objects
  2. Creation of Droppable Area where object’s can be dropped.
  3. Layout of objects on droppable area(Dashboard)
  4. Deleting/Changing properties of objects/elements in the dashboard





Because i ‘m going to build a HTML mockup tool , i’ll define few html element’s as my draggable objects which i’m going to play with. Apart from this as i’m planning to make all objects/elements in my mockup tool as draggable one’s i’ll define a Dragholder which is used to hold my draggable objects. I have defined a class with name “drag” that defines all draggable objects

TextBox

<div id="drag1" class="drag">
     <input type="text" value="test" style="width: 80%; height: 80%;"></input>
</div>

Form

<form id="drag2" class="drag containerdiv">

	<div style=""
		class="context-menu context-menu-theme-vista context-menu-example-trigger menu-vista">
		<div class="context-menu-item">
			<div class="context-menu-item-inner">Form Container</div>
		</div>
	</div></form>

Button

<div id="drag3" class="drag">
	<input type="button" value="Drag Me" />
</div>

TextArea

<div id="drag4" class="drag">
	<textarea name="userInput" style="width: 80%; height: 80%;"></textarea>
</div>

SelectBox

<div id="drag4" class="drag">
	<select>
		<option>Small</option>
		<option selected="true">Medium</option>
		<option>Large</option>
		<option>X-Large</option>
	</select>
</div>

All the above elements have been defined with css class “drag” which we use to query latter.

Now lets define a container where all the above draggable elements will be dragged and played around

<div id="frame">
</div>

the above div element with id “frame” is used as container in our mockup tool.

Now as we have defined all elements in our HTML playground , let me explain the logic i’m going to use to create this.  Before going into that lemme explain that elements like form can have other elements so lets also make it droppable once it enters our playground

  1. Get all objects with class “drag”
  2. Add control key listener which add’s class “grouped” to elements if clicked by holding cotrol key ( Kind of selecting a element)
  3. Make all of then resizable.
  4. Add context menu for all elements
  5. Enable drag on them and assign them some id’s
  6. If element contain’s class “grouped” , moved all other elements with class “grouped” same width and height as our draggable element
  7. If elements also have class name “containerdiv” then they droppable apart from draggable, so enable droppable feature on them
Here is how sample menu is created
var menu = [
	{
		'Show an alert' : function() {
			alert('This is an alert!');
		}
	},
	{
		'Turn me red (try it)' : function() {
			this.style.backgroundColor = 'red';
		}
	},
	{
		'<b>HTML</b> <i>can be</i> <u>used in</u> <input type="text" value="test"/>' : function(
				menuItem, cmenu, e) {
			$t = $(e.target);
			return false;
		}
	},
	$.contextMenu.separator,
	{
		'Just above me was a separator!' : function() {
		}
	},
	{
		'Option with icon (for themes that support it)' : {
			onclick : function() {
			},
			icon : 'i_save.gif'
		}
	},
	{
		'Disabled option' : {
			onclick : function() {
			},
			disabled : true
		}
	},
	{
		'<div><div style="float:left;">Choose a color (don\'t close):</div><div class="swatch" style="background-color:red"></div><div class="swatch" style="background-color:green"></div><div class="swatch" style="background-color:blue"></div><div class="swatch" style="background-color:yellow"></div><div class="swatch" style="background-color:black"></div></div><br>' : function(
				menuItem, cmenu, e) {
			$t = $(e.target);
			if ($t.is('.swatch')) {
				this.style.backgroundColor = $t.css('backgroundColor');
				$t.parent().find('.swatch').removeClass('swatch-selected');
				$t.addClass('swatch-selected');
			}
			return false;
		}
	},
	{
		'Use fadeOut for hide transition' : function(menuItem, cmenu) {
			cmenu.hideTransition = 'fadeOut';
			cmenu.hideSpeed = 'fast';
		}
	},
	{
		'Use slideUp for hide transition (quirky in IE)' : function(
				menuItem, cmenu) {
			cmenu.hideTransition = 'slideUp';
		}
	},
	{
		'Use normal hide transition' : function(menuItem, cmenu) {
			cmenu.hideTransition = 'hide';
		}
	},
	{
		'Increments each time menu is displayed using beforeShow hook: #<span class="option-count">1</span>' : function() {
		}
	}, {
		'Custom menu item class and hover class for this item only' : {
			onclick : function() {
			},
			className : 'context-menu-item-custom',
			hoverClassName : 'context-menu-item-custom-hover'
		}
	} ];

Below is sample code on how we implement above functionality using jquery

/**
 * Called once document is loaded
 */
$(document).ready(function() {
	$('a[rel*=facebox]').facebox({
		div : '#frame',
		loading_image : 'loading.gif',
		close_image : 'closelabel.gif'
	});

	// Counter
	counter = 0;

	// Make element draggable
	// $(".dragged").resizable().draggable();
	enableDrag("frame", ".drag", "false");

	// $(".drag").corner();

	// Make element droppable
	$("#frame").droppable({
		drop : function(ev, ui) {
			if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
				counter++;
				var element = $(ui.draggable).clone();

				// alert(element);
				element.addClass("tempclass");

				$(this).append(element);

				$(".tempclass").attr("id", "clonediv" + counter);
				$("#clonediv" + counter).removeClass("tempclass");

				// Get the dynamically item id
				draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
				// itemDragged = "dragged" + RegExp.$1
				// //console.log(itemDragged)
				itemDragged = "dragged";

				$("#clonediv" + counter).addClass(itemDragged);

				enableDrag("parent", "#clonediv" + counter, "true");

			}
		}
	});
});

Code for function enableDrag which is main funciton in our project

/**
 * This function enables drag on a object and contains its drag in the passed
 * container
 *
 * @param dragContainment
 * @param draggableClass
 * @param resizable
 */
function enableDrag(dragContainment, draggableClass, resizable) {
	// Make element draggable and resizable
	$(draggableClass).click(function(event) {
		if (event.ctrlKey) {
			$(this).toggleClass('grouped');
		}
	});
	/**
	 * Add Context Menu
	 */
	$(draggableClass).find(".menu-vista").contextMenu(menu, {
		theme : 'vista',
		beforeShow : beforeShowFunc
	});
	$(draggableClass).contextMenu(draggableObjectMenu, {
		theme : 'vista'
	});

	var element;

	/**
	 * Make the element resizable
	 */
	if (resizable == "true") {
		element = $(draggableClass).corner().resizable();
	} else {
		element = $(draggableClass).corner();
	}

	/**
	 * If element is containerdiv then make it droppable
	 */
	if (element.hasClass("containerdiv")) {

		// Make element droppable
		element.droppable({
			greedy : true,
			out : function(event, ui) {

				var element = $(ui.draggable);
				if (!element.hasClass("containerdiv")) {
					$(this).parent().append(element);
				}
			},
			drop : function(ev, ui) {
				if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
					var element = $(ui.draggable);
					counter++;

					element = $(ui.draggable).clone();
					// alert(element);
					element.addClass("tempclass");

					$(this).append(element);

					$(".tempclass").attr("id", "clonediv" + counter);
					$("#clonediv" + counter).removeClass("tempclass");

					// Get the dynamically item id
					draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
					// itemDragged = "dragged" + RegExp.$1
					// //console.log(itemDragged)
					itemDragged = "dragged";

					$("#clonediv" + counter).addClass(itemDragged);

					enableDrag("frame", "#clonediv" + counter, "true");

				} else {
					var element = $(ui.draggable);
					$(this).append(element);
				}
			}
		});

	}

	/**
	 * Now make element draggable
	 */
	element.draggable({
		helper : 'clone',
		containment : dragContainment,

		start : function(event, ui) {
			posTopArray = [];
			posLeftArray = [];
			thisElem = $(this);

			if ($(this).hasClass("grouped")) { // Loop through each element and
				// store beginning start and
				// left positions

				$(".grouped").each(function(i) {
					thiscsstop = $(this).css('top');
					if (thiscsstop == 'auto')
						thiscsstop = 0; // For IE

					thiscssleft = $(this).css('left');
					if (thiscssleft == 'auto')
						thiscssleft = 0; // For IE

					posTopArray[i] = parseInt(thiscsstop);
					posLeftArray[i] = parseInt(thiscssleft);
				});
			}

			begintop = $(this).offset().top; // Dragged element top position
			beginleft = $(this).offset().left; // Dragged element left position
		},

		drag : function(event, ui) {
			var topdiff = $(this).offset().top - begintop; // Current distance
			// dragged element
			// has traveled
			// vertically
			var leftdiff = $(this).offset().left - beginleft; // Current
			// distance
			// dragged
			// element has
			// traveled
			// horizontally

			var draggingId = $(this).attr("id");
			if ($(this).hasClass("grouped")) {
				// //console.log("Initial pos "+begintop +"
				// Left----"+beginleft);
				// //console.log("Diff Value is "+topdiff +"
				// Left----"+leftdiff);
				$(".grouped").each(function(i) {
					if (draggingId === $(this).attr("id")) {
						topdiff = $(this).offset().top - begintop; // Current
						leftdiff = $(this).offset().left - beginleft; // Current
					}
				});

				$(".grouped").each(function(i) {
					// //console.log("Pres pos for "+$(this).attr('id')+" is
					// "+posTopArray[i] +" Left----"+posLeftArray[i]);
					if (draggingId !== $(this).attr("id")) {
						$(this).css('top', posTopArray[i] + topdiff); // Move
						$(this).css('left', posLeftArray[i] + leftdiff); // Move
					}
				});

			}
		},

		// When first dragged
		stop : function(ev, ui) {
			var pos = $(ui.helper).offset();
			objName = "#clonediv" + counter
			var draggingId = $(this).attr("id");

			var leftValue = pos.left;
			var topValue = pos.top;

			/**
			 * The below if loop is written to fix the relative and abosiulte
			 * positioning issue. When any draggable object is dropped into a
			 * droppable container which resides in another container then the
			 * droppable with more z-index becomes relative positining for its
			 * sub elements
			 */
			if ($(this).parent().hasClass("containerdiv")) {
				// console.log("Left Pos "+leftValue);
				// console.log("Top Pos "+topValue);
				// console.log("$(this).parent().attr('left')
				// "+$(this).parent().offset().left);
				// console.log("$(this).parent().offset().top
				// "+$(this).parent().offset().top);
				leftValue = pos.left - $(this).parent().offset().left;
				topValue = pos.top - $(this).parent().offset().top;
			}

			if ($(this).hasClass("drag")) {
				$(objName).css({
					"left" : leftValue,
					"top" : topValue
				});
				$(objName).removeClass("drag");

			} else {
				objName = draggingId;
				thisElem.css({
					"left" : leftValue,
					"top" : topValue
				});
			}

			// console.log("Left Pos "+leftValue);
			// console.log("Top Pos "+topValue);

			var topdiff = $(this).offset().top - begintop; // Current distance
			// dragged element
			// has traveled
			// vertically
			var leftdiff = $(this).offset().left - beginleft; // Current
			// distance
			// dragged
			// element has
			// traveled
			// horizontally

			// This logic for Group Elements

			if ($(this).hasClass("grouped")) {
				// //console.log("Initial pos "+begintop +"
				// Left----"+beginleft);
				// //console.log("Diff Value is "+topdiff +"
				// Left----"+leftdiff);
				$(".grouped").each(function(i) {
					if (draggingId === $(this).attr("id")) {
						topdiff = $(this).offset().top - begintop; // Current
						// distance
						// dragged
						// element
						// has
						// traveled
						// vertically
						leftdiff = $(this).offset().left - beginleft; // Current
						// distance
						// dragged
						// element
						// has
						// traveled
						// horizontally
					}
				});

				$(".grouped").each(function(i) {
					// //console.log("Pres pos for "+$(this).attr('id')+" is
					// "+posTopArray[i] +" Left----"+posLeftArray[i]);
					if (draggingId !== $(this).attr("id")) {
						$(this).css('top', posTopArray[i] + topdiff); // Move
						// element veritically - current css top + distance
						// dragged element has travelled vertically
						$(this).css('left', posLeftArray[i] + leftdiff); // Move
						// element horizontally-current css left + distance
						// dragged element has travelled horizontally
					}
				});

			}

		}
	});

}

Below is code which generate HTML Code from the design we made

/**
 * On Spit html button clicked alert the HTML in the frame that gets generated
 */
function alertHTML() {
	var htmlClone = $("#frame").clone();
	alert("<html><head></head><body>" + htmlClone.html() + "</body></html>");
}

Code has been checked in to follow svn url https://linkwithweb.googlecode.com/svn/trunk/WebMockup

Njoy playing with javascript and jQuery

Spring MVC with Annotations , JPA , Derby , Fileupload, SWFUpload CRUD Example

This is my attempt to create a clear tutorial on Spring MVC CRUD using JPA and Derby and a sample FileUpload with SWFUpload

I have tried to use standard file structure and naming patterns so that it will be useful in proceeding further on this base

First of all To create any Spring Application we need to configure DispatcherServlet in Servlet in Web.xml of Application so that all SpringMVC related requests goto to that servlet

Here is sample code snippet of web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- Use this definition if using a Java EE 6 container This also stops Eclipse
	from complaining that 3.0 is not a valid version <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="
	http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> -->
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">

	<!-- The definition of the Root Spring Container shared by all Servlets
		and Filters -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/spring/root-context.xml</param-value>
	</context-param>

	<!-- Creates the Spring Container shared by all Servlets and Filters -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<!-- Processes application requests -->
	<servlet>
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/app/servlet-context.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>

	<servlet-mapping>
		<servlet-name>appServlet</servlet-name>
		<url-pattern>/spring/*</url-pattern>
	</servlet-mapping>

</web-app>

Now that we have defined DispatcherServlet in Web.xml, let me define each file and its usage so that you can download and change what ever us required for you

WEB-INF
│ web.xml : Servlet Configuration Defined Here

├───spring
│ │ db.xml : DB related Beans Configured Here
│ │ root-context.xml
│ │
│ └───app
│ controllers.xml : Contrller Configuration defined here. We are using annotation so we just tell spring that use annotation handler to indefiy files
I also added a multipart resolver to handle multipart request here.
│ servlet-context.xml: Core Spring MVC Configuration file which is root file where spring MVC reads. I defined resources/view resolver/validator/and controller here

└───views
│ edit.jsp : Sample page to show edit functionaly
│ home.jsp : Welcome Page
│ list.jsp : List records page
│ upload.jsp : Simple Upload Functionality using SWFUpload is defined here

└───forms
success.jsp
upload.jsp

src/main/
│ │
│ ├───resources
│ │ │ db.properties : DB connectivity Properties to connect
│ │ │ log4j.xml : Logiing related xml
│ │ │
│ │ └───META-INF
│ │ persistence.xml : JPA Configuration file
│ │

Here is code of my File Upload Controller

/**
 *
 */
package com.linkwithweb.spring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ObjectError;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

import com.linkwithweb.spring.model.UploadBean;

/**
 * @author Ashwin Kumar
 *
 */

@Controller
@RequestMapping("/upload/")
public class UploadController {

	public UploadController() {
	}

	@RequestMapping(method = RequestMethod.GET)
	public String getUploadForm(Model model) {
		model.addAttribute("uploadbean", new UploadBean());
		return "forms/upload";
	}

	@RequestMapping(method = RequestMethod.POST)
	public String Uploadcreate(UploadBean uploadbean, BindingResult result) {
		System.out.println("started uploading");
		if (result.hasErrors()) {
			for (ObjectError error : result.getAllErrors()) {
				System.err.println("Error in uploading: " + error.getCode()
						+ " - " + error.getDefaultMessage());
			}
			return "forms/upload";
		}

		// Some type of file processing...
		System.err.println("-------------------------------------------");

		System.err.println("Test uploading file: "
				+ uploadbean.getFiledata().getOriginalFilename());
		System.err.println("-------------------------------------------");		return "forms/success";
	}
}

Note: You have define Multipart resolver bean of commons file upload inorder to parse file upload requests

	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- one of the properties available; the maximum file size in bytes -->
		<property name="maxUploadSize" value="100000" />
	</bean>

Code can be found at following SVN location
https://linkwithweb.googlecode.com/svn/trunk/SpringTutorials/SpringApp

Once downloaded run ” mvn jetty:run” to test the application at follwoing URL

http://localhost:8080/SpringApp/

http://localhost:8080/SpringApp/spring/upload/

SWFUpload and Java Servlet Example

I have been trying to find out one good upload client over the web and it really took 3 days to me to nail down one which one best.

SWFUpload seems to be best library available as of today. I dont see they implementing java examples. Here is my attempt provide a java sample for it

This example will implement basic file upload with cancel and manual upload trigger functionality with servlet in backend

Here is sample client code

		

var swfu;

window.onload = function() {
	var settings = {
		flash_url : "swfupload/swfupload.swf",
		upload_url: "Upload",
		file_size_limit : "100 MB",
		file_types : "*.*",
		file_types_description : "All Files",
		file_upload_limit : 100,
		file_queue_limit : 0,
		custom_settings : {
			progressTarget : "fsUploadProgress",
			cancelButtonId : "btnCancel"
		},
		debug: false,

		// Button settings
		button_image_url: "swfupload/TestImageNoText_65x29.png",
		button_width: "95",
		button_height: "29",
		button_placeholder_id: "spanButtonPlaceHolder",
		button_text: 'Browse Files',
		button_text_style: ".theFont { font-size: 22; }",
		button_text_left_padding: 2,
		button_text_top_padding: 3,
		
		// The event handler functions are defined in handlers.js
		file_queued_handler : fileQueued,
		file_queue_error_handler : fileQueueError,
		upload_start_handler : uploadStart,
		upload_progress_handler : uploadProgress,
		upload_error_handler : uploadError,
		upload_success_handler : uploadSuccess
	};

	swfu = new SWFUpload(settings);
    };


    function handleUpload(){
     var emailid = document.getElementById("email").value;
   	 swfu.setPostParams({ email:emailid });
   	 //swfu.setUploadURL("CommonsFileUploadServlet?test=234");
   	 swfu.startUpload();
 }

Here is sample screenshot

SWFUploadExample

Try downloading code from SVN from follwong location

https://linkwithweb.googlecode.com/svn/trunk/Utilities/FlashFileUpload

Make sure you have maven installed on machine before executing the below command
After downloading just run “mvn jetty:run”

and open this URL to test http://localhost:8080/FileUpload/

Find Codec of Media File Programatically

Recently while working in some Media related project i had a task of finding which media i’m working on. I mean to find out if my player supports running that media. For that i need to work on a solution which can find a media type by reading file headers etc…

I have been shuffling between GSpot Codec Library / VLC / Mediainfo but i found out that Mediainfo is more Developer Friendly and can be easily Integrated into the application

Here is sample code which read details about media

using System;
using System.Collections.Generic;
using System.Text;
using System.IO;
using MediaInfoLib;

/**
 * Ashwin Kumar
 * 4/12/2011
 * ashwin.rayaprolu@gmail.com
 * Sample Command Line program to read and display Media type
 * Usage MediaInfoRead 
 * 
 * */
namespace MediaInfoRead
{
    class MediaInfoRead
    {
        public static void Main(string[] args)
        {
            String ToDisplay = "";
            MediaInfo MI = new MediaInfo();
            //An example of how to use the library
            ToDisplay += "\r\n\r\nOpen\r\n";
            MI.Open(args[0]);

            ToDisplay += "\r\n\r\nInform with Complete=false\r\n";
            MI.Option("Complete");
            ToDisplay += MI.Inform();

            ToDisplay += "\r\n\r\nInform with Complete=true\r\n";
            MI.Option("Complete", "1");
            ToDisplay += MI.Inform();

            ToDisplay += "\r\n\r\nCustom Inform\r\n";
            MI.Option("Inform", "General;File size is %FileSize% bytes");
            ToDisplay += MI.Inform();

            ToDisplay += "\r\n\r\nGet with Stream=General and Parameter='FileSize'\r\n";
            ToDisplay += MI.Get(0, 0, "FileSize");

            ToDisplay += "\r\n\r\nGet with Stream=General and Parameter=46\r\n";
            ToDisplay += MI.Get(0, 0, 46);

            ToDisplay += "\r\n\r\nCount_Get with StreamKind=Stream_Audio\r\n";
            ToDisplay += MI.Count_Get(StreamKind.Audio);

            ToDisplay += "\r\n\r\nGet with Stream=General and Parameter='AudioCount'\r\n";
            ToDisplay += MI.Get(StreamKind.General, 0, "AudioCount");

            ToDisplay += "\r\n\r\nGet with Stream=Audio and Parameter='StreamCount'\r\n";
            ToDisplay += MI.Get(StreamKind.Audio, 0, "StreamCount");

            ToDisplay += "\r\n\r\nClose\r\n";
            MI.Close();

            Console.WriteLine(ToDisplay);
        }
    }
}

You Can checkout Sample C# project from following SVN location

https://linkwithweb.googlecode.com/svn/trunk/Utilities/FindMediaType