canvas height and printing long docs

[j_nermut]

Is there anyway to make the height of the canvas expand to fit content?

I am developing an app that allows for the editing and display of structured documents, that may be arbitarily long.

I want to be able to display the whole document, with no bound on the height, as in HTML. This is to allow the user to print the document correctly. If I set a fixed pixel height on the canvas, and then add a scroll bar, then the browser will only print the displayed text, not the whole document.

So is there any way to:

1. Make the canvas length fit the content, or just make it unbounded
or
2. Use the flash printing api

The only other alternative I can think of is generating pdfs for printing, which is a bit of a nightmare really.

[madtux666]

Hi lads,

Sorry for continuing such a old discussion, however my problem is really similar and topic is still opened.


=== GOAL ===

I am trying to change canvas size in run time in SOLO mode (change height to show entire application). Below proof of concept shows idea:

1) Blue view is a header view, is should be bound with top edge of screen.

2) Yellow view, just a button it creates orange view, that simulate real content (it could be really long.

3) Green view is a footer, it have to stay at the bottom of canvas, but it could go out of screen size, for example: when app is 1500px long, footer should be placed at 1450px ( y="${canvas.height - this.height}" ).

4) I do not want to enclose content in view and use Laszlo scrollbars to scroll through it. I would like to use browser scrollbars, as they are faster simpler and more obvious to users.



<canvas width="100%" height="100%" bgcolor="#e7e7e7">

<simplelayout axis="y" spacing="2"/>

<!-- Blue view -->
<view name="headerView" width="${canvas.width}" height="50"
bgcolor="#54a1f3"/>

<!-- Yellow view -->
<view name="contentView" width="${canvas.width}" height="50"
y="${canvas.height - this.height}" bgcolor="yellow">

<handler name="onclick">
<![CDATA[

var v= new LzView(canvas, { width: 300,
height: 100,
bgcolor: 'orange' } );

canvas.setAttribute( 'height', canvas.measureHeight() );
canvas.footerView.bringToFront();

]]>
</handler>

</view>

<!-- Green view -->
<view name="footerView" width="${canvas.width}" height="50"
y="${canvas.height - this.height}" options="ignorelayout"
bgcolor="#40d031"/>

</canvas>


My code unfortunately does not work, error is:
"ERROR: You cannot set the height on the canvas."


=== WORK AROUND ===

At the moment I use work around: canvas width is set to 100% and height is 2500px (application is really long sometimes). Value is hardcoded in HTML wrapper as well. However it is not pretty solution -> it is like using static array of size MAX=100, when day to day user usually works on only 20 cells, but sometimes 90 cells are necessary.

I am not sure if it is a Flash limitation, below sample works:
http://www.flashdesignerzone.com/tutorials/t1020.php


Any clues appreciated.



Regards,
Madtux

[unferth]

You'll have to use javascript to resize the flash object, so what you could do is call javascript with your measuredHeight and have it change the flash object to that height


I've done something similar to center a canvas that needed to maintain a certain aspect ratio


(here's the important portion of the centering javascript - after I've determined the size of the browser)

var lzContainer=document.getElementById("lzappContainer");
if(lzContainer!=null) {
lzContainer.width=Math.min(viewportwidth, (viewportheight * (4/3)));
lzContainer.style.width=lzContainer.width + "px";
lzContainer.height=Math.min(viewportheight, (viewportwidth * (3/4)));
lzContainer.style.positon="absolute";
lzContainer.style.top="0px";
lzContainer.style.right=(viewportwidth - lzContainer.width) / 2 + "px";
}
var lzAppElement=document.getElementById("lzapp");
if(lzAppElement!=null) {
lzAppElement.width=Math.min(viewportwidth, (viewportheight * (4/3)));
lzAppElement.style.width=lzAppElement.width + "px";
lzAppElement.height=Math.min(viewportheight, (viewportwidth * (3/4)));
lzAppElement.style.positon="absolute";
lzAppElement.style.top="0px";
lzAppElement.style.right=(viewportwidth - lzContainer.width) / 2 + "px";

}

[madtux666]

Nice one Unferth!

"You'll have to use javascript to resize the flash object" - is enough for me, simple and clean. Why I have not found it on my own? ;-)

I will post working solution later this week.



Regards,
Madtux