The document introduces the ExtJS JavaScript framework, which allows developers to build rich desktop-like applications in the browser. It provides a base library for common tasks like DOM manipulation, AJAX requests, and events, as well as a portfolio of rich widgets for building interfaces with trees, drag-and-drop, grids, and more. ExtJS was originally based on YUI but has since abstracted its base library, so it can be used alongside other frameworks like jQuery. The framework aims to provide desktop functionality out of the box to speed development of rich internet applications.
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 ratings0% found this document useful (0 votes)
36 views5 pages
Jsmag Sample
The document introduces the ExtJS JavaScript framework, which allows developers to build rich desktop-like applications in the browser. It provides a base library for common tasks like DOM manipulation, AJAX requests, and events, as well as a portfolio of rich widgets for building interfaces with trees, drag-and-drop, grids, and more. ExtJS was originally based on YUI but has since abstracted its base library, so it can be used alongside other frameworks like jQuery. The framework aims to provide desktop functionality out of the box to speed development of rich internet applications.
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5
ExtJS: An Introduction
Dont Be Alert: The world
doesnt need more lerts The Red Pill: Functional Programming in JavaScript Whats New in jQuery 1.3 Community News Vo|ame 1, lssae 1 - Marcb 1009 1 c o p y l i c e n s e d t o m g k i m s a l @ g m a i l . c o m 0 3 / 1 0 / 2 0 0 9 0 2 : 1 6 : 5 8 P M JSMag 2 March 2009 JSMag aims to bring the best JavaScript-oriented articles to you every month, with a focus on some content you might not see many other places. While some of the articles we will run may be a bit beginner for some readers, well be trying to bring at least a few articles that will help even seasoned developers learn a new trick or two. But wait arent monthly magazines on the way out? Arent blogs making monthly content outlets obsolete? Possibly, but per- sonally, I dont see it that way. Let me share some of the principles on which this magazine is founded, and where we see JSMag providing value. Between a blog and a book While there are numerous blogs available, most are journals, outlining a fellow developers experiments with new technology. Blogs can be great for keeping up with the cutting edge, but usu- ally dont go deep enough in to a subject to help a large number of people. On the other end of things, technical books provide large amounts of great info, but are oen outdated within weeks of publication. By providing a monthly stream of information, well be bringing you content thats more polished than most blogs, and more timely than most books. The how and the why I ask all contributors to use their own voice and experience as much as possible. Its very easy to nd JavaScript code snippets without good context. Its also very easy to nd forums threads lled with academic debate devoid of code. My charge to our writers is to give both the technical how part coupled with the why from their own experiences. Subscription-driven JSMag (and its sister magazine, GroovyMag) are rst and fore- most put together for developers. Our aim is to bring you quality content event month. Period. Were not in the business of deliver- ing eyeballs. An advertising-driven approach can inevitably bring conicts of interest, at the expense of the integrity of the maga- zine. We will occasionally have advertisements that we deem will be of sucient value to the readership, but JSMag is not advertis- ing driven. Our primary (and majority) revenue comes from the sale of the magazine. In this issue, we have Rebecca Murphey detailing some of the new features in the recent jQuery 1.3 release. Matt Henry walks us through Unit Testing JavaScript with the YUI framework. Robert Fischer may cause you to rethink some of your JavaScript development with his piece on Functional Programming, and Robert Cameron outlines some of the ways that you can test your code without resorting to the all-too-common alert(). Lastly, weve got Brett Harris and Jed Brubaker giving us all a hands-on demonstration of the ExtJS toolkit. I hope you enjoy our rst issue and look forward to your com- ments and feedback. Please write me at [email protected]. ank you! Welcome to the rst JSMag! Contents The Red Pill: Functional Programming in JavaScript 3 ExtJS: An Introduction 9 Dont Be Alert: The World Doesnt Need More Lerts 14 JavaScript Community News 19 Unit Testing JavaScript 20 jQuery 1.3 28 Editor Michael Kimsal [email protected] Technical Editors Darryl Bloch Craig Wickesser Graphic Design Rebecca Murphey Contributors In This Issue Robert Fischer Jed Brubaker Brett Harris Rob Cameron Matt Henry Rebecca Murphey jsmag.com twitter.com/jsmag 1 c o p y l i c e n s e d t o m g k i m s a l @ g m a i l . c o m 0 3 / 1 0 / 2 0 0 9 0 2 : 1 6 : 5 8 P M JSMag 3 March 2009 By Robert Fischer The Red Pill Functional Programming in JavaScript Functions are the basic building block of JavaScripts structure. This article will provide a brief introduction to some key ideas of functional programming in JavaScript, as well as demonstrate some of the lesser-known features of JavaScript functions. After reading this article, the reader will be able to manipulate functions in a much more direct way, including writing their own higher-order functions. e average JavaScript programmer routinely overlooks one of the most powerful features of the language: function manipulation. Functions are used throughout JavaScript, including forming the basis of the object model. e librar- ies/frameworks provided to JavaScript regularly utilize anonymous functions in the form of callbacks: they look like function() { alert(Done!) }. ese hooks have much more power than most people realize, because each method, function denition, and callback opportunity can change the execution of the application at the most basic level. Before we set out, a warning is probably in order. Like most things in JavaScript, the user is given all the power they want (and possibly more). As will be demonstrated, there are very few safety checks in JavaScript function calls, which can be both a blessing and a curse. is makes the re-writing and function mangling possibilities in JavaScript eectively endless, but this looseness can also make bugs tricky to track down. Basics of Functions Even an elementary JavaScript developer is familiar with den- ing and executing the basic function call, as demonstrated in Listing 1. e name of a function, however, is purely optional: it is valid JavaScript to leave out the funk from the example above. Such a function is called an anonymous function, and is usually assigned to a variable (as in Listing 2) or passed directly into another function (Listing 3). When a variable references an anonymous function, the variable can be called as if it were a function so storing a function into the it variable means that it() calls the stored function. function funk(who, what) { print(who + "'s " + what + " has got the funk!"); } funk('Robert', 'code'); funk("Joe", 'towel'); // This prints out: // Robert's code has got the funk! // Joe's towel has got the funk! Listing 1: The Basic Function Call var myFunk = function(who, what) { print(who + "'s " + what + " has the funk!"); }; myFunk('Robert', 'code'); // This prints out: // Robert's code has the funk! Listing 2: Function in a Box function doIt(it) { it(); } doIt(function() { print("Sneaky!"); }); Listing 3: Function Without a Box e body of a function (anonymous or otherwise) can refer to variables dened outside of that body, as demonstrated in Listing 4. is capturing of the surrounding variables is called enclosing its scope, and so the function is said to be a closure. Since normal JavaScript functions can refer to their outside scope, they are technically closures, but the word closure is oen wrongly used to mean the same thing as anonymous function. 1 c o p y l i c e n s e d t o m g k i m s a l @ g m a i l . c o m 0 3 / 1 0 / 2 0 0 9 0 2 : 1 6 : 5 8 P M JSMag 9 March 2009 There is a world of AJAX libraries available. They are powerful. They let us make great websites. They provide slick and sexy interfaces. However, some of us dont want that. After all, slick and sexy is what resulted in the <blink> tag. Some of us want to make desktop-like applications on the web. Our numbers are growing quickly just look at Google and Microsoft. There was a time when Google Maps blew our minds, and it wont be long before you open a browser to use Microsoft Oce. These rich interactions, however, are complex and challenging to implement. There is a solution. It is called ExtJS. ExtJS is developed and maintained by Ext, a company that also develops Ext GWT, a Java library for building Rich Internet Ap- plications with GWT. ExtJS 2.0 was released in December 2007 and has undergone 2 revisions since. Since its inception, core development on ExtJS has been led by Jack Slocum. He and his team members actively participate on the the forums, so help is never too far away. While ExtJS is licensed under GPL v3, Ext also provides enterprise licensing, support, and training for the framework. e ExtJS JavaScript framework allows developers to easily implement desktop functionality on the web. It provides a base library for all those little things: nding and manipulating DOM elements, making AJAX requests, managing events and listen- ers, and a whole mess of other trivial and mundane JavaScript tasks. However, where ExtJS really shines is with its portfolio of feature-rich widgets. ere is a whole set of components that have lived on the desktop since the early days of the GUI, but somehow seem strange and new to web developers. How did we live without tree interfaces, drag and drop, and the oh so impor- tant interactive data grid? It is time to take back the browser. ExtJS is a complete package for Rich Internet Application (RIA) development. ExtJS was originally built on Yahoos YUI! frame- work, but has since abstracted the implementation of its base library. Developers who work with YUI!, Prototype, or JQuery can continue using their favorite JavaScript framework while le- veraging the extensive ExtJS widget set. e portfolio of widgets jump starts your RIA development by providing all the desktop functionality you will need in a componentized, extensible mod- el. You will spend considerably less time building the features that todays users expect, allowing you to spend more time on development and widget tweaking to meet your specic business needs. Since todays hottest interactions are provided to you out of the box, you can also spend time designing new interactions to improve your users experiences. The good ... ExtJS is truly an application-centric framework and comes with a plethora of widgets most commonly found in desktop applica- tions. ere are toolbars, windows, tabs, and buttons, as well as sophisticated forms and data grids. You could replicate an entire OS inside your world of <div> tags. Need a resizeable grid with sortable data columns? How about client-side form eld valida- tion with pretty tool tips? ExtJS can enhance the experience of your users without batting an eye. ExtJS doesnt just stop at the implementation. Ext, the company, has backed up ExtJS with excellent documentation and support. ey provide samples for each of the widgets to get you started. We oen nd ourselves copying the sample code as a starting point and tweaking bits and bytes to suit our needs. ere are multiple samples for most widgets, allowing you to see dierent features in isolation and to see dierent approaches to similar problems. But, the samples are just the jump o point. You will quickly fall in love with some of the best API documentation that we have ever seen. It is thorough (with a few caveats read on, grasshopper) and well organized. e documentation gives clear descriptions of conguration options, public methods, and events for every widget and class in the framework. Each page in the documentation lets you inspect the code behind the scenes, so you can always dig further for a better understanding of the nuts and bolts. Oh, and the best part is that the entire API is written using ExtJS. Gotta love a company that drinks its own Kool-Aid. But the treats dont stop there. e trifecta of docu- mentation is completed by the forums. Sure, there is lots of help for all frameworks, languages, and DIY hardware hacking, but we have encountered few product forums where lead developers By Brett Harris and Jed Brubaker ExtJS: An Introduction 1 c o p y l i c e n s e d t o m g k i m s a l @ g m a i l . c o m 0 3 / 1 0 / 2 0 0 9 0 2 : 1 6 : 5 8 P M JSMag 20 March 2009 Unit testing has become an indispensable part of many programmers workow. Recently, several tools have been created that allow JavaScript developers to write unit tests for their code. In this article, we will take a look at what tools are available, and then go through some detailed examples of how to write unit tests using the Yahoo! User Interface (YUI) Test library. Introduction Since JavaScript has started gaining acceptance as a real pro- gramming language, its users have begun to borrow concepts and techniques from other parts of the soware world. One of the most benecial practices to take root in the JavaScript commu- nity is unit testing. What is unit testing? Unit testing is the practice of isolating the smallest bits of func- tionality (viz. the units) in a piece of soware, and program- matically testing their behavior in well-dened input scenarios. Depending on the language, for instance, the smallest units may be methods (in object-oriented languages such as Java, Ruby, or JavaScript) or functions (in functional languages like LISP or functional-avored JavaScript). e idea is that you will write a suite of tests that cover every piece of functionality your applica- tion is designed to provide under every possible circumstance a loy goal, to be sure, and one not easily achieved, but no less worth striving for due to its its elusiveness. Why test? ere are exactly as many reasons to write tests as there are potential mistakes in your code. Less prosaically though, we can enumerate some of the benets as follows: Fewer surprises t By writing a wide variety of test cases, you can observe how your application behaves when presented with many kinds of data. And when one of your users re- ports a bug based on some data that you did not anticipate, you can write a case for that data as well. For instance, the benets of testing become readily apparent when writing a client for a web service (as we will see later on). Regression proong t Say you are working on xing a bug in your application. If you have a thorough test suite in place, and frequently run your tests aer changing your code, that will go a long way to ensuring that any bug xes or new features dont introduce any new bugs. Baked-in documentation t If you give your tests descriptive names (by the way, please give your tests descriptive names), then anybody who is reasonably code-savvy can look at your test suite and quickly surmise how your application is sup- posed to work. Test-Driven Development One concept that is tied very closely to unit testing is that of Test-Driven Development (TDD). TDD is generally advocated by proponents of agile programming, and is essentially the process of writing tests for a piece of functionality before even writing the code to implement that functionality. Some of the benets to this kind of workow are that it makes it considerably easier to achieve total test coverage of your code, and it forces you to think ahead about what youre code is supposed to do rather than getting lost in the tall grass of implementation straightaway. TDD adherents will surely be able to tell you at length about all of its other advantages, but for our purposes here, it suces to say that it can be a real boon to those who nd it a natural way of work- ing (and perhaps even more so to those who dont!). Now that we have a sense of what unit testing is and what it can do for us, lets take a look at some of the tools that are available for unit testing JavaScript. By Matt Henry Unit Testing JavaScript 1 c o p y l i c e n s e d t o m g k i m s a l @ g m a i l . c o m 0 3 / 1 0 / 2 0 0 9 0 2 : 1 6 : 5 8 P M