Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Detectando mudanças de orientação em WRT

From 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 06:15.
243 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.

×