Constructing the Apple Info and Glass Buttons

The setup() function, declared as the widget's onload handler in its HTML file, is called when the widget's HTML, CSS, and JavaScript files are loaded. In this function, the constructors for the info and Done button are called:

var gDoneButton;

var gInfoButton;

function setup()

{

    gDoneButton = new AppleGlassButton(document.getElementById("doneButton"), "Done", hidePrefs);

    gInfoButton = new AppleInfoButton(document.getElementById("infoButton"), document.getElementById("front"), "white", "white", showPrefs);

}

Notice that, in addition to the setup() function, two global variables are declared. These variables correspond to the two buttons being created. Usually, you want to keep the buttons stored as global objects so that you can interact with them later.

Next, the setup() function calls the constructors for an AppleInfoButton and an AppleGlassButton. Recall that your HTML file included the necessary classes to instantiate these buttons; setup() is called after the classes are loaded, and the new call creates new instances of each class. The functions that follow the new call, AppleGlassButton()and AppleInfoButton() are constructors that take in parameters, like the DOM element where the button should be placed or the event handler for a click on that button. The last parameter in both constructors are the handlers that flip the widget over; the handlers are defined in the next section, Flipping Sides. The constructor returns a reference to an object that represents the button. The resulting objects are assigned into the global variables specified earlier. Now that the buttons are created, you can use the previously declared global variables to interact with them at any time. for instance, you could change the color of the AppleInfoButton at any point by calling:

gInfoButton.setStyle("black","black");

For more on the methods available for AppleGlassButton, read The Apple Glass Button Subclass.

Flipping Sides

The following function switches your widget to its back. It is designated as the Apple Info Button's event handler in the button's constructor in the prior section, Constructing the Apple Info and Glass Buttons:

function showPrefs()

{

    var front = document.getElementById("front");

    var back = document.getElementById("back");

    if (window.widget)

        widget.prepareForTransition("ToBack");

    front.style.display="none";

    back.style.display="block";

    if (window.widget)

        setTimeout ('widget.performTransition();', 0);

}

Clicking the Info button (defined as <div id='infoButton'> in your HTML and constructed in your JavaScript) calls this function, which causes the back to be displayed. In the function, the front and back layers are obtained and assigned to local variables. Next, widget.prepareForTransition("ToBack") freezes the current interface, meaning that any changes to your widget’s user interface after this point are not shown. The front is then hidden and the back is made active. Finally, the transition is run that flips your widget, with the frozen user interface on the front of the transition and the currently active user interface on the back.

(As an aside, you may have noticed that setTimeout() is used to call performTransition(). By setting the timeout to 0, the transition is performed on the next event loop, allowing for the sides to be swapped before the transition is run. This is an optimization that ensures that both sides of the flip look correct.)

Hiding the preferences and returning to your main user interface follows a similar procedure; note that this function was assigned to the Done button in its constructor in the previous section, Constructing the Apple Info and Glass Buttons:

function hidePrefs()

{

    var front = document.getElementById("front");

    var back = document.getElementById("back");

    if (window.widget)

        widget.prepareForTransition("ToFront");

    back.style.display="none";

    front.style.display="block";

    if (window.widget)

        setTimeout ('widget.performTransition();', 0);

}

This time, however, the back layer is hidden and the front layer is shown. The method widget.prepareForTransition("ToFront") freezes the current user interface and ensures that the flip transition occurs in the opposite direction as when the preferences were shown.