Today Google has released their another beta product – a web browser Google Chrome

Chrome Team says

We improved speed and responsiveness across the board. We also built V8, a more powerful JavaScript engine, to power the next generation of web applications that aren't even possible in today's browsers.

More relief and bit tension as a development company with new Google open source web browser.

 

We downloaded and tested it, looks sleek and different.

Relief from current slow browsers, Google Chrome is very light weighted and faster as promised.

Tension, need one more round of testing for browser compatibility with this new browser and fix CSS and JavaScript issues if any.

We spend most of time with Internet in checking mails, searching, online shopping, reading news, office work, banking - all in a browser. Within half an hour we will end up opening a dozen web pages in couple of browsers (since we don’t know when one hangs)

Now a days, clients are looking for web applications that should work like stand alone applications in browser, with all key events and with advanced mouse events. In order to build rich AJAX based web applications we will be using dojo, extjs, jquery, mootools, scriptaculous, yui, etc JavaScript libraries and write very heavy weight JavaScripts to generate sophisticated effects.

Main hurdles with current browsers are 1) JavaScript runs very slow. 2) If we open couple of tabs, the browser hangs, since it locks up something in other tab.

Chrome mainly addresses these two issues completely. It runs complex web applications very fast, thanks for Google V8 JavaScript Engine. It creates separate process for each tab, so if a tab is busy we can still use other tabs, and if any bug in rendering we can close only that tab.

 

Firefox hopes to release its new version 3.1 by the end of the year, comes with JavaScript acceleration technology called TraceMonkey. Which claims much more faster than V8. Whatever may be the Browser War, ultimatly we can build faster and safer Enterprice Web Application without any second thought.

Recently we have built a very big web application with ExtJS. At times we thought of converting it to Silverlight, since the grids are not able to handle 500+ rows of data, dynamically with asynchronous reloads. Big forms were taking 6 to 15 secs to load.

Chrome really saves us from it with its fast JavaScript engine. You can check Berend’s example in ExtJS forum, it opens huge form (with 400+ fields) in just < 2 sec in Chrome, amazing. If you look at this example, of course, as said before some CSS need to be changed in skin, to align the dropdown arrow image in left properly.

Or test your browsers' performance with Dromaeo / SunSpider site . Some of Dromaeo saved test results.

 

So, fellow Designers and Developers modify your CSS and JavaScript to make webpages compatible for new browser, and dear Testers and Clients you too, to find more bugs.

 

ExtJs, a powerful library for developing web application. Bit complex to learn & start with, but once you practice some examples it becomes easy. You need to have good knowledge in Object Oriented Programming to extend & implement your own features or controls, and to see power of JavaScript & ExtJS. Working with ExtJs is really interesting!

Here listing some hints that may help you in your programming. Array-Grid example that comes with ext-2.0.2 is modified to demonstrate the same.

1. Focusing grid on load to activate down & up arrows
2. Colouring grid rows based on some criteria
3. Key events (especially Navigation keys) usage in grid with Internet Explorer (IE7) & Firefox
4. Marking selected grid row with some icon / text color change

The code in action can be seen at ExtJs Array Grid Sample
Same can be downloaded from: ExtJs Array Grid Sample - Source Code (~311 KB since extjs images & base scripts).
Main files that are modified: array-grid.html, array-grid.js & examples.css.

1. To focus the grid.

After rendering the grid
    grid.getSelectionModel().selectFirstRow();
    grid.getView().focusEl.focus();


2. Row colouring

Mainly this is CSS twist with use of getRowClass to change the text color of whole row.
    grid.getView().getRowClass = function(record, index){
      return (record.data.change<0.7 ? (record.data.change<0.5 ? (record.data.change<0.2 ? 'red-row' : 'green-row') : 'blue-row') : '');
    };
getRowClass changes the row CSS properties its applied for, but inside a row each cell element will have its own CSS class again.

In CSS for ‘cell-inner’ we need to set the font color.
    .blue-row .x-grid3-cell-inner{
      color:blue;
    }
    .red-row .x-grid3-cell-inner{
      color:red;
    }
    .green-row .x-grid3-cell-inner{
      color:green;
    }

3. Key Events

While working GridPanel, along with focusing the first row we were in a need of implementing the making of rows selected by user with Left Arrow & Right Arrow, as well they can navigate up & down with Up Arrow & Down Arrow.

The below code works partially in IE. It won’t capture navigational (along with arrows, page up, page down, home, end) keys & some special keyevents. But it works perfect in Firefox. 
    grid.on('keypress', function(e){
      alert(e.getKey());
    });

Whereas ‘keydown’ keyboard event works perfectly in both browsers for all keys. But the e.getKey() in IE won’t get the key code for navigational keys & some special keys. So need to change that to normal “e.keyCode”.

There maybe some property to set in ExtJS like in KeyNav -> forceKeyDown to true to make the getKey & keypress work in IE & FF. Not sure where & how exactly, but now the above quick solution worked without any problem.

So the code will be,
    grid.on('keydown', function(e){
      alert(e.keyCode);
    });

4. Marking Selected Grid Rows

In order to mark the selected rows, experimented on task example provided in ExtJs with Google Gears. Before experimenting used the data.columnName = ‘some value’ to set & gridview’s refresh() to apply. But at a time only a row used to change & previous selected rows used to change back.

In this same Array-Grid example added a new boolean value ‘true - flase’ column as first column ‘Status’. Added a ‘renderer’ to this new column, which sets a css class with empty box image if vale is false / tick mark if value true. Also 2 events, one mouse click and the other keydown event to grid to change the value of particular data element. Here the tricky point is if we change the value of it in store record, then automatically the respective CSS will be applied to it through its ‘renderer’. As said before if we change the ‘data’ in grid it won’t work, we need to apply the change of value in record of the store.

The code & css is 
    grid.on('keydown', function(e){
         if(e.keyCode == 37){
           var rec = grid.getSelectionModel().getSelected();
           rec.set('status', false);
         }else if(e.keyCode == 39){
           var rec = grid.getSelectionModel().getSelected();
           rec.set('status', true);
         }
    });
 
    grid.on('rowclick', function(grid, rowIndex, e){
      var rec = grid.store.getAt(rowIndex);
      rec.set('status', !rec.get('status'));
      grid.getView().focusEl.focus();
    });

    .task-completed, .task-check-over {
         width:16px;
         height:16px;
         cursor:pointer;
         background: transparent url(../images/check.gif) no-repeat center -16px;
    }
    .task-check-over {
         background: transparent url(../images/check.gif) no-repeat center -32px;
    }

The above code in action can be seen at ExtJs Array Grid Sample
Same can be downloaded from: ExtJs Array Grid Sample - Source Code (~311 KB since extjs images & base scripts).
Main files that are modified: array-grid.html, array-grid.js & examples.css.

 

Here we are using Moo.fx for Mootools to do the trick of animation effect, inspiration of Fx.Scroll demo.

From Mootools, for this animation the main component is Fx.Scroll & supporting component is Fx.Styles along with  other basic core modules that comes with it when we select the above two & download the script (mootools-release-1.11.js).

Programmatically if you would like to create the scrolling elements then element ids need to be created sequentially “content” + i.

The problem with mootools Fx.Scroll is, if the element is in visible area and/or hidden area is not lengthy enough then it wont move to the focused element since it is already in visible area. So we will be looping through again our content elements to produce the extra elements for scroll effect. Basically the repeated count will be number of elements in visible area plus one. If you are able to see 4 elements at a time then repeat initial 5 elements at the end again.

We can change the direction, stop & start the looping of images or html or mixed elements.

Find it action which describes you more. Its blazing fast & cross-browser.

• Bidirectional Horizontal HTML Text and Image Scroller
• Bidirectional Vertical HTML Text and Image Scroller

Source of it for download: Bidirectional JavaScript Scroller (~20 KB)