PDA

View Full Version : Working: adaptive app to the browser's size


rabi_mx
06-07-2008, 11:19 AM
After a lot of work, finally I've found an easy way to make an application adaptive to the browser's size from OL. You can see it at http://rabi.byethost31.com/prueba.html. Resize the browser window and you'll see that the application resize too. Obviously, it works only compiling in flash.
Initially, I tried with the internal OL command, but there's no way to make it, so I prove with several methods, using javascript from the html page, but it don't works. Well, here's my way:
As I learned in this thread (http://forum.openlaszlo.org/showthread.php?t=10238), all the laszlo components have a real movie clip "inside", and we can access it with getMCRef(), and then we can apply all the Flash properties and methods. This is my code:
<canvas>
<attribute name="scale"/>
<handler name="oninit">
Stage.scaleMode = "noScale"; myListener = new Object(); var
myListener=new Object();
myListener.onResize = function(){
escala(); }
Stage.addListener(myListener);
escala();
function escala(){ this.scale=Stage.height/450*100;
canvas.getMCRef()._xScale=this.scale;
canvas.getMCRef()._yScale=this.scale;
equis=(Stage.width-subcanvas.width*this.scale/100)/(2*this.scale/100);
subcanvas.setX(equis)}
</handler>
<view id="subcanvas" height="450" width="${this.height*1.6}"
bgcolor="blue">
<combobox id="combo">
<textlistitem value="1">one</textlistitem>
<textlistitem value="2">two</textlistitem>
<textlistitem value="3">three</textlistitem>
</combobox>
<text text="Esto es una prueba" width="500" height="400"
fontsize="30" fgcolor="white" bgcolor="navy"
align="center" valign="center">
</text>
</view>
</canvas>
Some notes:
1. The canvas don't have width or height attributes.
2. The canvas only have one subview ('subcanvas') that will enclose all the app contents. It have absolute values for width and height.
3. Stage is a package form flash; you can see its parameters in the documentation from adobe.
4. To simplify the code, I created a listener to trap the Stage.onresize event .You'll get the same result with Canvas.onheight and Canvas.onwidth but you'll have to duplicate the code.
5. The function escala is very explicit, I think. Only pay attention to this line:
equis=(Stage.width-subcanvas.width*this.scale/100)/(2*this.scale/100);
It centers the subcanvas, but I have to apply the scalefator because all the canvas is scaled.

Regards,
Rabí