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

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

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