Raju,
Thanks for the prompt reply. My understanding is that 'width="100%"
height="100%"' will make the canvas to the size of the browser. But my
question is different. In the code below, when I press the button
"Increase", it will increase the height of "the_view" to 2000, which is
larger than the canvas. This makes portion of "the_view" non-visible.
To summarize: there are two heights: one is the canvas height and one is the
height of the application contents. If the height of the application
contents is larger than the canvas, a portion of the contents will not be
visible, and there is no way to change the canvas height to make it the same
height as the height of the contents. If we know the height of the contents
before we run the application, we can hard code the canvas height to avoid
the problem (this assumes the height of the contents will not change when
the application runs). Otherwise, we are pretty much hopeless.
In HTML, there is a concept of "Page". As we add more contents to a page,
the page height will grow automatically. Logically, the page maps to canvas,
but canvas cannot grow its size. This is the problem.
Or specifically, I am trying to create an application similar to
www.techcrunch.com. The height of the page is dependent on the number of
views items and the height of each news item. Based on my understanding, we
cannot do this type of applications in Open Laszlo. But this type of
applications is very popular (i.e., width is fixed but height is variable,
depending on the page contents).
Your help is greatly appreciated!
Chen Ding
1 <canvas width="100%" height="100%">
2 <view name="the_view" x="600" width="500" height="500"
bgcolor="blue"/>
3
4 <button x="100" y="0" text="Increase">
5 <handler name="onclick">
6 the_view.setAttribute("height", "2000");
7 </handler>
8 </button>
9 </canvas>
On Sun, Jun 21, 2009 at 5:10 PM, Raju Bitter <[email protected]> wrote:
> Just use percentage based values for width and height: <canvas width="100%"
> height="100%" > That will scale the application to full browser size. You
> can test the behavior for the HTML page if use ?lzt=html as the query
> string. That will generate the default HTML wrapper.
>
> - Raju
>
>
> On Jun 21, 2009, at 8:33 AM, Chen Ding wrote:
>
> Hi There,
>>
>> My application may increase its height. I like the canvas to adapt to my
>> application's height. Below is a very simple application. Initially, the
>> canvas height is the height of my browser. Since the view is only 500
>> pixels, it is ok initially. But if we press the button to increase the view
>> size to 2000 pixels, the canvas won't increase its size accordingly. I tried
>> to change canvas height but it won't work. I am wondering whether there is a
>> way to make canvas adaptive to the size of the application.
>>
>> The second question is, if the canvas can be made adaptive to its
>> application size, if I wrap the application into an HTML, will it still
>> work?
>>
>>
>> Thanks!
>>
>> Chen Ding
>>
>> 1 <canvas height="2000">
>> 2 <view name="the_view" x="600" width="500" height="500"
>> bgcolor="blue"/>
>> 3
>> 4 <button x="100" y="0" text="Increase">
>> 5 <handler name="onclick">
>> 6 the_view.setAttribute("height", "2000");
>> 7 </handler>
>> 8 </button>
>> 9 </canvas>
>>
>>
>
