Saturday, July 14, 2012

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 :)

Friday, April 20, 2012

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...



Saturday, March 17, 2012

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);

Friday, December 30, 2011

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


Thursday, December 29, 2011

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();