Eclipse code template - Qooxdoo development

There is no proper WYSWYG editor for qooxdoo development. You need to code the classes as you code in core java. To improve the productivity, you can setup few code templates in your IDE such as Eclipse.

For example: create a code template for the qxclass

Click on Windows > Preferences in Eclipse IDE.
In the preferences dialog as mentioned below, go to  JavaScript > Editor > Templates
Note: 
If you are project is JavaScript project, go to JavaScript > Editor > Templates.
If you are project is Java project, go to Java > Editor > Templates.

Add a new template by clicking on "New..." button. Add the template for the qx class as mentioned below.
Give a name for it and type the template content. You can use certain variables such as $cursor to place the cursor at a specific location when you use this template. There are many more variables available in Eclipse IDE which you can use.

Now, let's see how to use this template.

In the Eclipse IDE, After creating the file say "appname.ui.MyClass.js", open athat empty file and type the template name (say "qxclass" - the one example mentioned above). and press "Ctrl + Spacebar". The template code will be inserted and the cursor will be located at the place where you have mentioned ${cursor} in the template code.

Happy Coding :)

No Energy Vs No Time

When you have multiple personal or official tasks (say 4) to do in a day, you will be thinking 

• Whether I can do all those tasks by today?
• Should I discard one task?
• Should I prioritize and start from the one that is highest priority? 

If you are a typical person, you will mostly prioritize and start with the highest priority task. But, actually in my experience that is not the most optimized approach.

If you pick the task that gives me more satisfaction when you complete. Once you complete that task, the self satisfaction gives you the positive energy to do the rest of the tasks. Most likely you will complete all the tasks for that day.

If you decide that you cannot do all the tasks today and discard one task. By any chance, if that discarded task is the one in which you will get satisfaction, it will work in the opposite way. You will be feeling low because you missed that in your day and this will fire a negative energy and you cannot efficiently perform the remaining tasks that you decided to do for that day.

For example:
If you have list of tasks along with 1 hour swimming that you enjoy in the morning. If you feel it is going to be a long day today, let's skip the swimming today, that day will be really a long day.
But, If you start with you swimming in the morning, you get the positive energy and your brain cells are active and your will be able to do other tasks really quicker.

So, it is about whether you have energy or not. It is not about whether you have time or not.

Just give a try :) and let me know your experience...

Virtual Widgets in Qooxdoo

Qoxdoo provides the virtual widgets for certain widgets. These virtual widgets creates and renders only the visible items and updates it on demand. This improves the performance a lot, I really mean it.  If you build an enterprise application, you have to handle huge data. These virtual widgets are very helpful to handle those scenarios. Let's compare one of the widget in it's normal form and it's virtual form.

Widget:                    ComboBox
Normal ComboBox: qx.ui.form.ComboBox
Virtual CombBox:     qx.ui.form.VirtualComboBox

Firstly, Let's check the qx.ui.form.ComboBox
In the demobrowser, only 30 items are added in the default ComboBox. I took the ComboBox widget to the Playground, edited the code to add 10000 items in the default CombBox. You can observe how slow the response of the ComboBox. The loading of the page is slow and the response on click is very slow as the number of items increases. Even unloading of the page is also slow.

Now, Let's check qx.ui.form.VirtualComboBox
 In the demobrowser, only 400 items are added in the default VirtualComboBox. I took the VirtualComboBox widget to the Playground, edited the code to add 10000 items in the default VirtualCombBox. You can observe that the VirtualCombBox response is good. :)

The virtual widgets significantly reduces creation time and memory usage when visualizing even huge data sets. In addition to that, VirtualComboBox supports sorting and filtering through the delegate. Virtual List supports grouping.  Explore other virtual widgets in the DemoBrowser and Playground.

    

          // create a combo box
          var box = new qx.ui.form.VirtualComboBox();

var delegate = {
        // Inverts the order
        sorter : function(a, b) {
          return a < b ? 1 : a > b ? -1 : 0;
        },
        // Remove even-numbered items
        filter : function(item) {
          var num = parseInt(/([0-9]+)/.exec(item)[1], 10);
          return num % 2 ? true : false;
        }
      }
      box.setDelegate(delegate);

Cross browser support in web applications

Few years ago, we had very few variations in the browsers. After the Google chrome, the browser market became very agile. Now, Firefox is releasing a major version every few months.

In our team, we have two products, let's call it A and B.
A is developed with HTML, Javascript, CSS and with few additional third party components for Menus and Trees.
B is developed with the RIA framework qooxdoo. As the qooxdoo framework provides quite a lot of widgets, B does not use any other third party components for Menus and Trees.

Recently, the verification of the products are in progress.
A has lot of issues with the different browsers. To say a few.
1- The third party components does not work with IE9 and Chrome 16.
2- We have coded in HTML and javascript to retain the fixed header for the tables. That worked well in IE7.0 and Firefox 3.x. From Firefox4 onwards, Firefox removed the support of a variable. Fixed header code broke in Firefox 4.x onwards. We tested in Firefox 9.0, the code didn't work in that version too. We had to fix it separately for Firefox 3.x and Firefox 4.x onwards.

let's see how B performs.
1- As there are no third party components, B worked fairly well in IE9, Firefox 9.0, and Chrome.
2- qooxdoo  provides the table widget with sortable columns. This works well in most of the browsers.

So, with the agile competition between the browsers, it is advisable to migrate your web application to a Rich Internet application using a good framework such as qooxdoo.

Now, there is a beginner's guide on qooxdoo to jumpstart your development on Qooxdoo.
http://www.packtpub.com/qooxdoo-for-rich-internet-applications-beginners-guide/book

prompt aborted by user in Firefox 8/9

For few years, I had the following snippet of code that worked until Firefox 3.x. The following code refreshes the frame/page after the delete action to clear the old object and then alert the user that the action is complete.

refreshOnDelete();

alert(“Deleted Successfully");

In Firefox 8/9, looks like they are unloading cleanly. Therefore the alert will not be displayed to the user. Instead Firefox 8/9 displays an error message “prompt aborted by user”.

So, you should alert before refreshing the frame/page. The following code works in Firefox 8/9

alert(“Deleted Successfully");

refreshOnDelete();

Beginner's guide on qooxdoo

Rich Internet Application (RIA) provides the capability to deliver feature-rich web applications, enables you to develop web applications with most of the desktop application's characteristics, and improves the usability of the web application. Over the last few years, many frameworks have arrived and are available to develop the Rich Internet Applications in different technologies.

qooxdoo is one of the comprehensive open source RIA frameworks. qooxdoo allows you to develop cross-browser RIAs in object-oriented JavaScript, which helps greatly to re-use application code, and hence reduces the application size. It provides a wide range of off-the-shelf UI widgets. qooxdoo comes with a rich feature set when compared to most of the other RIA frameworks. qooxdoo is completely based on JavaScript. It provides a variety of tools to build, optimize, generate documentation, and more. qooxdoo framework supports multiple browsers, multi-language deployment, custom look and feel, unit testing, automation testing, and much more.

In the past few years, all the major Internet applications or enterprise applications have been developed or migrated to RIA to support all the features that are provided in the desktop applications. This helps the organizations to keep the customers happy and also improves application deployment and maintenance.

qooxdoo is an open source framework. It has been there since 2005 and it is a quite stable framework now. If you are watching and waiting for the right time to migrate your application to qooxdoo, this is the right time, in my opinion. Now, there is a beginner's guide on qooxdoo to jumpstart your development on Qooxdoo.
http://www.packtpub.com/qooxdoo-for-rich-internet-applications-beginners-guide/book

Requirements - What Vs How

When you get a request to add a feature for the product, you focus on the problem and ask what the user wants rather than how they want it. Most of the times, you'll hear "how they want". Realizing what is the actual problem will enable you to provide a better and cleaner solution than their expectation.

Sleep Vs Quality Sleep

Normally I hear people saying "You should have quality sleep". I didn't actually feel and experience that until last week. Few months back, I replaced my zero watts bulb (Apparently it is 12 watts bulb, check out here). Earlier I had Blue colored one, But I got the plain colored one as a replacement. I replaced the bulb and everything was fine. I normally switch on that bulb during the night and sleep. Initially I didn't realize any change, But in the later days, I realized that even if I sleep for 8+ hours, my eyes were straining during the day time. I thought it may be due to the tiredness of work, travel on Bangalore roads etc. One day I suddenly realized that long long ago, someone told me that my eyes are open slightly during my sleep. I started thinking on those lines and realized the plain colored zero watt bulb provides more light during the night. As I normally open my eyes slightly during sleep, I guess I strained my eyes during the sleep by closing it forcefully to avoid the light, which is the root cause. Then, I switched off the zero watt bulb and slept for few days, the quality of sleep improved a lot and now I sleep at least by 1 hour less than what I used to sleep before, get up early without alarm and my eyes doesn't strain during the day time. So, I really felt the quality sleep :)

Now, I started researching about further improving the quality of my sleep by thinking and discussing with friends. Following mind map conveys all about getting quality sleep.

Microsoft Word shortcut keys

If you use certain tools/software frequently, it is good to know useful shortcuts. This will help you save much time and enables you to prepare the artifacts very quickly if you are aware of the content ofcourse.

As we use word quite often, It is good to know the shortcuts at Microsoft word shortcuts

HTML Select - Does not scale well ? Optimize it to Scale.

I had huge data in some scenario and ended up displaying 25000 options in HTML select. It was really slow to render the HTML select, especially in IE. Ideal way to resolve this issue to redesign the screen to avoid huge data in select element. Considering the release cycle, changes at multiple places, test coverage, user documentation change, etc, I tried to analyze the root cause of the issue. When you create each Option object and add it to Select element in java script for such a large number of options, browser spends lot of time doing the string concatenation underneath. Especially IE is very poor in performing such tasks. Even while clearing the 25000 options, it takes quite some time. To improve the performance, I re-wrote the code as mentioned below:

Normal way but non-performing code:

    var selectedValue;
    var selectElement;

    selectElement.length = 0; // clear the options
    var len = 0;   
    for (i=0; i<=25000; i++)
    {
         selectElement.options[len] = new Option(i, i);
       
         if ( selectedValue != null && i == selectedValue)
         {
             selectElement.options[len].selected = true;
         }
         len++;
    } 

Optimized code:

Selenium - wait_for_condition - timeout

$sel->wait_for_condition($script, $timeout)  is not working correctly if the timeout is more than 180 seconds (180000 milliseconds). The timeout is not passed to the LWP::UserAgent object. By default the user agent times out for 180 seconds. If you are waiting for any time consuming AJAX operations, user agent times out at 180 seconds even if you pass higher timeout value (say 300000 milliseconds = 300 seconds) to the wait_for_condition selenium API.
I was getting the following error:

Error requesting http://localhost:4444/selenium-server/driver/:
500 read timeout
 
I and my colleague Mahesh checked the Selenium perl library code. It is not passing the timeout to the user agent, which is the issue. Normally people does not wait more than 3 minutes (180 seconds), so this issue might not have come to visibility. Anyhow, I have made a temporary fix locally only for the WaitForCondition command and it is working for higher timeout values.

Code changes in Selenium.pm are

   $command = uri_escape($command);
    my $fullurl = "http://$self->{host}:$self->{port}/selenium-server/driver/";
    my $content = "cmd=$command";
    my $tmp_timeout = 180;
    if ($command eq 'waitForCondition') {
        $tmp_timeout = $args[1]/1000;
    }

and

 my $ua = LWP::UserAgent->new;
 my $header = HTTP::Headers->new( Content_Type => 'application/x-www-form-urlencoded; charset=utf-8' );
 if ($command eq 'waitForCondition') {
        $ua->timeout($tmp_timeout);
 }

I am not sure about other commands that require this fix, this fix just handle the timeout issue in $sel->wait_for_condition() API.

Blogging

As the Blogging is out there for few years now, More people are becoming habitual to blog these days, I see many people are becoming a regular blogger and more people are creating new blogs daily. Time for the google, wordpress, and other blog sites to scale their clouds. I think, already they are doing it well :)
They are also enhancing the features. I recently changed my layout which stretches automatically based on my screen width. They are also commercializing well to monetize the blog to make win win situations for the blogger and the blog company. Amazon recently integrated with blogger to advertise the contents based on the blog context.

Kinds of blogging that I observe through my network:
1) Few people blog related to their profession. One of my friend write about his management experiences at  http://managewell.net These kind of blog really helps him to share the experiences from his vast experience and enables him get feedback from specific people who are interested in the particular topic. Also, if you are really, really good in your profession, it will take you to the right place that you deserve if you are not already there. For the readers, the blog posts are too valuable information and thoughts.

2) Few people write about their hobbies such as Travel, Fitness, etc. Even I have few separate blogs dedicated for travel, fitness, where I post related blog entries from by experiences.

3) Few people write about their daily activities or kind of web diary. If you are writing these kind of blog, you need to be really careful before publishing the post. Once you post, it is visible over the net. You just think whether you really want to share the post to whole public and will it have any consequences any time later in your life. On the other end, you can create blogs wherein you can set the security so that only the approved contacts can read all the posts in your blog site. You can form a closed circle of friends or family, so that you can share the blog entries only within them. In google blogger, go to settings -> Permissions, you can see the options for the same.

So, You think about the purpose of your blog, the intended audience of your blog, which will help you and the blog readers.

Firefox - Event handling issue

In the recent firefox releases 3.0 and 3.5, I see an issue in the event firing. In the ajax exvironment, it sometimes misfires.
In my scenario, for an anchor element, I kept the href attribute as "#" and added an onclick event for a clean solution.

aElem.href = "#";
aElem.onclick = function() {
//do the action
};

It is working fine in IE browser, but this event is not fired correctly in firefox browser.
When I click on the anchor element, firefox fires that action, but immediately after that it fires an event equivalent to refresh frame on which the anchor element was present.
To overcome this, I called the javascript function through the href attribute itself.

aElem.href="javascript:doMyAction();";

function doMyAction() {
// do the action
}

This is not a clean solution. But, this works both in firefox and IE.

Reduce CO2 emissions

Google exposes some of the indicators nicely in charts based on the data exposed by worldbank

I have checked few indicators across few countries. Here are the links of couple of charts.

CO2 emissions - USA, India, and China

Electric Power Consumption - USA, India, and China

Seeing all, Actually USA and the developed nations has to contribute a lot to save the environment.

Check out the other indicators either through the worldbank datafinder or Google Publicdata charts or develope your own way of rendering the data using the worldbank API

Bangalore Traffic and Circles

Bangalore traffic is going bad day by day. But, I don't see much improvement on the infrastructures. All the government is trying to do is widen the roads and build circles without signals. I hate the circles concept. You expect the bangalore traffic to flow automatically without any signals from any direction to any direction. In bangalore, only the Hebbal flyover is up to the mark in the standards to have a free flow. Recently, they opened the circle near freedom park. Automobiles coming from any direction can circle around and take any direction out. Someone comes from the right end and wants to take the left road, and Someone else comes from the left and wants to take the right road. Both crosses each other and the traffic piles up. At least they would have made some layers of road which exits to different roads. Each and every civil engineer studies about the bridges and fly overs that aids the free flow of traffic. But, In reality they don't implement it quite often as they have constraints on the space, time, budget, and politics.

Sea Biscuit(2003)

Sea Biscuit(2003) is an amazing movie.
Have seen it few times and won't be bored to see many more times.
Well written by Laura Hillenbrand and nicely screen played by Gary Ross.
I liked the four main characters, Tom smith (played by Chris Cooper),
Red (played by Michael Angarano),
sea Biscuit and Charles Howard (played by Jeff Bridges)
Loved their expressions, especially Tom Smith's facial expressions at times for the dialogs of Charles Howard.

The story line was awesome, it clearly shows the mix of right people with greate attitude put together can achieve anything even if they lack in some way. Small Horse, Tall Jockey, Old Trainer and the Owner. Small Horse had the spirit to win the well built horses. Tall jockey had the attitude to understand and mingle with it and beat all the right sized(short) jockeys. Old Trainer could clearly judge the horses, train them, and correct the jockeys mistakes. The Owner had picked the right trainer and he was there whenever they need or any one of them fail.

Few of best dialogs that i liked from this movie are

"You know,you don't throw a whole life away...
just 'cause he's banged up a little."

"Brick by brick my citizens, brick by brick." - by The Roman Emperor, Hadrian

It ain'tjust the speed. It's the heart.

Selenium - Testing AJAX Web Applications

In AJAX applications, we do not reload the whole page, instead we update part of the page based on the response. To test these applications we cannot use wait_for_page_to_load() or wait_for_frame_to_load() or alert_is().

In these cases, we have to use the wait_for_condition() selenium API.
Key thing to observe here is that the code that you write in the condition is in javascript.
In the following example, I am waiting for the alert for 60000 milliseconds. This alert is poped up after updating the page based on the AJAX response.

my $cond = "try{ if(selenium.getAlert().indexOf('Package successfully deployed') > -1){true;} } catch(ex) {}";
$Common::sel->wait_for_condition($cond, 60000);

Selenium - alert and confirm in the page's onload() event

Selenium does NOT support _javascript_ alerts that are generated in a page's onload() event handler. Selenium does NOT support _javascript_ confirmations that are generated in a page's onload() event handler.

You may have some alert in the login page to display some alert on invalid username and password. When you want to automate the test cases on those pages, you need to add some javascript code on those pages before displaying the alert or confirm. These following lines makes the selenium to capture the alert or confirm messages.

var browserbot = parent.selenium.browserbot;
if (browserbot) {
browserbot.modifyWindowToRecordPopUpDialogs(window, browserbot);
}
alert("Alert message after those selenium workaround js snippet");

Selenium - How to check the disabled button?

If you are using the Selenium IDE, you cannot record a test to check the disabled button. Instead of recording you can use the selenium perl driver API and code the test.
If I am testing the disabled state of a button with an id="pingBtn" in the HTML page, use the is_editable API and check the disabled state.
API doc:

$sel->is_editable($locator)
Determines whether the specified input element is editable, ie hasn't been disabled.This method will fail if the specified element isn't an input element.

$locator is an element locator
Returns true if the input element is editable, false otherwise

Compare the return value to false (0) to check the disabled state and add a comment which will be printed on the test console.

ok($sel->is_editable("pingBtn") == 0, "is_not_editable, pingBtn");

Brief Introduction about web development

I was explaining about the web development to one of my friend who is very good in C and Unix, but new to web development. Just thought of sharing the same notes in my blog.
Image export of mind map is here:


HTML export of mind map is here:

Web Dev

• HTML
  
  
  • Structure of the web page, which is rendered by browser
  • Static pages
    
    
    • Navigation is linked by anchor/href tag
      
  • Dynamic pages
    
    
    • HTML Content is generated based on the database content
      
    • Actions are through buttons, which will submit the form
      
      
      • server is responsible to handle the request and respond back
• JavaScript
  
  
  • Client side scripting
    
    
    • to avoid the load on the server
      
      
  • Used for client side validation
    
  • used for AJAX
    
    
    • Used to generate the dynamic web page
      
• CSS
  
  
  • used for the styling of the web pages
    
    
    • Browser applies the CSS while rendering the web page
      
      
  • for common style across the application
    
    
  • helps to keep the HTML code clean
    
    
    • Improves maintainability
      
      
    • Improves readability
      
      
• Server Side Scripting
  
  
  • 
    executed at the server side to generate the dynamic HTML content
    
    Example: JSP, ASP, Velocity, DJango, etc
    
    Scriplet and HTML are placed in the same file and
    scriplet is executed just before server sends the HTML response
    
• AJAX
  
  
  • 
    Instead of form submit, a XMLHTTP call is made to the server and
    based on the result, part of the HTML page is rendered.
    In Traditional web dev, the response replaces whole HTML page,
    but in AJAX, part of the HTML can be updated based on the XMLHTTP response
    can make syncronous or asynchronous XMLHTTP calls