I have create a window component but it will randomly position whether I open its window, x and y positions will only offset the elements, not window. How do I position it to the center of the screen?
Flex 4 (AS3):
private function openDoc():void {
if (newWindow != null) newWindow.close();
newWindow = new docwin();
newWindow.width = 500;
newWindow.height = 320;
newWindow.type = "normal";
newWindow.systemChrome = "standard";
newWindow.transparent = false;
newWindow.setStyle("showFlexChrome", true);
newWindow.showStatusBar = false;
newWindow.minimizable = false;
newWindow.maximizable = false;
newWindow.resizable = false;
newWindow.open();
}
Try this:
newWindow.x = Math.ceil((Capabilities.screenResolutionX - newWindow.width) / 2);
newWindow.y = Math.ceil((Capabilities.screenResolutionY - newWindow.height) / 2);
You can use layout property of window like horizontalCentre and verticalCentre use contstraint based layout scheme
You have to position the new window with reference to stageWidth and stageHeight properties.
Assuming the origin of your new window is top left, the new location of the the windows will be:
(Stage.stageWidth - newWindow.width)/2, (Stage.stageHeight - newWindow.height)/2;
Related
I'm using Flex 4.5.1 with AIR 2.7 (and Flash Builder 4.5.1) to build an app for the Blackberry Playbook.
The app has a large textarea that needs to be resized when the soft keyboard shows up. I am able to hook into the soft keyboard events and do things there.
Now, I want to resize the textarea to fit the remaining part of the screen when the keyboard shows up. I know the current and destination size and want to use a smooth animation to show the textarea resizing. (I can't already set the height and can see the textarea being correctly resized in the keyboard_activating event - but I want to do it through an animation). I've tried using the Animate class, the spark.effects.Move class and none of them seem to work in this case. They seem to run the animation but the screen does not get refreshed!
I don't want to use the built-in resizeAppForKeyboard property on the ViewNavigatorApplication. I have set to 'none' in the app descriptor so that part of it is fine.
Any ideas / thoughts? Is my approach correct at all? How would one go about resizing the textarea using an animation in the keyboard activating event? My code looks like:
In the main view (onCreationComplete event): (txNote is the textarea in question)
txNote.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, function(e:SoftKeyboardEvent):void {
toggleEditMode(true);
});
txNote.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, function(e:SoftKeyboardEvent):void {
toggleEditMode(false);
});
private function toggleEditMode(keyboardActivated:Boolean):void {
trace("toggle edit: " + editMode + ", kb activating: " + keyboardActivated + ", txNote height = " + txNote.height);
editMode = keyboardActivated;
//we handle resize manually, because we want a nice animation happening and we want to resize only the text area - nothing else.
var y:Number = editMode ? -38 : 0;
var height:Number = editMode ? 218 : 455;
txNote.moveAndSize(y, height);
}
The code in txNote.moveAndSize:
public function moveAndSize(newY:Number, newHeight:Number):void {
//parent group uses BasicLayout
//(this.parent as Group).autoLayout = false;
//resizePath.valueFrom = this.height;
//resizePath.valueTo = newHeight;
//movePath.valueFrom = this.y;
//movePath.valueTo = newY;
//resizeEffect.heightFrom = this.height;
//resizeEffect.heightTo = height;
this.top = newY;
moveEffect.xFrom = this.x;
moveEffect.xTo = this.x;
moveEffect.yFrom = this.y;
moveEffect.yTo = newY;
moveEffect.end();
moveEffect.play([ this ]);
//this.move(x, newY);
//animate.play([ this ]);
//this.height = height;
//this.y = y;
//setLayoutBoundsSize(width, height);
//setLayoutBoundsPosition(x, y);
}
The moveEffect / movePath / animate various things I tried are set up in the txNote constructor as follows:
public class NotesArea extends TextArea {
// private var animate:Animate;
// private var movePath:SimpleMotionPath;
// private var resizePath:SimpleMotionPath;
private var moveEffect:Move;
// private var resizeEffect:Resize;
public function NotesArea() {
super();
// animate = new Animate();
// var paths:Vector.<MotionPath> = new Vector.<MotionPath>();
// movePath = new SimpleMotionPath("top");
// resizePath = new SimpleMotionPath("height");
// paths.push(movePath);
//paths.push(resizePath);
// animate.duration = 300;
// animate.motionPaths = paths;
// animate.addEventListener(EffectEvent.EFFECT_UPDATE, function(e:EffectEvent):void {
// trace("y = " + y);
// invalidateDisplayList();
// });
// animate.addEventListener(EffectEvent.EFFECT_END, function(e:EffectEvent):void {
// trace("EFFECT ended: y = " + y);
// });
moveEffect = new Move();
moveEffect.duration = 250;
moveEffect.repeatCount = 1;
moveEffect.addEventListener(EffectEvent.EFFECT_END, function (e:EffectEvent):void {
//(this.parent as Group).autoLayout = true;
trace("move effect ran. y = " + y + ", top = " + top);
});
//this.setStyle("moveEffect", moveEffect);
//
// resizeEffect = new Resize();
// resizeEffect.duration = 250;
// this.setStyle("resizeEffect", resizeEffect);
}
}
yourTextField.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, onActivating);
yourTextField.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, onActivating);
yourTextField.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, onActivating);
// in the event listener to the textField IE :
private function onActivating(event:SoftKeyboardEvent):void
{
//listen to the event; make your move here.
}
I have a strange issue- I use a title window to create a message to the user. The user has the ability to move the title window around the screen so that the main screen is visible.
However if the user were to move the title window way too much, it can actually go outside the browser accessible area- the user has no option but to close the browser and start again. How do we ensure that the title window movement is limited, such that the title bar is always available for control?
I might not have worded this right- pls check the attached image.
I'd listen to the move event of the TitleWindow. If the window is moved out of the visible coordinates of the application, move it back.
If you're only issue is w/ allowing the users to closet the window, then you could add a "Close" button on the bottom of the window in addition to the 'x' at the top.
If you can use a custom component I'd suggest you override the TitleWindow's move() method. I'm using the following code to restrict the window movement:
public class PopUpWindow extends TitleWindow
{
private static const MIN_VISIBLE:int = 50;
public override function move(x:Number, y:Number):void
{
var maxX:Number = stage.stageWidth - MIN_VISIBLE;
var maxY:Number = stage.stageHeight - MIN_VISIBLE;
if (x < 0)
x = 0;
else if (x > maxX)
x = maxX;
if (y < 0)
y = 0;
else if (y > maxY)
y = maxY;
super.move(x, y);
}
}
This function is called on move event of titlewindow:
protected function titlewindow1_moveHandler(event:MoveEvent):void
{
// TODO Auto-generated method stub
var window:UIComponent = event.currentTarget as UIComponent;
var application:UIComponent = FlexGlobals.topLevelApplication as UIComponent;
var bounds:Rectangle = new Rectangle(0, 0, application.width, application.height);
var windowBounds:Rectangle = window.getBounds(application);
var x:Number;
var y:Number;
if (windowBounds.left <= bounds.left)
x = bounds.left;
else if (windowBounds.right >= bounds.right)
x = bounds.right - window.width;
else
x = window.x;
if (windowBounds.top <= bounds.top)
y = bounds.top;
else if (windowBounds.bottom >= bounds.bottom)
y = bounds.bottom - window.height;
else
y = window.y;
window.move(x, y);
}
I've got a problem in an ItemRenderer in Flex 3.5. I've looked at the other posts regarding this error but still can't figure it out. The ItemRenderer is part of an AdvancedDataGrid who's data provider is HierarchicalData. I'm getting the ArgumentError but the trace doesn't go to any of my code. I've gone through in debug mode tons of times but it looks like it doesn't happen until after my code runs. Quite strange.
The item renderer has a couple different parts. It figures out what row it should be drawing for based on the xml data and then adds labels and sprites appropriately. If anyone can help, that would be a great help! Thanks!
Here is one of the methods that gets called if the itemrenderer is on a certain row.
private function addLabels(planList:ArrayCollection):void {
height = 0;
var sprite:Sprite = new Sprite();
var curX:Number = (width / planList.length);
height = 110;
for each (var plan:Plan in planList) {
var label:Label = new Label();
label.text = plan.planner.label;
label.rotationZ = 270;
label.visible = true;
label.x = curX - 7;
//Draw line divider
curX += (width / planList.length);
addChild(label);
label.move(label.x, height - 30);
//Draw divider line
sprite.graphics.lineStyle(.5, 0x000000);
sprite.graphics.moveTo(label.x - ((width / planList.length) / 2) + 10.5, 0);
sprite.graphics.lineTo(label.x - ((width / planList.length) / 2) + 10.5, height - 28);
//Draw meatball
sprite.graphics.beginFill(0x00FF33);
sprite.graphics.drawCircle(label.x + 10, height - 15, 10);
sprite.graphics.endFill();
}
rawChildren.addChild(sprite);
}
There's another function that gets called on a different row, but if I comment out the code above everything works fine, so my guess is that the problem definitely lies there. Thanks for the help!
Here is where addLabels gets called:
override protected function createChildren():void {
removeAllChildren();
var count:int = rawChildren.numChildren;
for (var i:int = 0; i < count; i++) {
if (rawChildren.getChildAt(0).parent) {
rawChildren.removeChildAt(0);
}
}
var allPlans:ArrayCollection = new ArrayCollection();
if (_plan) {
getAllPlans(_plan, allPlans);
}
if (_name == "capability") {
}
else if (_name == "components") {
height = 130;
width = 335;
addLabels(allPlans); // <-- RIGHT HERE!
var sprite:Sprite = new Sprite();
sprite.graphics.lineStyle(.5, 0x000000);
sprite.graphics.moveTo(0, 0);
sprite.graphics.lineTo(width, 0);
sprite.graphics.moveTo(0, height - 28);
sprite.graphics.lineTo(width, height - 28);
rawChildren.addChild(sprite);
}
}
I've seen this kind of thing before. This error could be happening in the AdvancedDataGrid itself, not the itemRenderer.
See http://www.judahfrangipane.com/blog/?p=196 for more information.
If you simply want to draw something on specific rows, you might try extending the AdvancedDataGrid to override two functions:
override protected function drawHorizontalLine(s:Sprite, rowIndex:int, color:uint, y:Number):void {
// do some drawing
}
override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void {
// do some drawing
}
Here's the answer if anyone was looking at this..
I'm still not exactly sure what the problem was, but the AdvancedDataGrid certainly did not like me adding a Label as a child to the renderer. Here's how I got around it.. add a TextField as a child to the sprite, as shown:
var newLabel:TextField = new TextField();
newLabel.text = plan.planner.label;
newLabel.rotationZ = 270;
newLabel.visible = true;
newLabel.x = curX - (dividerWidth / 2) - ((newLabel.textHeight) / 1.5);
newLabel.y = height - (RADIUS * 2.5);
newLabel.antiAliasType = AntiAliasType.ADVANCED;
sprite.addChild(newLabel);
Hope this helps someone!
Ok so I have a component, that has a function to remove itself as a popUp in its current Window, and add itself to a newly created Window.
It works, however, if the component has a child like a ComboBox, the drop down still pops up in the old window where it used to be, also scrollbars, and focus seems to behave incorrectly in the new window also.
It seems to me like Flex still thinks the component is a child of the original window, not the new window. I have no idea how to resolve this though.
Here is my code:
private var ownWindow:Window;
private var _inOwnWindow:Boolean;
private var _removedEffect:Move;
private var _openX:Number;
private var _openY:Number;
public function launchInNewWindow(e:Event):void
{
_openX = Application.application.nativeWindow.x + this.x + 5; //keep in same spot add 5 for systemChrom border
_openY = Application.application.nativeWindow.y + this.y + 30;//keep in same spot add 30 for systemChrom title
this.parent.removeChild(this);
ownWindow = new Window();
ownWindow.systemChrome = 'none';
ownWindow.type = NativeWindowType.LIGHTWEIGHT;
ownWindow.transparent = true;
ownWindow.setStyle('showFlexChrome', false);
ownWindow.width = this.width > 750 ? 750 : this.width;
ownWindow.height = this.height > 550 ? 550 : this.height;
edit.enabled = false;
_removedEffect = this.getStyle('removedEffect') as Move;
if(_removedEffect == null)
{
openNewWindow();
}
else
{
// Wait for removed effect to play before adding to new window
_removedEffect.addEventListener(EffectEvent.EFFECT_END,delayOpenInNewWindow);
}
}
private function delayOpenInNewWindow(e:Event = null):void
{
var t:Timer = new Timer(100,1);
t.addEventListener(TimerEvent.TIMER,openNewWindow);
t.start();
}
private function openNewWindow(e:Event = null):void
{
ownWindow.addChild(this);
ownWindow.width += 5; //add to show dropshadow
ownWindow.height += 10; //add to show dropshadow
ownWindow.open();
_inOwnWindow = true;
ownWindow.nativeWindow.x = _openX;
ownWindow.nativeWindow.y = _openY;
}
Any ideas?
Thanks!!
Before I give this a run, have you tried a callLater on the openNewWindow() line?
[ lame fix attempt, i know -- but given that there doesn't seem to be an event that you can listen for in the case that the removedEffect isn't null and it seems like a timer is your only option there, I think it's o.k. to give lame fix attempts :-) ]
I am trying to center an image in the middle of the stage and scale it proportionally to the correct aspect ratio based on its loader's size when the image is loading.
In my main app runner I do:
private var rec:Rectangle = new Rectangle();
private var img:BitmapDisplay = new BitmapDisplay();
stage.addEventListener(Event.RESIZE, setRect);
img.imageURL = "some/path/to/image.jpg";
addChild(img);
private function setRect():void
{
var horz:Number = stage.stageWidth / 16;
var vert:Number = stage.y + stage.stageHeight / 16;
rec.x = horz;
rec.y = 80;
rec.width = stage.stageWidth - horz;
rec.height = stage.stageHeight - (vert * 2) - rec.y;
img.boundary = rec;
}
Then in my image (BitmapDisplay) class I have:
// sets the boundary of the image and resizes it
public function set boundary(rect:Rectangle):void
{
_imageBoundary = rect;
resizeImage();
}
private function resizeImage():void
{
var aspect:Number = _ldr.content.width / _ldr.content.height;
var cAspect:Number = _imageBoundary.width / _imageBoundary.height;
if (aspect <= cAspect)
{
_ldr.height = _imageBoundary.height;
_ldr.width = aspect * _ldr.height;
}
else
{
_ldr.width = _imageBoundary.width;
_ldr.height = _ldr.width / aspect;
}
var _pad:int = 7;
_ldr.x = (_imageBoundary.width - _ldr.width) / 2 + _imageBoundary.x - _pad;
_ldr.y = (_imageBoundary.height - _ldr.height) / 2 + _imageBoundary.y - _pad;
}
}
Is there something obvious keeping this from working right?
I want a 16th of the stage to be the bounds for the image and for the image to scale/resize based on this rect.
Thanks...
It turns out that this had more to do with the loader not being ready to be resized. There was some error checking in my code that needed to be reformatted, so now when the resize function gets called, it doesn't do anything until the loader is ready and the boundary is set.