IBM Rational EGL : Simplified Web 2.0 development

By Devang | September 14, 2009

Web 2.0 and RIA provide next generation of web applications. These applications have following properties-

  • Capabilities of a desktop application with manageibility of web applications
  • mash related data from different sources
  • Focus on client side processing
  • Simple but powerful interfaces
  • Collaborative

Why it is difficult to develop web 2.0 application?

  • Complex technologies involved like SOAP, JSON, Javascript, Ajax etc.
  • Most tools and solutions are either front end or backend.

IBM has come up with EGL to solve these problems and provide a easy platform for the development of RIA.

EGL is a higher-level programming language designed for developing powerful, modern applications

The goal is to shield developers from complexities typically associated with Web 2.0 application development.

EGL Features:

  • A true cross-platform, cross-tier language targeted at all types of developers
  • Traditional, procedural, object-oriented
  • Provides flexible deployment options
  • Compiles to Java, COBOL, or JavaScript
  • Web 2.0 and SOA built-in

EGL is also an excellent target language for migration of existing, traditional applications

EGL is easy to learn, simple, open and extensible, comes with widget library, eclipse based plugin, can consume all types of webservices.

More on EGL

Posted in AJAX, WEB 2.0, javascript | Tagged , , | Leave a comment

Client Side Storage/Persistence

By Devang | September 8, 2009

Why client side persistence ?

Web vs Desktop: Desktop allows a lot of options to store data on the client side as it allows us to access information from local files. But the web has a limitation in that respect. Wen do allow some mechanisms to store and load data locally one of them is cookies.

What is a cookie? Cookies are small text based files which holds information in key:value pairs. Cookies are domain specific and don’t allow other domains to access data other than created by themselves.

Example of a cookie file.

firstname=devang;expires=29/04/2008; path=’/'; domain=’/';

This example stores firstname as a cookie and also tells us when it expires and about the domain and the path which are allowed to access the cookie.

Cookies can be used for Session Management, Personalization, Tracking. Lot of information about cookies can be found at More on cookies

Cookies can be used to serialize javascript objects and store them in cookie files. Then when needed they can be deserialized and brought back into application. After deserialization a json is made can be used as a  normal Js object.

A js wrapper for loading and saving jsObject is cookieMonster.js.  It has got all the functions required to load ,save objetcs to cookies and  removing them.

But there are some drawbacks with cookies like

  • Inaccuratee Indentification
  • cookie hijacking
  • cookie theft
  • cookie poisoning
  • cross site cooking

Information about all these can be found on more on cookies

There are various alternatives available for cookies like

  • IP address
  • URL (query string)
  • Hidden form fields
  • window.name
  • HTTP authentication
  • Adobe Flash Local Shared Objects

So before using cookies analyse our case and if you use cookies make sure you are ready for the drawbacks which cookie offers.

If you want to know how cookies work you can read a super article at howstuffworks.

nJoy !!

Posted in WEB 2.0, html, javascript | Tagged , , | Leave a comment

Getting iFrame’s Body content on IE and Firefox

By Devang | September 8, 2009

A few days back i was working on a  problem for which i had to read contents from a body tag of an iframe. I tried the normal code which any developer will use :

var bodyContent=window.frames['frameName'].document.body.innerHTML;

To my surprise it was not cross browser compatible.

It didn’t work on both IE and Firefox.

After googling i figured it out how to make it work for both IE and Firefox. Here is the code

var iFrameId =  document.getElementById('frameId');
   //For Firefox
   if ( iFrameId .contentDocument )
   { 
     alert( iFrameId .contentDocument.getElementsByTagName('body')[0]);
   }
   else if ( iFrameId .contentWindow )
   { // internet explorer
     alert(iFrameId .contentWindow.document.getElementsByTagName('body')[0]);
   }

Have fun !!

Posted in WEB 2.0, javascript | Tagged | Leave a comment

Enable bookmarking and back button in ajax applications

By Devang | July 8, 2009

One of the problems when using AJAX in an application is that we cannot bookmark pages and we cannot use browser’s back button. I have developed lot of application based on Ajax and faced this problem myself.

This problem exists even in Gmail , Google Maps etc.

I came  across a solution which can solve bookmarking and back button problem. The article listed on ONJava.com demonstrates the way in which this problem can be solved.

They have used RSH (Really Simple History framework) to solve this problem.

The crux of the solution is

  • Hidden HTML form is used to allow for a large transient session cache of client-side information; this cache is robust against navigation to and away from the page.
  • A combination of hyperlink anchors and hidden iframes is used to intercept and record browser history events, tying into the back and forward buttons. Both techniques are wrapped with a simple JavaScript library to ease development.

What is RSH ?

The Really Simple History (RSH) framework makes it easy for AJAX applications to incorporate bookmarking and back and button support. By default, AJAX systems are not bookmarkable, nor can they recover from the user pressing the browser’s back and forward buttons. The RSH library makes it possible to handle both cases.

In addition, RSH provides a framework to cache transient session information that persists after a user leaves the web page. This cache is used by the RSH framework to help with history issues, but can also be used by your own applications to improve application performance. The cache is linked to a single instance of the web page, and will disappear when the user closes their browser or clear their browser’s cache.

RSH works on Internet Explorer 6+ and Gecko-based browsers, like Firefox. Safari is not supported.

Source

DEMO

Posted in AJAX, Uncategorized, WEB 2.0, javascript | Tagged , , , | Leave a comment

jQuery Tools - Explored

By Devang | July 7, 2009

jQuery Tools gives you tabs, tooltips, accordions, overlays, high usability, striking visual effects and all those “web 2.0″ goodies that you have seen on your favourite websites.

This library contains six of the most useful JavaScript tools available for today’s website. The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.

This library is open source and dual licensed under MIT and GPL 2+ licenses.

jQuery Tools

jQuery Tools

Performance :
This library weighs 5.8 Kb. This is possible with good programming habits, compressed files and a Content Delivery Network (CDN).

Accourding to jQuery Tools –
“The file size is definitely not the primary reason why this library speeds up your site. The fact that this tool is a single file makes it performance friendly. According to Yahoo experts, this is the first rule for making highly responsive websites.”

I tried it for a demo and its experienced the speed factor stated above.

jQuery Tools provide six components

See Demos of jQuery Tools at  Demos

Download it from  Download

Posted in Uncategorized, WEB 2.0, javascript | Tagged , , | Leave a comment

Reading a file from file system using javascript

By Devang | July 6, 2009

Reading a file into javascript variable is a issue anyone can face while developing client side application.

The problem has different solution depending on platform/browser

Solution

1) Windows/IE : Use the available FileSystemObject. It allows one to read and write files from local machine.

2) Firefox: It does not have a object corresponding to FileSystemObject in IE. So we rely on XMLHTTPREQUEST Object provided. Our strategy here is to send the file to the server. On server read the file and flush the content to the client. On client side we can get the file contents in xmlhttprequest.responseText property.

3) Applet: This solution makes use of Java Applet which allows you to read the local files.

Example of 2nd method using PHP as scripting language

1) From the client side write a form having a file upload utility.

2) Send the file to the server.

3) On sever side read that file and flush the contents

PHP Code

if ($_FILES["file"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "
";
}
else
{
echo "";
$file = fopen($_FILES["file"]["tmp_name"], "r") or exit("Unable to open file!");
//Output a line of the file until the end is reached
while(!feof($file))
{
echo fgets($file). "
";
}
fclose($file);
}

4) On client side read it as

var fileContent=xmlhttprequest.responseText

Thats it guys. You are Done.

Posted in PHP, javascript | Tagged , | Leave a comment

robot.txt - guiding the crawler

By Devang | July 6, 2009

Robot.txt is meant for crawler and spiders. Using robot.txt web masters can guide and instruct crawler to specific areas of the website. Web masters can disallow crawler’s access to certain pages and folders of the website. One can also specify the crawl speed with which a crawler can index the site.

“Robot.txt is placed at the root folder of the site”

Webmaster can specify three instructions for crawlers namely

  • disallow : which tells the robot about sections which it cannot visit.
  • crawl delay: speed at which crawler crawls the site.
  • sitemap: Tells the crawler about all the pages associated with the Site and their URL.

Sitemap instruction is very useful for the Search Engine Optimization.

Example of Robots.txt:

User-agent: *
Disallow: /javascript/
Disallow: /css/
Disallow: /images/
 
sitemap:www.robotdevpaliwal.com/sitemap.xml

In this example robots wont be able to access three folders namely javascript, css, images using any user-agent.

Sitemap command tells the robot the location of the sitemap file.

Another example

User-agent: *
Disallow: /

This will not allow the robot to index even a single page from the server.

Another example

User-agent: xyzBot
Disallow: /

This will disallow xyzBot to crawl the website.

Another example

User-agent: *
Disallow: /password.php

This will disallow acces to password.php in the root folder.

Posted in SEO, WEB 2.0 | Tagged , , , | Leave a comment

php - Supress-warnings

By Devang | July 3, 2009

Yesterday i was working on PHP’s file handling functions. Due to default permissions i was getting default warnings generated by PHP Engine. I decided to suppress the warning messages. Found out a very simple solution for this problem.

Just need to put a @ before calling file handling functions.

$handle = @ fwrite(”abc.txt”, “w”);

After this warning messages were not rendered on the screen.

Posted in PHP | Tagged | Leave a comment

Solution for IE 6 & 7’s min-width, max-width, min-height, max-height problem

By Devang | June 29, 2009

Problem: IE 6 and IE 7 does not support min-width, min-height, max-width, max-height css properties. CSS code with these properties work very well in other browsers.

Solution: IE provides Dynamic Properties to solve this problem. IE provides “expression“  propert/function which is evaluated at runtime and the value is assigned to the CSS property.

For example: Lets look at the below css

position:absolute;
 
left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);

In this example left property will be assigned the value of ” document.body.clientWidth/2-oDiv.offsetWidth/2 “.

So now to set min-height of a div with id ‘xyz’ in CSS we write:

For Internet Explorer

HTML
<div id=”xyz” class=”xyz”/>

CSS

.xyz{
 
height:expression(document.getElementById('xyz').scrollHeight &gt; 50 ? "50px" : document.getElementById('xyz').scrollHeight+"px");
 
}

For other Browsers

.xyz{
min-height:50px;
}

The same holds true for all other properties namely max-height,max-width,min-width.



For more information about expression you can read this article.

Posted in css, javascript | Tagged , , | Leave a comment

TWEET - Best jQuery plugin for Twitter

By Devang | March 7, 2009

I searched the internet for jQuery plugin which can get me twitter feeds in an onobstructive and simplistic manner.I found jTwitter and TWEET and few others. I compared these two plugins and concluded that TWEET is the best. The ease of integration and the supplementary which one gets is awesome.

Download TWEET

Download jQuery

How to use it?

1) Include jquery.min.js file in the head section of your html page.
2) Include jquery.tweet.js file in the head section of your html page.
3) In this jquery.tweet.js file change username to username whose tweets you want. ex devangpaliwal
4) In head section of the html document add following code in script tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function(){
        $(".tweet").tweet({
            username: "devangpaliwal",
            join_text: "auto",
            avatar_size: 16,
            count: 100,
            auto_join_text_default: "I said",
            auto_join_text_ed: "I",
            auto_join_text_ing: "I am",
            auto_join_text_reply: "I replied to",
            auto_join_text_url: "I was checking out",
            loading_text: "loading tweeter feeds..."
        });
    });

5) In body tag add the following HTML. This is where twitter feeds will appear.

<div class="tweet"></div>



List of features which TWEET offers-

  • small size and fast download time
  • will not slow down or pause your page while tweets are loading
  • display up to 100 tweets, as permitted by the twitter search api
  • display tweets from a twitter search, or from your own feed
  • optional verb tense matching, for human readable tweets
  • optionally display your avatar
  • optionally display tweets from multiple accounts!
  • automatic linking of @replies to users’ twitter page
  • automatic linking of URLs
  • automatic linking of #hashtags, to a twitter search of all your tags
  • converts <3 to a css styleable ? (we ? hearts)
  • makes awesome text, AWESOME text with AWESOMEIZER
  • customize the style with your own stylesheet or with other jquery plugins
  • compatible with most jquery versions, including jquery 1.2.6 and the latest, 1.3.x

Bold features are the ones which distinguishes it from other twitter plugins.

A must use for sites providing social media!!

Posted in WEB 2.0, javascript | Tagged , , , | 1 Comment