MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

The rest of the constructor (lines 12–63) builds up the child elements that define the control, making
sure that each piece has a particular class name that, when scoped with the control-calendar class
placed on the root element above, allows specific styling of the individual parts. The defaults for this are
in calendar.css; specific overrides that differentiate the two controls in Figure 4-9 are in default.css.
FIGURE 4-9 Output of the Calendar Control example.
Within the constructor you can also see that the control wires up its own event handlers for its child
elements, such as the previous/next buttons and each date cell. In the latter case, clicking a cell uses
dispatchEvent to raise a dateselected event from the overall control itself.
Lines 63–127 then define the members of the control. There are two internal methods, _setClass
and _update, followed by two public methods, nextMonth and prevMonth, followed by three public
properties, year, month, and date. Those properties can be set through the data-win-options string in
markup or directly through the control object as we’ll see in a moment.
At the end of calendar.js you’ll see the two calls to WinJS.Class.mix to add properties for the events
(there’s only one here), and the standard DOM event methods like addEventListener,
removeEventListener, and dispatchEvent, along with setOptions:
WinJS.Class.mix(Controls.Calendar, WinJS.Utilities.createEventProperties("dateselected"));
WinJS.Class.mix(Controls.Calendar, WinJS.UI.DOMEventMixin);
Very nice that adding all these details is so simple—thank you, WinJS! 29
29 Technically speaking, WinJS.Class.mix accepts a variable number of arguments, so you can actually combine the two
calls above into a single one.
162