Prototype and Scriptaculous are both, like most software libraries, productivity tools. Coding in a web browser is a curious experience—it is much freer and more expressive than any desktop GUI toolkit, yet it is also lacking in some of the most basic facilities. I know of few desktop developers who tried to maintain their own drag-and-drop library or drop-down list widget as part of a product, and several DHTML/Ajax developers who did. This type of feature is rarely the raison d’être of a software project, but rather is a means to an end. Guddling around with the low-level code required to enable those means is, at best, a distraction, and at worst, a burden that can sink a project.
This book is aimed at JavaScript coders with a clear purpose behind what they’re doing, who need to express their business ideas and concepts elegantly and to spend their time improving user workflow and satisfaction, or developing cool new features. Prototype and Scriptaculous let you express your code fluidly and elegantly, and you get to lead a full and rewarding life outside your programming job. If you like futzing around developing your own coordinate system, or reimplementing commonplaces in modern computing, such as tree widgets, sorting algorithms, and event listeners from scratch, then you’re out of luck here. Although, come to think of it, Prototype and Scriptaculous could certainly help you to do that faster, and better…
Our second intended audience are the experienced Ajax programmers who want to improve their understanding of why these libraries work the way they do. We present most of the features in these libraries as straightforward recipes that anyone can use, but we also take the time to look at the internal workings of the key components and functions. Perhaps even more importantly, we have tried to pay attention to the bigger pattern, and to how the various pieces fit together into a relatively harmonious whole.
Whether you’re simply looking to get the job done effectively, or want to hone your JavaScript skills to the next level, we hope that this book has something for you.We’ve divided the book into four parts, in order to provide some structure to our discussions. Part 1 concentrates on the centerpiece of the recent upsurge of interest in web-based clients, namely the asynchronous request. Ajax is a small piece of functionality with a big impact on many aspects of application design, and Prototype provides a lot of power in assisting us in doing that.
Chapter 1 provides a general introduction to the Prototype and Scriptaculous libraries and their place in the modern Ajax landscape. Chapter 2 introduces our main sample application, a web-based image viewer called QuickGallery. In chapters 3 and 4, we use QuickGallery to explore the different styles of Ajax supported by Prototype, from the basic components required to make an Ajax request, through to the more sophisticated helpers developed in recent versions of Prototype, which address architectural issues in the way an application manages its HTTP traffic.
Part 2 turns to the Scriptaculous libraries, devoting a chapter to each of the key components. Chapter 5 looks at the Effects subsystem, and takes us from the one-line instant gratification of invoking our first special effect, through customizing and composing effects, on to writing our own effect types.
Chapter 6 examines the Controls subsystem, which provides out-of-the-box Ajax-enabled components for use on web pages. Again, we run the full gamut from one-line deployment to a thorough understanding of customization and composition of these components. We also show how to hook these up to processes on the server side, in order to deliver a highly interactive workflow.
Chapter 7 looks at the drag-and-drop subsystems of Scriptaculous. In Scriptaculous, drag and drop is layered, with relatively simple objects providing the basic capabilities, and sophisticated drag-and-drop UI components being built on top of these. We describe both how these systems work, and how to use them in your own projects.
Part 3 is intended mainly for the language aficionados. JavaScript is a malleable language and Prototype molds it into some very interesting, and useful, structures. We step through the various new capabilities that Prototype provides to the core object types, and illustrate each feature with a small practical example. In order to achieve maximum coverage of all the new features, we’ve adopted a snippet-based approach to this part of the book and we provide an interactive interpreter program that will execute these snippets for us.
Chapter 8 looks at the JavaScript Object, the base class upon which all other JavaScript objects are founded. We show how to create new objects, and reusable types of objects, and how to work with JavaScript’s prototype-based system of inheritance. We then describe how the Prototype library has simplified these techniques, and show you how to create your own object hierarchies using Prototype.
Chapter 9 looks at JavaScript functions and the related concept of closures. This is a small but powerful chapter, covering one of the most misunderstood and useful features of the JavaScript language. Closures can be difficult to work with, but Prototype provides a simpler approach.
Chapter 10 looks at JavaScript arrays. It’s no overstatement to say that Prototype completely changes the way one works with Arrays, adding over thirty new methods. We cover each of these in depth, and look at how the magical new facilities can even be extended to objects other than bona fide arrays, such as collections of DOM elements and plain old JavaScript objects.
In chapter 11, we look at Prototype’s support for the web browser environment, namely the Document Object Model and HTML forms. The functionality that we cover here greatly improves the experience of creating cross-browser user interfaces and it provides a useful low-level counterpart to the pyrotechnics of the Scriptaculous library that we described in part 2.
Part 4 concludes our exploration of these libraries with a couple of advanced topics. Chapter 12 returns to the QuickGallery application that we described in part 1 and applies the knowledge garnered in parts 2 and 3 of the book to rapidly add new features to the app. This illustrates the process of using these libraries in real-world settings.
Chapter 13 looks at the integration between Scriptaculous and Prototype and the Ruby on Rails framework, and shows how Rails builds upon these libraries to deliver even more elegance and ease of use.
HTTP underlies everything we do on the Web, and when we’re using Ajax, we get a bit more control over how we use it. With great power comes great responsibility, as they say. Appendix A covers the basics of the protocol, and appendix B details the techniques we use in this book to profile the HTTP traffic from an app.
The main examples in this book rely on PHP and Java on the server. Not all of our readers will be familiar with these technologies, so appendices C and D provide a step-by-step setup guide for the most popular operating systems, for the Java Tomcat web server and PHP/Apache respectively.
The focus of this book is on JavaScript code and the server-side code that we present in these examples is, on the whole, quite simple. We do, however, use a few server-side tricks that are only likely to find use with Ajax. In appendix E, we provide a quick conversion guide on how to master these tricks in some of the popular sever-side languages that we don’t cover in detail in the main examples.
The code examples that we present in this book cover a number of programming languages, including JavaScript, Java, JSP, Ruby, and PHP. We present the longer pieces of code in these languages as “listings” with their own headers. Smaller bits of code are simply run inline with the text. In all cases, we present the code using a monospaced font, to differentiate it from the rest of the text. Many longer listings have numbered annotations that we refer to in the text, and, in several cases where we’re looking at incremental changes to a piece of code, we have highlighted the modified parts in bold.
In chapters 8 through 11, we deal with the lower-level language features of the Prototype library, and so are dealing almost exclusively with small fragments of code. Rather than present all the example code inline, we’ve given these examples the status of “snippets.” These are similar to listings, with the important distinction that they can be run inside the interactive interpreter (the Scratchpad application) that we introduce in chapter 8 and use throughout these chapters. This interpreter allows us to visualize the nonvisual effects of the code we’re discussing, and each snippet is accompanied by a screenshot showing its output in the interpreter.
The complete example code for the book can be downloaded from the Manning website page for this book, at http://www.manning.com/crane3. This includes the interactive interpreter required to run the snippets, and the larger examples for the other chapters. Some of these require a Java web server or Apache/PHP setup to run them. We step through the business of setting these up to run the examples in appendices C and D.
Our book should give you a thorough grounding in Prototype and Scriptaculous, but we can’t cover every question that might arise within these pages. Manning provides an online forum for talking to the authors of every book that it publishes, and you can reach Dave, Bear, and Tom at the Author Online forum for this book at http://www.manning-sandbox.com/forum.jspa?forumID=276.
Prototype and Scriptaculous have a vigorous online presence beyond our involvement in the book, of course. Prototype’s official documentation site can be found at http://www.prototypejs.org/. Scriptaculous is documented mainly via Wiki at http://wiki.script.aculo.us. General questions about both libraries can also be addressed to the Ruby on Rails Spinoffs group, which can be found at http://groups.google.com/group/rubyonrails-spinoffs?hl=en. Despite the name, the group isn’t exclusively used by Ruby coders, and serves the wider constituency of Prototype and Scriptaculous users.
We look forward to hearing from you!
Purchase of Prototype and Scriptaculous in Action includes free access to a private web forum run by Manning Publications where you can make comments about the book, ask technical questions, and receive help from the authors and from other users. To access the forum and subscribe to it, point your web browser to http://www.manning.com/crane3. This page provides information on how to get on the forum once you are registered, what kind of help is available, and the rules of conduct on the forum.!
Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and the authors can take place. It is not a commitment to any specific amount of participation on the part of the authors, whose contribution to the book’s forum remains voluntary (and unpaid). We suggest you try asking the authors some challenging questions, lest their interest stray!
The Author Online forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.
