Построение информации Apple и стеклянных кнопок

setup() функция, объявленная как виджет onload когда HTML виджета, CSS и файлы JavaScript загружаются, обработчик в его файле HTML, вызывается. В этой функции вызывают конструкторов для получения информации и кнопки Done:

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);

}

Заметьте это, в дополнение к setup() функция, две глобальные переменные объявляются. Эти переменные соответствуют этим двум создаваемым кнопкам. Обычно, Вы хотите сохранить кнопки сохраненными как глобальные объекты так, чтобы можно было взаимодействовать с ними позже.

Затем, setup() вызовы функции конструкторы для AppleInfoButton и AppleGlassButton. Вспомните, что Ваш файл HTML включал необходимые классы для инстанцирования этих кнопок; setup() вызывается после того, как классы загружаются, и new вызов создает новые экземпляры каждого класса. Функции, следующие за новым вызовом, AppleGlassButton()и AppleInfoButton() конструкторы, берущие в параметрах, как элемент DOM, куда кнопка должна быть помещена или обработчик событий для щелчка по той кнопке. Последний параметр в обоих конструкторах является обработчиками, переворачивающими виджет; обработчики определяются в следующем разделе, Зеркально отражая Стороны. Конструктор возвращает ссылку на объект, представляющий кнопку. Полученные объекты присваиваются в глобальные переменные, указанные ранее. Теперь, когда кнопки создаются, можно использовать ранее заявленные глобальные переменные для взаимодействия с ними в любое время. например, Вы могли изменить цвет AppleInfoButton в любой точке путем вызова:

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

Для больше на методах, доступных для AppleGlassButton, считайте Подкласс Кнопки Стекла Apple.

Зеркальное отражение сторон

Следующие функциональные переключатели Ваш виджет к его спине. Это определяется как Информационный обработчик событий Кнопки Apple в конструкторе кнопки в предшествующем разделе, Создавая Информацию Apple и Стеклянные Кнопки:

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);

}

Нажатие кнопки Info (определенный как <div id='infoButton'> в Вашем HTML и созданный в Вашем JavaScript), вызывает эту функцию, заставляющую спину быть выведенной на экран. В функции уровни передней и задней части получены и присвоены локальным переменным. Затем, widget.prepareForTransition("ToBack") замораживает текущий интерфейс, означая, что не показаны любые изменения в пользовательском интерфейсе Вашего виджета после этой точки. Передняя сторона тогда скрыта, и спина сделана активной. Наконец, переход выполняется, который зеркально отражает Ваш виджет с замороженным пользовательским интерфейсом на передней стороне перехода и интерфейса в настоящее время активного пользователя на спине.

(Как в стороне, Вы, возможно, заметили это setTimeout() используется для вызова performTransition(). Путем установки тайм-аута в 0, переход выполняется на следующем цикле событий, допуская стороны, которые будут подкачаны, прежде чем будет выполнен переход. Это - оптимизация, гарантирующая, чтобы обе стороны зеркально отраженного взгляда исправили.)

Сокрытие предпочтений и возврат Вашему основному интерфейсу пользователя выполняют подобную процедуру; обратите внимание на то, что эта функция была присвоена кнопке Done в ее конструкторе в предыдущем разделе, Создав Информацию Apple и Стеклянные Кнопки:

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);

}

На сей раз, однако, задний уровень скрыт, и передний уровень показан. Метод widget.prepareForTransition("ToFront") замораживает текущий пользовательский интерфейс и гарантирует, что зеркально отраженный переход происходит в противоположном направлении как тогда, когда были показаны предпочтения.