Guia de início rápido: determinando a orientação do dispositivo (HTML)

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Você pode usar o sensor SimpleOrientation para determinar a orientação do dispositivo com um aplicativo escrito em JavaScript.

Em vez de retornar propriedades como "portrait-up" ou "landscape left", este sensor retorna um valor de rotação: "Not rotated", "Rotated90DegreesCounterclockwise", etc. A tabela a seguir mapeia as propriedades de orientação comuns ("Portrait Up", etc.) à leitura correspondente do sensor.

Orientação	Leitura correspondente do sensor
Portrait Up	NotRotated
Landscape Left	Rotated90DegreesCounterclockwise
Portrait Down	Rotated180DegreesCounterclockwise
Landscape Right	Rotated270DegreesCounterclockwise

Objetivo: Depois de concluir este guia de início rápido, você entenderá como usar o sensor SimpleOrientation para detectar a orientação do dispositivo.

Pré-requisitos

Você deve estar familiarizado com HTML, JavaScript, e eventos.

O dispositivo ou emulador que você está usando deve ter suporte para um acelerômetro.

Tempo para conclusão: 15 minutos.

Instruções

1. Abrir o Microsoft Visual Studio

Abra uma instância do Visual Studio.

2. Criar um novo projeto

Crie um novo projeto, escolhendo um Aplicativo em Branco nos tipos de projetos de Aplicativos JavaScript/Store.

3. Substituir o código JavaScript

Abra o arquivo default.js do projeto e substitua o código existente pelo seguinte.

// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var orientationSensor;
    var app = WinJS.Application;

    function id(elementId) {
        return document.getElementById(elementId);
    }

    function onOrientationChanged(e) {
        switch (e.orientation) {
            case Windows.Devices.Sensors.SimpleOrientation.notRotated:
                id('txtOrientation').innerHTML = "Not Rotated";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated90DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 90";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated180DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 180";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated270DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 270";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.faceup:
                id('txtOrientation').innerHTML = "Face Up";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.facedown:
                id('txtOrientation').innerHTML = "Face Down";
                break;
            default:
                id('txtOrientation').innerHTML = "Undefined orientation " + e.orientation;
                break;
        }
    }



    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Retrieve the default orientation sensor
            orientationSensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();

            // Set the event handler
            orientationSensor.addEventListener("orientationchanged", onOrientationChanged);
            WinJS.UI.processAll();
        }
    };

    app.start();
})();

4. Adicionar o HTML para os aplicativos

Abra o arquivo default.html dos projetos do Windows e do Windows Phone e copie o seguinte HTML para dentro das marcas BODY do arquivo.


<div class="item" id="scenario1Output">
    Orientation: <a id="txtOrientation">no data</a>
</div>

5. Criar, implantar e executar o aplicativo

Pressione F5 ou selecione Depurar > Iniciar Depuração) para criar, implantar e executar o aplicativo.

Quando o arquivo está executando, você pode alterar os valores do acelerômetro movendo o dispositivo ou usando as ferramentas do emulador.

6. Parar o aplicativo

Pressione Alt+Tab para retornar ao Visual Studio.
Pressione Shift-F5 ou selecione Depurar > Parar Depuração) para parar o aplicativo.

Resumo e próximas etapas

O exemplo anterior demonstra quão pouco código você precisará escrever a fim de integrar a entrada de sensor para orientação simples em seu aplicativo.

O aplicativo estabelece uma conexão com o sensor padrão na função onactivated. Isso ocorre na seguinte linha:

orientationSensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();

Os novos dados do sensor são capturados na função onOrientationChanged. Toda vez que o driver do sensor recebe novos dados do sensor, ele transmite os valores para seu aplicativo usando esta função (ou o manipulador de eventos). O aplicativo registra este manipulador de eventos na seguinte linha:

orientationSensor.addEventListener("orientationchanged", onOrientationChanged);

Esses novos valores são gravados na tela por meio de atualizações nos elementos DOM mostrados a seguir:

<div class="item" id="scenario1Output">
    Orientation: <a id="txtOrientation">no data</a>
</div>

Você poderia usar os valores faceup e facedown para determinar quando salvar as informações sobre estado e encerrar o aplicativo.

Você pode usar os outros valores para alterar a orientação da tela.

Note que os valores faceup e facedown são mutuamente exclusivos do quadrante ou da orientação da tela.

Tópicos relacionados

SimpleOrientation Sensor class

Exemplo de sensor do SimpleOrientation

Partilhar via