Как расширить экран-заставку (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Создайте расширенный экран-заставку: это позволит отображать экран-заставку более продолжительно. Этот экран часто разрабатывается с целью имитации экрана-заставки, отображаемого при запуске приложения, с возможностью полной настройки. Если вы хотите показывать информацию о загрузке в реальном времени или если необходимо дать приложению дополнительное время на подготовку начального пользовательского интерфейса, расширенный экран-заставка позволит определить взаимодействие с пользователем при запуске. Эти инструкции помогут вам создать расширенный экран-заставку, идентичный экрану-заставке, который предоставляет система.

Расширенный экран-заставка в законченном приложении показан в примере экрана-заставки.

Если вы хотите, чтобы у пользователей сложилось впечатление, что стандартный экран-заставка отображается дольше, ваш расширенный экран-заставка должен имитировать стандартный экран-заставку. Это можно сделать следующими способами.

Ваш расширенный экран-заставка должен использовать то же самое изображение, которое указано для экрана-заставки в манифесте вашего приложения.
Представление должно использовать цвет фона, который указан для экрана-заставки в манифесте приложения.
Чтобы расположить изображение расширенного экрана-заставки вашего приложения в тех экранных координатах, в которых располагается экран-заставка, отображаемый по умолчанию, в коде необходимо использовать класс SplashScreen.
Windows (не Windows Phone). Ваш код должен реагировать на события изменения размеров окна (например, при изменении размеров приложения или повороте экрана).

Важно Если вы объявили глобальный элемент управления приложением, такой как AppBar, в файле default.html вашего проекта, задайте для свойства disabled элемента управления значение true при вызове функции отображения расширенного экрана-заставки и верните для disabled значение false при уходе с расширенного экрана-заставки. Подробнее о добавлении элементов управления и определении их стиля см. в разделе Добавление элементов управления и содержимого.

Необходимые условия

Microsoft Visual Studio 2013 и Windows 8.1. Скачать нужное ПО можно со страницы Скачиваемые файлы.
Проект приложения среды выполнения Windows, использующий JavaScript и HTML. Вы еще не начали проект? Обратитесь к нашему пошаговому руководству Создание первого приложения Магазина Windows на JavaScript.
Понимание основных принципов активации приложения. См. раздел How to handle app activation, чтобы изучить события activated.

Этап 1: Создание страницы расширенного экрана-заставки

Свяжите код JavaScript, который определяет экран-заставку, со своей целевой страницей.

Пример экрана-заставки для связывания extendedSplash.js с default.html добавляет следующий код:
```
<script src="/js/extendedSplash.js"></script>
```
Добавьте расширенный экран-заставку <div> к своей целевой странице.

Пример экрана-заставки использует для добавления расширенного экрана-заставки <div> к <body> своей целевой страницы (default.html) следующую разметку HTML:
```
<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
    <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" />
    
    
    <div id="extendedSplashDescription">
        <span id="extendedSplashText">The splash screen was dismissed and the image above was positioned using the splash screen API.</span>
        <button class="action" id="learnMore">Learn More</button>
    </div>
</div>
```
Атрибуты id и class устанавливаются таким образом, чтобы их можно было использовать для стилизации и управления. Расширенный экран-заставка <div> также устанавливает класс "hidden", благодаря чему он не будет видимым, пока его не покажет код JavaScript расширенного экрана-заставки.
Добавьте CSS для стилизации разметки расширенного экрана-заставки на целевой странице.

Убедитесь, что в HTML-коде расширенного экрана-заставки указано использовать стиль position:absolute. Абсолютное позиционирование позволяет приложению использовать весь экран при отображении расширенного экрана-заставки. Это также позволяет располагать изображение экрана-заставки с использованием тех же координат на экране, что и у экрана-заставки, отображаемого по умолчанию.

Пример splash screen добавляет этот CSS (к default.css) для определения стиля тегов расширенного экрана-заставки на целевой странице:
```
.extendedSplashScreen {
    background-color:#00b2f0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}

.extendedSplashScreen.hidden {
    display: none;
}

#extendedSplashImage {
    position: absolute;
}

#extendedSplashDescription
{
    position: absolute;
    width: 100%;
    top: calc(100% - 140px);
    text-align: center;
}

#extendedSplashText
{
    font-family: 'Segoe UI Semilight';
    font-size: 11pt;
    text-align: center;
    width: 75%;
    color: #ffffff;
}
```
Классы и идентификаторы, определяющие эти стили, также определяют теги расширенного экрана-заставки в HTML целевой страницы.

Этап 2: Чтобы отобразить расширенный экран-заставку, добавьте этот код в обработчик активированных событий:

Пример splash screen показывает, как отобразить расширенный экран-заставку с помощью обработчика событий activated (функция activated) в файле default.js.


function activated(eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;

        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);

        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

        // Listen for window resize events to reposition the extended splash screen image accordingly.
        // This ensures that the extended splash screen is formatted properly when the window is resized.
        window.addEventListener("resize", onResize, false);

        // Use setPromise to indicate to the system that the splash screen must not be torn down
        // until after processAll and navigate complete asynchronously.
        eventObject.setPromise(WinJS.UI.processAll().then(function () {
            // Navigate to either the first scenario or to the last running scenario
            // before suspension or termination.
            var url = WinJS.Application.sessionState.lastUrl || scenarios[0].url;
            return WinJS.Navigation.navigate(url);
        }));
    }
}

Пример splash screen использует эти этапы для отображения расширенного экрана-заставки и размещения изображения экрана-заставки при активации приложения (внутри своего обработчика событий activated в файле default.js):

Получите координаты размещения экрана-заставки, отображаемого по умолчанию. Эти координаты хранятся в свойстве объекта SplashScreen, к которому можно получить доступ из объекта события, передаваемого обработчику события activated.

Образец экрана-заставки получает координаты, используя следующий код:
```
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;
```
Ожидайте события закрытия экрана-заставки, затем начните загрузку ресурсов приложения. Операционная система запускает событие dismissed в момент исчезновения предоставленного системой экрана-заставки и в данном случае переходит к отображению расширенного экрана-заставки приложения. Начните операцию запуска в обработчике события закрытия и после завершения настройки приложения выйдите из расширенного экрана-заставки.

Пример splash screen регистрирует свой обработчик события закрытия (onSplashScreenDismissed) в функции activated в файле default.js:
```
        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);
```
Определите обработчик события закрытия вне события activated в файле default.js. В примере экрана-заставки не нужно ждать загрузки каких-либо ресурсов, поэтому расширенный экран-заставка удаляется, когда пользователь нажимает кнопку "Подробнее".
```
    function onSplashScreenDismissed() {
        // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
        SdkSample.dismissed = true;

        // Tear down the app's extended splash screen after completing setup operations here...
        // In this sample, the extended splash screen is torn down when the "Learn More" button is clicked.
        document.getElementById("learnMore").addEventListener("click", ExtendedSplash.remove, false);
        }
    }
```
Создайте функцию, которая удаляет расширенный экран-заставку, в вашем файле extendedSplash.js.
```
    // Removes the extended splash screen if it is currently visible.
    function remove() {
        if(isVisible()) {
            var extendedSplashScreen = document.getElementById("extendedSplashScreen");
            WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
        }
    }
```

Размещение и отображение расширенного экрана-заставки.

Пример splash screen размещает и отображает экран-заставку с помощью следующего кода в своем обработчике события активации (в файле default.js):


        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

Создайте функцию, которая располагает изображение расширенного экрана-заставки в extendedSplash.js.


// Displays the extended splash screen. Pass the splash screen object retrieved during activation.
function show(splash) {
    var extendedSplashImage = document.getElementById("extendedSplashImage");

    // Position the extended splash screen image in the same location as the system splash screen image.
    extendedSplashImage.style.top = splash.imageLocation.y + "px";
    extendedSplashImage.style.left = splash.imageLocation.x + "px";
    extendedSplashImage.style.height = splash.imageLocation.height + "px";
    extendedSplashImage.style.width = splash.imageLocation.width + "px";

    // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
    /*
    var extendedSplashProgress = document.getElementById("extendedSplashProgress");
    extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
    */

    // Once the extended splash screen is setup, apply the CSS style that will make the extended splash screen visible.
    var extendedSplashScreen = document.getElementById("extendedSplashScreen");
    WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}

Windows (не Windows Phone). Ожидайте событий изменения размеров окна и реагируйте путем изменения положения изображения экрана-заставки. Это гарантирует правильное форматирование вашего расширенного экрана-заставки при изменении размеров приложения. Изменения ориентации будут автоматически учтены, если вы создадите гибкий макет или поместите содержимое в гибкий элемент управления, такой как ViewBox.

Зарегистрируйте ваш обработчик событий изменения размера в обработчике событий activated (в default.js):
```
            // Listen for window resize events to reposition the extended splash screen image accordingly.
            // This is important to ensure that the extended splash screen is formatted properly in response to resizing, rotation, etc...
            window.addEventListener("resize", onResize, false);
```
Затем добавьте код для определения обработчика событий. Эта функция получает измененные координаты расположения изображения, а затем вызывает другую функцию для изменения расположения изображения на странице расширенного экрана-заставки.
```
function onResize() {
    // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
    if (splash) {
        // Update the coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;
        ExtendedSplash.updateImageLocation(splash);
    }
}
```
Пример определяет updateImageLocation в файле extendedSplash.js. Если расширенный экран-заставка является видимым, то изображение расширенного экрана-заставки размещается в той же области, что и экран-заставка, который отображается системой.
```
function updateImageLocation(splash) {
    if (isVisible()) {
        var extendedSplashImage = document.getElementById("extendedSplashImage");

        // Position the extended splash screen image in the same location as the system splash screen image.
        extendedSplashImage.style.top = splash.imageLocation.y + "px";
        extendedSplashImage.style.left = splash.imageLocation.x + "px";
        extendedSplashImage.style.height = splash.imageLocation.height + "px";
        extendedSplashImage.style.width = splash.imageLocation.width + "px";

        // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
        /*
        var extendedSplashProgress = document.getElementById("extendedSplashProgress");
        extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
        */
    }
}
```

Замечания

Совет Если во время перехода к расширенному экрану-заставке наблюдается мерцание, добавьте onload="" в свой тег <img> следующим образом: <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. Это поможет предотвратить мерцание, заставив систему ждать, пока будет предоставлено изображение, до переключения на расширенный экран-заставку.