To reiterate, my small test app below suggests that developers must know the size of the content they are loading in SWFLoader in order for the scrollbars to appear around that loaded content.

When I think about it, it makes sense…at the same time it caught me by surprise when I first implemented it in an app. Hoping this piece of info helps developers loading legacy or 3rd party SWFs they don’t have control over.

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	minWidth="0"
	minHeight="0"
	creationComplete="init(event)"
	backgroundColor="#FF0000"
	>

	<fx:Script>
		<![CDATA[
			import mx.containers.Canvas;
			import mx.controls.SWFLoader;
			import mx.events.FlexEvent;

			protected function init(event:FlexEvent):void
			{
				var swfLoaderContainer:Canvas = new Canvas();
				swfLoaderContainer.percentWidth = 100;
				swfLoaderContainer.percentHeight = 100;
				this.addElement(swfLoaderContainer);

				var swfLoader:SWFLoader = new SWFLoader();
				swfLoader.width = 1200; // does not add scroll bar
				swfLoader.height = 800; // does not add scroll bar
//				swfLoader.percentWidth = 100; // DOES NOT add scroll bar
//				swfLoader.percentHeight = 100; // DOES NOT add scroll bar
				swfLoader.scaleContent = false;
				swfLoaderContainer.addElement(swfLoader);

				var context:LoaderContext = new LoaderContext(false, new ApplicationDomain());
				swfLoader.loaderContext = context;
				swfLoader.load("SWFToLoad.swf");
			}

		]]>
	</fx:Script>

</s:Application>

Tweet This Post

NOTE: Using Flash Builder Burrito and Flex Hero 4.5 — haven’t tested to see if this was the previous issue or not but I wanted to make note of it.

This seems to make embedded fonts play nice in both MX and Spark components in almost every situation. The one I couldn’t seem to get around was mx:Legend.

When I embedded a font and used this compiler setting, I would randomly see only a couple of my legend labels show up. However, by using just a small piece of my old workaround I was soon back in business.

NOTE: There is one rather large drawback to this though…you have to embed your font twice — once for Spark and once for MX.

Your css should look something like this:

/********************************************************
/ Fonts
/*******************************************************/
@font-face
{
	src: url("/resources/font/MyriadPro-Regular.otf");
	font-family: SparkEmbeddedFont;
	font-weight: normal;
	embed-as-cff: true;
}

@font-face
{
	src: url("/resources/font/MyriadPro-Bold.otf");
	font-family: SparkEmbeddedFont;
	font-weight: bold;
	embed-as-cff: true;
}

/********************************************************
/ NOTE: Due to an issue with the legend and embedded
/ fonts we need to embed the font as non cff too.
/*******************************************************/
@font-face
{
	src: url("/resources/font/MyriadPro-Regular.otf");
	font-family: MXEmbeddedFont;
	font-weight: normal;
	embed-as-cff: false;
}

@font-face
{
	src: url("/resources/font/MyriadPro-Bold.otf");
	font-family: MXEmbeddedFont;
	font-weight: bold;
	embed-as-cff: false;
}

/************************************************************
/ Flex Class-Level Styles
/************************************************************/
s|Application
{
	font-family: SparkEmbeddedFont;
	color: #000000;
}

mx|LegendItem, mx|PieSeries
{
	font-family: MXEmbeddedFont;
	font-size: 12;
	textFieldClass: ClassReference("mx.core.UITextField");
}

Tweet This Post

So I created a simple PoC with a ModuleLoader and it did indeed pick up on the main apps styles as expected. Next I changed my PoC to resemble the client’s architecture a bit more and used a ModuleManager to load the module — low and behold, the module didn’t inherit the main app’s styles.

After some reading on Adobe’s docs I found the following as the key fix:

Using the ModuleManager class to load modules

You can use the ModuleManager class to load the module. This technique is less abstract than using the tag, but it does provide you with greater control over how and when the module is loaded.

To use the ModuleManager to load a module in ActionScript:

1. Get a reference to the module’s IModuleInfo interface by using the ModuleManager getModule() method.
2. Call the interface’s load() method.

The application that loads the module should pass in its moduleFactory property. This lets the module know who its parent style manager is. When using the load() method, you can specify the application’s moduleFactory with the fourth parameter, as the following example shows:

info.load(null, null, null, moduleFactory);

3. Use the factory property of the interface to call the create() method and cast the return value as the module’s class. If you are adding the module to a container, you can cast the return value as an IVisualElement (for Spark containers) or a DisplayObject (for MX containers) so that they can be added to the display list.

So the key is passing in a reference to the moduleFactory when calling the ModuleManager.load() method. The 4th parameter is the moduleManager. If you don’t have a reference the main app lying around, just use:

info.load(null, null, null, FlexGlobals.topLevelApplication.moduleFactory);

Link to Adobe’s Docs on this.

Tweet This Post

Instead of writing our own Ant build tutorial series for Flex, we’d like to push you to Jon Campos’s tutorials:

January 7th, 2010 - Using ANT to build an Application
January 14th, 2010 - Building a Library with ANT
January 19th, 2010 - Building the HTML Wrapper with ANT
January 20th, 2010 - Building a Custom HTML Wrapper with ANT
January 21st, 2010 - Including Assets Files with ANT
January 26th, 2010 - Building a Library and Application with ANT
January 28th, 2010 - Building ASDocs with ANT
February 2nd, 2010 - Run Flex Unit Tests from ANT
February 4th, 2010 - Run FlexMonkey Tests from ANT
February 9th, 2010 - The Master Flex ANT File

Thanks for an awesome series Jon.

As a side note, if someone can convince me that mvn + flex is better/easier than ant by all means ping me. brianr@webappsolution.com

Tweet This Post

After bumping our heads against this about 8-9 months ago we decided to move on…I recently had to come back to it and found this helpful link that allowed me to do the following to get this working as expected.

UPDATE*: Added style for MX DataGrid.

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

@font-face
{
	src: url("/resources/fonts/Chalkboard.ttc");
	font-family: ChalkboardEmbedded;
	font-weight: normal;
	font-style: normal;
	embed-as-cff: true;
}

s|Application
{
	font-family: ChalkboardEmbedded;
	font-size: 12;
}

mx|global
{
	textFieldClass: ClassReference("mx.core.UIFTETextField");
}

mx|DataGrid
{
	defaultDataGridItemEditor: ClassReference("mx.controls.MXFTETextInput");
	defaultDataGridItemRenderer: ClassReference("mx.controls.dataGridClasses.FTEDataGridItemRenderer");
}

The class-level global style is what does the trick as it instructs all MX components using text fields to use the UIFTETextField class — it allows MX or Halo components to leverage CFF embedded fonts.

Run the app with those styles defined and you’ll notice that one component still doesn’t want to listen — the title of the Spark Panel (or at least that’s the only component I’ve run across so far that doesn’t work).

I tried defining the style for the Spark Panel specifically, but no dice. I also tried creating a new skin for the Spark Panel and set the fontFamily property of the titleDisplay to my embedded font of ChalkboardEmbedded and that also failed. Anyone else come up with a solution for this?

UPDATE*: This approach failed for the following MX classes:

• ProgressBar
• FormHeading

This approach failed for the following Spark classes:

• Panel

UPDATE*:I spoke to several Adobeans on the Flex Doc team and this is unfortunately a known issue:

This approach works for most components, but not Panel and a couple others (he identified Panel and ProgressBar in his blog). I suspect he found a bug. This whole thing about using the same embedded font in MX and Spark components was meant to be a temporary solution until Spark had parity with MX controls. A year and a half later, and there’s still no parity, so there’s no surprise that users are running into this.

Brian, I would ask him to submit a bug.

He can take a look at the spec: http://opensource.adobe.com/wiki/display/flexsdk/Font+Embedding+Reprise

That spec seems to indicate that Panel and ProgressBar should work the way it is documented.

Tweet This Post

/**
 * Allows this class to dispatch global events. Only methods using an
 * EventHandler metatadata tag with the property of scope="global" can
 * handle this event. This means other modules and even the shell application
 * can handle this event if we want.
 *
 * <p>
 * The event dispatcher is injected by Swiz due to the [Dispatcher] metadata
 * and the class member's type of IEventDispatcher.
 * </p>
 */
[Dispatcher(scope="global")]
public var globalDispatcher:IEventDispatcher;
...
public function sayHello():void
{
	logger.debug("sayHello");

	var appEvt:AppEvent;

	appEvt = new AppEvent(AppEvent.SAY_HELLO);
	appEvt.hello = "Hello World!";
    appEvt.topic = "wasiTopic";
	this.globalDispatcher.dispatchEvent(appEvt);
}

But the event handling is setup with a new, additional attribute called topicProperty.

public var myTopic:String = "wasiTopic";
...
[EventHandler(event="AppEvent.SAY_HELLO", properties="hello", scope="global", topicProperty="myTopic")]
public function helloWithTopic(hello:String):void
{
	logger.debug("hello = " + hello); // WORKS
}

This now allows the developer to set the member variable for the object doing the event handling at runtime. Internally in Swiz’s org.swizframework.utils.event.EventHandler’s method public function handleEvent( event:Event ):void we now look for the attribute “topic” and “topicProperty” in the EventHandler metadata. If the user has set the topicProperty, the method looks at the Bean that’s using EventHandler and inspects it for this String property and then compares it to the topic passed in the event. This requires some more changes to the Swiz class org.swizframework.utils.event.EventHandler.

Grab the changes I made to Swiz here.

Tweet This Post

UPDATE: Part 2 has Swiz framework code changes and a more robust solution.

If you don’t know about Swiz Event Scoping, then read on; otherwise, skip to the section labeled Filtering With Topics below.

Background

You can read the actual documentation from Swiz in the last link, but the gist is that you can tell Swiz to either broadcast events on a “global” level (using the highest level Application object) or on a “local” level (using the Module itself) and then listen to those events in the same fashion. This allows you to tell modules to listen to events only from themselves and not other modules (that might have the same events) or to listen to all events from your main, shell application and/or all other modules. Let’s look at a quick example by assuming the dispatching code is in LoginViewMediator and the handling code is in LoginController in a Module.

Local Event Dispatching

Local Event Dispatching From LoginViewMediator

/**
 * Allows this class to dispatch local events. Only methods using an
 * EventHandler metatadata tag with the property of scope="local" can
 * handle this event.
 *
 * <p>
 * The event dispatcher is injected by Swiz due to the [Dispatcher] metadata
 * and the class member's type of IEventDispatcher.
 * </p>
 */
[Dispatcher(scope="local")]
public var localDispatcher:IEventDispatcher;
...
public function login(userName:String, password:String):void
{
	logger.debug("login");

	var appEvt:AppEvent;

	appEvt = new AppEvent(AppEvent.SERVICE_LOGIN);
	appEvt.username = userName;
	appEvt.password = password;
	this.localDispatcher.dispatchEvent(appEvt);
}

Local Event Handling in LoginController

[EventHandler(event="AppEvent.SERVICE_LOGIN", properties="username, password", scope="local")]
public function login(username:String, password:String):void
{
	logger.debug("login: username = " + username + ", password = " + password);
}

If we had other Modules with this same EventHandler statement in their LoginController they would not fire because we specified the scope as local. If we change the scope property to global and the AppEvent is in a common library that all Modules can use, then they would each hear this event and all fire, which in many cases is not what you want. Just so we have a full understanding of what’s going on, let’s show an example of broadcasting global events in a similar fashion:

Global Event Dispatching

Global Event Dispatching From ModuleA

/**
 * Allows this class to dispatch global events. Only methods using an
 * EventHandler metatadata tag with the property of scope="global" can
 * handle this event. This means other modules and even the shell application
 * can handle this event if we want.
 *
 * <p>
 * The event dispatcher is injected by Swiz due to the [Dispatcher] metadata
 * and the class member's type of IEventDispatcher.
 * </p>
 */
[Dispatcher(scope="global")]
public var globalDispatcher:IEventDispatcher;
...
public function sayHello():void
{
	logger.debug("sayHello");

	var appEvt:AppEvent;

	appEvt = new AppEvent(AppEvent.SAY_HELLO);
	appEvt.hello = "Hello World!";
	this.globalDispatcher.dispatchEvent(appEvt);
}

Global Event Handling in Module B

[EventHandler(event="AppEvent.SAY_HELLO", properties="hello", scope="global")]
public function hello(hello:String):void
{
	logger.debug("hello = " + hello);
}

Filtering With Topics

Again, this is awesome…but what if you want to broadcast a message that you only want some of the modules to hear? You could obviously put in some simple logic in the event handler that determines if your Module was supposed to listen to the event based on a parameter passed in the EventHandler MetaData, but this could potentially become a large and unwieldy task that you’ll need to apply to all new modules…so what if we introduce filtering of Swiz events via a topic attribute in the EventHandler metadata and a corresponding topic property in our dispatched event?

To do this, we’ll need to do some quick monkey patching to Swiz (by creating the same package structure and adding the same classes we want to change that exist in the Swiz SWC). First, let’s add the topic property to the org.swizframework.metadata.EventHandlerMetadataTag. Add the topic property:

protected var _topic:String;
public function get topic():String
{
	return _topic;
}

Then add the following to the method override public function copyFrom( metadataTag:IMetadataTag ):void

if( hasArg( "topic" ) )
    _topic = getArg( "topic" ).value;

Next we’ll edit the method public function handleEvent( event:Event ):void in org.swizframework.utils.event.EventHandler. Add the following right after the first if() statement:

// look for a topic -- if the one exists in the EventHandler MeataData and
// the event does not have one or the value does not equal the EventHandler's
// then we'll filter out this event and not allow it
if(metadataTag.topic != null)
{
	if(event["topic"] == null)
	{
		return;
	}
	else if(event["topic"] != metadataTag.topic)
	{
		return;
	}
}

That’s it. Let’s give it a whirl by using a global dispatcher again, but adding a topic property to the event and a topic attribute to the EventHandler metadata.

Global Event Dispatching From ModuleA

/**
 * Allows this class to dispatch global events. Only methods using an
 * EventHandler metatadata tag with the property of scope="global" can
 * handle this event. This means other modules and even the shell application
 * can handle this event if we want.
 *
 * <p>
 * The event dispatcher is injected by Swiz due to the [Dispatcher] metadata
 * and the class member's type of IEventDispatcher.
 * </p>
 */
[Dispatcher(scope="global")]
public var globalDispatcher:IEventDispatcher;
...
public function sayHello():void
{
	logger.debug("sayHello");

	var appEvt:AppEvent;

	appEvt = new AppEvent(AppEvent.SAY_HELLO);
	appEvt.hello = "Hello World!";
        appEvt.topic = "wasiTopic";
	this.globalDispatcher.dispatchEvent(appEvt);
}

Global Event Handling in Module B

[EventHandler(event="AppEvent.SAY_HELLO", properties="hello", scope="global", topic="wasiTopic")]
public function helloWithTopic(hello:String):void
{
	logger.debug("hello = " + hello); // WORKS
}

[EventHandler(event="AppEvent.SAY_HELLO", properties="hello", scope="global")]
public function helloWithOutTopic(hello:String):void
{
	logger.debug("hello = " + hello); // NOPE
}

[EventHandler(event="AppEvent.SAY_HELLO", properties="hello", scope="global", topic="fooTopic")]
public function helloWithOutTopic(hello:String):void
{
	logger.debug("hello = " + hello); // NOPE
}

UPDATE: Part 2 has Swiz framework code changes and a more robust solution.

Tweet This Post

Set memory usage to 1024M minimum.
export MAVEN_OPTS=-Xmx1024m

Set the path to the appropriate SDK for Flash Builder
FLASH4_SDK=’/Applications/Adobe Flash Builder 4 Plug-in/sdks/3.5.0′

Set the path for ADL if building AIR applications
ADL_PATH=${FLASH4_SDK}/bin

Set the path to the Flash Player for launching FlexUnit tests
FLASH_PLAYER_PATH=’/Applications/Adobe Flash Builder 4 Plug-in/Player/mac/Flash Player.app/Contents/MacOS’

Append these to the current path
export PATH=${PATH}:${ADL_PATH}
export PATH=${PATH}:${FLASH_PLAYER_PATH}

Tweet This Post

part1=My name is
part2=and I like

And then put it back together in AS like:

var part1:String = ResourceManager.getInstance().getString('Labels', 'part1');
var name:String = "Brian Riley";
var part2:String = ResourceManager.getInstance().getString('Labels', 'part2');
var likes:String = "beer.";

var myStr:String = part1 + " " + name + " " + part2 + " " + likes;

Which works, but it’s a lot of unnecessary code. Take advantage of the tokens allowed in RBs and do the following:

likes=My name is {0} and I like {1}

var likes:String = ResourceManager.getInstance().getString('Labels', 'likes', ["Brian Riley", "beer."]);

The ResourceManager class will automatically substitue the tokens {0} and {1} in order and replace them with the array of strings provided as the last param in the getString() method.

Much simpler, right?

Tweet This Post

Common Issues

• Incorrect spelling / mapping of Java class in RemoteClass metadata in AS object: [RemoteClass(alias="fullyQualifiedJavaClass")]
• Incorrect spelling / capitalization of properties.
• Not providing empty constructors in Java object.
• Not using formal getter / setters methods for properties in Java object.
• AS mapped object not compiled into the SWF. This happens when using ArrayCollections and the item isn’t referenced anywhere in the application and thus not compiled into the SWF.

Nonexistent or Incorrect ActionScript Mapping
In order to tell the Flash Player to serialize your Java Data Transfer Objects (DTOs) to your explicit AS objects you’ll need to make sure you include the all important [RemoteClass(alias="fully qualified Java class we're mapping to")] metadata.

The most common culprit here is usually a simple misspelling of the fully qualified Java object in your RemoteClass metadata, but here’s a list of other common things to note before we look at an example:

REQUIRED:

• You must include the metadata [RemoteClass(alias="fullyQualifiedJavaClass")]. Make sure the name of Java object is the fully qualified name.
• The properties you want to map must be public.
• The properties you want to map must be spelled and capitalized exactly the same as they appear in your Java class.
• If your Java object extends another object and you want the properties in the super class also mapped to your AS object, you must either a) create that class in AS and map it to the base Java object or b) add those properties directly into your AS object.
• If your AS object contains complex objects that exist in the Java side and you want that object mapped correctly you’ll need to create that class in AS and map its corresponding Java object.
• If your AS object contains an Array or ArrayCollection that will be populated with objects you expect to be mapped, you’ll need to a) ensure the corresponding AS object is mapped and b) is compiled into the application. A simple trick to ensure that your AS object is compiled into the app is to declare ArrayCollections like so: public var foos:ArrayCollection = new ArrayCollection();Foo; This also helps you and other developers see what kind of AS object is expected in the list like a Java generic. The compiler and player obviously won’t throw errors or complain if the objects aren’t of that type, but from a readability perspective it’s quite helpful.

OPTIONAL/MISNOMER

• You can specify your public properties as either regular, old public properties or using the getter and setter functions.
• The package of your AS object does not need to match the package of your Java object. The aforementioned RemoteClass metadata takes care of that for you.
• You do not need a constructor in your AS object.
• You can have extra, non-mapped properties in your AS object.
• You do not need to implement the same interface as your Java object. In fact, you can use additional, client-side only interfaces to extend your AS object and it will not effect the mapping.
• You do not need to annotate the class with the [Bindable] metadata. It’s often the case where it is because you’re using the object as a doman/model/vo on the client and want other things to bind to it, but it’s not required.
• You can have methods in your AS obj that do not map to methods in your Java object.

package com.webappsolution.myapp.model
{
	[RemoteClass(alias="com.webappsolution.myapp.dto.PersonDTO")]
	public class PersonModel extends FooModel implements IUniqueItem
	{
		public function PersonModel()
		{
			super();
		}

		// mapping using getter ans setter functions for public properties
		// also implements IUniqueItem interface
		private var _id:String;
		public function get id():String
		{
			return _id;
		}
		public function set id(value:String):void
		{
			_id = value;
		}

		public var age:int = 0;
		public var firstName:String = "";
		public var lastName:String = "";
		public var birthDate:Date = new Date();
		public var isBeerDrinker:Boolean = true;
		public var complexObject:ComplexObject = new ComplexObject();

		// put in the references to the types of items we exopect in the collection
		// to ensure that they are compiled into the swf. this also provides a
		// nice readability clue as well to other developers.
		public var foos:ArrayCollection = new ArrayCollection();Foo;

		// not mapped
		public var isDisabled:Boolean;
		protected var uid:int;

		// not mapped
		public function getFullName():String
		{
			return this.firstName + " " + this.lastName;
		}

	}
}

Java Object Issues
There’s a couple quick gotchas here that should be noted when creating Java objects that you wish to map to AS objects, as many of the important issues are covered above in the AS section — I’ll list these quickly followed by a small example.

REQUIRED:

• You must provide an empty constructor.
• You must use formal getters and setters for your properties. You cannot just list out public properties in Java like we do in AS.

OPTIONAL:

• While an empty constructor is required, it’s ok to override it and provide multiple constructors as well.
• You can have extra, non-mapped properties in your Java object.
• You can implement interfaces in your Java object that do not exist in your AS object.
• Considering using the DTO pattern on the Java side to pass objects across the wire as opposed to allowing AS objects to map to domain/entity objects in your Java tier. This can be especially important when using domain/entity objects that are mapped to a database via Hibernate — there are lazy loading issues here that can cause less than fully populated object graphs to come across the wire to your Flex app. Instead, put a service layer in front of your domain object layer that returns DTOs.

package com.webappsolution.myapp.dto;

import ...

public class PersonDTO implements IStuff
{
	private String id;
	private int age;
	private String firstName;
	private String lastName;
	private Date birthDate;
	private boolean isBeerDrinker;
	private ComplexObject complexObject;

	public PersonDTO()
	{
	}
	public PersonDTO(String fName, String lName)
	{
		this.firstName = fName;
		this.lastName = lName;
	}
	public PersonDTO(String fName, String lName, int age)
	{
		this.firstName = fName;
		this.lastName = lName;
		this.age = age;
	}

	public long getId()
	{
		return id;
	}

	public void setId(long id)
	{
		this.id = id;
	}

	public String getFirstName()
	{
		return firstName;
	}

	public void setFirstName(String firstName)
	{
		this.firstName = firstName;
	}

	public String getLastName()
	{
		return lastName;
	}

	public void setLastName(String lastName)
	{
		this.lastName = lastName;
	}

	// omitting the rest of the public getters / setters for brevity, but you'd
	// need one for each property you want to map
}

For more information on RemoteObjects, please visit the Adobe Flex documentation: Using RemoteObject components

Tweet This Post

Brian Riley
617-480-0432
brianr@webappsolution.com
AIM/GIM/MSN/YIM/Twitter/Skype: wasibrianr

Tim McGee
508-566-6711
tim@webappsolution.com
AIM/GIM/YIM/MSN cheftimbob
Skype wasitim

Joe Seiter
201.981.2347
joes@webappsolution.com
YIM: seiter
AIM/GIM/Skype: wasijoes

Tweet This Post

As we all know, getting a new computer is awesome, but it’s also a double edged sword…as my other partner Joe noted: “The worst thing about getting a new laptop is…well…getting a new laptop.” Sure the thing flies and all, but man there’s a good amount of hrs getting it ready for primetime development…think of all the little tools you’ve collected to make your laptop rock…

My partner and I have started to compile a live list of dev tools, goodies, IDEs,and whatevs we use on a regular basis and we thought we’d share — if you have others, please add to this list:

Basic Software & IDEs

• Eclipse Galileo R Packages or more specifically we use the Eclipse J2EE IDE
• Flash Builder — usually plug this into Eclipse
• Fireworks
• Flash
• Balsamiq
• MS Office

Connectivity & Tools

• Remote Desktop Connection Client for Mac 2
• Chicken of the VNC
• Cisco VPN Client
• MySQL Workbench
• Oracle SQL Developer
• Maven

IM & Social

• Adium
• Skype
• TweetDeck

Tweet This Post

NOTE: You need to use the Eclipse Galileo Packages and the Carbon Install in order for this to work since FB is not compatible with the latets Eclipse build called Helio — here’s a link to the exact version of Eclipse that I used.

After a seemingly successful installation I received the following error code when starting up Eclipse: Error 6. I googled around a bit and found this link with this important tid-bit that fixed my issue:

• Reboot your Mac
• Navigate to your installation folder under /Adobe Flash Builder 4 Plug-in/install.support/AdobeFlashBuilderPluginSTIWrapperMac/
• Run Install.app from that location, to make sure all the required runtimes are installed successfully.

The restart seemed to do nothing, but running the installer did the trick. Good luck!

Tweet This Post

includeNetmonSwc=”false”

For more of an explanation read the following — here’s the scenario:

We created an app that loads services.xml from within the same Java container as our SWF, so there’s no need for a crossdomain.xml file. The xml file was relative to the SWF and the HTML container for the SWF as such:

* main.html
* main.swf
* assets/service-locator/services.xml

In our local dev environments we have a Flex app that publishes itself to a Java app on Tomcat running in Eclipse with BlazeDS + Spring + Hibernate. Running locally, everything worked fine. When we deployed the WAR to a client’s remote Tomcat instance logged in via their VPN, my partner and I were able to hit the app and the XML file loaded fine. When the client tried, it failed and they received the following HTTPService Fault:

• faultCode = Channel.Security.Error
• faultDetail = Destination: DefaultHTTP
• faultString = Security error accessing url

This honestly baffled us for some time…why could we hit get the SWF to load the XML file when VPN’d in while the client received an error on their own network? After trying every security thing under the sun with the Flash Player, we simply created a new Flex project, put in a simple XML load via an HTTPService, and deployed it to the same WAR (as above with BlazeDS + Spring + Hibernate) and it worked for both us and them. Then we put the exact same Flex code from our original app into the test Flex app and again it worked for both us and out client…huh?

While it did work and we could just move on and fist pump the day away with out newfound success, we were obviously worried that something greater was at play and might come back to bite us in the ass. At this point we knew it was client code and not server code, so we decided to check the build properties and compiler options, etc, but it was all the same.

Finally we decided to do a compare on the project property files from the original project and the new one starting with .actionScriptProperties — and there it was, a simple flag difference of the property:

includeNetmonSwc=”true”

…and WHAM, it smacked me in the face.

Waaaaay back when we started this project I decided to play with the new Network Monitor (NM) integrated into Flash Builder. I used it maybe for 30 mins and said, ok, great…next. Well, this little flag apparently creates some settings (maybe opens ports or something) on dev machines that allows the NM to work like an HTTP Proxy/Sniffer similar to Charles or ServiceCapture…when this SWF is deployed to a server where these settings haven’t been set…well…you’re efffed. No dice. And you get the security error mentioned above.

Bottom line, make sure you either set the value to false:

includeNetmonSwc=”false”

or remove this sucker entirely. I really hope that helps someone as it cost us a ton of time. Thank you Adobe.

Tweet This Post

Assume the following vars:

var myString:String;
var pattern:RegExp;
var resultString:String;
var isSuccess:Boolean;

Remove All Spaces

myString = "The quick brown fox.";
pattern = /\s+/g;
resultString = myString.replace(pattern, "");
trace(resultString); // Thequickbrownfox.

Remove Special Characters & Spaces

myString = "The 123 quick 456 brown !@#$% fox.";
pattern = /\W/g;
resultString = myString.replace(pattern, "");
trace(resultString); // The123quick456brownfox

Remove Special Characters & Numbers & Spaces

myString = "The 123 quick 456 brown !@#$% fox.";
pattern = /[^a-zA-Z]+/g;
resultString = myString.replace(pattern, "");
trace(resultString); // Thequickbrownfox

Test URL String

myString = "http://yahoo.com";
pattern = /^http(s)?:\/\/((\d+\.\d+\.\d+\.\d+)|(([\w-]+\.)+([a-z,A-Z][\w-]*)))(:[1-9][0-9]*)?(\/([\w-.\/:%+@&=]+[\w- .\/?:%+@&=]*)?)?(#(.*))?$/i;
isSuccess = pattern.test(myString);
trace(isSuccess); // true
myString = "htt://yahoo.com";
isSuccess = pattern.test(myString);
trace(isSuccess); // false

Trim String (With Tabs & Returns): Courtesy of Jeff Channel

myString = myString = "The quick brown fox.                   		";
pattern = /^\s+|\s+$/gs;
resultString = myString.replace(pattern, "");
trace(resultString); // "The quick brown fox."

Tweet This Post