Book Image

YUI 2.8: Learning the Library

Book Image

YUI 2.8: Learning the Library

Overview of this book

The YUI Library is a set of utilities and controls written in JavaScript for building Rich Internet Applications, across all major browsers and independently of any server technology. There's a lot of functionality baked into YUI, but getting to and understanding that functionality is not for the faint of heart. This book gives you a clear picture of YUI through a step-by-step approach, packed with lots of examples.YUI 2.8: Learning the Library covers all released (non-beta) components of the YUI 2.8 Library in detail with plenty of working examples, looking at the classes that make up each component and the properties and methods that can be used. It includes a series of practical examples to reinforce how each component should/can be used, showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces. It has been updated from its first edition with the addition of several chapters covering several new controls and enriched with lots of experience of using them.You will learn to create a number of powerful JavaScript controls that can be used straightaway in your own applications. Besides giving you a deep understanding of the YUI library, this book will expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS. The final chapter describes many of the tools available to assist you the developer in debugging, maintaining, and ensuring the best quality in your code. In this new edition, all the examples have been updated to use the most recent coding practices and style and new ones added to cover newer components. Since the basic documentation for the library is available online, the focus is on providing insight and experience.The authors take the reader from beginner to advanced-level YUI usage and understanding.
Table of Contents (18 chapters)
YUI 2.8 Learning the Library
About the Authors
About the Reviewers

Perfect date selection with the Calendar Control

For our first coding example, we'll take a quick look at the Calendar Control. The YUI Calendar allows you to easily create a variety of attractive and highly functional calendar interfaces that can allow your visitors to quickly and easily select single dates or range of dates.

It's an easy component to master, making it ideal for our very first coding example. Not much coding is required for a basic calendar implementation, and the control can easily be customized using the Calendar classes' extensive range of properties or by overriding the default styling.

There is also a range of different formats of Calendar that we can create; there's the basic, single select, one-page calendar control, which displays one month at a time, or there's a larger, multi-page calendar, which allows multiple months to be displayed at once. Multi-select calendars can come in either single or multiple month display formats.

The rendered calendar is instinctively intuitive to use and is presented in a very attractive manner. Almost anyone being presented with it will instantly know how to use it. By default, it features a clear and sensible interface for selecting a date, arranging the dates of the current or starting month in a grid headed by the day of the week.

It also features automatic rollovers for valid or selectable dates, automatic current date selection, and an infinite date range both forwards and backwards in time that the visitor can move through to select the date of their choice. When navigating between months, the individual days automatically reorder themselves so that the correct date appears in the correct day of the week.

Several classes make up the Calendar Control; two separate classes represent the two different types of calendar that can be rendered and another class contains math utilities that allow you to add, subtract, or compare different dates. We will take a look at the classes that make up this control to see what is available and exactly how it works before we begin coding.

The basic Calendar class

The most basic type of calendar is the single-panel Calendar, which is created with the YAHOO.widget.Calendar class. To display a calendar, an HTML element is required to act as a container for the calendar. The following screenshot shows a basic Calendar Control:

The constructor can be called specifying, at the very least, a reference to the HTML element that will contain the calendar. This can either be an actual DOM reference or it can be its id attribute.

You can also specify an additional argument that can accept a literal object containing various configuration properties. The configuration object is defined within curly braces within the class constructor. This is a pattern frequently used in YUI components.

When the constructor for an object might take many optional arguments, instead of reserving a slot in the argument list for each possible one, a configuration object is accepted instead, which is nothing more than a regular JavaScript object literal or an expression that returns an object. This object should have properties corresponding to the configuration attributes that you want to set different from the default.

For the Calendar Control you would set attributes such as its title, a comma-delimited range of pre-selected dates or a close button shown on the calendar.

There are many methods defined in the basic Calendar caliber class. Some of the more useful methods are:

  • A method for determining whether a date is outside of the current month: isDateOOM.

  • Navigation methods such as nextMonth, nextYear, previousMonth, and previousYear that can be used to programmatically change the month or year displayed in the current panel.

  • Operational methods such as addMonths, addYears, subtractMonths, and subtractYears, which are used to change the month and year shown in the current panel by the specified number of months or years.

  • The render method is used to draw the calendar on the page and is called for every implementation of a calendar, after it has been configured. Without this method, no calendar appears on the page.

  • Two reset methods: reset, which resets the calendar to the month and year originally selected, and resetRenderers, which resets the render stack of the calendar.

  • Selection methods that select or deselect dates such as deselect, deselectAll, deselectCell, select, and selectCell.

As you can see, there are many methods that you can call to take advantage of the advanced features of the Calendar Control.

The CalendarGroup class

In addition to the basic calendar, you can also create a grouped calendar that displays two or more month panels at once using the YAHOO.widget.CalendarGroup class. The control automatically adjusts the calendar's UI so that the navigation arrows are only displayed on the first and last calendar panels, and so that each panel has its own heading indicating which month it refers to.

The CalendarGroup class contains additional built-in functionality for updating the calendar panels on display, automatically. If you have a two-panel calendar displaying, for example, January and February, clicking the right navigation arrow will move February to the left of the panel so that March will display as the right-hand panel. All of this is automatic and nothing needs to be configured by you.

Though showing two or more calendars in the page looks very different to the user, for the programmer it hardly makes any difference at all.