×
Namespaces

Variants
Actions

Detectando mudanças de orientação em WRT

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

Testado com
Aparelho(s): Nokia N97

Compatibilidade
Plataforma(s): S60 5a Edição and later
Symbian
Nokia Belle
Symbian Anna
Symbian^3
S60 5th Edition

Artigo
Palavras-chave: window.onresize, window.onload, screen.width, screen.height, setInterval()
Tradução:
Por thiagobrunoms
Última alteração feita por hamishwillee em 08 Aug 2012

Contents

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 Symbian Web Runtime). 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.
This page was last modified on 8 August 2012, at 09:15.
75 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×