How to create a canvas that will fill the entire screen in Flex?

Hey experts!

I have a Flex application and I've create a couple functions that let me drag an image on MouseDown in a specific container, and release it on MouseUp.

My problem comes on the MouseUp listener; if I click the image and drag it while the cursor stays in the container, there's no problem. However, if I start to drag the image, exit the container with the cursor and release the click, as soon as I put the cursor back in the container, the image is still movable without clicking.

To correct this, I've decided to create a container (canvas or box) that would fill the entire browser; then, I'm gonna add the listener for the MouseUp action on this fullsize container, instead of putting it on the canvas containing the image.

I've try this, and it works perfectly. The only problem I have is that the box I created doesn't fill up the entire screen; there's like a 10px margin all around the container. I set it's padding and margin to 0, put it's height/width to 100% but it's still doesn't take the entire browser.

I'd like to know if it's possible to do this or if it's a Flex restriction or something else.

Thanks a lot for your help. Have a nice day
Frank
//
// This function is used to zoom out of the current image.
//
public function zoomOut(target:*):void {
	if(_zoomBtnLevel == 2) {			  
	/* The image already has the focus, so we must reset the scale and position of the book */
	book.height = bookHeight;
	book.width = bookWidth;
	book.x = bookXPos;
	book.y = bookYPos;
			      
	/* We reset the cursor to normal mode */
	book.useHandCursor=false;
	book.buttonMode=false;
	book.mouseChildren=true;
				  
	/* Stop the drag so the user can turn the pages again */
	book.removeEventListener(MouseEvent.MOUSE_DOWN,dragOn);
	book.removeEventListener(MouseEvent.MOUSE_UP,dragOff);
				  
	/* We control the maximum number of time a user can zoom out the page */
	_zoomBtnLevel = _zoomBtnLevel - 1;
	}
}
 
//
// This is the fonction that is called when we zoomIn an image.
// It resizes the image, change the cursor to the little hand, and handles the drag/drop.
//
public function zoomIn(target:*):void {
	if(_zoomBtnLevel == 1) {
	/* The image gets the focus, so we must change the scale of the page */
	book.height = realImageHeight;
	book.width = (realImageWidth * 2);
				  
	/* The cursor becomes the little hand */
	book.useHandCursor=true;
	book.buttonMode=true;
	book.mouseChildren=true;
				  
	/* The user can now drag the page around to see the whole content */
	book.addEventListener(MouseEvent.MOUSE_DOWN,dragOn);
				  
	/* We control the maximum number of time a user can zoom in the page */
	_zoomBtnLevel += _zoomBtnLevel;
	}
}
 
//
// This is the function that will allow to drag the object once the user MouseDown.
// bookContainer is a mx:HBox I create that keeps the book object. It has a width of 100% and a height of 600.
//
public function dragOn( event : MouseEvent ):void {
	/* Determine the canvas limits when grabing/moving the zoomed page */
	var realX:int = - (book.width - bookContainer.width);
	var realY:int = - (book.height - bookContainer.height);
				
	/* The bounds of the active canvas */
	var activeCanvas:Rectangle = new Rectangle(realX, realY, realImageWidth, realImageHeight);
	
	/* Allow to drag the object */
	book.startDrag(false, activeCanvas);
	
	/* This is where we check if the user has MouseUp the object. Note that it can be anywhere on the screen,
	   that's why I add the event on the mainCanvas container, which I'm trying to make 100% of the browser size */
	mainCanvas.addEventListener(MouseEvent.MOUSE_UP,dragOff);
}
 
//
// This function stops the drag.
//
public function dragOff( event : MouseEvent ):void {
	book.stopDrag();
}
 
 
/* This is the container that should fill up the entire screen. It is directly inside the application tag */
<mx:Box width="100%" height="100%" id="mainCanvas" styleName="mainCanvas">
...
...
...
</mx:Box>
 
 
/* This is the style applied to the container inside the CSS */
.mainCanvas {
padding-left: 0;
padding-right: 0;	
padding-top: 0;
padding-bottom: 0;
	
margin-left: 0;
margin-right: 0;	
margin-top: 0;
margin-bottom: 0;
}

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:
why don't you add another listener together with this in line 66:
mainCanvas.addEventListener(MouseEvent.MOUSE_UP,dragOff);
mainCanvas.addEventListener(MouseEvent.MOUSE_OUT,dragOff);

you could also listen for mouseups in the stage
application.addEventListener(MouseEvent.MOUSE_OUT,dragOff);


to

0
julianopolitoCommented:
sorry:

application.addEventListener(MouseEvent.MOUSE_UP,dragOff);
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
The_Kingpin08Author Commented:
That is completely what I was looking for.

To be honest, since I'm still beginner, I try giving the application a name and using this name instead but it gave me an error...

Thanks a lot for the great help!
0
julianopolitoCommented:
Thanks! Let me help you a little more:

Application is a CONTAINER. So you don't need a canvas that fills the whole screen, nor you a need a container inside application to put your stuff. Remember that it is always better to keep things as simple as possible in terms of containers. The more you use containers inside containers , more cpu will be consumed. Try to use as few nested containers as you can to have your layout working. So remember that appliction is a container and you can use it layedout as absolute positioning, vertical or horizontal positioning.
Also after creating a layout, review it and see if you have extra containers to remove them.
Here are the best practices rules:

" Don't use more containers than absolutely necessary
" If you have a container with a single child, consider ways to move that child
into another container
" Avoid nesting a HBox or VBox container inside a Panel or
Application container. Instead set the layout property of the latter
containers to horizontal or vertical
" Try to use HBox and VBox containers instead of a Grid container

hope that helps

 
0
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
Web Languages and Standards

From novice to tech pro — start learning today.