I create. I launch.

Flex 3: Firefox Beta 3 returns 0 for HTTP status codes

by John C. Bland II | Apr 3, 2008 | Flash Platform

What a weird issue to run into but I did.

So, yesterday I was tasked with building a charting app (simple 1 chart based on XML with a refresh interval). No problem…jumped in Flex Builder and banged it out in roughly 20 minutes (not bragging; will explain the reference in a few). The app worked perfectly fine.

Today I was tasked with integrating it into the actual page and putting up a test version to look at. So I did, showed Dave M. (he assigned it to me) but he was busy so I showed my manager, and it didn’t work!!! Huh?

First Error
My manager hit an RSL problem. The issue was with the “mime type not being registered”:https://kb.adobe.com/selfservice/viewContent.do?externalId=kb402864 in Apache. Easy one to get beyond. I nix’ed the use of RSL for now, until Apache on this server gets updated, and moved one.

Second Error
The code uses a URLLoader to load the XML. I added a listener for HTTPStatusEvent.HTTP_STATUS. 403 and 401 are there for authentication purposes and 200 is the only other I coded. Everything works great. If I get a 200 the timer is stopped then started again. I also have an Event.COMPLETE to “parse” the data and throw it in my chart (which charting+xml is saweet!!!). Again…everything works great. I sent it to my manager…BROKEN! Ahh…only in Firefox though. Huh? How’s that? This is Flash for Christ’s sake!!

I remove my setInterval and replace it with a Timer. That doesn’t work. I tried numerous other fixes and none of those worked. Then I added a double click listener to the chart and had it call loadData which actually worked. So I knew the networking portion was fine. Why in the world is my switch statement not making it to case 200:?

To find out I threw in an Alert.show(event.status) to see what code was coming back. It was 0!!!! HOW? HUH? WHAT?

Last year I learned a new acronym from Sarge. We were working on something and the issue I was having was a result of RTFM. RTFM (to me) reads “Read The Freaking Manual” (substitute your own F* word at your leisure). 🙂

That was the problem…RTFM:

HTTPStatusEvent objects are always sent before error or completion events. An HTTPStatusEvent object does not necessarily indicate an error condition; it simply reflects the HTTP status code (if any) that is provided by the networking stack. Some Flash Player environments may be unable to detect HTTP status codes; a status code of 0 is always reported in these cases.
-Source Adobe LiveDocs – HTTPStatusEvent

Hopefully this helps someone. I basically moved my case 200: code to my Event.COMPLETE handler and everything is good to go. The 403 and 401 blocks aren’t too important because you have to login before getting to the swf anyway so I didn’t worry about moving them.

All is well…everything works and almost 2 hours of debugging on a 20 minute app RTFM allows me to check it in and be done with it! 😉

Updated: 6/28/11 – Replaced templating language with HTML equivalents.

Flex 3: Button click on Enter Key

by John C. Bland II | Mar 27, 2008 | Flash Platform

Ok…this is one of those things that plagued me mentally because I blocked out possibilities. My main obstacle was in the approach. Should I add a key listener and check to see what field you’re in then have the appropriate buttons click event called? Nope…that sucks. Should I add a listener, to the _TextInput_ fields, for _keyUp_ or _keyDown_ and check to see if it was the _ENTER_ key? Nope…sucks too.

This wasn’t a big issue for me but I saw the question around a few times. Normally I had a situation where I was building a form and in that form you could assign a _defaultButton_ which would take care of calling the _click_ event for the _defaultButton_. That’s cool but using _Form_ means a vertical layout, right? WRONG! This is where I went wrong in my own mind.

I wrote this on (mental) stone tablets: “All display objects inside a _Form_ tag shall be _Formitem_ tags.” True but not. You can have a nice vertical form using _FormItem_ tags but sometimes you might not need all of the extra padding, etc that comes with _FormItem_’s and you might just want a _TextInput_ with a _Button_ to the right of it. Well, _Form_ is still your quick and easy answer.

bq. <mx:Form defaultButton=”{loadButton}”>
<mx:TextInput id=”feedURL” />
<mx:Button id=”loadButton” label=”Load” click=”someHandler(event)” />
</mx:Form>

That’s it. Now clicking _loadButton_ with the mouse or hitting the _ENTER_ key will call _someHandler_, _loadButton_’s _click_ event handler.

Hopefully this helps someone. Keep reading for a couple clarities.

**Clarities**
1) I know _FormItem_ has a _direction_ property which has a _horizontal as one of the options so vertical layouts are not the only type you can achieve with a _Form_/_FormItem_ combination. If you look at the space/padding for the _label_ of a _FormItem_ it isn’t as clean as throwing the _Form_ in an _HBox_ or putting an _HBox_ as the first child in the _Form_.
2) There are scenarios, I’m sure…somewhere in the world, where a listener for the _ENTER_ key in a _TextInput_ is needed. I’m not bashing all scenarios…just the general one of assigning a default button.

That’s all of the clarities I think. 🙂 L8rz!

mx:Repeater – “Error #2006: The supplied index is out of bounds.”

by John C. Bland II | Mar 25, 2008 | Flash Platform

This one was a bit weird for me. I found a lot of posts online about the error but the one’s pertaining to the Repeater component didn’t help at all. Well…I shouldn’t stay “at all” since one of them did make mention of the stack trace not being specific to the code they wrote. So that did prompt me to look at the stack trace.

For reference, here’s the trace:
bq. RangeError: Error #2006: The supplied index is out of bounds.
at flash.display::DisplayObjectContainer/addChildAt()
at mx.core::UIComponent/https://www.adobe.com/2006/flex/mx/internal::$addChildAt()
at mx.core::Container/addChildAt()
at mx.effects::EffectManager$/removedEffectHandler()
at Function/https://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()
at mx.core::UIComponent/callLaterDispatcher()

Hrmm…look at this line specifically:
bq. at mx.effects::EffectManager$/removedEffectHandler()

Why in the heck is the _EffectManager_ concerned with me calling _removeAll()_ on the bound _ArrayCollection_?

Here’s the answer:
bq. <mx:VBox xmlns:mx=”https://www.adobe.com/2006/mxml” resizeEffect=”Resize” **removedEffect=”Fade”**>

That’s what I get for trying to mess with animations!! 🙂 I nixed _removedEffect_ and everything works fine, as it once did.

I have to get back to dev’ing so I didn’t spend time figuring out why but here’s my speculation:
The _Repeater_ is notified of the collection updates and removes all children. The _EffectManager_ is attempting to animate each child but in doing so a race condition occurs where the _Repeater_ has nixed “item N” and the _EffectManager_ is trying to access it. Since it isn’t there you Error #2006 due to it accessing an item in an array that doesn’t exist.

Hopefully this helps someone else as Google didn’t provide much for my specific scenario.

Flex SDK SVN Repo

by John C. Bland II | Mar 12, 2008 | Flash Platform

In case you were wondering how to get involved with the Flex SDK development, grab a “Subversion”:https://subversion.tigris.org/ client and checkout this repo: “https://opensource.adobe.com/svn/opensource/flex/sdk/”:https://opensource.adobe.com/svn/opensource/flex/sdk/ or just click on that link to look through the repo in the browser.

If you just want to view change logs for the most recent available downloads, “go here”:https://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3.

AIR 1.0 and Flex 3 Released!!

by John C. Bland II | Feb 25, 2008 | Flash Platform

That’s right. It has been a long road but we have finally made it to the end. “Mike Potter has a good post about the release”:https://weblogs.macromedia.com/flexteam/archives/2008/02/its_on_-_flex_3.cfm so I won’t go on and on but this is an AMAZING RELEASE for the Flex community and AIR is a great release for the world, IMO. We are on the brink of a new age, potentially. Let’s see where we go from here. 🙂

ENJOY!

“Buy Flex 3”:https://www.adobe.com/go/flex
“Download AIR”:https://www.adobe.com/go/air

Flex 3: Dynamically Changing Styles

by John C. Bland II | Feb 15, 2008 | Flash Platform

Unfortunately I can’t share the link I have to showcase this but I will share the code used to do it. This is remarkably simple to do.

First, you should know it isn’t as easy as writing CSS and pointing some class source path to the CSS file online. There is only 1 other step you need to perform.

**The Setup Steps**
# In your project, create your CSS (if not already available) to your hearts content.
# Right click on your CSS file in the Flex Navigator. You will see _Compile CSS to SWF_ in the context menu, click it. Your CSS file will be compiled into a loadable “style” swf.
# Upload the “style” swf to some url.

**The Code**
Now that your “style” is created you merely have to tell Flex to load it. There is a delay since the style swf has to be loaded so be mindful.

# Import mx.styles.StyleManager, if needed.
# Add an event listener to your mx:Application (“creationComplete or applicationComplete”:https://www.johncblandii.com/2008/02/flex-3-mxapplicationapplicatio.html). For our purposes this second let’s call it _init()_.
# In _init()_ add the following code: StyleManager.loadStyleDeclarations(“path to your style swf”,true, true);

That’s it. No, seriously…that’s it. 🙂

There is 1 tid-bit you should know about. The natural thing to do is to then allow your app to change styles after the initial load. Well, not a problem. Use the same code and you’re good to go but there is a gotcha.

bq. StyleManager.unloadStyleDeclarations(“path to previously loaded swf”);

Calling that function will clear all of the previously selected styles. This way if the new style doesn’t fully cover the same styles used in the previous style you won’t see remnants of the old style hanging around (like a background image, etc).

Hope this helps.

FMS & AS3: NetConnection.client and NetStream.client

by John C. Bland II | Feb 14, 2008 | Flash Platform

Ok…I blogged about this a bit ago and wanted to do a quick follow-up post. In the aforementioned post (always wanted to use that $10 word; lol) I pointed out how certain functions (onBWDone, onFCSubscribe, etc) are required in the current client so the server can call them, as needed.

So, the way to do it was to set the myNetConnection.client = this;. Well, that’s still very relavant but it has been SERIOUSLY irritating me on a cleanliness level. Here is why:

public function onBWDone(… rest):void{ … }

Can you tell why it is irritating? PUBLIC!! Now my media connection class has, what seems like, a new function added to the API. 🙁 That bites! I’m the only one writing code against it so it isn’t a big issue.

After a few weeks of doing my best to ignore my now public event handler I run across something in LiveDocs.

myNetConnection.client = new Object();

DUH! 🙂 I thought about it initially but I have each of those handlers dispatching events/making other calls so I didn’t want to mess with that. Seeing as you can say _new Object()_ that means you could say new MyCustomClient() and have it do whatever you want.

Bottom line: You don’t have to set the client property to this but you can set it to a “custom object” or a custom class. Just a quick tidbit.

Flex 3: mx:Application.applicationComplete vs creationComplete

by John C. Bland II | Feb 13, 2008 | Flash Platform

I’m working on a media player in Flex and I ran into an issue.

**Background**
When you click the “Fullscreen” button I change the label to “Exit Fullscreen” and vice versa when you click it again. If you use ESC key to return from fullscreen the label stays the same.

No problem right? I’ll add

bq. stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);

to my _init()_ function which is called from the _creationComplete_ and I’m done, right?

**Problem**
“_creationComplete”_:https://livedocs.adobe.com/labs/flex3/langref/mx/core/UIComponent.html#event:creationComplete – “Dispatched when the component has finished its construction, property processing, measuring, layout, and drawing.”

Basically, when _creationComplete_ is called the _stage_ object is _null_. Huh? Yep, that’s right…it is null.

**Solution**
I found a “blog post by Raghu”:https://raghuonflex.wordpress.com/2007/03/06/error-on-adding-fullscreenlistener-in-creationcomplete-handler/ where he talked about using the SystemManager. That seems really hack’sh (which he felt the same as well). He then pointed out a “blog post by Wietse Veenstra”:https://www.wietseveenstra.nl/blog/2007/02/12/understanding-the-flex-application-startup-event-order/ which shows the start-up order.

Bottom line, _applicationComplete_ is the event we should use for init’ing our application. _creationComplete_ should be used for init’ing children of the application, if needed.

Hopefully this will help someone as it has helped me. God bless the blogosphere! 😉

NetStream.pause(), .resume(), .togglePause()

by John C. Bland II | Feb 11, 2008 | Flash Platform

I’m thoroughly excited about seeing this in the docs. I’m converting the Limelight Media Player (built in AS2) to Flex 3 and my main connection class manages pausing, stopping, playing, etc. So, in AS2 you have NetStream.pause(value:Boolean). Passing false resumes and true pauses.

I noticed Flex Builder wouldn’t give me any code hints after typing “pause(” but would close the function for me. Hrmm…that’s odd. So, I let it go last week (had other things to focus on) and picked it up today only to find out there are 2 new methods introduced: resume() and togglePause(). SWEET! I had to build my own togglePause() function in my connection class which wasn’t hard but still…native is much greater.

The functions are self-explanatory but if you would like to read more you can see the full doc on LiveDocs.

NetStream.pause()
NetStream.resume()
NetStream.togglePause()

Maybe you don’t share my excitement but that is fine. 🙂 I’m happy to see progress in the API.

Quick Tip: StringUtil.substitute(str:String, … rest);

by John C. Bland II | Jan 31, 2008 | Flash Platform

I’ve been wanting to do this for a while but never got around to it (like numerous other things). I noticed this in the docs this week and got a bit excited.

If you have used languages like .NET, Java, etc you are probably familiar with something like (in .NET) String.format(“Hi, {0}. I like your {1}.”, “John”, “shoes”);. {0} turns into “John” and {1} into “shoes” which is nice because I could actually make the input string “Hi, {0}. I like your {1}. {0}, may I borrow them?” and it would replace all {0}’s with “John” and so forth.

Adobe snuck in a function to do the same exact thing. Here is an example from LIveDocs:

bq. StringUtil.substitute(“Hi, {0}. I like your {1}. {0}, may I borrow them?”, “John”, “shoes”);.

Kinda cool huh? This is VERY useful and helps keep down the need to concat (which can get ugly).

Just a quick tip…hope it helps.

Tip – mx:RemoteObject Method Arguments

by John C. Bland II | Jan 15, 2008 | Flash Platform

I’ve used this many times and it saves a good amount of typing and time. I also believe it cleans up your app a bit…let me explain what I’m talking about then I’ll explain why.

bq. <mx:RemoteObject id=”ro” endpoint=”https://localhost:8080/MyService/messagebroker/amf” destination=”blah” showBusyCursor=”true”
result=”handleResult(event)” fault=”handleFault(event)”>
<mx:method name=”getReportData”>
<mx:arguments>
<report>{report}</report>
<someID>{Number(myTextField.text)}</someID>
</mx:arguments>
</mx:method>
</mx:RemoteObject>

This code merely points to the MyService app running on localhost, which is powered by BlazeDS/Spring. I changed a few names because this is work stuff. So, MyService has a DAO (data access object) which returns appropriate data, etc. One of the methods, for this blog post at least (hehe), is named getReportData. It expects an argument named report_ of type ReportDTO (a data transfer object mapped to the appropriate Java class using [RemoteClass(alias=”…”)]) and a number named _someID_.

The big win here is the databinding. The report_ argument is bound to my _report_ variable which, elsewhere in the code, is bound to my form. _someID_ is bound the the value in _myTextField.text_. Using databinding is what speeds up your code and, in my opinion, cleans up your code.

In my mx:Script block I have a method called _getData()_. This method takes the seleted value of a combobox, which is the name of a function, and calls it. So, I have 1 method to kick off any one of my RemoteObject calls. Seeing as each one of my methods has a different method signature (namely _someID_ changes names) and I don’t want to update my Java code to make them the same I have created a perfect scenario to not even worry about the method signatures.

When you create an mx:method and specify all of the arguments through databinding you don’t have to pass them into your method when you invoke a call. Here is what I mean.

bq. ro.getReportData();

That’s it. Yes, _getReportData()_ requires 2 parameters and I passed 0. This is because I already have my values “registered” (bound) in the _mx:arguments_ node.

Sweet, huh? I love it. What? I need to validate my claim on speeding things up for you? Ok…I’m glad you feel this way.

Let’s say you have to call getReportData 10 times in your code. Each call has different data so you would probably create 10 different functions or an if (or switch) statement with 10 blocks. Each one would pretty much do the same thing: update the _report_ variable and call _getReportData(report, Number(myTextField.text))_. That is a whole lot of code duplication.

So, your next argument is: I’ll bind my form to the report object. Good. That’s what I did too. But…you still have to make 10 calls and pass in the arguments. Let’s say the method signature changes. You have to update your entire app to pass in a new variable. Using mx:method/mx:arguments means your entire app call merely calls _getReportData()_ and let’s the _RemoteObject_ worry about the arguments.

Ok…that’s my argument and I’ll do the lawyer thing of allowing myself a way out of this argument. **Disclaimer** This does not apply to ALL situations. 😉

Anyways…enough fun for now…it is 1:49 and I haven’t eaten lunch so I guess I’ll go grab some grub. Hopefully this helps someone.

Custom Metadata in Flex3

by John C. Bland II | Jan 8, 2008 | Flash Platform

This seems to not have received the amount of love it should have so I thought I would help get the word out.

Christophe has a solid blog post about using custom Metadata in AS3 classes. Most don’t understand you can use Reflection in AS3 to build some pretty sweet apps. I used Reflection in an app last year and it was really a sweet way of inspecting my classes, deciding which to load, and a few other goodies it helped me overcome. Basically, no more “if” statement for that specific app. Unfortunately it is an NDA app so I can’t speak on it. 🙁

“Read more on Christophe’s blog”:https://coenraets.org/blog/2007/10/annotating-actionscript-classes-with-custom-metadata-simple-orm-framework-for-air/.

“Read more on Reflection”:https://en.wikipedia.org/wiki/Computational_reflection.