Эта статья является Днем № 3 в серии под названием 31 Дней Windows 8 . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти все ресурсы, инструменты и исходный код на нашем веб-сайте .
Сегодня мы поговорим о небольшой, но очень важной части жизненного цикла приложения: заставке. Некоторые из вас сначала увидят это как глупую тему, но на самом деле это невероятно важно с точки зрения взаимодействия с пользователем, и это первое, что они видят.
Скажем, в качестве примера, что ваше приложение подключается к Интернету для сбора некоторых данных. Может быть, вы приложение погоды. Каждый раз, когда пользователь запускает ваше приложение, ему нужны данные с точностью до секунды. Вы знаете, что на сбор данных, соответствующих изображений и их сборку на странице вашего приложения обычно уходит 2-3 секунды.
То, что мы видим во многих приложениях, это то, что приложение загружается пустым, почти на испорченную страницу, только для того, чтобы быть заполненным через 2-3 секунды. Используя заставку и ее события, мы можем «расширить» возможности заставки, чтобы наши пользователи не видели наше приложение, пока мы не готовы к этому. Пара лишних секунд, глядя на заставку, всегда предпочтительнее, чем открытие испорченного или просто зависшего приложения.
Итак, в этой статье мы будем определять, где было расположено исходное изображение заставки, и заменять его изображением заставки «заполнитель», пока наше приложение не будет заполнено соответствующим образом.
Начиная
Если вы помните из нашей статьи о первом дне , изображение на заставке всегда 620 х 300 пикселей. Для этого примера мы предоставим вам две версии этого изображения. Первый — оригинальный красный:
Кроме того, мы создали идентичную версию изображения, но с красным и черным, чтобы мы могли видеть разницу, когда они меняются местами, и в то же время иметь возможность заметить, смещается ли вообще положение текста.
Добавьте эти два изображения в папку «Активы» в новом «пустом» проекте. Если вы запустите этот проект после замены изображений, вы должны увидеть красное изображение за секунду или две, прежде чем ваши приложения загрузятся на нашу страницу default.html.
Теперь вы должны были заметить, что ваше изображение было представлено на темно-сером фоне, но наше изображение было 620 × 300. Существует простое исправление, верно ,,,,,,, файл appxmanifest. Внизу внизу, прямо под тем местом, где мы устанавливаем изображение для отображения, мы также можем установить цвет фона. Установите его на # ff0000 и запустите снова. Как вы можете догадаться, наш логотип заставки должен быть окрашен в море красного цвета. Очевидно, нам нужен хороший дизайнер.
Также стоит отметить, что мы действительно можем использовать прозрачный png, а не фоновый. Мы не здесь, просто чтобы проиллюстрировать, что все происходит.
Расширение нашего заставки
Я думаю, что мы должны начать с того, чтобы спросить себя, зачем нам вообще нужно расширять заставку? Почему бы просто не сделать этот вызов API ESPN и позволить запуску занять больше времени? Просто, вы не пройдете сертификацию магазина. В разделе 3.8 говорится , что ваше приложение должно запуститься менее чем за 5 секунд. Мы можем обойти эту политику, «расширив заставку», по сути введя в заблуждение наших пользователей, полагая, что они на самом деле находятся на заставке, если на самом деле они находятся на нашей целевой странице. Подлый нас.
Мы делаем это, в основном показывая и скрывая div на нашей странице по умолчанию. Нет, правда, и все. Давайте создадим пустой проект, чтобы начать. Первое, что нам нужно сделать, это создать этот div. Единственная цель этого элемента — создать и контролировать сходство с заставкой, но на нашей странице по умолчанию. Ниже я создаю этот div, давая ему id и класс, который мы можем контролировать позже.
<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
<img id="extendedSplashImage" src="/images/splashscreenALT.png" />
</div>
Вы можете видеть, что наш div имеет ссылку на наше второе изображение заставки, в нашем случае — красное и черное.
JavaScript
Очевидно, нам нужен JavaScript, чтобы все это произошло. По сути, мы хотим сделать следующее:
- Присоединяйтесь к активации нашего приложения
- Возьмите объект заставки, чтобы мы могли найти такие вещи, как его расположение на экране.
- Показать наше изображение
- Зацепиться за несколько событий
Мы хотим принять участие в запуске наших приложений, и даже в пустом шаблоне выделен наш код управления жизненным циклом PLM или процесса. Во время запуска мы собираемся извлечь объект заставки из аргументов, переданных в args.detail.splashscreen . Как только мы получим это, мы сможем получить его экранные координаты на потом. Зачем? Нам нужны эти координаты, чтобы мы могли расположить наше изображение точно в том же месте, что и старое. Как только у нас будет это, мы покажем шоу div, подробнее об этом через секунду.
var _splash,
_coordinates = { x: 0, y: 0, width: 0, height: 0 };
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
_splash = args.detail.splashScreen;
_coordinates = _splash.imageLocation;
ExtendedSplash.show(_splash);
window.addEventListener("resize", onResize, false);
_splash.addEventListener("dismissed", onSplashScreenDismissed, false);
args.setPromise(WinJS.UI.processAll());
}
};
Мы также хотим подключиться к двум разным событиям, изменить размер и удалить их. Изменение размера обращается к сценарию, в котором пользователь нашего приложения может фактически привязать приложение во время запуска. Если они это сделают, мы должны знать об этом, и захватить заставки новые координаты. Во-вторых, мы могли бы захотеть подключиться к событию «отклонено», чтобы немного больше взаимодействовать с экраном и / или удачно завершить работу заставки.
— sidebar — Пространства имен
Что-то, что я еще не рассмотрел, это пространство имен наших объектов в JavaScript. JavaScript, который мы пишем для наших приложений, является дополнением к ECMA Script 5. Мы также вынуждены использовать строгий режим, или прагму «использовать строгий» . Это хорошая вещь. Строгий режим помогает нам поддерживать рельсы в нашем JavaScript, настраивая нас на EcmaScript 6. Из-за этого нам нужно пространство имен нашей функции, чтобы мы могли вызывать их из других объектов JavaScript, не загрязняя глобальное пространство имен.
Для этого мы можем использовать WinJS. Ниже вы увидите, что я открываю публичное имя для его частной функции. В приведенном выше коде это откуда расширенный Splash.
(function () {
"use strict";
WinJS.Namespace.define("ExtendedSplash", {
show: show,
[publicFunction]: [privateName],
[publicFunction]: [privateName]
});
})();
Привыкни к тому, чтобы набирать код выше. Вы будете делать это много. Сниппеты FTW !!!
Покажи мне
Всплеск-объект ExtendedSplash, на который мы ссылались ранее, — это всего лишь небольшой вспомогательный объект, который я создал для использования в разных проектах. Во время активации мы вызвали его функцию show и передали объект заставки.
Как я упоминал ранее, мы должны наложить наше изображение на изображение заставки, и мы делаем это с помощью некоторого JavaScript, манипулирующего элементами DOM и их ассоциированным CSS. Проще говоря:
- Получите элемент нашего «расширенного заставки»
- Используя CSS, добавьте, что элементы top, left, height и with, на которые изначально было установлено изображение-заставка.
- Удалите наш класс CSS, который в первую очередь скрывал div
function show(splash) {
var extendedSplashImage = document.querySelector("#extendedSplashImage");
position(extendedSplashImage, splash);
WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}
function position(element, splash) {
element.style.top = splash.imageLocation.y + "px";
element.style.left = splash.imageLocation.x + "px";
element.style.height = splash.imageLocation.height + "px";
element.style.width = splash.imageLocation.width + "px";
}
Теперь, когда мы можем показать, мы, конечно, должны добавить возможность удалять (например, наше начальное состояние) и обновлять, например, когда что-то привязано. Чтобы удалить, мы просто добавляем обратно наш класс CSS, чтобы скрыть.
function remove() {
if (isVisible()) {
var extendedSplashScreen = document.querySelector("#extendedSplashScreen")
WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
}
}
function isVisible() {
var extendedSplashScreen = document.querySelector("#extendedSplashScreen");
return !(WinJS.Utilities.hasClass(extendedSplashScreen, "hidden"));
}
Обновление на самом деле не более, чем вызов шоу снова.
Стиль это
Я не буду подробно останавливаться на CSS, но я хочу рассказать о нем на высоком уровне. Ничто из приведенного ниже не должно вас удивлять, мы собираемся скрыть элементы div и абсолютного положения от JavaScript, как вы уже видели. Достаточно просто.
.extendedSplashScreen {
background-color:#ff0000;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.extendedSplashScreen.hidden {
display: none;
}
#extendedSplashImage {
position: absolute;
}
Класс Splash Уволен
Наш следующий шаг — подписаться на обработчик событий, когда закрывается заставка. Это позволяет нам скрыть наш расширенный всплеск div и «запустить» наше приложение. Теперь мы уже зарегистрировались для отклоненного события, когда ваше приложение было активировано. Внутри уволенного мы могли бы просто вызвать наш метод удаления и продолжить наш путь.
function onSplashScreenDismissed() {
ExtendedSplash.remove();
}
Но что это весело? Мы действительно должны показать какое-нибудь потрясающее объявление, подобное этому. Не стесняйтесь использовать его в своих сообщениях в блоге, конечно. Роялти бесплатно даже!
Для этого мы просто немного расширим наш оригинальный div, добавив это потрясающее изображение, и давайте добавим кнопку под ним, чтобы продолжить.
<div id="extendedSplashDescription">
<span id="extendedSplashText">
<img src="images/31Days.png" /></span>
<br /> <br />
<button class="action" id="learnMore">continue</button>
</div>
Затем мы обновим нашу функцию OnScreenDismissed, чтобы учесть новую кнопку «продолжить».
function onSplashScreenDismissed() {
document.querySelector("#learnMore").addEventListener(
"click", ExtendedSplash.remove, false);
}
И вот так, мы не создали один из худших на вид расширенных заставок. Зачем показывать это? Это ваш холст, это ваши особенности и клиенты. Крючки для вас, чтобы быть креативным, но используйте свое творчество с умом. Заставить пользователя нажать «Продолжить» только для того, чтобы использовать ваше приложение, ужасно. Сообщение вашего пользователя о том, что вы получаете фид, может быть радушным.
Резюме
Короче говоря, заставка может стать вашим другом и очень мощным инструментом. Это становится временной завесой, чтобы скрыть некоторые из запуска приложений, пока они не будут готовы. Это очень ценная часть приложений, и мы определенно думаем, что вы должны рассмотреть возможность использования в каждом приложении.
Завтра мы погрузимся в WinJS и некоторые элементы управления UX, которые он может нам предложить. Но это завтра. Чтобы загрузить весь пример решения из этой статьи, вы можете скачать его снизу.
