Ext JS plugin for creating organisation chart or tree structure representation

It has been a long time I have been writing another post and this time its on JavaScript, specifically on Ext JS. I have just created one plugin to represent data in tree structure format. I have created a project ExtJSOrgChart on GitHub for this.

This plugin is conversion of jOrgChart plugin created in jQuery by @wesnolte to Ext JS. Also I have tried to extend it in a manner that tree representation can be handled easily through JavaScript operations and these operations can be based on any custom logic. I have seen jOrgChart a while ago and its very good plugin to use for tree structure representation. As I am working on Ext JS right now and hence I have tried to convert the same plugin in Ext JS so that any one using Ext JS doesn’t have any dependency on  jQuery.

ExtJSOrgChart Download

ExtJSOrgChart Plugin

This plugin is a small JavaScript file which inherits most of the features from jOrgChart, also tree structure is prepared out of JavaScript objects directly which provides little bit flexibility in case required. Below are the list of features provided with this plugin:

  1. Very easy to use JavaScript object tree structure.
  2. Objects can be filled up based on required logic, plugin will take care of rendering tree structure.
  3. Object structure allows to fill data from any external source. E.g. Json objects
  4. Nodes can contain any amount of HTML.
  5. Easy to style.
  6. HTML rendered in the nodes can have qtip markup so that easy QuickTip can be provided.

Of course this plugin can be extended to have more features and improvements hence give it a try and provide your comments. Also its published under Dual license under the MIT and GPL so feel free to fork it on GitHub but please maintain copyright information under the plugin JS file.

Building your own webpage to image service on web

So we have gone through a demo in my recent post on how to generate an image of a webpage using QT and java. In this post I want to announce that I have created set of RESTFul web services using Spring Framework to extend my little piece of software to a web based service. Spring MVC provides a great @nnotations support to create RESTFul Web services in minutes. You can checkout my project from GitHub.

Software as a Service

Here is the documentation of my SaaS implementation. This documentation contains all required information, from obtaining the source code to deployment. Give it a try and provide your valuable comments here.  I am sure that there can be number of interesting use of this software as a service, also if you have any idea of extending this service please make a note of it here. I do have plans to add some more functionality into this, but it just depends on resource availability :D.  

UPDATE:

As web browsers are advanced now a days there are lots of interesting stuffs have been added into them. Recently I came to know that you can take a snapshot of a webpage using canvas object and few lines of javascript. There are already numbers of plugins available which are doing this internally. So now I think its not fruitful to send whole web page content to server to prepare the snapshot and hence I will discontinue this project. But glad to hear that there are easier ways to do stuff like this.

Generate Image or Thumbnail of a webpage using java

Long time ago in a project we had requirement to show image of a webpage on mouseover of link. I started looking for a pure java implementation for the same. After searching a lot I came to know that it is not feasible to generate image of a webpage using pure java.

Before some days back I came to know that this can be achieved easily through QT library, which is a  cross platform application and UI platform written in C++. QT library provides webkit engine to render webpages in their natural look and feel, so I decided to write my own JNI wrapper on top of QT thumbnail application. But after spending some time on my core c++ application I came to know about QT-Jambi, a java wrapper for QT library.

So I started with QT-Jambi and managed to write my own implementation of Thumbnailer application. Here I am sharing SiteGraphThumbnailerDemo program using the same. Have a look at code snippet below which describes key points in the Thumbnailer application. To save spaces I have removed import statements, constructors and getters-setters. Eager developers like me can directly jump to the Download link of whole source code at the end of this post.

QT Jambi provides QWebPage object which is a part of QT Webkit library.

protected QWebPage page;

As shown below makeSnap() method is used to load html content of a provided URL. QT-Jambi provides event based method invocation mechanism. In below method we have registered loadStarted(), loadProgress() and loadDone()method hooks for specifict implementation for these events.


   /**
	 * Method to load html content from provided url
	 */
	public boolean makeSnap(){
		try{
		if(logger.isDebugEnabled())
			logger.debug("Connecting to url : "+this.url);
		if(QApplication.instance() == null)
			QApplication.initialize(new String[] { });
		page = new QWebPage(null);
		page.mainFrame().load(new QNetworkRequest(this.url));
		logger.debug("Page Loaded");
		page.loadStarted.connect(this, "loadStarted()");
		page.loadProgress.connect(this, "loadProgress()");
		page.loadFinished.connect(this, "loadDone()");
		logger.debug("Load Finished");
		finished.connect(QApplication.instance(), "quit()");
		QApplication.exec();
    	}catch(Exception exp){
			logger.error(exp.getMessage()+ " Error While taking a snap");
			return false;
		}
		return true;
	}
Once the whole web page is rendered in QT Webkit engine loadDone() event is invoked internally and image processing can be completed using loaded webpage content. You can verify content loading start and content loading progress in loadStarted() and loadProgress() event hooks.
	private void loadStarted(){
		logger.debug("Part in Started");
	}
	private void loadProgress(){
		logger.debug("Part in Progress");
	}
Once image loading is completed QWebPage provides lots of customization on loaded content before exporting it to a full fledged image. It includes image scaling, transformations etc. Check QT-Jambi Javadoc for more information on QImage.
	/**
	 * Called internally by makeSnap() method to save loaded image(s) based on provided ImageAttribute details.
	 */
	private boolean loadDone() {
		logger.debug("Loading for page url : "+ this.url);
		for(ImageAttributes imageAttribute: this.imageAttributes){
			logger.debug("Loading for page url : "+ this.url);
			page.setViewportSize(imageAttribute.getImageSize());
			page.mainFrame().setScrollBarPolicy(Orientation.Horizontal, ScrollBarPolicy.ScrollBarAlwaysOff);
			page.mainFrame().setScrollBarPolicy(Orientation.Vertical, ScrollBarPolicy.ScrollBarAlwaysOff);
			page.setViewportSize(new QSize(Constants.DEFAULT_IMAGE_WIDTH, Constants.DEFAULT_IMAGE_HEIGHT));
		    QImage image = new QImage(page.viewportSize(), QImage.Format.Format_ARGB32);
		    image.fill(QColor.white.rgb());
		    QPainter painter = new QPainter(image);
		    page.mainFrame().render(painter);
		    painter.end();
		    String imageName= imageAttribute.getAbsoluteImageFilePath() + imageAttribute.getImageSuffix();
		    logger.debug("Preparing image : "+ imageName);
		    logger.info("Image prepared: "+image.save(imageName));
		}
	    finished.emit();
	    return true;
    }

You can download whole source code for this demo application from box.net.

Note that Apache Maven is used to resolve dependencies of this application. QT-Jambi dependencies can take some time to load with a slow internet connection as it’s total size is approx. 85MB.

Please add your suggestions/comments below.

UPDATE : Looks like number of people have downloaded above demo. Please provide your comments/suggestions below regarding the demo or post.

Added my first open source application on github

After so much of delay at last I have published my first open source application on GitHub.

As described in my previous post I have used qt-jambi to generate snapshot/thumbnail for given website using java. This application is developed in java and I have used Maven for dependency management and build tool. I will be adding several functionalities later on, as per my convenience.

I have named it SiteGraphThumbnailer have  a look @ it and provide your feedback if any.

Its opensource so you can modify it as per your requirement.

Is it too late to implement

While working on one of the project I was unable to find any open source Java implementation to generate website thumbnails. At that time I have decided to write my own code to do the same. As this was not possible purely with Java only I get back to C/C++ implementation and found CutyCapt C++ webkit based image rendering utility developed using QT Library. Though it was written in C++ only that’s what I wanted. I decided to write my own Java wrapper on top of CutyCapt to extend its functionality in Java.

I found pretty useful Java bindings for QT Library called QT-Jambi and created my prototype using it. But just before I am writing this post I decided to give name to it as I already had prototype ready with me based on qt-jambi library in Java and is working fine.

Before giving a name to this project I decided to make another broaden search about similar projects available in the community. I was surprise to see that what exactly I was thinking to make including extensions and rich functionality along with simple utility was already available.

Damn . . .

So what should I do now? I should scrap my efforts on this project? As I don’t want to reinvent the wheel again.

But wait let me rethink on it and I may able to provide more functionality than existing projects. After publishing my code on one of the source code hosting services I will post my prototype on my blog.

One of the cause or solution for mysql errorNo 1005 : Can’t create table

This may seem minor issue for MYSQL Guru but in on one of the J2EE application I came across an unusual error (at least for me) while creating one of the child table having foreign key constraint. The error was “Can’t create table address (errno: 150)”. For eager seeker like me who don’t want to read whole story can directly jump to last two paragraph for solution/cause of the problem.

Below are the table definitions I was using for creating person and address entities :

CREATE TABLE `person` (
`id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
`name` VARCHAR(45) NOT NULL,
PRIMARY KEY (`id`)
)
ENGINE = InnoDB;

CREATE TABLE `address` (
`id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
`personid` INTEGER NOT NULL,
`street` VARCHAR(45) NOT NULL,
`city` VARCHAR(45) NOT NULL,
`country` VARCHAR(45) NOT NULL,
PRIMARY KEY (`id`),
CONSTRAINT `address_person_fk` FOREIGN KEY (`personid`) REFERENCES `person` (`id`)
ON DELETE NO ACTION
ON UPDATE NO ACTION
)
ENGINE = InnoDB;

In MYSQL documentation error description was this “Table creation failed becoz of foreign key” and “All foreign key it refers to should be of same type” about the error.

I was more confused after reading error details and unable to spot my mistake. Finally a careful look to my address table I was able to correct my mistake. The problem was data type mismatch in my address table. I have used INTEGER data type in address table in foreign key relationship but it should be UNSIGNED INTEGER to be compatible with parent person table.

So one of the solution for mysql errorNo 1005 : Can’t create table is to make foreign key relationship between two same data type only. Hope this will save someone’s time, thanks for reading.

My First Blog Entry

Hey Folks,

From Last year I was thinking to have one spot to share my knowledge ​ and experience.

Istu : share knowledge and experience my foot, he just wants to show off thats it.

Recently I have got some encouragement/ motivation through tweets and from my friend’s blogs.

Istu : Motivation or Jealousy.

So finally I have decided to write my own blog because blogs provides rich platform to ​share information across the web with minimal efforts and time.

Istu​ :​​ Rich platform ? minimal efforts/time or don’t have money to pay for web domain space ha ha.

Here we will discuss some serious technical topics such as Java, J2EE, Spring Framework, Struts, Hibernate, Ubuntu Linux, Security and many more . . . .

Istu: Which word is serious ha ha

Today I am writing my first blog to start the trend, as today is 12 Rabiul Awwal (Eid-E-Miladunnabi) very important day in Islam.

Istu: Thats correct. Eid Miladunnabi mubarak to all.

Lets see how all these goes​ on, expecting a great response from you all guys.

By the way Istu is my friend  and he will be there in each post​ whether I like it or not :).

%d bloggers like this: