Detectando mudanças de orientação em WRT

From Forum Nokia Wiki

Original: Detecting orientation changes in WRT

ID		Creation date	19 de Setembro de 2009
Platform	S60 5a Edição	Tested on devices	Nokia N97
Category	Web Runtime (WRT)	Subcategory	UI

Keywords (APIs, classes, methods, functions): window.onresize, window.onload, screen.width, screen.height, setInterval()

Introdução

Devido a grande variedade de tamanhos de telas em dispositivos Nokia, é muito importante que o desenvolvedor observe o tamanho dos widgets criados. Além disso, existe também uma chance que a orientação da tela mude. Existem algumas coisas que devem ser consideradas neste contexto. A primeira é na detecção de alteração do tamanho da tela. O segundo ponto a ser observado é qual a ação a ser realizada quando detecta-se a alteração no tamanho da tela (para mais informações, ver Reacting to the changes in screen size in WRT). Este post trata do primeiro caso.

A maneira mais fácil para detectar alteração no tamanho da tela é utilizar a função JavaScript onresize. Este é invocado automaticamente quando a tela é redimensionada. Isto acontece, por exemplo, quando a orientaçao do dispositivo se altera. Entretanto, em alguns dispositivos, tal como a primeira versão do Nokia 5800 XpressMusic, esta detecção não pode ser realizada (não há suporte a função onresize). Isto acarreta em medições extras que serão detalhadas durante este documento. Primeiramente, vamos considerar o caso mais simples.

Código-fonte: Utilizando o evento onresize

Aqui está o código da função JavaScript que registra-se em eventos (uma função de callback, se você desejar) para o evento de onresize.

window.onresize = windowResized;

A função é invocada quando altera-se o tamanho da tela:

// Invocado quando a tela é redimensionada
function windowResized() {
    // TODO: Adicionar código para tamanhos diferentes de telas (i.e. orientações) 
}

Também pode ser necessário invocar a função windowResized() assim que a página é carregada. Isto garante que a orientação correta é reconhecida e a tela é mostrada corretamente quando o widget é carregado. Aqui está o código para invocar a função durante a inicialização:

// Registra um "ouvinte" para o evento de "onload"
// (i.e. invoca a função init assim que a página tenha sido carregada)
window.onload = init;

// Realiza a inicialização para o widget
function init(){
    // Invoca manualmente o windowResized para garantir o layout correto
    windowResized();
}

Código-fonte: Utilizando o timer

Existem alguns dispositivos que não dão suporte a função onresize. Uma saída neste caso é utilizar um temporizador que pode ser inicializado para armazenar mudanças de tamanho de tela. Segue abaixo:

var timer = null;
 
window.onload = init;
 
// Realiza a inicialização para o widget
function init(){
    // Invoca a função tick em intervalos de 1 segundo
    timer = setInterval("tick()", 1000);
}
 
// Invocado quando o intervalo de tempo é finalizado
function tick() {
    // Invoca a função windowResized para alcançar o mesmo efeito 
    // Invocado pelo WRT
    windowResized();
}

O código acima pode ser melhorado para evitar invocações desnecessárias a função windowResized(). Isto pode ser feito detectando a nova resolução e comparando com a resolução corrente. Se a resolução não foi alterada desde o último intervalo de tempo, nada precisa ser feito.

// Resoluções do dispositivo. Pode ser utilizado para personalização específica do usuário.
var RESOLUTION_UNDEFINED = 0;
var RESOLUTION_QVGA_LANDSCAPE = 1;  // 320x240
var RESOLUTION_QVGA_PORTRAIT = 2;   // 240x320
var RESOLUTION_NHD_LANDSCAPE = 3;   // 640x360
var RESOLUTION_NHD_PORTRAIT = 4;    // 360x640
var RESOLUTION_HOME_SCREEN = 5;     // menor que 75% das resoluções descritas acima
var resolution = RESOLUTION_UNDEFINED;
 
// Invocado quando o intervalo de tempo termina
function tick() {
    var prevResolution = resolution;
 
    // Detecta a nova resolução
    detectResolution();
 
    // Se a resolução não foi alterada, não faz nada!
    if (resolution == prevResolution) {
        return;
    }
 
    // Invoca a função windowResized para alcançar o mesmo efeito 
    // invocado pelo WRT
    windowResized();
}
 
// Detecta a resolução do dispositivo
function detectResolution() {
    var screenWidth = screen.width;
    var screenHeight = screen.height;
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
 
    if (windowHeight < (0.75 * screenHeight) ||
        windowWidth < (0.75 * screenWidth)) {
        // If the window width or height is less than 75 % of the screen width
        // Se a largura ou a altura da janela é menor que 75% da largura ou da altura da tela
        // consideramos que a view da tela deve ser ativada
        resolution = RESOLUTION_HOME_SCREEN;
    } else if (screenWidth == 240 && screenHeight == 320) {
        resolution = RESOLUTION_QVGA_PORTRAIT;
    } else if (screenWidth == 320 && screenHeight == 240) {
        resolution = RESOLUTION_QVGA_LANDSCAPE;
    } else if (screenWidth == 360 && screenHeight == 640) {
        resolution = RESOLUTION_NHD_PORTRAIT;
    } else if (screenWidth == 640 && screenHeight == 360) {
        resolution = RESOLUTION_NHD_LANDSCAPE;
    } else {
        resolution = RESOLUTION_UNDEFINED;
    }
}

Pós-condições

Detecção de mudanças no tamanho da tela.

Veja também

Materiais Adicionais

Este trecho de código é parte do conceito de stub, o que significa que ele tenha sido corrigido em cima de um modelo de aplicação, para ser mais útil para desenvolvedores. A versão do aplicativo sobre WRT usado como um modelo neste post é v1.2.

O pacote executável que pode ser utilizado para testar as características discutidas aqui está disponível para download em Media:detecting_orientation_changes.zip.
Você pode ver todas as alterações que são necessárias para implementar as características discutidas acima. As alterações são disponibilizadas nos formatos diff ou colour-coded diff (HTML) em Media:detecting_orientation_changes.diff.zip.
Para informações gerais sobre como aplicar o patch, ver Using Diffs.

Community: Wiki