31 день Windows 8 для HTML5 | День № 9: Живые плитки

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

var notifications = Windows.UI.Notifications;
var template = notifications.TileTemplateType.tileSquareText04;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].innerText = _tileMessage.value; // taking from input box

var tileNotification = new notifications.TileNotification(tileXml);
notifications.TileUpdateManager.createTileUpdaterForApplication()
    .update(tileNotification);

Итак, как вы справляетесь с другими шаблонами? Вы можете смешивать или сочетать? Ну, вы просто выбираете другой шаблон, изменяете XML соответствующим образом и отправляете его вместе. L Инопланетяне продлить то , что было сделано выше , чтобы отправить вместе для плитки ниже.

....

var template = notifications.TileTemplateType.tileSquareBlock;

....

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].innerText = "31"; 
tileTextAttributes[1].innerText = _tileMessage.value; // taking from input box

....

Как видите, это довольно простой процесс. Последнее замечание по поводу этих шаблонов заключается в том, что ваш файл SmallLogo.png, скорее всего, будет отображаться и на некоторых из этих плиток. Это отличный способ расширить ваш брендинг, но это также то, о чем нужно знать, когда вы работаете над этим. Используя шаблон TileSquareBlock, вот как на самом деле выглядит моя плитка:

Это еще одна причина, как мы заявили в первый день , для вас, чтобы использовать пользовательские образы для вашего приложения при изучении разработки Windows 8. Без этого фиолетового изображения мне пришлось бы угадывать, какое из них использовалось, или, что еще хуже, не понимать, что оно вообще было доступно. Вы увидите, что есть много свойств, которые можно редактировать для вашей плитки в файле package.appxmanifest вашего проекта. Мы можем не только поменять изображение логотипа, но и установить свойства фона, файл малого логотипа и другие значения текста и цвета.

Важной частью этого раздела является раскрывающийся список «Показать имя».

Я кратко упомянул об этом ранее, но я хочу убедиться, что вы понимаете, где эти изображения и значения установлены. Кроме того, просто определив в этом манифесте файл с широким логотипом, вы сразу же поддержите размер большой плитки. Фактически, это ЕДИНСТВЕННЫЙ способ поддержки широкой плитки. Ваше приложение даже не предложит размер в качестве опции, пока вы не укажете это значение. Попробуйте. Теперь давайте посмотрим, как мы отправляем обновления на большой лист.

Отправка уведомления на большую живую плитку

На этот раз мы выберем шаблон Large Tile, но мы также добавим изображение, чтобы вы могли увидеть и его синтаксис.

Важный урок:   помните, что пользователь контролирует здесь. Если они решили сделать вашу плитку большой или маленькой, вы не можете решить это. Однако вы можете решить, хотите ли вы поддерживать «уведомления» в обоих размерах. Я рекомендую это, потому что это дает возможность вашему пользователю обратить внимание на ваше приложение на начальном экране.

Из-за этого, когда мы отправляем обновления, мы можем создать два. Один для маленькой плитки, а другой для большой. Затем, используя магию XML, мы объединим их и отправим как одно уведомление, а затем, независимо от того, что пользователь установил, они все равно будут получать уведомления. Но для этого у вас должен быть широкий набор плиток по умолчанию в вашем package.appxmanifest . Если нет широкой, нет уведомления, независимо от того, что вы отправили. Давайте создадим эти два (я думаю, вы должны использовать их и в своем приложении):

Плитка XML в итоге будет выглядеть так:

<tile>
    <visual lang="en-US>
        
        <binding template="TileSquareImage">
            <image id="1" src="/images/clarkHeadShot.jpg" alt="Clark Sell"/>
        </binding> 

        <binding template="TileWideSmallImageAndText03">
              <image id="1" src="/images/clarkHeadShot.jpg" alt="31 Days"/>
              <text id="1">31 Days of Windows 8</text>
        </binding>  

    </visual>
</tile>

Теперь вы уже знаете, как создавать и изменять маленькие плитки. Чтобы изменить большой, это точно так же, просто другой шаблон, и больше возможностей для изменения вещей.

var wideTemplate = notifications.TileTemplateType.tileWideSmallImageAndText03;
var wideTileXml = notifications.TileUpdateManager.getTemplateContent(wideTemplate);

var wideTileAttributes = wideTileXml.getElementsByTagName("image");
var wideTileTextElements = wideTileXml.getElementsByTagName("text");

wideTileAttributes[0].setAttribute("src", "ms-appx:///images/clarkHeadShot.jpg");
wideTileTextElements[0].innerText = "31 Days of Windows 8";

Присмотритесь, и вы увидите, что я на самом деле вытаскиваю изображение из какого-то странного src, это фактически локальный пакет. Вы также можете использовать только «/images/clarkHeadShot.jpg». У вас также есть возможность использовать изображения, размещенные в Интернете или даже в вашем локальном хранилище. Конечно, чем больше сеть надеется, что что-то займет больше времени, тем дольше будет загружаться, так что имейте это в виду при их использовании. Кроме того, чтобы извлекать изображения из Интернета, вам необходимо настроить возможности своих приложений в манифесте, чтобы обеспечить доступ к Интернету. Если вы делаете это, вам нужна политика конфиденциальности.

Чтобы объединить две плитки вместе. Мы собираемся взять один шаблон и добавить его в другой.

var node = wideTileXml.importNode(smallTileXml.getElementsByTagName("binding").item(0), true);
wideTileXml.getElementsByTagName("visual").item(0).appendChild(node);

Как вы могли видеть выше, мы получим несколько привязок в одном узле <visual>. Чтобы добавить дополнительные уведомления, вы должны пройти тот же процесс, добавив еще больше к этому же узлу.

— совет —

Выше мы упоминали, что есть несколько разных способов ссылки на ресурсы, такие как изображения. Давайте посмотрим на несколько.

• ms-appx: ///images/Cats.png — ссылка на ваш локальный пакет
• ms-appdata: ///images/Cats.png — ссылка ApplicationData.LocalFolder
• /images/cats.png — типичная местная ссылка
• http (s): //31daysofwindows8.com — ссылка на http (s)

Очистка ваших уведомлений

Также будут моменты, когда вы захотите удалить свои уведомления. Возможно, появилась новая информация или что-то изменилось до истечения срока годности, и вам нужно начать все сначала. Чтобы сделать это, это простая строка кода:

var notifications = Windows.UI.Notifications;
notifications.TileUpdateManager.createTileUpdaterForApplication().clear();

Уведомления об истечении срока действия

Ваше уведомление должно длиться вечно? Ну, я не могу ответить на это, но я думаю, что некоторые из этих уведомлений на самом деле, возможно, должны быть очищены. По умолчанию локальные уведомления о значках и значках не имеют срока действия, в то время как push-уведомления, периодические и запланированные уведомления будут действовать через три дня. Чтобы истечь уведомление, просто установите expirationTime в своем уведомлении плитки.

var currentTime = new Date();
tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);

Я знаю тебя, мы ожидаем чего-то намного сложнее. Итак, мы рассмотрели маленькие и большие плитки, даже в комбинации, но что если вы хотите предоставить своему пользователю несколько плиток?

Вторичные плитки

Вторичные листы — это отличный способ выкладывать информацию, которую ваши пользователи хотят видеть непосредственно на начальном экране. Если вы приложение погоды, они могут закрепить несколько городов для быстрого ознакомления. Если вы приложение «Люди», вы позволяете мне прикреплять людей, которые важны для меня, чтобы я мог легко видеть, что они замышляют.

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

Быстрый старт: закрепление вторичной плитки

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

Из облака

Push, периодические и запланированные уведомления — это то, что мы еще не затронули, но я собираюсь сохранить эту тему в другой раз. Завтра мы говорим о тосте, и они действительно идут рука об руку, когда мы говорим о чем-то вроде push-уведомлений.

Резюме

Сегодня мы рассмотрели большое количество материалов, связанных с обновлениями Windows 8 Live Tile. От создания до обновлений вы можете видеть, что это довольно просто сделать из вашего приложения. Я не могу рекомендовать обновлять плитки вашего приложения соответствующей информацией как можно чаще. Это сделает ваше приложение более привлекательным для вашего пользователя.

Чтобы загрузить мое полное решение примера кода для этой статьи, щелкните значок ниже:

Завтра мы рассмотрим другую сторону уведомлений: сообщения за тосты. До тех пор, счастливого кодирования, и мы увидимся завтра!