How to make the flipbook/flexbook scale with the browser size?

Hey experts!

I'm currently working with the Flexbook component (with the Landscape Zoomer, all credits goes to Ely Greenfield), and I got a problem with the general layout: when I shrink the browser' size (or change the resolution of the screen), the book stays with it's original size and doesn't fit the browser anymore.

I thought I could fix it but the flexbook control doesn't let me put a % value to it's height/width.

I don't know if only a property that I haven't set correctly or if my whole layout has to be changed, but I've try for hours to fix it and now out of ideas!

I would really appreciate if someome could help me out. I've posted the code of my customized Flexbook.

Thanks a lot and have a nice day.
Frank



<!-- This is the lanscape used to zoom the pictures. --> 
	<containers:Landscape width="100%" top="100" bottom="50" paddingLeft="30" paddingTop="30" paddingBottom="30" paddingRight="30" id="landscape" 
		zoomLimit="none"
		clipContent="false"
		cachePolicy="off"
        horizontalCenter="0"
	    verticalCenter="0" right="0"
	    >	
	    
		<!-- This box contains the book and is also used to zoom the content of the pages when the mouse scrollers is used -->
		<HBox width="100%" horizontalAlign="center" verticalAlign="top" id="bookContainer">
			<!-- The Book itself; I put a height of 500 because all my pictures are this size.
                 Anyway, when I try to put 100%, the system give me an error. 718 is the width of the whole book.
                 I know this is probably the source of the problem, but I couldn't find an alternative solution...
			-->
			<controls:FlexBook id="book" y="47" left="40" right="40" top="40" height="500" width="718"
					horizontalCenter="0"
					animateCurrentPageIndex="true"
					showCornerTease="true"
					edgeAndCornerSize="30"
					itemSize="halfPage"
					hardbackCovers="false"
					hardbackPages="false"
					>
				
				<!-- The pages inside the book -->
				<controls:itemRenderer>
					<Component>
						<VBox>								
							<controls:Zoomer>
								<controls:SuperImage horizontalCenter="0" toolTip="{data.slice(data.indexOf(',')+1)}" data="{data.slice(data.indexOf(',')+1)}" />
							</controls:Zoomer>
						</VBox>
					</Component>
				</controls:itemRenderer>
	
				<controls:cover>
					<Image source="images/001_01S.jpg" click="this.focusOn(event.currentTarget)" />
				</controls:cover>
 
				<Image source="images/002_01S.jpg" click="this.focusOn(event.currentTarget)" />
				<Image source="images/003_01S.jpg" click="this.focusOn(event.currentTarget)" />			
				</controls:FlexBook>
			</HBox>
	</containers:Landscape>

Open in new window

The_Kingpin08Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

julianopolitoCommented:
it won't shrink because the way it initializes. For flexbook to work it takes the width and height in pixels so it can create some internals. If you use a bind like this:
<FlexBook width="{application.width*0.7}"
for example (this would be 70%) it will work only for the loading time. So if you shrink the browser and reload it will work, but not while reducing the browser. You could try using the resize event of the application. I'll make some tests and send you.
0
Gary BenadeCommented:
I don't have landscape so I couldn't test this for you, but it's how I've done it in the past and it works, let me know
<!-- This is the lanscape used to zoom the pictures. --> 
	<containers:Landscape width="100%" top="100" bottom="50" paddingLeft="30" paddingTop="30" paddingBottom="30" paddingRight="30" id="landscape" 
		zoomLimit="none"
		clipContent="false"
		cachePolicy="off"
        horizontalCenter="0"
	    verticalCenter="0" right="0"
	    >	
	    
		<!-- This box contains the book and is also used to zoom the content of the pages when the mouse scrollers is used -->
		<Canvas y="47" left="40" right="40" top="40" id="bookContainer">
			<!-- The Book itself; I put a height of 500 because all my pictures are this size.
                 Anyway, when I try to put 100%, the system give me an error. 718 is the width of the whole book.
                 I know this is probably the source of the problem, but I couldn't find an alternative solution...
			-->
			<controls:FlexBook id="book" width="100%" height="100%" 
					animateCurrentPageIndex="true"
					showCornerTease="true"
					edgeAndCornerSize="30"
					itemSize="halfPage"
					hardbackCovers="false"
					hardbackPages="false"
					verticalCenter="0" 
					horizontalCenter="0"
					>
				
				<!-- The pages inside the book -->
				<controls:itemRenderer>
					<Component>
						<VBox>								
							<controls:Zoomer>
								<controls:SuperImage horizontalCenter="0" toolTip="{data.slice(data.indexOf(',')+1)}" data="{data.slice(data.indexOf(',')+1)}" />
							</controls:Zoomer>
						</VBox>
					</Component>
				</controls:itemRenderer>
	
				<controls:cover>
					<Image source="images/001_01S.jpg" click="this.focusOn(event.currentTarget)" />
				</controls:cover>
 
				<Image source="images/002_01S.jpg" click="this.focusOn(event.currentTarget)" />
				<Image source="images/003_01S.jpg" click="this.focusOn(event.currentTarget)" />			
				</controls:FlexBook>
			</Canvas>
	</containers:Landscape>

Open in new window

0
julianopolitoCommented:
you can use the method setActualSize in the resize event of the application. To test put 3 buttons somewhere with the code below, so you can see what happens:

                     <Button label="size" click="book.setActualSize(200,300)" />
      <Button label="size" click="book.setActualSize(500,300)" />
      <Button label="size" click="book.setActualSize(700,400)" />

Now instead of setting a literal size, just put some expression in it like:
                     <Button label="size" click="book.setActualSize(application.width*0.5,application.height*0.5)" />

This would set the size to 50% ofthe application size. So you can make a function for the resize handler and use setActualSize to change size based on new size.
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Gary BenadeCommented:
line 11 should be
<Canvas left="40" right="40" top="40" bottom="40" id="bookContainer">
0
julianopolitoCommented:
Also I tested here, and my solution works for the flexbook but not for the landscape. Í need to make some tests to know hwo to make it work for the landscape. For the flex book, just put the flexbook component with no landscape , name it "book" and put the following in the resize for application tag:

resize="if(book != null)book.setActualSize(application.width*0.5,application.height*0.5)"

This will resize the flexbook component 50% the size of the browser window.
0
julianopolitoCommented:
You can do that to the landscape. But you mus adjust the constrains (top, bottom) cause the will cause the flexbook to remain below the visible area (for example you set the top="300" ) .
Here I set the landscape to percentage size, and then resize flexbook accordingly

      





<containers:Landscape id="landscape"
	width="80%" 
	height="80%" 
	paddingLeft="30" paddingTop="30" paddingBottom="30" 
	paddingRight="30" 
	zoomLimit="none"
	clipContent="false"
	cachePolicy="off"
         horizontalCenter="0"
	verticalCenter="0" right="0"
	resize="if(book != null) book.setActualSize(landscape.width,landscape.height)">	

Open in new window

0
julianopolitoCommented:
also you should adjust the HBox inside the landscape because when you resize the stage , it will create scrollbars. The HBox could be like this:
<mx:HBox width="100%" height="100%"
      verticalScrollPolicy="off" horizontalScrollPolicy="off"
      horizontalAlign="center" verticalAlign="bottom" >      

But resizing the stage too much will cut part of the flexbook as well
0
The_Kingpin08Author Commented:
If I get rid of the landscape container, would I be able to resize the whole book correctly?

I'm asking because the landscape has causes me more trouble than anything so far. I thought I needed to keep it because my function focusOn for the zoom uses this container.

Anyway, to be honest with you, I wanted to create something similar to zinio's book (http://www.zinio.com/express2?issn=1054-4836). If you check their preview, you can see that the book doesn't overlay the top&bottom bar, and that it resize itself when the browser shrinks.

Would something like this be possible in my case? If not, I'll try to play with what you guys gave me!

hobbit72, when I put some % value in the Flexbook, I get an error.

ntError: Error #2015: Invalid BitmapData.
at flash.display::BitmapData$iinit()
at qs.controls::FlexBook/qs.controls:FlexBook::updateDisplayList()[C:\...\Flex Builder 2\Book\src\qs\controls\FlexBook.as:977]


Thanks for the help,
Frank
public  function focusOn(target:*):void{
			/* When the user clicks on a page, if it already has the focus we zoom out to the original size.
			   If the page gets the focus, we zoom in the image with a scale of 2.8
			*/ 		
				if(landscape.selection.length == 1 && landscape.selection[0] == target)
				{ landscape.selection = [];landscape.height=100; }
				else
				{ landscape.selection = [target];landscape.height=10; }					
			}

Open in new window

0
julianopolitoCommented:
remove landscape, and in the application tag put

resize="if(book != null)book.setActualSize(application.width*0.5,application.height*0.5)"

Change 0.5 to either percentage you want.
0
The_Kingpin08Author Commented:
I try removing the landscape, but the zoom doesn't work anymore as I thought. I try replacing it with another container with the same name, but it still doesn't work.

In your opinion, is there a way to do this without removing the landscape?à

Thanks,
Frank
0
julianopolitoCommented:
put landscape in percentage size, and put the resize not in application, but in landscape, so flexbook will be relatively sized to landscape. I could not find a way yet to make the scroll appear in zoom mode
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.