Panel to be autopositioned inside a canvas in Flex - actionscript-3

I am developing a flex screen, in which i have a canvas, above to that there will be a button, by clicking that button we can create panels dynamically.My problem is if a panel was manually dragged and kept in the position where new panel to be created then new panel have to be created somewhere else that means not above any other panels.
How to achieve this..Pls give me any solution.Thanks

my first idea is that you keep array of created panels. while creating new panel, you should check in this list if any panel colides with the one you created (get x and y position and width, height and check if it kolides or not)
tou can also create new component based on canvas and override its addChild method.

Related

Numbering the Panels in a canvas according to its position from left to right

i am having a canvas which contains panels that are created dynamicaly.That panels are draggable.So that an user can drag any panel and keep it anywhere in the canvas.
My requirement is when we click a button ,we have to change the panel numbers according to its position,that is from left to right.
How to find out where the panel is present in canvas and number them in ascending order according to its position.
One way to do it would be to add the panels to an Array as they are created. Then, when the button is clicked, you can do a sort on the array by x property:
panelArray.sortOn("x", Array.Numeric);
Once the array has been sorted, you can loop over it and adjust the panel numbers based on their position in the array.

Can I create an overlay layer to disable all touches, even on menus?

I need to show a popup layer on a scene, creating a semi-transparent background layer that will also prevent touch events propagation. I am using the latest cocos2d-x v. 3.0-alpha-0.
What I want to achieve is a popup layer that fully handles touches (eg. buttons, menu items, scroll views, etc.), laying on a background layer (for design purposes), that covers the current scene. All items in the scene should not respond to touches any more.
Is this achievable using the new EventDispatcher class? I've been able to disable all touches to the main scene, but all instances of MenuItem that live in the scene are still touchable and active.
How can I achieve this? And, also, how can I create a touch listener that prevents all touches to the main scene but not to the popup?
You can disable menu items by setting setDisable property of menuitems to false.
Example
_menuItem->setEnabled(false);
For Layers use setTouchEnabled property
_backGroungLayer->setTouchEnabled(false);
Make sure that popup layer is not child of layer you want to disable.
To disable all items in menus do this
Suppose _menu contain various menuitems.
CCARRAY_FOREACH(_menu->getChildren(), item)
{
item.isEnabled=NO;
}
if you want to disable selected items just give them tags.There is no need to make any list.
I had the same problem and solved it with mm. It was dirty, but it worked:
Create a button using ccui.button.
Set the button size to your screen size.
Add this button as a background to your popup layer.
This will prevent any thing behind it being clicked.
By default, all CCMenu's have a set priority (kCCMenuHandlerPriority = -128) in cocos2d 2.1. So in a class (usually a CCNode descendant) that wants to swallow everything and preempt anything i do like in this dialog sequencer example below :
- (void)onEnter {
backdrop_.visible = self.isBackDropShown;
MPLOG(#"Adding self as a swallower touch delegate, above the rest of the planet.");
[[[CCDirector sharedDirector] touchDispatcher] addTargetedDelegate:self priority:_dialogTouchPriority swallowsTouches:YES];
for (CCMenu *mn in _menus) {
mn.touchPriotity = _dialogTouchPriority -1 ;
}
[super onEnter];
}
where _dialogTouchPriority is kCCMenuHandlerPriority-1 by default. It will be served before everything 'below'. It is a bad hack (cocos2d internals could be changed and break this), i know , but bullet proof. Use carefully, make certain you only ever have one of these in your scene.

How to index child on top of parent's brother's children

I'm having troubled with indexing in Actionscript 3.0. Basically I have two objects that are spawned on the stage. One is dock and the other a ball object. How it works is that when a ball object is over the dock, a info window appears on the screen. The ball object has a wrapper called Container.
So the objects are: MainClass, Dock, Container, BallObject, InfoWindow.
So from back to front it's: MainClass > Dock > InfoWindow > Container > BallObject.
Dock and Container are added in the Main class, and infoWindow is added in the Dock class and BallObject from the Container class.
What I want to achieve is to have the InfoWindow on top of the BallObjects, without the Dock being in front of the Container or BallObjects.
Here is an image to help illustrate things out.
d = dock c = container B = ballobject I = infowindow
The image on the left is what I want to achieve and the one right is what I have right now.
With your hierarchy it is impossible, as the DisplayList is a tree as a whole, and is rendered depth first. So, put Container under Dock, and give it child index less than InfoPanel.
dock.addChild(container);
dock.addChild.infoPanel);
container.addChild(ball);
main.addChild(dock);
This approach will net you the requested goal. In case you need to add another layer, say between Container and InfoPanel, add another container between them, and add required stuff to that container.

Move MovieClip and everything it contains

I have a MovieClip called navbar and it has buttons over it. How do I connect the buttons to the MovieClip so that when the MovieClip is moved the buttons move with it? I have been able to make the navbar draggable but the buttons aren't dragged with it.
I have tried the following:
navbar.addChild(button1);
This just made the button disappear.
Your approach is correct: adding the buttons as children to the MovieClip will allow them all to be moved as one item.
The button disappearing could be any number of reasons, for instance x and y now relative to new parent (i.e. setting button y to 600 is now 600 pixels down from the navbar, not from the stage or old parent).
Try commenting out any properties you have set on the button and see if that resolves the issue, from there you can determine which property is causing the button to disappear.
So you should basically just have something like this:
var button1:Button = new Button();
navbar.addChild(button1);
If even with that minimal code doesn't result in the button displaying on the navbar, you'll need to post more code so that we can see where the problem is occurring.
you can calculate distance from Movieclip's X,Y to buttons and you can write a code like this:
var diff1:int = navbar.x - example_button1.x;
stage.addEventListener(Event.ENTER_FRAME, function(event:Event):void{
example_button1.x=navbar.x-diff1;
});
you can duplicate example_buttons and diff variables.
or you can startDrag() sametime with same event listener,
navbar.addEventListener(someEvent.some, function(event:someEvent):void{
MovieClip(root).navbar.startDrag();
MovieClip(root).example_button1.startDrag();
});
MovieClip(root) allows you to effect main stage. With this property you can effect an object from inside of navbar for example.
As you supposed, if you want the navbar and the buttons to act like a unique element you need to put buttons inside the navbar and not just over it.
The reason the button is disappearing is due to the fact that it has been put on the stage in Designer so, when you add it to navbar, you have it into two different display stacks, and that's not allowed.
You should put buttons inside the navbar in Designer, or export them for AS and then instance them dynamically, as follow:
var btn:Button1 = new Button1()
navbar.addChild(btn)
Class name Button1 is assigned in the MovieClip properties window of the Library, under Export for ActionScript.

Flex 3 custom components positioning - popups

I have created a custom TitleWindow whcih i use as a popup. The contents of the popup are created dynamically depending on a selection a user makes from a datagrid.
My problem is, my datagrid is in another custom component whcih is toward the bottom of my page so when a user clicks one of the items the popup is displayed however with half of it out of sight at the bottom of the page.
Is there a way to position a popup so that it displays at the top of the page?
I know at least two things you can use to position a popup, though there might be more.
When you place a popup you can choose in which parent component to place the popup:
PopUpManager.createPopUp(this.parent, TitleWindowComponent);
In the component itself:
PopUpManager.centerPopUp(this);
I wanted a help tooltip type popup (with help text) to appear next to the icon that opened it. In the end I used move(x,y) to move the window where I wanted it. To get the coordinates to place it, use globalToLocal:
var globalX:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).x;
var globalY:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).y;
toolTip.move(globalX + myIcon.width, globalY);
That puts the window just to the right of the icon, myIcon.