Communication between JavaScript and Flex applications can be done in many ways. Using SWFAddress and communicate with the help of the uri or using ExternalInterface flash communication interface are the most used.

The disadvantages of using SWFAddress is that the communication is slow and it had to change the uri, which is not always something the developer needs. In general the the Flex application listens for uri changes, simply by setting a timeout for a listener with very short period of time, like 10 milliseconds, and if some change occurs get’s the uri, parses it and process the changes.

From the beginning the hard-coded listening of the uri change is not a good idea. Even for very short timeouts it become risky when the user can click and skip an important refresh inside the flex application.

I strongly recommend the use of the build in ExternalInterface. The communication via ExternalInterface can be done in both directions to JavaScript to Flex and vice versa, which is the main advantage is the lack of programmatically added listening processes. Here all it’s done by the interface and the response from the other side is guaranteed.

There are tricky parts, of course, but in general it’s a secure and reliable way to talk between these two technologies.

A sample of the process you can find here.

Recently I had to make a drop down menu in a Flex Application, or either ComboBox in the Flex terminology, where some of the items in it should be disabled. Many tutorials explained how to make the entire ComboBox disabled, but that was out of scope here.The idea is to have a large range, let’s say the numbers from 1 to 30, and make 1 to 10 disabled, and the others – selectable. After reading the documentation of Adobe it appears that this is not possible with just using some attribute of the default component.

Of course in the case of only three you can make it with radio buttons or checkboxes. Here after the question how to write such a component, the answer is:

Have you considered using radio buttons rather than a combo box?

Well, no, I’m not! I’d like to make it for such a big range. In my case it was more than 200 options, the case with radio buttons is not enough.

Finally I found a sample of a disabled list items on http://joshblog.net but yet again it was dealing with list, not a combo box. In my case the combo box has very important built in events and fires different kind of them in any special situation. That’s why I don’t think this sample could do the work.

Actually as it seems easy and usefull, almost nowhere there was such a component. In Adobe’s blogs I found interesting post http://blogs.adobe.com/aharui/2007/06/disabling_list_selection.html where the author describes how to make a list with that properties, and somewhere in the comments I found the component at last:

If you’d like to embed a .swf file into your Flex 3 application you’ll probably get into several little problems. The simple task of embedding is clear and well documented in the web. Let’s assume we’ve to MovieClip symbols into a single .swf file. What we like to do is to access this two separate symbols within the Flex applications as MovieClip.

Make the .swf sample file with both symbols inside. In general it’s not that hard, just put this into your Flex application code:

[Embed(source="embed.swf", symbol="blue")]
private var blue:Class;

[Embed(source="embed.swf, symbol="red")]
private var red:Class

Note that you’ve embed.swf file, which has to be in the same folder as the main .swf of the Flex app, and two symbols named red and blue for the sample. Be very careful when exporting the symbols from the .swf file. Do not forget to export them for actionscript.

If not exported like that, you’ll have trouble accessing them from the Flex app, and that’s the first problem you can have here.

The rest you have to do is to add this two lines of code in Flex:

var mc:MovieClip = new blue();
this.addChild(mc);

Note that the last line can have something else than ‘this’ if there’s other element to become parent of the imported MovieClip symbol. Here comes the first major problem. As www.airtightinteractive.com describes this technique does not work every time:

Sometimes when you do this you will get the following error:

TypeError: Error #1034: Type Coercion failed: cannot convert app_red@12510d1 to flash.display.MovieClip.

And the author shares his solution which is to add at least 2 keyframes for both movie clips, so that they can be visible as movie clips, if not they will remain visible only as Sprites.

I’m not as conviced this is the right answer of the question and the right solution. I’ve experimented with 1 or 2 keyframes and still have the same problem in Flex even if i cast the symbols as Sprite, not MovieClip:

var mc:MovieClip = new blue();
var mc:Sprite = new blue();

The solution from Adobes for me is not suficient, cause the movie clips we import (embed) does not serve as images but more like movie clips, which was the task from the beggining. And that’s what Adobe says:

Flex fully supports embedding Flash SWF files. You can embed different types of SWF files.
…
To reference a symbol, you specify the symbol parameter:
[Embed(source='SWFFileName.swf', symbol='symbolName')]

And again read carefully the note in the Adobe’s site:

Note: Flash defines three types of
symbols: Button, MovieClip, and Graphic. You can embed Button and
MovieClip symbols in a Flex application, but you cannot embed a Graphic symbol because it cannot be exported for ActionScript.

Here you can be sure that lack of exported for actionscript symbol is not accessible in Flex.

One of the main solutions is to embed the .swf as octet-stream:

[Embed(source="embed.swf", mimeType="application/octet-stream")]
private var blue:Class;

followed by:

var loader:Loader = new Loader()
loader.loadBytes(new blue());

And the key point of this will be the lines:

var red:Class = loader.contentLoaderInfo.applicationDomain.getDefinition("blue");
var mc:MovieClip = new red() as MovieClip;

I hope this can help

Usefull information, about where exactly is the difference between pt, px, em and % can be found everywhere. And it may look like a quote from another site, cause there are a lot of posts on this theme, as you see: http://css.weblogsinc.com/2005/02/17/the-difference-between-px-pt-and-em/

Many people would argue about the usage of px, pt and em when it comes to font sizes and line heights. In short they do all have to do with font-sizes and line-heights, however, they’re used in very different ways.

Writing CSS at first look may look easy, but finally estimates as difficult task, and producing a quality, elegant CSS markup is event more difficult.

I don’t know why but a very interesting part in the web forum (space) is which one is more useful?

I would like to know which ones best px, pt, or em?

http://www.webmasterworld.com/forum83/5272.htm

This is not the right question! There is not such a thing like right and wrong here. Speaking for CSS techniques is not the same as giving any value for some of them.There is not good and bad when it comes to CSS megurement units.

One of the hardest parts in the front end development is the size of the DOM elements. Almost every developer has spend hours to resize something in proportion, which should always be independent of the screen resolution and be “perfect for every screen”. The easyest thing is to fix everything with a fixed unit.

Fixed units are both px and pt, which stand for pixels and points. There are differences – but not as much. Pixels are, as anybody knows, the pixels on the screen. And almost everybody sets the width, height in pixels. It’s the easy way. In a standard of 72 dpi (dots per inch), 10 pixels is something which every web developer, respectively web designer knows as 10 pixels. (The forumla to convert pixels to real points over the screen is not difficult but it doesn’t matter). In the case of points – points are used. Both web developers and print designers know what are point.

An simple example of printing media working with points as unit is the printer next to you.

We all know what are 1024×768, 1280×800, 800×600 … etc. Of course working for such a business like the Internet area, which is a complete jungle, you may not expect everybody to be with exact the same resolution and hopefully same browser!

And what happens if some clever user puts several (in the average case 11) toolbars in his browser!? There we go … Don’t explain me more, I just want to put it all in pixels. That’s the most often answer.

When it comes to the mysterious “em”, the things are going even more unclear and not well known. And all that because it comes for proportional sizes.

The % units are used in CSS to describe the size of an element to be relative to the size of the parent element. An example in that case if the body and/or html tags has width of 100%, that means the body with be exactly the white space of the browser. Not the monitor rezolution. It is natural to suppose that the browser is 100% for the body and html tags.

From here the things are going more clearly. If we have a div with 400px of width, an inner div with 100% will be exactly 400px wide. If a 25% width is set so the width of the element in pixels will be 100.

So far so good. Now comes the question, what’s an em? em is an unit which derives from the size of the font of the parent element. If the body font-size is set to 20px, 1em will be 20px. Naturally 2em will be 40px. To be more precise you can set something like 1.203em which will be something above 20px. Note that you can use up to 3 digits after the point, but no more. If you have 20px font-size of the body, but a 15px font-size of a particular div element, every em unit inside the div will be relative to that 15px size.

Of course you can set width / height of a div in em unit, but again it will be calculated relative to the font-size. If you have 10 em width of a div inside the body which is with 20px font-size, the width of the div in pixels will be 200.

It can be really elastic to work in em, but it’s again the more difficult. There are lots of formulas how to calculate ems in pixels.

Bugs and differences between the browsers don’t miss. I’ll be writing more on browser differences with the em unit. Now you can note that Opera has a problem with em size above 20.47, as the famous PPK sais in: http://www.quirksmode.org/bugreports/archives/2005/03/Opera_problem_with_em_values_greater_than_2047em.html

Sometimes called elastic layout you can find interesting article here:

This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.

The w3schools describe more accurately the em unit comparing with the others on:  http://www.w3schools.com/css/css_units.asp:

1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ‘em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

Finally explained with the amazing em effect article I recommend this one: http://www.w3.org/WAI/GL/css2em.htm

I’ll put this brilliant CSS talk on Yahoo! and for sure will reference it lots of times again in my post. Everyone interested in CSS is encouraged to see it.