Closure: The Definitive Guide

Chapter 8. User Interface Components

The set of user interface (UI) components provided by the browser as HTML 4 elements is limited to <input>, <select>, <textarea>, and <button>. Generally, building a custom component requires the creative use of HTML and CSS to produce something that looks like what you want. Remember, HTML was originally designed for formatting text, not for building UI widgets, so getting it to do your bidding is often a challenge.

Even once you get the HTML and CSS right, there is still the matter of adding JavaScript so that it responds appropriately to user input events and testing it to make sure that it works consistently across web browsers. This is a time-consuming process, so it helps to leverage existing UI components. Fortunately, the Closure Library contains many UI components, the implementation of which exhibit the design principles of inheritance and event management in Closure described in Chapters 5 and 6, respectively.

The goog/ui folder in the Closure Library contains over 100 JavaScript files, so this chapter will not attempt to explain all of them. (A list of the most commonly used UI widgets appears in Table 8-8.) Instead, the focus will be on explaining the design behind the components, providing examples of how to use some of the existing components, and then demonstrating how to implement your own components. Together, these sections will provide the tools you need to master the goog.ui package.

Due to the length of this chapter, you may ...