From inspiration to realization
22Jun/102

Copy object properties to another object – Flex

In a project I am working on with Flex and AS3 I needed to copy all of the object's properties and accessors to another object.
because I didn't want to hard code the properties for various reasons I needed to write a function that will "crawl" the object properties and accessors and copy then to the new object.

I created a static function that does exactly that

		/**
		 * copies a source object to a destination object
		 * @param sourceObject the source object
		 * @param destinationObject the destination object
		 *
		 */
		public static function copyObject(sourceObject:Object, destinationObject:Object):void
		{
			// check if the objects are not null
			if((sourceObject) && (destinationObject)) {
				try
				{
					//retrive information about the source object via XML
					var sourceInfo:XML = describeType(sourceObject);
					var objectProperty:XML;
					var propertyName:String;

					// loop through the properties
					for each(objectProperty in sourceInfo.variable)
					{
						propertyName = objectProperty.@name;
						if(sourceObject[objectProperty.@name] != null)
						{
							if(destinationObject.hasOwnProperty(objectProperty.@name)) {
								destinationObject[objectProperty.@name] = sourceObject[objectProperty.@name];
							}
						}
					}
					//loop through the accessors
					for each(objectProperty in sourceInfo.accessor) {
						if(objectProperty.@access == "readwrite") {
							propertyName = objectProperty.@name;
							if(sourceObject[objectProperty.@name] != null)
							{
								if(destinationObject.hasOwnProperty(objectProperty.@name)) {
									destinationObject[objectProperty.@name] = sourceObject[objectProperty.@name];
								}
							}
						}
					}
				}
				catch (err:*) {
					;
				}
			}

This function will copy everything, you can simply add an "allowedProperties" definition and make the function only copy definitions and properites which exist in your allowed definition.

like so:

private static var allowedProperties:String = "height,width,visible,styleName,x,y,alpha,visible,source,dataProvider,styleDecleration,text,label,horizontalScrollPolicy,labelField,";

		public static function copyDisplayObjectData(sourceObject:Object, destinationObject:Object):void
		{
			if((sourceObject) && (destinationObject)) {
				try
				{
					var sourceInfo:XML = describeType(sourceObject);
					var objectProperty:XML;
					var propertyName:String;
					
					for each(objectProperty in sourceInfo.variable)
					{
						propertyName = objectProperty.@name;
						if(allowedProperties.indexOf(propertyName) > -1)
						{
							if(sourceObject[objectProperty.@name] != null)
							{
								if(destinationObject.hasOwnProperty(objectProperty.@name)) {
									destinationObject[objectProperty.@name] = sourceObject[objectProperty.@name];
								}
							}

						}
					}
					
					for each(objectProperty in sourceInfo.accessor) {
						if(objectProperty.@access == "readwrite") {
							propertyName = objectProperty.@name;
							if(allowedProperties.indexOf(propertyName) > -1)
							{
								if(sourceObject[objectProperty.@name] != null)
								{
									if(destinationObject.hasOwnProperty(objectProperty.@name)) {
										destinationObject[objectProperty.@name] = sourceObject[objectProperty.@name];
									}
								}
							}
						}
					}
				}
				catch (err:*) {
					;
				}
			}
		}

That's it, tricky but absolutely can be done :-)

  • Share/Bookmark
22Jun/101

YUI Calendar page to the selected date (multi calendar)

I have been working with YUI calendar for a couple of weeks now on a project, I found that it is highly customizable although the documentation are not always clear and you have to dig around the internet to find your answers.

So, I am here to help.

In this new website I have a multi-calendar where you can page forwards and backwards through the dates, the calendar is also showing and hiding according to a user click (see photo)

The problem was (for me) that when the user clicked the calendar button and the calendar showed up it always showed the last paging position.

Let's say I selected a date, or even better a date interval (from Feb 2nd to Feb 10th) and then paged to see other months available dates, closed the calendar and re-opened it, it seemed as if the selection cleared and the paging position kept.

My client's request was "if the client selected a date and paged, always take him back to his selection when the calendar is shown"

Well, this is the way to do it.

var dates = cal1.getSelectedDates();

if(dates.length > 0)
{
var l = dates[0];

cal1.cfg.setProperty("pagedate", l);
cal1.render();
}

What did we do here?
first, we checked if there are s
}elected dates in the calendar, if there are.. we got the lowest date (the first date of the interval), then we set a property on the calendar called "pagedate" with this lowest date and WHALLLA, it works, now, every time you open the calendar it pages to the selected dates section, no matter if you paged forward before hiding the calendar.

  • Share/Bookmark
Filed under: General 1 Comment
10Jun/101

Empty dialogs in flex builder 3 + Flash builder 4

This week I needed to work with My PC on a flex project, I usually stay away of the PC with flex projects, I'm used to working on the mac with these project but I needed to work on the PC.

While trying to configure the project in flex builder 3 (and with 4 as well) I stumbled upon a weird bug that made me scratch my head for a while.
The bug was that all of the dialogs appeared empty, no configuration, almost no buttons.

Here's a screenshot of the problem:

Now, I remembered a teammate I had a while back had the same problem and it appeared to be a WACOM with a windows 7 driver that caused the problem so I started disabling devices one after the other.

The problem was a logitech mouse software I have installed on the pc, once I quited this application everything went back to normal.

Here's the icon on the taskbar. (not hard to trace)

Hope this post helps you and you won't scratch your had for hours like I did.

  • Share/Bookmark
9Jun/100

Git export (like SVN export)

I have been working with git for a while now on my Ruby on Rails projects and client side (css, Html and JS) projects, I haven't moved completely in flex projects and other projects but I do plan to in the near future, mainly becuase of the reason that you can integrate GIT into flash builder 4.

But, that is not the point.

This week I was working with a company on a client side project, I had to email them the files every time and the .git folders inside the project were heavy and unnecessary.

If you worked with SVN in the future you probably know the export command, after searching for a bit in git help I found how you can do it in git with ease.

This is the command you should use

git checkout-index -a -f --prefix=/path/to/your/folder/

The ending forward slash is very important, do not forget to use it please.

a screenshot of my shell.

  • Share/Bookmark
30May/102

Access flex application through the SWFLoader component

Often you load flex applications through another flex application using the SWFLoader component.
it's not that common knowledge that you can actually access all of that application exactly the same way you are accessing your own application.

What does that mean?

It means you can access that application components, get the children and get a good knowledge on how this application is build, you can also access it's component and dispatch events.

OK, how?

Let's start doing it. we will create a simple application, put an SWFLoader on stage and create a listener for the complete event.
Lets's also add 2 global variables, one for SystemManager, another for IUIComponent (I will explain later)

This is what the application code should look like:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
	<mx:Script>
		<![CDATA[
			import mx.core.IUIComponent;
			import mx.managers.SystemManager;

			private var _systemManager:SystemManager;
			private var _innerApplication:IUIComponent;

			protected function loader_completeHandler(event:Event):void
			{
				_systemManager = SystemManager(loader.content);
			}
		]]>
	</mx:Script>

	<mx:SWFLoader id="loader" source="VistaRemix.swf" width="800" height="600" autoLoad="true" complete="loader_completeHandler(event)"/>
</mx:Application>

As you can probably see, we are assigning a value to _systemManager when the loader (SWFLoader) finished loading, this enables us to work with that application system Manager and access properties.

Continuing...

We will add 2 Event listeners inside that function

_systemManager.addEventListener(FlexEvent.APPLICATION_COMPLETE, sysManage_ApplicationComplete_Handler);
_systemManager.addEventListener(FlexEvent.UPDATE_COMPLETE, sysManage_UpdateComplete_Handler);

Now that we have those in place, let's add the closure functions

			private function sysManage_UpdateComplete_Handler(event:FlexEvent):void
			{
				_innerApplication = _systemManager.application;
			}

			private function sysManage_ApplicationComplete_Handler(event:FlexEvent):void
			{
				_innerApplication = _systemManager.application;
			}

Great, now _innerApplication is actually an application, you can get it's children, get properties, get components, dispatch events and more.

This comes in very handy when you want control over an application and you don't have the source, you can create a clone of that application and create your own GUI for it, it's an amazing feature.

This is a screenshot of debugging mode, check out the debugger watch section, these are all methods you can use on that variable, you can of course use much more...

Debug view of the application in Flash builder 4

Good luck!

  • Share/Bookmark
Tagged as: , , 2 Comments