Actually in my Application Login Page is Popup..
private var login:Login;
protected function loginPopUpHandler(event:MouseEvent):void
{
login = new Login();
PopUpManager.addPopUp(login,this,true);
PopUpManager.centerPopUp(login);
}
Hear Popup coming Center ....
But I want Popup Below the Button..
i.e... When we click the login Button Popup will open Below the Button..
Try:
var sym:Login = PopUpManager.createPopUp( this, Login) as Login;
sym.x = button.x;
sym.y = button.y+button.height;
First of all it depends what this is. If this for example is your Login button you can easily do like this:
protected function loginPopUpHandler(event:MouseEvent):void
{
login = new Login();
PopUpManager.addPopUp(login,this,true);
PopUpManager.centerPopUp(login);
login.x += loginButton.width / 2; // or any other number
login.y += 123; //whatever number. try tweaking it
}
If your want to use display object as FlexGlobals.topLevelApplication as DisplayObject then you probably want to get you login button from event.target and manipulate with its coordinates. Just try to experiment.
Also you maybe will have to use localToGlobal property when playing with coordinates.
Working for me:
protected function loginPopUpHandler(event:MouseEvent):void
{
login = new Login();
login.x = 10; // x value relative to "this"
login.y = 123; // y value relative to "this"
PopUpManager.addPopUp(login,this,true);
}
Related
I have a popup that comes on a click event of button..
But I am unable to close the popup..I want to close popup on hardwarebutton_backpress event..
Can anyone plzz tell me how to do so..
I am using this code to show popup
Public void showpopup_click()
{
Popup p =new Popup();
p.child= new Mypopup();
p.Isopen=true;
}
Here Mypopup is my user control..
I am using visual studio and developing a windows phone 8.1 app..
Another approach, in my opinion better, is using the IsLightDismissEnabled property where you don't need to check whether a popup is already open or not, or if you have multiple open popups, everything is handled automatically.
var popup = new Popup();
popup.IsLightDismissEnabled = true;
popup.IsOpen = true;
You have to subscribe to the Windows.Phone.UI.Input.HardwareButtons.BackPressed event to handle the back button with custom logic. If you store the Popup in a field, you can easily set IsOpen property to false.
Like this:
private Popup _popup;
public void showpopup_click()
{
_popup = new Popup();
_popup.Child = new Mypopup();
_popup.IsOpen = true;
Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed;
}
private void HardwareButtons_BackPressed(object sender, Windows.Phone.UI.Input.BackPressedEventArgs args)
{
_popup.IsOpen = false;
args.Handled = true;
Windows.Phone.UI.Input.HardwareButtons.BackPressed -= HardwareButtons_BackPressed;
}
In the event handler, you need to set the args.Handled property to true to prevent the application close on the back button pressed. You also need to unsubcrise from the event to avoid memory leak.
I've integrate a map from MapQuest in my Adobe Air app (in AS3).
The map is taking all the screen as I want.
BUT, I'd like to add a "back" button in order to go back to the previous menu.
Here's my code :
var NoumeaNord:TileMap = new TileMap("KEYcode");
//set the size of the map
NoumeaNord.size = new Size(800, 533);
//add the map to the sprite.
addChild(NoumeaNord);
NoumeaNord.addControl(new SMLargeZoomControl());
NoumeaNord.addControl(new MouseWheelZoomControl());
NoumeaNord.addShape(new Poi(new LatLng(-22.2758000,166.4580000)));
NoumeaNord.setCenter(new LatLng(-22.2758000,166.4580000),15);
function addBackBtn():void{
var back:MovieClip;
back = new backBtn
addChild(back);
back.x = 0;
back.y = 400;
setChildIndex(back,0);
}
Don't know why but the BackBtn won't be in front of the map !
I've tried with setChildIndex(back,-1); but it makes an error : "RangeError: Error #2006: index is off limit".
Any idea ?
In this situation I use holders like this:
private var bgHolder:Sprite;
private var contentHolder:Sprite;
private var menuHolder:Sprite;
Somewhere in the constructor I run a method that will set my holders. For example:
function setHolders()
{
bgHolder = new Sprite();
addChild(bgHolder);
contentHolder = new Sprite();
addChild(contentHolder);
menuHolder = new Sprite();
addChild(menuHolder);
}
Then I just add my content to the desired holder in any order between destination holder and I can always be sure to add my content to the correct "layer";
So just add your back button to the menuHolder:
menuHolder.addChild(back);
And don't worry about adding it below the map or out of index, because the map, in this case, would be added to the contentHolder!
Hope that helps!
that's because you add your back button first
just make sure that you first add the map then add the button
So first off i'd like to state that i am not very good at AS3, i'm completely self taught so i am sure that there are many things i've done badly, inefficiently or plain wrong and i'm happy for any comments on these if there is things i can improve.
Okay so, this seems like a really simple problem but i don't know the exact code for it and i can't find an example anywhere
what i want to do is to change the image which i am using for my character to a separate image on a button click, then after a certain amount of time for him to go back to the original.
My image is set as a movie clip and i am calling it like so :
public var Smallclock_hero = new Smallclock;
it is worth noting that smallclock has it's own separate class.
is there a way that i can change this image on a mouse click event ?
A simple way would be:
Add a new image on the second frame of the Smallclock movieclip. Have this new image span several frames of the timeline for the duration you want it to appear for.
Place a stop(); action on the first frame of the Smallclock movieclip.
btn.addEventListener(MouseEvent.CLICK, btnChangeCharacterFrame);
function btnChangeCharacterFrame(e:MouseEvent)
{
Smallclock_hero.gotoAndPlay(2);
// Or use a frame label
// Smallclock_hero.gotoAndPlay("jump");
}
This can be achieved relatively simply using the visible property and setTimeout. When you click on your MovieClip you'll want to make the old image invisible and the new image visible:
oldImage.visible = false;
newImage.visible = true;
Then you'll want to use setTimeout to change the visible properties back to:
oldImage.visible = true;
newImage.visible = false;
setTimeout can run a function after a specified number of milliseconds. Here is an example of this technique on wonderfl : http://wonderfl.net/c/acxl
private var imageA:ImageA = new ImageA();
private var imageB:ImageB = new ImageB();
private var revertId:int;
public function Main() {
imageB.visible = false;
addChild(imageA);
addChild(imageB);
addEventListener(MouseEvent.CLICK, onClick);
}
private function onClick(e:MouseEvent):void{
clearTimeout(revertId);
revertId = setTimeout(revert, 1000);
imageB.visible = true;
imageA.visible = false;
}
private function revert():void{
imageB.visible = false;
imageA.visible = true;
}
I've a TextArea component in my MovieClip. When I double click on it, I want to switch to TextField component, allowing me to change its content. When I click outside, I want to restart its original class (TextArea).
How can I do it?
I'm doing this, but didn't work:
element.addEventListener(MouseEvent.DOUBLE_CLICK, changeName);
private function changeName(e:MouseEvent):void{
e.target.type = TextFieldType.INPUT;
}
Where element is a TextArea (clasic and dynamic text). Thanks!
EDIT:
This is how my MovieClip looks. "Name" is the TextArea that I want to allow user changes. I'm setting it like this:
[Spanish interface]
Nombre de instancia = Instance name (empty)
Texto clásico (classic text)
Texto dinámico (dynamic text)
The MovieClip is controlling my by own base class (called 'ConfLayer'). Inside it I have this:
public function doStuff(e:MouseEvent):void{
// element = TextArea 'Name'
element.addEventListener(MouseEvent.DOUBLE_CLICK, changeName);
}
private function changeName(e:MouseEvent):void {
var tarea:TextArea = e.target as TextArea;
var tf:TextField = tarea.TextField; // this line throwing error
tf.type = TextFieldType.INPUT;
}
Because AS3 gives me errors, I tried this:
private function changeName(e:MouseEvent):void {
e.target.TextField.type = TextFieldType.INPUT;
}
When I double-click on TextArea element, the previous string removes and I can't write nothing.
You make field editable only after second click. My idea is that it's to late. the field is editable, but you'll need to click again. So, try to make ediable for a while (e.g. 300 mileseconds) after the first click. If there's no click you set the type back to DYNAMIC. After second click you'll start editing text field.
Following on my comment above, a TextArea has a textfield property.
So you should be able to do something like this:
private function changeName(e:MouseEvent):void{
var tarea:TextArea = e.target as TextArea;
var tf:TextField = tarea.textField; //make sure that textfield is camelCase!!!
tf.type = TextFieldType.INPUT;
}
I solved my own problem using background and border properties from TextField. Instead of create TextField directly on my MovieClip, I create it dynamically.
// Field 'Name' of the layer
var tarea:TextField = new TextField();
tarea.text = 'Layer';
tarea.x = -80;
tarea.y = -23;
tarea.type = TextFieldType.DYNAMIC;
tarea.height = 20;
// Format the TextField
var format_tarea:TextFormat = new TextFormat();
format_tarea.font = "Arial";
format_tarea.size = 14;
format_tarea.bold = true;
tarea.setTextFormat(format_tarea,0,tarea.length);
Then, I add it some listeners to allow changes when I click on it:
// Add event to allow name changes
tarea.addEventListener(MouseEvent.CLICK,changeName);
When I press ENTER key, I accept the changes
// Add event to accept changes on press ENTER key
tarea.addEventListener(KeyboardEvent.KEY_DOWN,acceptKeyboardName);
When TextField lost his focus, accept the changes too:
tarea.addEventListener(FocusEvent.FOCUS_OUT,acceptFocusName);
Last, I added to my own MovieClip
// Add to MC
mc.addChild(tarea);
Handlers associated to below events are these:
private function changeName(e:MouseEvent):void
{
e.target.setSelection(0,e.target.text.length);
e.target.border = true;
e.target.background = true;
e.target.type = TextFieldType.INPUT;
}
private function acceptKeyboardName(e:KeyboardEvent):void
{
if (e.charCode == 13) // When pres ENTER, remove border, background and restore dynamic type
{
e.target.type = TextFieldType.DYNAMIC;
e.target.border = false;
e.target.background = false;
}
}
private function acceptFocusName(e:FocusEvent):void
{
// When lost focus, remove border, background and restore dynamic type
e.target.type = TextFieldType.DYNAMIC;
e.target.border = false;
e.target.background = false;
}
I need to make an auto complete component in flex that fetches the auto complete results from a remote database using a webservice. I have the webservice and querying part worked out. I've already made custom components in action script by extending VBoxes. However I cannot figure out how to generate the popup window that is supposed to show under the text input in my auto complete text box.
Currently I am using something like
PopUpManager.addPopUp(popup, parentComponent);
My popup class extends VBox and it extends the createChildren method as follows
protected override function createChildren():void
{
for (var i:int = 0; i < results.length; i++) {
var itemC:UIComponent =
factory.getComponent(results[i]);
addChild(itemC);
itemC.addEventListener(MouseEvent.CLICK,
getClickFunction(i));
}
private function getClickFunction(index:int):Function {
return function (event:MouseEvent):void
{
selectedIndex = index;
};
}
Unfortunately when the webservice retrieves its results and addPopUp is called, nothing shows up.
Currently the factory.getComponent method is executing this code
public function getComponent(user:Object):UIComponent
{
var email:Label = new Label();
email.text = user.email;
var name:Label = new Label();
name.text = user.displayName;
var vbox:VBox = new VBox();
vbox.addChild(name);
vbox.addChild(email);
return vbox;
}
I think you ought to look for someone who has already implemented this. While your issue is probably related to not positioning and sizing the component before calling addPopup() even if we helped you solve that you still have a lot more work todo. (BTW call super.createChildren in your override or else bad things will happen). Anyway, check this out:
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1047291
Finally I figured out how to use the List control and I stopped using a factory to generate components, instead I use the itemRenderer feature in the list control. I also used that to replace the custom popup class, and I added a positioning function to be called later. By combining these things I was able to get the drop down to display as expected. It appears that some components do not work well as pop ups.
Regardless, the working pop up code is
Inside my autocomplete component which extends HBox
dropDownList = new List();
dropDownList.itemRenderer = itemRenderer;
dropDownList.dataProvider = results;
dropDownList.labelFunction = labelFunction;
dropDownList.rowCount = results.length;
dropDownList.labelFunction = labelFunction==null ?
defaultLabelFunction : labelFunction;
dropDownList.tabFocusEnabled = false;
dropDownList.owner = this;
PopUpManager.addPopUp(IFlexDisplayObject(dropDownList), DisplayObject(this));
callLater(positionDropDownList);
Method in the autocomplete component (textInput is my text field)
public function positionDropDownList():void {
var localPoint:Point = new Point(0, textInput.y);
var globalPoint:Point = localToGlobal(localPoint);
dropDownList.x = globalPoint.x;
var fitsBelow:Boolean = parentApplication.height - globalPoint.y - textInput.height > dropDownList.height;
var fitsAbove:Boolean = globalPoint.y > dropDownList.height;
if (fitsBelow || !fitsAbove) {
dropDownList.y = globalPoint.y + textInput.measuredHeight;
} else {
dropDownList.y = globalPoint.y - dropDownList.height;
}
}
The position function was code that I borrowed from http://hillelcoren.com/flex-autocomplete/