Comparing .csv files and generate sweet HTML reports in rendersnake

Here is a simple library to perform a simple operation. Compare two delimiter separated files and output an .html file.

Simple and straightforward. It can be used to output a ‘Comparison Result’ object, or it can be used to print out an .html report

Features

  1. Compare methodology can be customized using a properties file
  2. Report can be customized using a properties file

Using rendersnake and it pretty awesome.. It is available on github and v1.0 is somewhere between the first cry of the baby and kindergarten.

Here is the gitlab link.

See a report sample,

csvCompare

csvCompare

enjoy..

renderSnake – Better Way to create HTML

We live in an age where everything is open and innovations spring out every second. All those algorithms, all those concepts and all those frameworks are easily avalable to he who is willing to look. Unless you are not staring down from the tip of the cutting edge, you can pretty much get help on any problem. If someone had a similar problem before and you have the solution available, why re-invent the wheel..

When I was in the task of creating an HTML report generating tool, I did not have to look much. Found the perfect framework – renderSnake. renderSnake is a component based HTML generation framework. Its purpose is to support the creation of Web applications that are better maintainable, allows for easier reuse, have testable UI components and produces compact HTML in an efficient way. Let’s start off with an example.

So, let’s create a plain old HTML.

</pre>
<h4>Two rows and three columns:</h4>
<table border="1">
<tbody>
<tr>
<td>Haruki Murakami</td>
<td>Gregory Roberts</td>
</tr>
<tr>
<td>A Wild Sheep Chase</td>
<td>Shantaram</td>
</tr>
</tbody>
</table>
<pre>

And the java code to create the HTML 

HtmlCanvas html = new HtmlCanvas();
html
 .html()
  .body()
   .h4()
    .content("Two rows and three columns:")
     .table(border("1"))
      .tr()
       .td()
        .content("Haruki Murakami")
       .td()
        .content("Gregory Roberts")
      ._tr()
      .tr()
       .td()
        .content("A Wild Sheep Chase")
       .td()
        .content("Shantaram")
      ._tr()
     ._table()
    ._body()
  ._html();

HTMLCanvas

Using a Canvas, you can write code that produces HTML. The Canvas has methods for all HTML tags. There are two methods for writing an opening tag, one without and one with attributes. The Canvas maintains a stack of nested tags. Proper closing of tags is required, according to the rules of HTML (some end tags are required, some are optional and some are forbidden).

Each tag method returns the Canvas instance, allowing for a fluent programming interface. Using source indentation you can visually verify the correct structure. In the above example, the variable html is an instance of HtmlCanvas.

HtmlAttributes

Using an HtmlAttributes instance, you can add attribtues to tags such as href, class and id. The Java classes HtmlAttributes and HtmlAttributesFactory provides convenience methods for creating instances. This allows for a fluent programming interface.

//This one is using HtmlAttributes :

html.body(new HtmlAttributes("key","value")); 

//This one is using the HTMLAttributesFactory

.a(href("http://goto.com")) 
                .img(src("picture.png").alt("some picture")) 
                ._a(); 

All the attributes for a given tag can be set using the corresponding method. In the above example, the href, img and alt properties are set.

I am yet to find a limitation for renderSnake. You can get more examples here and here..

Richfaces migration diaries

I always wanted to do this. I always wanted to write down a detailed description of the work I do. So, here’s the deal, my task was to migrate a web application running on RichFaces 3.X to RichFaces 4.X.

Simple and clean application running on JBoss 5. Just a couple of pages and quite many validations happening with JavaScript.

Replacing the RichFaces jars

So, I went about removing RichFaces 3.X jars and replaced them with the 4.X variants. The core framework and the component related bundles are :

  • richfaces-core-api-4.2.0.Final.jar
  • richfaces-core-impl-4.2.0.Final.jar
  • richfaces-components-api-4.2.0.Final.jar
  • richfaces-components-ui-4.2.0.Final.jar

If you are wondering the download location..here it is.. These jars are dependent on the following ones too

  • guava-10.0.1.jar
  • cssparser-0.9.5.jar
  • sac-1.3.jar

Application Descriptor Change

There are quite a few things that should be looked into here..

  1. RichFaces 4 does not use Filter anymore. So, off with the <filter> and <filter-mapping> tags
  2. Removed the orj.ajax4jsf.VIEW_HANDLER context param

and so on.. the official guide does justice to the descriptor changes.

Upgrading JBoss

Once the libraries and descriptors are updated, I tried starting my server. Only to end up in an Exception. There seems to be an error in building the JSF tree.

Apparantly, JBoss 5 is not compatible with JSF 2.0 as said here. So, created a new server instance for JBoss 7.

Also, the JSF-impl.jar should be removed from the lib folder.

Components Missing

Finally, the server is up. Still, there is a long way to go. Lot of RF component had to go through upgrades and a few of them even phased out. Our application widely used one of them, the <rich:spacer>.

A custom spacer component had to be built to provide the effect. Here is how to do it using the resources framework of JSF 2.0.

Some more components had changes too.. here’s a quick outline of the rich componets.

  • <rich:toolBar> to <rich:toolbar>
  • <rich:toolBarGroup> to <rich:toolbarGroup>
  • <rich:modalPanel> to <rich:popupPanel>

It’s not limited to these.. the list for the most of the components can be found here

a4j components had changes too..

  • <a4j:support> to <a4j:ajax>
  • <a4j:actionparam> to <a4j:param>
  • <a4j:form> was done away with.. had to use <h:form> instead

The list of a4j component changes can be found here

Miscellanious changes in component properties

Most of the changes I needed was covered in the officail RichFaces migration document.

  • reRender was to be replaced by render
  • process replaced by execute
  • The ajaxSingle propery was taken away. So we user execute=”@this” instead

However, the official document had a few misgivings.. We have widely used the < rich:dropDownMenu > and a key property of this component is ‘direction’. Quite elementory, the property denotes which direction the dropdown opens up. I had used a ‘botton-right’ property for all the dropdowns in our application.

Somehow, the ‘bottom-right’ property value was throwing an error. After almost an hour of digging through several forums. I can’t seem to understand why they missed such a thing in their official documentation. The direction properties were renamed to topLeft, topRight, bottomLeft, bottomRight

See their documentation on the topic..

Another key feature they missed in the documentation is on the ‘data’ property of the <a4j:jsFunction>.

Should the data be passed to another method, it should be passed as ‘event.data’.

For example :

<a4j:jsFunction name="callScript" data="#{bean.someProperty}" oncomplete="myScript(data)"/>
should be repalced with
<a4j:jsFunction name="callScript" data="#{bean.someProperty}" oncomplete="myScript(event.data)"/>

Page looks all Jumbled ??

So finally, the component issues were resolved and the page finally loaded. But something’s missing. The buttons are not where they were supposed to be. The entire application looks a bit.. crazy.. It did not take long to find the reason.. certain styles were not getting loaded.

Adhering the JSF Standards

Well, I would not call this a richface migration challenge. But, my application pages were all using <head> tag instead of <h:head>. Now here’s the difference. While we use the <h:head> tag, it becomes part of the JSF Tree. Also, JSF uses the <h:head> as a hook to load the necessary js/css files as part of the HTML DOM <head>. Somehow, while using RichFaces 3.X (which does not fully utilize JSF 2 ), this worked. But moving onto JSF 2.0 and RichFaces 4, this fell apart. The styles and javaScripts were not getting loaded.

So, a simple change find all <head> and </head> and replace them with <h:head> and </h:head>

Missing Functionality

So the page’s up, and it looks how it is supposed to look. But there is one last problem. Certain functionalities are not working. Nothing breaks in the server end, and as it seems, it’s throwing up a script error. Certain methods does not seem to exist anymore.

The reason for such a behaviour was jQuery

Apparantly, RichFaces 3.X user jQuery 1.4 and RichFaces 4.X uses jQuery 1.7.

One of the striking changes I had to accomodate was to escape the colon character in the ID of and element.

$(‘parentForm:button’) works well with jQuery 1.4. However, when jQuery encounters a ‘:’ somewhere along the line, it’s expecting a JSON object value-key pair.

To get the desided effect, $(‘#parentForm\\:button’) has to be used.

That’s that.. everything seems well now..

Definitely there will be much more changes related to RichFaces and jQuery than this.. their official guide is a good start.

Copy & Paste

I was reading this article the other day. Got interested in Edgar Alan Poe and decided to add this book to my to-read list. So I tried copying the book’s name and something really amazed me. It was not just the book’s name that was copied..

1

You can see from the screenshot that the link to the page got copied along with the small crumb of words I actually tried to copy. Well, this seemed  interesting. I tried reading more on this and realized Cracked.com is not the only site that uses this trick. Answers.com, Financial Times, Fox News, New York Post and a lot more sites use this feature.

Well, what’s the idea behind this. It’s claimed that more than 80% of the content shared across the internet is over ‘Copy and Paste’. This mostly involves copying the content from a web page and sharing across e-mail.

I never thought such a simple thing like ‘Copy and Paste’ can be monetized. Most of these sites use the services provided by Tynt. It’s wonderful how Tynt uses simple JavaScript events to capture and manipulate this information. From how I see this, there are two possibilities.

  • Use analytical techniques to capture details on when any content from my website is copied. Huge details like how many users have copied my content, when did they copy and what did they copy can be collected.
  • A copyright statement or a link to the original webpage can be appended to the copied text. This will improve the SEO chances of the webpage in question.

Let’s see how they do this..

It all starts with a JavaScript event, oncopy. As the name says, this event is fired when,

  • Pressing CTRL + C.
  • Selecting the Copy command from the Edit menu.
  • Opening the context menu (right mouse button) and selecting the Copy command.

See the below example.

1

See that, in line no 5, I have registered an event handler for the oncopy event. This will fire on the conditions mentioned above. Within the event, the developer can make an AJAX call to the server. The call can be used for logging or analytics.

However, accessing the clipboard data is a bit tricky and all the browsers are not in the same opinion here. The difference comes when the oncopy event is triggered. For Internet Explorer, the event is fired just after the text is copied. However, in the case of Firefox or Chrome, the event is fired just before the text is copied. So in the case of Firefox or Chrome, the clipboard is empty 😦

Fetching the clipboard data is simple in the case of Internet Explorer.

1

The clipboard values are accessed using the clipboardData object in Window object. See more about DOM objects here.

See the code carefully, and it can be seen in line no 11 that I am making a check for IE. The clipboardData object would be null for other browsers. And for other browsers, I am returning false and breaking the program flow. Remember that for browsers like Firefox and Chrome, the oncopy event is fired before the value is copied to clipboard. So, returning false will disable the copy here.

It’s a neat trick that can be widely used in content centric sites. However, it’s not without complaints.. see this article on how Tynt can annoy someone.

 

The HTML DOM (Document Object Model)

Anyone who has developed using  JavaScript should be familiar with the term, DOM or Document Object Model. It’s neat and interesting stuff, and how it evolved over ages is another epic in itself.. but that’s for another day..

So, in the world of Object savvy development, everything is an object. Every web page resides inside a browser Window which can be considered an object. It’s an object complete with cliche windows properties like scrollbar, frame etc..

And for the document, the content we see inside the window, is also an object. It’s quite evident that the HTML script is responsible for the content or HTML scripts are the content. The HTML document is displayed as on object within the window. Note that I used the words document and object. So, the standards by which the HTML document is displayed as an object is called the Document Object Model.

When we say Document Object Model, it means a standard for creating Objects out of a markup language. In addition to HTML, XML and XHTML has their own DOM standards.

This is what W3C says about DOM

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

The DOM follows an hierarchical representation.

1

Let me just put in a few words on the high level objects..

The Window object is the root of the tree. A Window object represents one open window in the browser. Having said that, in the world of dynamic HTML(will have to write something on it), it’s very common to introduce iframes in pages. In that case, the browser constructs one window object for each iframe. The same reason why the iframes acts as separate entities. The Window object API can be referenced here.

The History object stores the list of URL visited from the page. Consider this instance, I have opened two tabs, viz  http://http://www.google.co.in and http://www.bing.com/. Both of them will have a separate Window object, let’s call them WIN1 and WIN2. And from google, I navigated to the maps tab, i.e https://maps.google.co.in/. So, the previous page(http://http://www.google.co.in) will be stored in the history object of WIN1. The other window object will be impervious to these changes. Having an array of the previous URLs gives the developer the powers of navigation. The History object has two major functions.

  • history.back
  • history.forward

Both returns no value and are similar to clicking the ‘back’ and ‘forward’ buttons on the browser. The entire API can be found here.

The Document object is the developer’s blue eyed boy. The Document object stores everything under the <HTML> tag. In other words, each HTML document loaded into the browser becomes a document Object. The Document object can be used to access anything in the HTML document. This is widely used and exploited by developers.

1

This example by W3C provides a perfect example on how the Document object is used in modern Web apps. The entire API reference can be found here.

The Location object stores the URL details of the current page. The Location object is part of the window object and is accessed through the window.location property. See the Location object dissected.

1

JavaScript objects and Prototype

I am huge devotee of JavaScript. Isn’t it wonderful, a cheap and dainty piece of code that supports the server side code. Even though that’s how it all started, it has grown much. Since the entire industry began moving towards web based apps, so many JavaScript libraries began sprouting like mushrooms. This is a good enough list.

The beauty about JavaScript is that every single thing you see in JavaScript is an object. Isn’t is beautiful, a variable,string,number or even a method is an object. So, whenever you say ‘Object’, what comes to your mind is ‘properties’ and ‘methods’. An example speaks louder than 20 lines, so here goes..

As i just said, everything is an object, even a String variable.

1

I assume what you see above is self explanatory and pretty naive. The entire list of methods and variable for a String object can be found here.

Now, with the basics out of the way, let’s get to some interesting stuff.

Speaking of objects, all the objects in JavaScript are descended from the object Object. Let’s see how to create custom objects in JavaScript.

Yes, JavaScript certainly does have the new operator

1

So we created a variable person ( i repeat, everything is an object) which hails from the object Object. I am setting properties to it. The method which reads the properties are added to it. Finally the method can be invoked just like any normal method.

Well, this is just one way of creating a JavaScript object. There is another way which uses constructors.

1

I would really suggest using the constructor. In the modern world of numerous frameworks and libraries, the more robust and clean the code, the better.

Having said all that, there is an alternate way for the lazy folks.

1

Let’s move on to the JavaScript prototype object.

Take any object in JavaScript and you’ll see it has a property by the name of prototype. This makes it an ubiquitous entity in JavaScript.

All objects inherit methods and properties from prototype. Looking from a developer point of view, prototype can be used to assign a ‘base-class’ object like behavior for JavaScript objects.

1

In the case above, both a musician and a writer can greet themselves. This is done using the greet method. The method is added to the prototype of both the objects.

The above program would alert the following lines,

Greeting and Salutations from Fyodor

This is the time when Fyodor writes

Greeting and Salutations from Bob

This is the time when Bob sings