webTea - pozadí vertikálně na střed

Sunday 4.12.2011 16:12:48, Jakuje

Kategorie: webOS | HP Pre 3

Když jsem s vývojem začínal, existoval pouze jeden telefon, Palm Pre, s jednou velikostí displeje, 320x480 px. Vytvořit pozadí pro takovou aplikaci bylo jednoduché. Stačilo použít obrázek o této velikosti a umístit jej na pozadí:

 

Zdrojový kód:
body.palm-default {
background-image: url('../images/background_tea.png');
}

Problém nastal, jakmile se objevil Palm Pixi s menším displayem a nedávno, když přišel HP Pre 3 s větší výškou displaye. Stejně tak zobrazovaná velikost na jednom telefonu nebyla vždy stejná (v dolní části se zobrazují bannery, notifikace, nebo alarmy). I na velkém display se můře aplikace zmenšit.

Jediné řešení, které vyřešilo všechny tyto problémy bylo sledovat v javascriptu proměnnou this.controller.window a při její změně přepočítat pozici pozadí (a znovu vertikálně zarovnat ovládací prvky). Stejnou funkci volám po prvním načtení scény.

 

Zdrojový kód:
Mojo.Event.listen(this.controller.window, 'resize', this.handleWindowResize.bind(this));

A tato funkce:

Zdrojový kód:
MainAssistant.prototype.handleWindowResize = function(){
IMAGE_SIZE = 540;
tt = document.getElementsByClassName("tret");
for(i = 0; i < tt.length; i++){
// set element height to 1/3 of window height (without 100 pixels of commands up and down)
tt[i].style.height = (this.controller.window.innerHeight - 100)/3 + "px";
}
// move background to the middle of screen
document.getElementsByClassName("palm-default")[0].style.backgroundPositionY =
"-" + (IMAGE_SIZE - this.controller.window.innerHeight)/2 + "px";
}

 

Diskuse:

:
:
:

 
    

Podbarvená pole označená hvězdičkou jsou povinná!