Sie sind nicht angemeldet.

Using krpano with Flex Application

jcv

Anfänger

  • »jcv« ist der Autor dieses Themas

Beiträge: 3

  • Nachricht senden

1

Mittwoch, 7. April 2010, 22:19

Using krpano with Flex Application

There are a few problems when you try to use a flex application as a plugin with krpano. I'm learning flex myself, but after about a week of searching and testing I managed to work out a few of the problems; enough so I could use mxml. Most problems come from the fact that we have to use an application container which holds all our controls.

I wanted to share in case there are others out there trying to use flex application with krpano. Please feel free to add any comments.
If something is wrong or you know an easier or better way to solve a particular problem please let me know so I can edit this post. If you have solutions to other problems, please share.

I'm using Flex Builder 3, with Flex 3.5.0.12683 sdk.

-----------------------------------------------------------

PROBLEM: Any controls placed in the application container are being scaled (changes size) when you resize the window. This applies when you are using using width or height percentage values for <plugin>. For example <plugin width="100%" height="100%">

If you use a fixed size for width and height, you will not have this problem, but then all your controls will not be aligned when there is a window resize. <plugin> allows for aligning controls but this aligns the entire plugin. In a flex application you can have many controls aligned in many different ways.)


SOLUTION: Do not set width and height value for <plugin>. Simply do not use it. This tells krpano to use the application width and size. In your application mxml set your width and height to any FIXED value. (No percentage).

Quellcode

 
1

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" width="500" height="500">


Then we need to tell our container to resize itself everytime the stage resizes. Add an eventlistener:

Quellcode

 
1

stage.addEventListener(Event.RESIZE, onStageResize);


And a handler that resizes the application container:

Quellcode

 
1
2
3
4
5
6
7
8

private function onStageResize(evt:Event):void 
{ 
if(stage.stageWidth != width || stage.stageHeight != height) 
{ 
width = stage.stageWidth; 
height = stage.stageHeight; 
} 
}


-----------------------------------------------------------

PROBLEM: The controls are not the same size as when I created them. For example, a perfectly square button is shown like a rectangle in krpano.

SOLUTION: Application container has a different value than what you set in <plugin> width and height. Either make sure they have the exact same size, or simple do not use it width and height values for <plugin>

-----------------------------------------------------------

PROBLEM: If you set <plugin capture="true"> then you cannot move the panorama at all. If you set <plugin capture="false"> then you can move the panorama but you can also move it even if you click inside any control.

This problem arises from the fact that you have to use an application container which "wraps" your entire plugin. So when you capture="true", krpano thinks that your container is a control, so it ignores the mouse event. If you capture="false" then this allows krpano to handle any and all mouse events include those inside your controls; if you click and move your mouse while inside a button, this will also move your panorama.

SOLUTION: The best solution I've come up with is setting capture="false" and then blocking the mouse event from bubbling down to krpano if mouse down event comes from any control that is not the application container.

Add an event listener for MOUSE_DOWN for you application container:

Quellcode

 
1

this.addEventListener(MouseEvent.MOUSE_DOWN, onApplicationMouseDown);


Then block the event if it comes from any control that is not the application container:

Quellcode

 
1
2
3
4
5

private function onApplicationMouseDown(evt:MouseEvent):void
{
     if(evt.target != this)
          evt.stopPropagation();
}


-----------------------------------------------------------

PROBLEM: You get a blue or white box that covers your panorama.
SOLUTION: Set the application container backgroundAlpha to 0.

Quellcode

 
1

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0">


-----------------------------------------------------------

PROBLEM: krpano events (REGISTER, UPDATE, RESIZE) are not triggering.
SOLUTION: I have not found a solution for this yet, but I have a couple of ideas. I will update result soon.

-----------------------------------------------------------

I will update if I come up with more.
Have fun using flex applications with krpano *thumbsup*

Zephyr

Profi

Beiträge: 1 003

Wohnort: Netherlands

Beruf: Web developer

  • Nachricht senden

2

Mittwoch, 7. April 2010, 22:42

This looks very interesting :) Keep up the good work :) Any working example online?

sel

Anfänger

Beiträge: 13

  • Nachricht senden

3

Freitag, 12. November 2010, 11:32

BIG thanks for your post.

Zitat von »jcv«

PROBLEM: krpano events (REGISTER, UPDATE, RESIZE) are not triggering.

SOLUTION: I have not found a solution for this yet, but I have a couple of ideas. I will update result soon.


Have you solved the above problem? I'm unable to move on without getting to the krpano plugin defined in xml config file.

sel

Anfänger

Beiträge: 13

  • Nachricht senden

4

Freitag, 12. November 2010, 16:03

Zitat von »jcv«

PROBLEM: You get a blue or white box that covers your panorama.SOLUTION: Set the application container backgroundAlpha to 0.


Unfortunatelly the method you gave is not working in Flex 4.
If you want to make s:Application transparent in flex 4 you must use the custom skin class by setting the skinClass property of the Application.
Once you create it then find the section backgroundRect section: And set the alpha value of the SolidColor to 0.
I've included the AppSkin.zip file whitch is AppSkin.mxml example file with background alpha set to 0 in the way i've told you
»sel« hat folgende Datei angehängt:
  • AppSkin.zip (1,49 kB - 106 mal heruntergeladen - zuletzt: Heute, 13:19)

sel

Anfänger

Beiträge: 13

  • Nachricht senden

5

Sonntag, 9. Januar 2011, 11:00

About this problem:

Zitat

<plugin capture="true"> then you cannot move the panorama at all. If you set <plugin capture="false"> then you can move the panorama but you can also move it even if you click inside any control.


Setting the event.preventDefault() can be problematic. (For example the combobox's dropdown list does not hide when you click to stage). I've found that better solution is to do somethink like this on the main app:
ANOTHER SOLUTION:

Quellcode

 
1
2
3

_krpano = krpano_as3_interface.getInstance();
addEventListener(MouseEvent.MOUSE_DOWN, _onMouseDown, false, 0, true);
			stage.addEventListener(MouseEvent.MOUSE_UP, _onMouseUp, false, 0, true);

Quellcode

 
1
2
3
4
5
6
7
8
9

private function _onMouseDown(event:MouseEvent) : void
		{
    		_krpano.call('freezeview(true)');
		}
	
		private function _onMouseUp(event:MouseEvent) : void
		{
 		    _krpano.call('freezeview(false)');
		}

Ähnliche Themen