10 wishes for the Flex ecosystem

Half way to Christmas, it’s about time to express your wishes… I wanted to list my more or less realistic wishes for the Flex world. Before we start, I also want to mention that the Flex eco-system has already made many, many wishes become true. To underline this with a current example, Flash Player 10 brings real text editing capabilities, loading files directly into the player or a simple typed array called ‘vector’.

1. Flash Player: HTTP service

This is on top of the list. In a RESTful world, a basically non-functioning HTTP service is just not bearable. I hope that Silverlight puts some heat on this issue.

2. Flash Player: Cache swf on client

Actually, that’s a security question. Because data transmitted over SSL does only get cached in memory (at least for Firefox), the entire application is downloaded after every restart of the browser. The only way around this massive penalty of start-up time is dropping the secure transmission.

The swz-files of the framework show that the technology in the Flash Player is ready. However, I also do not have an answer on how to sign only the good guy’s files. But hey, this is about wishes!

3. Flex Builder: Refactoring

Refactoring in Flex Builder compared to Java refactoring is far behind. For instance, moving a file into another namespace is just pure hand craft.

4. Flex Builder: Collapse license information

This is a “quick win”: Hide all legal stuff from the developer, like in Java. Because this is so easy, let’s add collapsing imports and a @SuppressWarning in the quick fix.

5. Compiler: Runtime compiler

Well, I have just found As3Eval what appears to be exactly the thing I’m looking for. Let me dive into this library before I express any wish. In the mean time, +1 for compile time.

6. Compiler: Mock objects

Drew Bourne made a fabulous job with mock-as3. I use it on daily basis. However, he also states the limit: For a non-trivial interfaces and classes creating these stubs manually is a pain in… To solve this, you either have to tweak the compiler or wish number 5 gets satisfied.

7. Community: Functional and integration test

While code coverage is with Flexcover on its way, functional testing in general is not yet very well developed. As little as I know about Mercury QuickText Professional, it smells like an old-fashioned, big, clunky, over-priced software piece. FunFx is neat and VisualFlexUnit is another try at testing visual components.

8. Community: Serious build tool

Adobe offers Ant. This is basically a fine choice because Ant integrates well with Eclipse and continuous integration servers. By no means am I an Ant expert, but it does not seem to be that difficult to create some reliable tasks for compiling. However, you rather stay away from Adobe’s implementation.

Antennae is better but it does not support modules and is generally overcomplicated. However, we use the filter functionality for unit tests. It’s very handy.

9. Community: Framework

Tony Hillerson has summed it up nicely. We currently use our own framework that has grown out of Cairngorm. Basically, we replaced the singletons with injected objects and added to the controller the ability to declare parallel commands. However, using a home-brewed framework is just not right.

10. Community: ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

Skip this nasty ; at the end of line! It’s just visual clutter with no advantage.

Free Flex component: EditImage 0.3

Demo / Source

Just an other alpha release of EditImage with some work in it:

• Introduced interfaces for EditImage and the tools
• Quite frequently, I use EditImage as an image display and non of the tools are needed. That is the reason I disabled all tools by default. They are not initialized until a tool is enabled.
• Squashed some bugs like correct resizing of EditImage and positions of cursor
• More refactoring and more API documentation
• First unit tests added but many more needed
• EditImage.swc, API documentation (/tmp/ant-doc/index.html) and link-report (/tmp/ant-swf/EditImageReport.html) included in EditImage.zip

What is still on the wish list?

• As reported by Gireesh, when snap to top/left is disabled, the image can be move to any position on the screen.
• More refactoring
• Plug in new tools such as adding shapes, drawing with a pencil, adding text

Image editing component in Flex, Updated

There is an update of the component.

I found some more time to update EditImage. What’s now in the component?

1. Cropping including constrains to size ratio and minimal height and width.
2. Scaling including constrains to size ratio
3. Rotating including constrains to steps. Rotating snaps to 0 degrees and a multiple of a defined value. It does not step through the angle with a fixed value disregarding of the starting angle like 3.456 degrees.
4. Snap to the initial top left position.
5. Serialize the sum of the transformations so you can store and retrieve the image edits.
6. Reset the image to the original image dimension and orientation
7. Reset image transformations to last set state.
8. Source code is under the BSD license. Some icons are under LGPL.

What’s missing?

1. No single test has been written.
2. More documentation
3. There are some low hanging fruits for performance improvements.
4. Provide user feedback when hitting limits.
5. Visual frames for picture

Have fun and report bugs.

Image editing component in Flex: EditImage

There is an update of the component.

I needed a simple image manipulation tool, similar to the one in Word. As I may want to use it in commercial products, the license is of importance. Here are the three options I found:

TransformManager

Jack Doyle has written the TransformManager component. On his blog, you also find some interesting image effects. Unfortunately, he excludes commercial use without explicit permission in his license.

ObjectHandles

Marc Hughes published ObjectHandles. It works just fine and it is under the MIT license. I might use it somewhen but the next component was just a better fit:

TransformTool

TransformTool has been hacked by Trevor McCauley and extended by Alessandro Crugnola. Trevor’s license is found in the About section and says All source files and downloads on this site are completely free to use any way you see fit for personal or commercial use. They are provided as is with no guarantee or warranty and are to be used at your own risk. I guess this allows the BSD license. Alessandro agreed by mail.

With about 80 private variables and a whopping 1′790 lines of code, TransformTool.as implements most of the functionality. I started refactoring this class at first but I haven’t finished it yet. Before we go into the details, here is the Demo and the Source see Update.

What’s new in EditImage?

1. Cropping including constrains to size ratio
2. Serialize the sum of the transformations so you can store and retrieve the image edits.
3. Reset the image to the original image dimension and orientation
4. Reset image transformations to last set state.
5. If rotated, controls are rotated as well
6. Rotate snaps to 0 degrees and a multiple of a defined value. It does not step through the angle with a fixed value disregarding of the starting angle like 3.456 degrees.
7. Snap to the initial top left position.
8. Refactored the different tools like scaling and cropping into their own package.
9. Minimal height and width for cropping.
10. Removed things I don’t need like registration point or skewing.
11. It is under the BSD license.

What’s missing?

1. This is a prototype, not a production-ready component!
2. No single test has been written.
3. Further clean up of code including documentation.
4. I have not yet touched the cursors. They currently don’t work at all.
5. Hunting some more bugs like reseting sometimes confuses the orientation of the controls.
6. Provide user feedback when hitting limits.

Build your own Feed of Adobe Wiki

The wiki of Adobe Open Source offers a “RSS feed builder” in which you can specify what is pulled into your feed. For instance, you can focus on the “Flex SDK” space and get all the news about Flex 4. This seems to include all change notifications of the build server (which is nicely called “Build Meister”).

I could not find the link to builder in the wiki, so here it is.

What you should know about DisplayObject’s mask and scrollRect

While adding cropping to an image editing component, I had to learn a few things about displayObject.mask and displayObject.scrollRect:

1. mask and scrollRect are mutually exclusive: You cannot use both at the same time.
2. Grant Skinner has got a nice introduction into scrollRect.
3. Mask can have any form. Andrew Trice features a nice bundle of samples.
4. ScrollRect is of type Rectangle and hence, the form is always a rectangle.
5. Mask does not change the size of the displayObject.
6. ScrollRect does change the size. Ticore Shih has got the examples.
7. There is a catch with 6. While scrollRect does change the size, you cannot know when this will happen, really! It might be suitable for a random number generator. UIComponent.calllater() does not bring you anywhere.
   It has been reported as a bug in FP-177 just two weeks ago. Though I am not sure what FP 9.2 Code Complete means and the comment is somewhat unclear to me.
8. The workaround is either using the dimension of scrollRect or redrawing the DisplayObject as described by Ticore. (At least the code shows it; I don’t exactly know what he says in Chinese…)

IE7 + SSL + XML? = Flex “Error #2032: Stream Error”

I’m developing a Flex application that runs smoothly in Firefox over SSL. Today, I just wanted to verify whether Internet Explorer 7 (IE7) hosts the application as nicely. Somehow, I wasn’t surprised that the Microsoft browser invoked an “Error #2032: Stream Error”.

Don’t assume, test!

Searching brought me to judah’s blog, but the blog is only about URL paths. Because the application runs in Firefox and in non-SSL mode in IE7, this was not causing my problem. However, some comments on judad’s blog and on this blog were interesting: An Adobe TechNote warns of this issue. However, the note was last updated in 2005 what meant that it could not relate to IE7. I also found a Microsoft bug report describing the issue but it only links the bug to IE5 and below. The assumption that Microsoft has corrected this bug since 2005 was probably my biggest mistake in this hole story.

The search could go on. Barton has some nice input and proposes to tamper the HTTP header: remove Pragma and set Cache-Control: no-store. So I did and checked the HTTP headers in the SSL connection with Wireshark (which is also quite bogus for decrypting SSL packets, at least 1.0.0). This made the whole thing running. And in details:

Works:

1. Cache-Control: no-store
2. Cache-Control: no-store, must-revalidate
3. Cache-Control: no-store,max-age=0,must-revalidate
4. Cache-Control: max-age=0,must-revalidate
5. Cache-Control: must-revalidate

Does not work:

1. Pragma: no-cache <+whatever header like Cache-control: no-store>
2. Cache-control: no-cache
3. Cache-control: no-cache, must-revalidate
4. Cache-control: no-cache,<+whatever>
5. <empty = no Cache-control at all>

Controlling Cache-Control

In Firefox, you can check the content of the cache by entering about:cache in the URL. You will notice that Firefox caches all data coming from an SSL connection in memory. Hence, closing a tab does not delete the data but a restart of Firefox does.

IE7 caches data coming from SSL normally to the disk. The HTTP header Cache-Control: no-store prevents this default behaviour. Unfortunately, I don’t know a similar command like about:cache in IE7, so haven’t investigated the exact caching behaviour. Cache stored on the disk can be checked with “Tools menu > Internet Options > General Tab > Browsing History section > Settings Button >View Files button” but I don’t know how to see the cache in the memory.

From “drawRoundRect to Modules to link-reports to SDK-9485″ or Hunting a known bug without knowing

When I recently deployed an application to the server, I got this lovely error message that is easily worth a few hours:

ArgumentError: Error #2004: One of the parameters is invalid.
at flash.display::Graphics/drawRoundRect()
at mx.skins::ProgrammaticSkin/drawRoundRect()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\skins\ProgrammaticSkin.as:745]
at mx.skins.halo::ButtonSkin/updateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\skins\halo\ButtonSkin.as:217]
at mx.skins::ProgrammaticSkin/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\skins\ProgrammaticSkin.as:421]
at mx.managers::LayoutManager/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:602]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:675]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8460]
at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8403]

It came from a loaded Module and only appeared on the server. While debugging, all went smoothly. So first I found out that it appeared only in the remote sandbox (though I still don’t know why, any suggestions?). Then, the Module was somewhat suspicious, so I dived into ApplicationDomains, SecurityDomains and the like. Besides the docs and forums, Alex Harui has a few nice images in a presentation and Roger Gonzalez posts where also helpful. After all, this was not the point.

Getting closer

The second difference between the debug- and the deployed application was that I linked in FlexSpy. This meant that for example ColorPicker or ComboBox were already sitting in ApplicationDomain.currentDomain.

Ok, lets have a look a the different link-reports and hey, there was a difference: “mx/skins/halo/ColorPickerSkin” and “_ColorPickerStyle.as” were missing in the Module! The second hit of Googling “flex module halo” brings you to the Flex release notes. There, I “happily” discovered bug SDK-9485 that states… well, read it yourself but afterwards put the following in your CSS:

ColorPicker
{
upSkin: ClassReference(”mx.skins.halo.ColorPickerSkin”);
overSkin: ClassReference(”mx.skins.halo.ColorPickerSkin”);
downSkin: ClassReference(”mx.skins.halo.ColorPickerSkin”);
disabledSkin: ClassReference(”mx.skins.halo.ColorPickerSkin”);
}

ComboBox
{
upSkin: ClassReference(”mx.skins.halo.ComboBoxArrowSkin”);
overSkin: ClassReference(”mx.skins.halo.ComboBoxArrowSkin”);
downSkin: ClassReference(”mx.skins.halo.ComboBoxArrowSkin”);
disabledSkin: ClassReference(”mx.skins.halo.ComboBoxArrowSkin”);
}

The End

The moral of the story is that first, I hope that you save time with this post. And second, that I really don’t like computers!

HTTPService to an URI is a toy

If you don’t use Adobe LifeCycle blabla, you set httpService.useProxy = false. This has the following implication on HTTPService:

• The property method allows only GET and POST.
• The property headers has no influence. This means that caching depends on the implementation of the browser and it is at no control of the programmer. You guessed it that IE brings all the trouble.
• The method setCredentials becomes useless. HTTP Basic authentication can’t be handled automatically by Flex. The browser needs to ask the user for the credentials.
• 20x HTTP Status arrive fine but the rest are always 50x! Forget about 404, 401, etc

Unfortunately, the source of HTTPService is not released. But hey, why would you use HTTPService if there is an alternative? You could easily write your own socket for the HTTP protocol. For example, Abdul Qabiz has written some nice classes in AS3HTTPclient. It features:

1. Standard or custom HTTP headers. Besides controlling caching, this enables HTTP Basic Authentication without any browser window. Note that you need to replace the Base64 class with a working one.
2. HTTP Status messages
3. Copying bytes like uploading files

Even though Flash does not offer any built-in support for SSL, Adbul plans to add it. I’m not sure whether I will want to use a home brew SSL instead of the implementation of the browser. First, the browser has been tested extremely thoroughly and second for performance reasons. I will check again once it’s out.

Beauty Contest between Red5, Wowza and Adobe LiveCycle…

Beauty contests are a matter of taste. Also take the points below as such. I’m only stating my judgment for my needs. Apropos needs, I assemble a Flex/Air application that draws its data from a server. The format of the data is mostly strings and XML but also video, audio and proprietary file formats such as doc, xls, pdf, etc. So, which server suits my application best?

Adobe LiveCycle Data Services Enterprise Suite

Who ever made up this name, he was stoned - really! Because this contest is about beauty, the name alone would already disqualify the nominee. However, the real killer comes from the price. I suspect that the same person that created the name also set the prices. When you see after a search odyssey these prices, you skip to the next option.

To be fair, I should add that Adobe clearly targets the enterprise world and not small and medium-sized businesses, let alone the geek ‘market’. If you happily spend more than 50′000$ for e.g. a single Oracle database, go for the Adobe Liveblabla.

Wowza Media Server Pro

Functionally spoken, this server is a clone of the Flash Media Server: It’s focused on streaming data. Everything implemented is done in a way I like (this doesn’t imply that it’s best). It starts with a clear and clean file structure. I also appreciate the straight posting of the product prices.

Getting to the server code, documentation and forum is a real pain. The sign up for the free license and the forum is ridiculously tedious. What do you need the address for? Once you’re through, documentation and in particularly the forum are very useful. The support of Charlie in the forum is world class. He is very responsive and knowledgeable what you can verify yourself in the forum. In my opinion, they should point potential customer more to this unique selling point. However, since I’m used to browse the source of Red5, I have missed this many times with the Wowza server. I don’t like to program against a black box. This is 90′. Another point is that phrases in the sense of “it’s like in FMS” should be banned. I don’t learn first FMS when I want to use Wowza.

Basically, Wowza does not support Flex. They also don’t advertise it. This means that RemoteObject or RemoteClass are not supported. Communication is only over AMF0 because AMF3 is not yet implemented. I also miss some details useful in the Flex world, for example there’s no helper method for XML. Another interesting aspect is that Wowza and Red5 leverage both the power of Apache Mina. I think Wowza handles the traffic without an off-the-shelf servlet container.

I few things are still unclear because I did not bump into the answer at first look: I was not able to find out how to create a SharedObject by the server or whether something similar to ISharedObjectSecurity is available. What about the Red5 rooms? The virtual hosts do certainly not replace the room concept of Red5. Keep in mind that all those questions asked on the forum, I would have the answers within a few hours. Again, I love this service and eventually, it might turn me into a paying customer.

Wowza offers a customized Eclipse IDE that helps you getting off the ground. Unfortunately, this is also optimized for the Flash folks. Because I have already an Eclipse installation for Java, Flex, Scala, etc, I’d get a second Eclipse…grumblegrumble.

Red5

Being under the LGPL, Red5 is our only open source candidate what gives the project a bonus. Red5 is wired together with Spring, leverages Mina for low-level network stuff and takes advantage of quite a number of other libraries. Generally, it feels a bit cluttered. Let’s take the spring configuration as an example: You find four packed configuration files for the Red5 part. On top of this, you find in the files the alternative beans for the Tomcat container instead of Jetty.

Talking about Jetty, it’s definitely a project of my gusto. I perceive it as a focused project that simply does its job. Also in another context, it features some nice things. I have not done performance tests but Jetty might be slower than Tomcat. In a different setup, Jetty was not yet up to Tomcat. Does anybody have a solid comparison?

The architecture and the quality in general are fairly well, particularly when considering the number of current contributors to the core features of the server. There are very few and for this year, Joachim Bauch has done the bulk of the load. Even though this is not optimal, keep in mind that it’s open source and the situation might be even worse with Wowza. There are many others that update the samples, configuration or give some answers in the forum. However, the forum is not as useful as the one of Wowza.

Recently, a few examples for Flex have been added to the samples. Also a first implementation of RemoteObject is done but not yet ready for prime time. It seems that they have paid more attention to the Flex crowd recently (everything done for Flash?). Concerning tests, there are 20-30 unit tests what certainly leaves room for improvement.

Bottom line

There are many more solutions to consider: I haven’t looked at WebOrb, OpenAMF, GraniteDS and the other servers that do not support Java. Some of them are  RubyAMF, AMfPHP, PHPObject, SabreAMF, DjangoAMF and more.

For the moment, Wowza fits best my needs for real time stuff and I will try to combine it with my Scala code. For data exchange, I use good old HTTPService. “good old” relates to HTTP not HTTPService as the Flex class is very restricted in features. More about that in another blog.