Build Rich Internet Applications with Ext

Ext (available from extjs.com) is a JavaScript development framework initiated and maintained by highly respected JavaScript guru Jack Slocum. By delivering a continuously growing structure of JavaScript classes that solve many of the common problems associated with developing Rich Internet Applications (RIAs) in JavaScript, Ext can potentially save you months of work in your web application endeavors.

In this article, I’ll give you a solid introduction to what Ext actually is and does — why I think we as web developers need it, and how it makes developing RIAs so much easier. We’ll answer the questions: What is Ext, really? And why do we need it?

Defining "Rich Internet Application"

Just so you know, throughout this article I’ve deliberately chosen to drop the widely known (and hyped) "Ajax" and "Web 2.0" terms since, in my view, there still seems to be some confusion over what they really stand for. The definition of "rich application," however, is commonly accepted. The term defines an application with a functionally rich user interface — an application as responsive and intelligent as any of the desktop applications we use daily. Adobe Photoshop and Microsoft Excel (shown below) are good examples of rich desktop applications.

Build Rich Internet Applications with Ext

So, why do we need RIAs then? We already have all the applications we need right there on our desktops, right? Well, while this is true, more and more companies are embracing the RIA concept, replacing their traditional desktop applications with web-based equivalents. The most obvious benefit of this approach is, of course, that your potential customers can gain full access to your application from wherever they have access to a web browser and an Internet connection. For customers using an application that’s not only developed, but is also managed and operated by a third party, the responsibility of operating mission-critical applications is moved to an external party, which has the potential to free up internal resources.

Build Rich Internet Applications with Ext

Distributing applications via the Web falls under the SaaS (Software as a Service) concept, which has become one of the industry’s hottest topics in the last few years. SaaS adoption is already widespread in North America, and some expect it to take off in Europe very soon.

The concepts of SaaS and RIA are tightly linked: the potential success of SaaS naturally relies on the market’s potential to produce good web applications: people will not be willing to give up their traditional software unless the web-based alternatives prove to be equally good. To build web applications that can compete with traditional desktop apps, we need to add another dimension to the traditionally static Web. This is where Ext comes into the picture. But first, let’s have a look at the problems with which developers have traditionally struggled when developing RIAs.

Developing Rich Internet Applications

An RIA can be developed using a few different techniques: Java Applets, Flash, and Microsoft’s XBAP are technologies that can serve as a platform. However, the technique that has been most widely adopted — and, in reality, has become the de-facto standard — is JavaScript. By using JavaScript to dynamically alter the HTML and CSS loaded into the user’s browser, developers have found a way to create web sites that look and feel like real applications, and come with all of the accessibility and SEO benefits of HTML.

But such an approach is not without its drawbacks: much of the user interface must be created from scratch. When developing a Windows desktop application using Windows Forms, for example, you have a predefined set of widgets that automatically generate nice-looking tables, trees, dialogs, context menus, tool bars, and so forth. None of these widgets exist in JavaScript. JavaScript and CSS, after all, lie at a quite low technical level, and programming advanced user interfaces from scratch using these techniques is therefore quite complicated, or at least very cumbersome.

Of course, many examples of the above-mentioned building blocks already exist, distributed across various sites around the Internet as code examples or even free software. So if you were to put some effort into it, you might just find working versions, or at least code examples, for most of the building blocks required to build an RIA. The problem is that these code samples are scattered all around the Internet, and they vary in both quality and style. Collecting JavaScript code and using what you find as the base for your application might save you a lot of development time when you compare that approach with doing everything from scratch. But it would probably also require you to alter much of the code you find in order to achieve a consistent look and feel. Additionally, you wouldn’t have any assurance that you’d get updates or bug fixes, which would make this approach less than ideal.

If we want to easily develop a uniform, professional-looking, easy-to-use, and stable RIA, we’ll obviously have to overcome a few issues.

Ext Comes to the Rescue

In a nutshell, Ext delivers just what we need — a stable and uniform JavaScript platform for building rich web applications. Initially built upon the Yahoo! UI Library, Ext has looked very promising for some time. When version 2.0 was released last week, however, the library matured into possibly the most robust JavaScript library available for developing rich web user interfaces.

There are a few alternatives out there of course, such as Dojo and the Yahoo! UI Library, but there are a few key points that, when combined, make Ext stand out from the crowd. These points include:

  • Ext is very fast. Performance is often a problem when programming JavaScript.
  • Ext is implemented in a 100% object-oriented, well structured, consistent way. This makes the library fast to learn, and the code easy to read and understand.
  • The modular implementation with its consistent base makes the library easy to extend.
  • All Ext elements (widgets) are ready for use. In contrast to many other libraries, the widgets are usable as they are, with pre-defined styles, settings, and behavior. Still, all elements are fully customizable and can be themed if required.
  • The Ext developers are extremely dedicated and competent, and have an understanding, and most importantly an interest, in users’ needs. Ext documentation is thorough and full of working examples.
  • The Ext community is very active, and the tone is generally very positive.
  • Ext can be used both under a free and a commercial license.
  • Last but not least, Ext looks very slick!

Some (or maybe even all) of this is true for other libraries as well. I don’t pretend to suggest that there aren’t other excellent alternatives out there, and you should investigate all options before deciding to stick with one. However, in my experience Ext gives the best overall impression, which is why I decided to run with it.

Let’s take a look at a simple example of what Ext can do for us. Suppose we wanted to implement a graphical fading feature in our application — something we can use to make an object appear and disappear in a way that looks pleasing to the eye. Here’s a possible implementation of such a feature in plain JavaScript, without using Ext:

<html>     <head>       <title>Fading without Ext</title>     </head>     <body>       <div         id="my-element-to-fade"         style="width:100px;height:100px;background-color:Red">       </div>       <br />       <button onclick="shiftOpacity('my-element-to-fade', 1000);">         Fade!       </button>  

<script type="text/javascript">         function changeOpacity(opacity, id)         {            var object = document.getElementById(id).style;            object.opacity = (opacity / 100);           object.MozOpacity = (opacity / 100);            object.KhtmlOpacity = (opacity / 100);            object.filter = "alpha(opacity=" + opacity + ")";          }  

function setOpacity(id, opStart, opEnd, ms)         {                       var speed = Math.round(ms / 100);            var timer = 0;   

if(opStart > opEnd)           {              for(i = opStart; i >= opEnd; i--)             {              setTimeout(               "changeOpacity(" + i + ",'" + id + "')",               (timer * speed)             );                timer++;              }           }            else if(opStart < opEnd)           {              for(i = opStart; i <= opEnd; i++)              {               setTimeout(                 "changeOpacity(" + i + ",'" + id + "')",                 (timer * speed)               );                timer++;             }           }         }  

function shiftOpacity(id, ms)           {             if(document.getElementById(id).style.opacity == 0)             {               setOpacity(id, 0, 100, ms);              }             else             {               setOpacity(id, 100, 0, ms);              }           }       </script>     </body>   </html>

This code generates a simple page with just a red square and a button on it (view the demo). Clicking the button either fades the red square in or out, depending on whether or not it’s currently visible. The functionality works just fine, but as you can see it required quite a few lines of (ugly) code. Fortunately, we can achieve the exact same functionality using Ext, but with much less code (download Ext if you’d like to play along at home):

<html>     <head>       <title>Fading with Ext</ title>       <script         type="text/javascript"         src="ext/adapter/prototype/prototype.js">       </script>       <script         type="text/javascript"         src="ext/adapter/prototype/scriptaculous.js?load=effects">       </script>       <script         type="text/javascript"         src="ext/adapter/prototype/ext-prototype-adapter.js">       </script>       <script         type="text/javascript"         src="ext/ext-all.js">       </script>     </head>     <body>       <div         id="my-element-to-fade"         style="width:100px;height:100px;background-color:Red;">       </div>       <button onclick="showHide('my-element-to-fade');" style="margin-top: 10px;">         Fade!       </button>       <script type="text/javascript">         function showHide(id)         {           Ext.get(id).toggle(true);         }       </script>     </body>   </html>

Both code examples give the exact same result, as illustrated below (see for yourself).

Build Rich Internet Applications with Ext

The code of interest to us in these examples is what you see between the <script> tags in the two code listings. Although this is a very simple example, the difference is quite remarkable. If you put this into a bigger context (like a full-blown web-based word processor), you can imagine what difference the use of a library like Ext could make.

Summary

The Ext JavaScript library can save you from enormous headaches. Seven years ago, before words like Ajax and Rich Internet Application existed, I joined a team that began the development of a full-featured web-based business system. We wanted to make it a worthy alternative to desktop-based systems, so a rich and intelligent user interface was a must. Back then, nothing even close to Ext existed, and while our system today implements everything we need it to, there’s no doubt that if something like Ext had existed from the very beginning it would have reduced the development effort significantly.

As I’ve stated a couple of times in this article, Ext is a very consistent library — much of the functionality can be found throughout the whole library. This means it’s important to get things right from the beginning, as it will help you a lot when moving forward to the more advanced (and interesting) features.

Replay

Category: javascript Time: 2007-12-14 Views: 1
Tags:

Related post

  • Easy Rich Internet Applications With ColdFusion 8 2008-03-19

    The term Rich Internet Application (RIA) was coined by Macromedia (now Adobe) in 2002. An RIA is a web application - it runs inside a web browser, but looks and feels more like a desktop application. Gartner analysts Mark Driver, Ray Valdes, and Gene

  • Flex 2: Rich Internet Applications in a Flash! 2006-08-09

    You may have heard some buzz recently about Adobe's release of Flex 2. Flex is a collection of technologies that combine to give developers a strong framework for building Rich Internet Applications. You may already be familiar with one of those tech

  • Is feeding Googlebot and Bingbot crawlers with "special" data common thing in rich internet applications? 2012-02-03

    So I faced next problem: my server and my rich internet application (RIA) client are using/generating so much JSON data that is rendered on fly even on just page creation complete that standard dull no js crawler will see not much data on my site. I

  • AJAX calls and Rich Internet Applications 2016-02-11

    I am confused with the definition of Rich Internet Applications and AJAX calls. As far as I understood every application which needs some executions in client-side will be considered RIA. So, this way, this website should be considered RIA because if

  • How do I build a wxWidgets application with gcc? 2015-11-01

    How do I build a wxWidgets application (e.g. test.cpp) with gcc on a Ubuntu 14.04.3? Should gcc find the header-files automaticly by itself if wxWidgets is setuped correctly? Or do I ever have to explicite the wx-include-folders for gcc with an optio

  • What to use to build rich client application? 2016-02-24

    I'm currently doing a research what technlogoy to use to build a complex business client application. Not a mobile application. Items to consider: Interaction with web services Rich UI (grids, maps, layout, multiple usage of all of them on single vie

  • Building a Chat Application with SignalR 2015-07-16

    SignalR is an open source library for ASP.NET developers. It's the equivalent of what Socket.IO is for Node.js (if you want, you can check out a comparison on Stack Overflow). SignalR can be used to provide real-time web features to your applications

  • Making Rich Web Application Architecture Usable 2003-09-27

    "Focus on the user and all else will follow" is a philosophy that can make or break a product. Software designers have become notorious for concentrating on implementation patterns and neglecting the user. It is easy to get lost in grand concept

  • Building Real-time Apps with Websockets & Server-Sent Events 2016-06-06

    This article was peer reviewed by Craig Bilner and Dan Prince. Thanks to all of SitePoint's peer reviewers for making SitePoint content the best it can be! An important part of writing rich internet applications is reacting to data changes. Consider

  • Go: Building Web Applications with Beego 2014-06-17

    Building Web Applications With Beego Go: Building Web Applications with Beego Go: Building Web Applications With Beego – Part 2 Introduction Are you a web application developer coming to Go from a dynamic language as PHP, Python or Ruby, and wonderin

  • Dealing with captive portals on rich web applications 2014-12-05

    I'm working on a web application that contains a number of (form) steps in which customers make a series of choices, resulting in a search result at the end. The form is implemented as a single-page web application which uses AJAX to pull in data as

  • Can one develop an application with Bluetooth support on iOS using Flash Builder 4.5? 2011-10-07

    I have heard about Flash Builder 4.5.1. As I have understood, one can make an application using Flex with Flash Builder 4.5.1 and also export the release build for iOS, Android and Blackberry. Is it possible to include Bluetooth functionality in an a

  • How to build and organize menus with rich taxonomies and complex view-based menus 2012-06-07

    I would like to hear your insights about strategies on organizing menus. I mean two main approaches: having each menu header as an individual Drupal menu vs. having all menus grouped as one big menu, perhaps named "Main menu". I built quite a la

  • Go: Building Web Applications With Beego - Part 2 2014-06-19

    Building Web Applications With Beego Go: Building Web Applications with Beego Go: Building Web Applications With Beego – Part 2 Welcome back to part 2 of the series, where we get up to speed with the Beego web development framework for Go. If you mis

  • Problem trying to build a stand-alone QGIS application with Unbuntu Trusty system 2015-07-21

    I'm currently reading the "Building Mapping Applications with QGIS" Book and I'm stumped when I try to set my paths in Ubuntu. The first command works fine: export PYTHONPATH=~/usr/share/qgis/python/ The command to set my QGIS libraries is an is

  • import SIP module. QGis 2.12 win 10 64bit. By book: Building mapping applications with QGIS 2015-12-04

    i have bought the book "building mapping applications with qgis" from eric westra. Currently i'm following the steps described in the book. But at the verry first trial of an external app i get an error. Traceback (most recent call last): File &

  • how can i view " Signed Application With Captive Runtime" in flash builder 4.6 2016-02-09

    I have a problem in adobe flash builder 4.6 this line not view Signed Application With Captive Runtime how can I do to get like this thanks

  • Building a WebRTC Video Chat Application with PeerJS 2016-06-07

    This article was peer reviewed by Panayiotis Velisarakos and Ravi Kiran. Thanks to all of SitePoint's peer reviewers for making SitePoint content the best it can be! With the advent of WebRTC and the increasing capacity of browsers to handle peer-to-

  • How to edit HTML of a rich text field with an InfoPath edit form? 2012-05-29

    When a list has it's edit form/s managed by InfoPath, all ability to edit the HTML of enhanced rich text fields is lost. The feature explained at How do I edit the HTML source of a rich text column? becomes no longer available. Is there a way of gain

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.931 (s). 13 q(s)