Some UcompOSStyleProxy Basics

If you are a regular reader of this blog, you know that a lot of blogs have been dedicated to talking about the UcompOS Proxy components.  However, one component that hasn’t received a lot of attention so far is the UcompOSStyleProxy.

The UcompOSStyleProxy provides a means to manage the style properties of the UcompOS Main Container.  For instance, you can use the UcompOSStyleProxy to override the default background image on the UcompOS Main Container or set fade in\out duration effects on UcompOSWindowProxy instances.

To demonstrate the two behaviors above, let’s take a look at a simple UcompOSStyleProxy code example.  First, in my UcompOS instance, I have created a simple HTML application called styler.html that is loaded as a background application by my dockManifest.xml file.  The code in my styler.html application is fairly simple and easy to follow as evidenced by the following sample code:

<HTML>
<HEAD>
<SCRIPT TYPE=”text/javascript” SRC=”/UcompOSSDK.js”></SCRIPT>
<SCRIPT TYPE=”text/javascript”>

//instantiate the UCompOSSDK
function start()
{

//instantiate a UcompOSStyleProxy instance that we can apply styles to
var styler = new UcompOSStyleProxy();

//set the default background image to Picture1.jpg at the correct file path on the server
styler.setBackgroundImage(“/applications/Picture1.jpg”);

//now, set the UcompOSWindowProxy instances to fade in\out 3 seconds
styler.setWindowFadeInDuration(3000);
styler.setWindowFadeOutDuration(3000);

}

</SCRIPT>
</HEAD>
</HTML>

Hopefully, this example is simple enough to follow along with fairly easily; the mechanics involved are designed to be as straightforward as possible. However, one could easily envision scenarios where a user’s preferences are saved in a database and loaded at run-time by turning styler.html into a scripted application using PHP, PERL, or the language of your choice.  Or, perhaps you may look at setting and instantiating style properties at startup using your dockManifest. The choice is up to you!

Note also that it is also possible, for example, to change the color of text on the menu bar by using some code like (using our example above):

styler.setStyle(“.MenuBar”,”color”,0x0000FF);

You will want to keep in mind, though, that it is likely that the UcompOSStyleProxy class will continue to evolve in such a way that setting styles in this manner may not work in the future. Therefore, this practice is not recommended at this time. However, you will want to stay tuned to the updates that are made to this class as the UcompOS SDK continues to mature over the coming months.

An MXML Image Component That Loads Images With No Associated Policy Files

In a major UcompOS project I am working on, I am finding the need more and more to load images from various different servers where the destination servers often have no crossdomain.xml policy file.

I don’t want to use a back-end proxy to deal with this as that would be chewing up my back-end resources and bandwidth which goes against my grain especially when targeting a product for wide deployment.

I will post the code of the component below which should be very self-explanatory:

<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  xmlns:mx="library://ns.adobe.com/flex/mx" 
		  securityError="securityErrorHandler(event)" 
		  trustContent="true">
	<fx:Script>
		<![CDATA[
 
			private var _legal:Boolean = true; 
			private var _url:String;
 
			public function get legal():Boolean
			{
				return _legal;
			}
 
			private function securityErrorHandler(event:SecurityErrorEvent):void
			{
				this.removeEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);
				_legal = false;
				var sprite:Sprite = new Sprite();
				var loader:Loader = new Loader();
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE,load_handler);
				sprite.addChild(loader);
				var loaderContext:LoaderContext = new LoaderContext();
				loaderContext.checkPolicyFile = false;
				loader.load(new URLRequest(url),loaderContext);
			}
 
			private function load_handler(event:Event):void
			{
				var loaderInfo:LoaderInfo = event.target as LoaderInfo;
				loaderInfo.removeEventListener(Event.COMPLETE,load_handler);
				var bitmapData:BitmapData = new BitmapData(loaderInfo.width,loaderInfo.height);
				var matrix:Matrix = new Matrix();
				bitmapData.draw(loaderInfo.content,matrix);
				var bitmap:Bitmap = new Bitmap(bitmapData);
				source = bitmap;
			}
 
			public function get url():String
			{
				return _url;
			}
 
			public function set url(value:String):void
			{
				loaderContext = new LoaderContext(false);
				_url = value;
				source = value;
			}
		]]>
	</fx:Script>
</mx:Image>

Some things to point out about the component in no particular order:

  • You set a value of a URL to the image to the url property instead of the source property
  • A Boolean named legal has a false value if the content of the image was loaded using an assisting Sprite and Loader instance
  • The source property on an Image control is of a wildcard (*) type – if the value of legal is true, then source is a String and will have the same value as url. If the value of legal is false, then source will be an Object of type Bitmap