Category Archives: Uncategorized

Is it a Flex SWF?

Recently, someone asked me if there was a way to tell if a SWF was created with Flex or not. After all, there are some non-Flex frameworks for building Flash/AIR SWFs, and the very first SWF application I ever saw that had a form to fill out was built with Adobe Flash Professional.

The answer is yes, assuming you can get your hands on the SWF. All Flex SDKs (Apache or Adobe) ship with a tool called swfdump. If you run “swfdump -abc myswf.swf > myswf.txt” you’ll get a huge pile of output in myswf.txt. Then if you open it in an editor, you can search for things like “SystemManager” and “UIComponent” and other Flex classes.

Note: You may also notice in myswf.txt that there is metadata in “RDF” format in a SWF that seems to indicate that the SWF was built with Flex. But it turns out the Flex SDK compilers will inject that metadata in every SWF regardless of whether you used the Flex SDK or some other framework or no framework at all.

Flex App Hung?

I finally decided to post about the most common reason your Flex app hangs and stops responding: invalidation/validation loops.

Flex has a LayoutManager that has 3 phases for processing the properties, size and visuals for each component. When a property is changed on a component, the component is supposed to notify that LayoutManager that a property has changed, and potentially that the size of the component has changed as a result, and potentially that the component needs to be redrawn. The component does so by calling one or more of invalidateProperties(), invalidateSize() and invalidateDisplayList(). The LayoutManager builds a queue of components that need validation, but generally does not validate the components right away. This allows related properties like width and height, or fontSIze and fontFamily to be changed but only result in one update of the display list.

Later, the LayoutManager will go through its queues and call validateProperties() on all components in the queue that had called invalidateProperties() (which could cause other components to call invalidateProperties() and end up in the queue), then when all component’s properties have been validated, it will call validateSize() on all components that have called invalidateSize() and finally, call validateDisplayList() on all components that have called invalidateDisplayList(). Then before exiting, the LayoutManager will check again for things in the queues that might have been invalidated during validation. If it didn’t do that, sometimes your display list would end up in an incomplete state at render time.

A call to validateProperties results in a call to the component’s commitProperties() method. A call to validateSize() results in a call to measure() unless the width and height of the component are set, and a call to validateDisplayList() results in a call to updateDisplayList().

If you think about it, you can see that if, in the measure() or updateDisplayList() calls you end up accidentally calling invalidateProperties(), invalidateSize() or invalidateDisplayList() on the wrong components, those components will keep ending up in the queue and the LayoutManager will never finish.

This usually happens when the measurements for a component are not “stable”. If the component reports measurements based on its current size, then a intentional increase in size might cause it to report a bigger size which would cause it to be given a larger size and thus report an even bigger size and so on.

To find out if you are in such a loop, set a breakpoint on LayoutManager doPhasedInstantiation(). In a good app, there will be a bunch of calls to doPhasedInstantiation(), but once everything is validated, there won’t be any more calls until the screen needs updating due to user interaction or data coming in over the network and being displayed.

If doPhasedInstantation() is being called over and over and over again, the next step is to set a breakpoint in invalidateProperties(), invalidateSize(), and invalidateDisplayList() and see if the same set of components keeps getting invalidated. Somewhere in that set is the culprit. It is pain staking work, unfortunately.

If you know how to monkey patch, you can uncomment the trace statements in LayoutManager and get a dump of its activity and look for repeats.

But even then, it comes down to debugging the logic of that component or set of components and understand why they keep invalidating themselves.

HTH,
-Alex

FlexJS Mobile

Recently, Peter put together a FlexJS app that did a relatively simple thing: it took a picture with a device’s camera and displayed it in the app.  What was cool about it is that it proved we can lightly wrap Apache Cordova plug-ins and use them in FlexJS apps.  Cordova looks like it can be the platform abstraction layer for FlexJS allowing you to create mobile apps in MXML and ActionScript that run in many more mobile devices than just Android and IOS.  The potential upside is that use of MXML and ActionScript will make you more productive than writing code in JavaScript.

Over the last couple of days I adjusted the compiler to smooth out the workflow a bit, improved the AS emulation of the Cordova Camera plugin and got it working on my phone.  It will be part of my presentation and demo at the 360|Flex conference next week.  There’s still spots available if you can get to San Jose and see it in person.

You can try it yourself if you want.  It is the CordovaCameraExample in the flex-asjs repo.  We’ll ship it in a FlexJS 0.0.2 release shortly.

-Alex

FlexJS 0.0.1 released!

The Apache Flex community just approved the initial ‘alpha’ release of Apache FlexJS(tm) and the Apache Flex ‘FalconJX’ compiler that it uses.  This release has much improved integration with Flash Builder and might actually work with other IDEs like IntelliJ and FDT.

Apache FlexJS is a next-generation Flex SDK that enables developers to use MXML and ActionScript to not only create SWFs but also cross-compile the same MXML and ActionScript to HTML/JS/CSS so applications can run natively in browsers. The cross-compiled code can also be used in Apache Cordova (Adobe PhoneGap) mobile applications.

It is still an ‘alpha’ so expect lots of bugs and missing features, and it is not production-ready, but there should be enough there for you to get an idea of how it might work.  Feedback and suggestions are always welcome at the Apache Flex mailing list (dev@flex.apache.org) and bug base (https://issues.apache.org/jira/browse/FLEX/).

A simple way to try these releases is to use a pre-release of the InstallApacheFlex 3.0 application which is available at the following url: https://dist.apache.org/repos/dist/dev/flex/installer/3.0/rc7/binaries/

Choose Apache FlexJS 0.0.1 and it will create an Adobe Flash Builder-compatible SDK that uses the Falcon and FalconJX compilers to generate SWFs and HTML/JS/CSS output. See the README or the FlexJS wiki for more information. The FlexJS section of the wiki is at the following url: https://cwiki.apache.org/confluence/display/FLEX/FlexJS

Remember, this is open-source development the Apache Way.  You can contribute to the direction and development of FlexJS not only by trying the release and providing feedback, but also by writing code, tests, documentation and more and submitting those as patches through the bug base.

And if you want to discuss FlexJS with me in person, I’ll be at the 360|Flex conference in San Jose on May 15 and May 16.  I’m told there are still some tickets left so go to 360Flex.com and get yours and I’ll see you there.

-Alex

What Should I Talk About @ 360|Flex 2014?

John Wilker, the organizer of 360|Flex and 360|Stack and other conferences has been bugging me and some others about what we might talk about at 360|Flex 2014 (rumored to be in the Bay Area in May).

For sure, I’ll do a presentation on FlexJS.  But I thought I’d see if there are any other topics folks would like to hear about, specifically, topics that would make you buy a ticket to come to the conference.

I could do a session on Flash Builder Profiler usage.  I could do a session on major performance problems I’ve found in customer’s apps.  I’ve never done this before, but I could try a “lab” session where you bring your app and your code and I’ll try to answer your questions about debugging and profiling.

Or, I could just set up a table somewhere when I’m not presenting and you can drop by and I’ll try to help you tune your app or solve some problem.

Anyway, ideas welcome!

-Alex