31 день Windows 8 для HTML5 | День № 2: Ориентация и Snap

Позже, когда вы захотите переключить устройства, вы будете пытаться найти, где хранится эта опция. Я здесь, мои дорогие читатели, чтобы избавить вас от хлопот. Откройте свойства вашего проекта (Alt + Enter) и выберите вкладку Debug. Оттуда вы можете изменить или удалить свой предыдущий выбор. Если вы отмените выбор, в следующий раз, когда вы выберете удаленную отладку, вы получите диалоговое окно из более раннего.

Я знаю, что ты думаешь. Невозможно, чтобы этот магический удаленный отладчик когда-либо работал между компьютером, подключенным к домену, и планшетом, который вы собираетесь тестировать. Как оказалось, все работает отлично, вас повысят за учетные данные Microsoft, связанные с этим планшетом.

Поддержка вращения

Для начала давайте создадим наше почти известное приложение из пустого шаблона в Visual Studio 2012. После создания нажмите кнопку запуска на симуляторе или на удаленном компьютере (предположим, что до конца этой статьи предположим, что я работаю на удаленном компьютере). Вы увидите ваше удивительное пустое приложение, и если вы поверните его, приложение на самом деле будет автоматически вращаться. Почему как?

По умолчанию все шаблоны в Visual Studio настроены для поддержки всех вращений. Помните этот файл package.appxmanifest? На вкладке «Интерфейс приложения» вы найдете раздел « Поддерживаемые вращения». Проверяя одно или несколько предпочтений ориентации, вы выбираете, какие ориентации будет поддерживать ваше приложение. Опять по умолчанию мы поддерживаем все.

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

Ориентация дисплея

Программно мы можем спросить Windows, какова наша текущая ориентация, и даже получить уведомление о том, когда она изменится. Мы можем сделать это через API под названием Windows.Graphics.Display.DisplayProperties . Ниже я создал очень простую функцию, которая переключает currentOrientation, обновляя элемент в DOM.

function updateDisplayOrientation() {

    switch (Windows.Graphics.Display.DisplayProperties.currentOrientation) {

        case Windows.Graphics.Display.DisplayOrientations.landscape:
            results.innerText = "Landscape";
            break;

        case Windows.Graphics.Display.DisplayOrientations.portrait:
            results.innerText = "Portrait";
            break;

        case Windows.Graphics.Display.DisplayOrientations.landscapeFlipped:
            results.innerText = "Landscape (flipped)";
            break;

        case Windows.Graphics.Display.DisplayOrientations.portraitFlipped:
            results.innerText = "Portrait (flipped)";
            break;

        default:
            results.innerText = "Unknown";
            break;
    }
}

Хотя моя функция updateDisplayOrientation является довольно глупым примером, она становится немного более полезной, если мы действительно хотим подключить ее к слушателю событий. После того, как наша страница «готова» позволяет добавьте , что EventListener на « orientationchanged » , называя нашу updateDisplayOrientation функцию.

....

results = document.getElementById("resultText");

var dispProp = Windows.Graphics.Display.DisplayProperties;
dispProp.addEventListener("orientationchanged", updateDisplayOrientation, false);

updateDisplayOrientation(); // call to set the inital state

....

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

Датчик ориентации

Работа с currentOrientation довольно проста, но также ограничена некоторыми аспектами. Устройства в наши дни имеют множество поддерживаемых датчиков. Это также верно для ориентации, и Windows 8 SDK предоставил нам SimpleOrientationSensor, найденный в Windows.Devices.Sensors.SimpleOrientationSensor. В отличие от нашего предыдущего примера, SimpleOrientationSensor представляет собой API-интерфейс поверх фактического аппаратного датчика, поэтому в зависимости от вашего оборудования может работать или не работать следующее.

Итак, почему другой путь? Отличный вопрос, и я честно почесал голову над этим. Я пришел к своим собственным выводам, что он поддерживает самый широкий набор аппаратного обеспечения, а также точный контроль зерна, когда у вас есть датчик. Не у каждой машины будет физический датчик, но текущая ориентация всегда будет работать. Теперь я знаю, о чем ты думаешь. Конечно, это одно государство, пейзаж. Но это на самом деле не так. В зависимости от вашей графической карты вы можете вращать монитор и иметь другой вид. Например, вы можете перевернуть монитор и установить его в портретном режиме. В этом случае currentOrientation фактически скажет вам это.

Вернуться к SimpleOrientationSensor. Как и прежде, я настроил другой оператор switch, чтобы увидеть, в каком положении находится датчик.

....

switch (e.orientation) {
    case Windows.Devices.Sensors.SimpleOrientation.notRotated:
        results.innerText = "Not Rotated";
        break;

    case Windows.Devices.Sensors.SimpleOrientation.rotated90DegreesCounterclockwise:
        results.innerText = "Rotated 90";
        break;

    case Windows.Devices.Sensors.SimpleOrientation.rotated180DegreesCounterclockwise:
        results.innerText = "Rotated 180";
        break;

    case Windows.Devices.Sensors.SimpleOrientation.rotated270DegreesCounterclockwise:
        results.innerText = "Rotated 270";
        break;

    case Windows.Devices.Sensors.SimpleOrientation.faceup:
        results.innerText = "Face Up";
        break;

    case Windows.Devices.Sensors.SimpleOrientation.facedown:
        results.innerText = "Face Down";
        break;

    default:
        results.innerText = "Undefined orientation " + e.orientation;
        break;
}

....

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

....

results = document.getElementById("resultText");

var sensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();
if ( sensor ) {
    sensor.addEventListener("orientationchanged", sensorOrientationChanged);
    results.innerText = "Sensor Found";
}
else {
    results.innerText = "No Sensor Found";
}

....

Замыкание

На данный момент у нас есть приложение, которое распознает, что ориентация устройства изменилась. Это хорошо, когда мы хотим сделать что-то конкретное в коде с ориентацией, но что, если мы просто хотим, чтобы наше приложение переориентировалось на то, чтобы оно было читаемым / полезным для нашего пользователя? Адаптивный веб-CSS3 явно повлиял на то, как мы разрабатываем макеты наших приложений для Магазина Windows. Windows поддерживает четыре макета для нашего приложения; Пейзаж, портрет, заполнены и привязаны. Мы поддерживаем каждый из этих макетов с помощью CSS3 Media Queries .

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

@media screen and (-ms-view-state: fullscreen-landscape)

Портретный вид. Пейзаж на своей стороне. Что еще?

@media screen and (-ms-view-state: fullscreen-portrait)

Защелкнутый и заполненный вид. Здесь вещи начинают становиться интересными и творческими. В симуляторе ниже слева вы видите приложение в заполненном состоянии, а справа вы можете увидеть приложение в привязанном состоянии. Для этого требуется минимальное разрешение экрана 1366px x 768px.

@media screen and (-ms-view-state: snapped)

@media screen and (-ms-view-state: filled)

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

Как я упоминал ранее, мы делаем это через CSS3 Media Query . Из всех представленных выше представлений видно, что мы делаем что-то простое, например, меняем цвет фона.

@media screen and (-ms-view-state: snapped) {
    body {
        -ms-grid-columns: 20px 1fr 20px;

        background-color: blue;
        font-size: large;
    }

    header[role=banner] {
        -ms-grid-columns: 20px 1fr;
    }
}

Резюме

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

Ваша заявка ДОЛЖНА подтверждать состояние привязки. Удостоверьтесь, что Вы приспосабливаете это.

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