Error in using "removechild" - apache-flex

Below is my code, and the question is explained after it.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:cal="cal.*"
layout="absolute"
applicationComplete="init()"
xmlns:geometry="com.degrafa.geometry.*"
xmlns:degrafa="com.degrafa.*"
xmlns:paint="com.degrafa.paint.*"
xmlns:containers="flexlib.containers.*"
xmlns:flexlib_controls="flexlib.controls.*"
xmlns:mdi_containers="flexlib.mdi.containers.*"
xmlns:auto="com.hillelcoren.components.*"
xmlns:local="*"
xmlns:components="CollapsibleAccordion.*"
modalTransparency="0.8"
modalTransparencyColor="0x000000"
backgroundSize="100%">
<mx:Script>
<![CDATA[
import c7.views.components.PhotoViewer.PhotoViewer;
import c7.config.ServerConfig;
import mx.core.Application;
import mx.containers.*;
import c7.models.GlobalModel;
private var pv_slideshow:PhotoViewer = null;
private function toggleFullScreen():void
{
if(stage.displayState == StageDisplayState.NORMAL)
{
this.pv_slideshow = new PhotoViewer;
Application.application.addChild(this.pv_slideshow); //added as top-most component to application itself
//set new sizes & go full-screen
this.pv_slideshow.x = 0;
this.pv_slideshow.y = 0;
this.pv_slideshow.width = stage.fullScreenWidth;
this.pv_slideshow.height = stage.fullScreenHeight;
try
{
stage.displayState = StageDisplayState.FULL_SCREEN;
}
catch(err:Error)
{
Alert.show(err.toString());
}
stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenEventHandler, false, 0, true); //intentionally weak referenced
//refresh the display sizes & display list
invalidateSize();
invalidateDisplayList();
}
/*else
stage.displayState = StageDisplayState.NORMAL;*/
}
private function fullScreenEventHandler(event:FullScreenEvent):void
{
if (event.fullScreen) //nothing to do in case when switching to full-screen
return;
//Alert.show(pv_slideshow.width.toString());
//application.removeChild(this.pv_slideshow);
Application.application.removeChild(pv_slideshow); //remove the full-screen container
this.pv_slideshow = null; //reset
//refresh the display sizes & display list
invalidateSize();
invalidateDisplayList();
}
The toggleFullScreen is fired on the click of a button... and it working absolutely fine. But the issue is in "exit" . When I click escape key fullScreenEventHandler is fired and it should remove the pv_slideshow.
This is where I get a null object reference error on the line:
Application.application.removeChild(pv_slideshow); //remove the full-screen container
I have tried using this.pv_slideshow and other such things.
Plz help me figure it out. what am i doing wrong and how should I make it work.
This is exact error message I get:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::removingChild()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\Container.as:3315]
at mx.core::Container/removeChild()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\Container.as:2263]
at index_cloud/fullScreenEventHandler()[C:\development\flex_src\index_cloud.mxml:1661]

I wouldn't use Application.application either.
Please check first pv_slideshow really exists, you can get it's parent ( if has one ) and remove it later.
get the parent
pv_slideshow.parent
remove it from the parent_item
parent_item.removeChild( pv_slideshow )
Make sure also the version of Flex you are using, you may need to remove it with removeElement.

The intended architectural use of Application.application is not to use it as a uiComponent or displayObject, or whatever. If you're building a library project that is doing some calculations based on the application properties, or the application's systemManager, or you need access to the outter application from a loaded module, then you have good reason to use App.app.
You example is not one of those cases. Your best bet is to add your component to 'this' (as long as you're not going to use a "view" container), and do a this.removeChild. That should solve a good chunk of your issues.
Best of luck,
Jeremy

Related

FLex : unload swf file in SWFLoader

In Flex 3 I have a SWFLoader:
<mx:SWFLoader id="player" source="http://youtube.com/v/..." />
and after some time I invoke player.unloadAndStop(). And I always get this error:
ReferenceError: Error #1056: Cannot create property __tweenLite_mc on _swftest_mx_managers_SystemManager.
What does it mean and how to avoid this?
UPD: AIR 2 doesn't have this problem
Maybe try the Loader class? I'm not sure if it will help but I do all my loading via ActionScript. Generally speaking, I do "heavyWeight" programming/logic/cotrol stuff in ActionScript and leave Flex for more simplistic layout code. That is, flex puts things in place and actionscript controls it all. When loading clips in our Flex 3 project, I have control code along the lines of:
import flash.display.Loader;
private var loader:Loader;
public function init() {
loader = new Loader();
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadFailed);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleted);
}
with calls to things like:
//here, pop returns a string like "/path/to/movie.swf"
loader.load(new URLRequest(clipsToPlay.pop()));
...
loader.unload();
contained in functions like:
private function loadNextClip():void {
if(clipsToPlay.length == 0) {
dispatchEvent(new PlayBackCompleteEvent(PlaybackCompleteEvent.ALL));
return;
}
loader.load(new URLRequest(clipsToPlay.pop()));
}
private function loadCompleted(event:Event):void {
currentClip = event.target.content as MovieClip;
loader.unload();
displayClip();
}
private function displayClip():void {
applyEffects();
currentClip.addEventListener(Event.ENTER_FRAME, monitorForCompletion);
addChild(currentClip);
}
I'm not sure if Loader can be used instead of SWFLoader but if so I hope that helps you or someone else, in some way...
EDIT:
I just looked it up and mx.controls.SWFLoader and flash.display.Loader have very similar functionality. I'd try using Loader, as prescribed above, and see if it fixes the problem. You could probably initialize the loader via MXML, too, but I wouldn't recommend it since it's not a visual component, I think it's better to let MXML handle visual things while ActionScript handles logical things.

Is it possible to prevent a flex application from being resized at runtime?

From what I can gather, the resize property of a Flex application is set in the XML config file:
<!--Whether the user can resize the window. Optional. Default true.-->
<!--<resizable></resizable>-->
However, if I set this attribute to true, is there a way to turn this off dynamically at runtime? For example, my application has two view modes - mini and maxi. I would like to prevent the end user from being able to resize the application when in mini mode. I tried prevent the resize using the following code but it does not seem to work:
private function creationComplete():void {
this.systemManager.stage.addEventListener(Event.RESIZE, resizeListener);
}
private function resizeListener(evt:Event):void {
evt.preventDefault();
}
Any help would be greatly appreciated.
There is another way to do that without setting the descriptor file property.
Here is the code:
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" showGripper="false"
layout="vertical" showStatusBar="false"
applicationComplete="init()">
<mx:Script>
<![CDATA[
import mx.events.FlexNativeWindowBoundsEvent;
private function init():void
{
this.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZING, onAppResize);
}
private function onAppResize(e:NativeWindowBoundsEvent):void
{
e.preventDefault();
}
]]>
</mx:Script>
Hope this helps.
You'd need to create a new NativeWindow instance and reparent your application into that. When you create a new NativeWindow, you've got options you can set at Initialisation time, including resizable.
http://help.adobe.com/en_US/FlashPlatform//reference/actionscript/3/flash/display/NativeWindowInitOptions.html
According to manual, resizable is read-only property.
So it's probably not possible.
As this was already necro'd, and I was curious:
I was able to implement a switch from resizable to not with the following code:
private var maxMode:Boolean = true;
protected function switchMode():void
{
if (maxMode){
//I chose to freeze the app at current size
//You could also set the min/max to hard coded values
this.maxWidth = this.width;
this.minWidth = this.width;
this.maxHeight = this.height;
this.minHeight = this.height;
}
else {
//default values for WindowedApplication
this.maxWidth = 2880;
this.minWidth = 0;
this.maxHeight = 2880;
this.minHeight = 0;
}
maxMode= !maxMode
}
The user is however still shown the resize mouse icons on the edges of the app.
Try to add return:
evt.preventDefault();
return;

Flex textarea control not updating properly

I am writing a flex application that involves modifying a textarea very frequently. I have encountered issues with the textarea sometimes not displaying my modifications.
The following actionscript code illustrates my problem:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
<mx:TextArea x="82" y="36" width="354" height="291" id="textArea" creationComplete="initApp()"/>
<mx:Script>
<![CDATA[
private var testSentence:String = "The big brown fox jumps over the lazy dog.";
private var testCounter:int = 0;
private function initApp():void {
var timer:Timer = new Timer(10);
timer.addEventListener(TimerEvent.TIMER, playSentence);
timer.start();
}
private function playSentence(event:TimerEvent):void {
textArea.editable = false;
if (testCounter == testSentence.length) {
testCounter = 0;
textArea.text += "\n";
}
else {
textArea.text += testSentence.charAt(testCounter++);
}
textArea.editable = true;
}
]]>
</mx:Script>
</mx:Application>
When you run the above code in a flex project, it should repeatedly print, character by character, the sentence "The big brown fox jumps over the lazy dog.". But, if you are typing into the textarea at the same time, you will notice the text the timer prints is distorted.
I am really curious as to why this happens. The single-threaded nature of flex and disabling user input for the textarea when I make modifications should prevent this from happening, but for some reason this doesn't seem to be working.
I must note too that, when running the timer at larger intervals (around 100ms) it seems to work perfectly, so I am tempted to think it's some kind of synchronization issue in the internals of the flex framework.
Any ideas on what could be causing the problem?
My son is having a rough go at this teething thing, hense my being awake. AND, I'm not really sure how I happened upon this random question/answer since I'm so rarely on stackoverflow.... but...
You SHOULD NOT have to increase your framerate by 4x because of a textArea! We're talking about system resources, not to mention a very elegant flex framework that you could instead leverage:
Here's a very quick, and flex-sdk compliant and happy fix:
create a component that extends TextArea and add the following property and override (if this in fact what you're trying to do):
private var _tackOnText : String = "";
private var _tackOnTextChanged : Boolean = false;
public function set tackOnText(value:String):void
{
_tackOnText = value;
_tackOnTextChanged = true;
invalidateProperties();
}
public function get tackOnText():String
{
return _tackOnText;
}
override protected function commitProperties():void
{
super.commitProperties();
if(_tackOnTextChanged) {
this.textField.text += _tackOnText;
_tackOnText = "";
_tackOnTextChanged = false;
}
}
Then change your playSentence to do this:
if (testCounter == testSentence.length) {
testCounter = 0;
textArea.tackOnText += "\n";
}
else {
textArea.tackOnText += testSentence.charAt(testCounter++);
}
This is one fix to a semi-common problem that should allow you to not increase your frameRate by 4x to get your app to function correctly AND you'll be better working with the flex sdk.
My 2p.
Have a good one,
Jeremy
the problem you are facing seems to be when the addition ticker function is called at the same time that you are entering text, by entering text manually it seems that it is then missing the addition of the text. though im not sure why.
the solution i found seems to be to make sure that the framescript and timer dont meet (for the faster text input, increase the framerate) for 10ms timer 100fps seems to work without any problems (add frameRate="100" to mx:Application line).

Flex: Get self SWF file name?

Is there a way I can programmatically determine the filename of the .swf my class is running in?
Thanks!
Stage has a loaderInfo property, which contains a url property that has the information you're looking for. You can get the stage property from any DisplayObject in Flex.
trace(stage.loaderInfo.url);
Just a helpful note: If you load one SWF into another, the loaded (inner) SWF will return an erroneous result if you use loaderInfo.url to try to get the filename. For instance, something like:
Path/To/Outer.swf/[[DYNAMIC]]/1
Instead of:
Path/To/Inner.swf
Beware!
That said, here is the code I use to get the current SWF name:
function SWFName(symbol:DisplayObject):String
{
var swfName:String;
swfName = symbol.loaderInfo.url;
swfName = swfName.slice(swfName.lastIndexOf("/") + 1); // Extract the filename from the url
swfName = swfName.slice(0, -4); // Remove the ".swf" file extension
swfName = new URLVariables("path=" + swfName).path; // this is a hack to decode URL-encoded values
return swfName;
}
Not from within flash, afaik. What do you need it for? There might be a better way to do it.
You can use loaderInfo.loaderURL to get the full path and name of you swf
Example of a class:
public class Main extends Sprite {
private function init():void {
removeEventListener(Event.COMPLETE, init);
var myUrl:String=loaderInfo.loaderURL;
var tmp:Array=myUrl.split("/");
var myName:String=tmp[tmp.length-1].split(".swf")[0];
}
public function Main() {
super();
if (stage)
init();
else
addEventListener(Event.COMPLETE, init, false, 0, true);
}
}
Things have changed a bit in more recent versions so I'll give an answer for Adobe Flash Builder 4.6 (geared towards Flash in browser, but you get the idea).
<s:Application ... applicationComplete="alertSwfUrl()">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
private function alertSwfUrl():void {
var a:LoaderInfo = FlexGlobals.topLevelApplication.stage.loaderInfo;
ExternalInterface.call('alert', a.url);
}
]]>
</fx:Script>
</s:Application
Check out the LoaderInfo docs to figure out how to use the loaderInfo object associated with the stage.

Flex - Sending a parameter to a custom ItemRenderer?

What I am trying to accomplish to to get financial data in my Flex Datagrid to be color-coded--green if it's positive; red if it's negative. This would be fairly straightforward if the column I want colored was part of the dataProvider. Instead, I am calculating it based on two other columns that are part of the dataProvider. That would still be fairly straightforward because I could just calculate it again in the ItemRenderer, but another part of the calculation is based on the value of a textBox. So, what I think I need to be able to do is send the value of the textBox to the custom ItemRenderer, but since that value is stored in the main MXML Application, I don't know how to access it. Sending it as a parameter seems like the best way, but perhaps there's another.
Here is the current code for my ItemRenderer:
package {
import mx.controls.Label;
import mx.controls.listClasses.*;
public class PriceLabel extends Label {
private const POSITIVE_COLOR:uint = 0x458B00 // Green
private const NEGATIVE_COLOR:uint = 0xFF0000; // Red
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
/* Set the font color based on the item price. */
setStyle("color", (data.AvailableFunding >= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
}
}
(data.AvailableFunding doesn't exist)
So does anyone know how I would go about accomplishing this?
You may want to look into ClassFactory from the Flex APIs:
This allows you to set a prototype Object with arbitrary types / values each of which will be passed to the item renderer. From the sample:
var productRenderer:ClassFactory = new ClassFactory(ProductRenderer);
productRenderer.properties = { showProductImage: true };
myList.itemRenderer = productRenderer;
The above code assumed that "ProductRenderer" has a public property called "showProductImage" which will be set with a value of "true."
Ah, so I knew about outerDocument but not parentDocument. I was able to just use parentDocument.*whatever I want from the main App and I can access it as long as it's public.
Example:
setStyle("color", (parentDocument.availableFunding >= 0) ? POSITIVE_COLOR : NEGATIVE_COLOR);
Sweet! :)
You can access the value of the TextBox directly, if you need to, by using the static Application.application object, which is accessible from anywhere in your application.
For example, if you wanted the renderers to be notified when the value of the TextInput control changes, you could do something like this (from within your ItemRenderer, and where myTextInput is the ID of the control defined in your main MXML class):
<mx:Script>
<![CDATA[
import mx.core.Application;
private function creationCompleteHandler(event:Event):void
{
Application.application.myTextInput.addEventListener(TextEvent.TEXT_INPUT, handleTextInput, false, 0, true);
}
private function handleTextInput(event:TextEvent):void
{
if (event.currentTarget.text == "some special value")
{
// Take some action...
}
}
]]>
</mx:Script>
With this approach, each item-renderer object will be notified when the TextInput's text property changes, and you can take appropriate action based on the value of the control at that time. Notice as well that I've set the useWeakReference argument to true in this case, to make sure the listener assignments don't interfere unintentionally with garbage collection. Hope it helps!
There's another technique, which, while it initially feels a little hacky is perhaps less cumbersome and cleaner in actual use.
It involves the little-observed fact that an event dispatch is, of course, synchronous and the event object can be treated as a value object populated by any event handler.
i.e. the ItemRenderer can do something like:
...
var questionEvt:DynamicEvent = new DynamicEvent('answerMeThis', true, true);
if (dispatchEvent(questionEvt))
{
if (questionEvent.answer == "some value")
....
With a corresponding handler somewhere up the view hierarchy above the renderer that has a listener on the event and does something like:
function handleAnswerMeThis(event:DynamicEvent):void
{
event.answer = "another value";
event.dataHelper = new DataHelperThingy();
}
etc.
It need not be a DynamicEvent - I'm just using that for lazy illustrative purposes.
I vote up for cliff.meyers' answer.
Here's another example on setting the properties of an itemRenderer from MXML by building a function that wraps a ClassFactory around the itemRenderer class and that injects the necessary properties.
The static function:
public static function createRendererWithProperties(renderer:Class,
properties:Object ):IFactory {
var factory:ClassFactory = new ClassFactory(renderer);
factory.properties = properties;
return factory;
}
A simple example that adds a Tooltip to each item in a list:
<mx:List dataProvider="{['Foo', 'Bar']}" itemRenderer="{createRendererWithProperties(Label, {toolTip: 'Hello'})}"/>
Reference:
http://cookbooks.adobe.com/post_Setting_the_properties_of_an_itemRenderer_from_MXM-5762.html
You use outerDocument property. Please see the fx:Component reference.
You could create an 'AvailableFunding' static variable in the ItemRenderer and then set it in the parent document.
public class PriceLabel extends Label {
public static var availableFunding:int;
...
...
SetStyle("color", (PriceLabel.availableFunding >= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
}
In your parent document, set it when your text box gets updated
PriceLabel.availableFunding = textBox.text;
Obviously it'll be the same value for every ItemRenderer but it looks like that might be what you're doing anyway.
I like to override the set data function of the item renderer to change the renderer when the data provider changes as shown here
When you override the function you could cast the object to your object to make the availableFunding property available.
To access the text box you could try creating a public property and binding the property to the text box in the mxml file:
public var textVar:String;
<mx:itemRenderer>
<mx:Component>
<customrenderer textVar="{txtBox.text}" />
</mx:Component>
</mx:itemRenderer>
Nice ClassFactory Example here
See this example:
itemRenderer="{UIUtils.createRenderer(TextBox,{iconSrc:IconRepository.linechart,headerColor:0xB7D034,subHeaderColor:0xE3007F,textColor:0x75757D})}"

Resources