Jun 20 2008

Flash Player to Air communication

Tag: Air, FlexIonut Grosu @ 2:08 pm

I’ve had a extremely busy schedule lately and didn’t catch time to handle the blog. Sorry for that : ). I have lots of things to show you and I will start by showing a simple example of flash player-air direct communication using LocalConnection.

This is something that a friend of mine asked me to show him. I’ve set up a demo for him and figured that it might be good to post it here also.

Check it out. Air application and Flex appplication (right click for view source).


Apr 06 2008

Window Manager in AIR

Tag: Air, FlexIonut Grosu @ 1:52 am

I was actually surprised that something like this hasn’t come in the sdk with AIR 1.0 release. I built this during the AIR beta and adjusted it now to run on 1.0. It acts as a global window manager and manages all your window instances in an Air application.

It uses SimpleWindow class which extends mx.core.Window and adds some needed functionalities.

For the ones interested in the ways things work here’s an image which speaks better english.

windowmanager.png

A short example of how it should be used.
First, create a window component extending SimpleWindow. Let’s say MyWindow.mxml:

<?xml version="1.0" encoding="utf-8"?>
<core:Simplewindow>
      xmlns:core="com.flexwizz.core.*"
      xmlns:mx="http://www.adobe.com/2006/mxml"
      width="400" height="300"
      title="My Window">
      <mx:Text width="100%" text="I am MyWindow">
      </mx:Text>
</core:Simplewindow>

Then you can simply use WindowManager.openWindow(MyWindow) . Simple enough…

I often needed to restrict more then 1 windows of a specific type to be opened at once. And you can achieve that pretty simple here by specifying the windowUID on that component above. The property windowUID should always be set on component declaration, must be a const (binding isn’t made here) and before opening it with WindowManager. Example (MyWindow.mxml):

MXML:

<?xml version="1.0" encoding="utf-8"?>
<core:Simplewindow>
      xmlns:core="com.flexwizz.core.*"
      xmlns:mx="http://www.adobe.com/2006/mxml"
      width="400" height="300"
      title="My Window"
      windowUID="com.wins::MyWindow">
      <mx:Text width="100%" text="I am MyWindow">
      </mx:Text>
</core:Simplewindow>

And open it:

WindowManager.openWindow(MyWindow)

When you try to open a 2nd window with the same windowUID, WindowManager will activate the window that is already opened with that windowUID. Or you can specify it to notify that the window is already opened which can be done using the 3rd argument of the openWindow methods.

You can use any string on windowUID property and the WindowManager will never open 2 instances with the same windowUID. But actually, the way I thought it, if you want to easily keep track of your windows in the application you can set this property to package+”::”+ClassName string as I did above in the MyWindow component. This way you can easily use getQualifiedClassName(ClassName) to get the windowUID of that. For example for MyWindow.mxml:

WindowManager.getOpenedWindow(getQualifiedClassName(MyWindow); // returns the window's instance

Anyways, there is a example application + source-code which explains all the functionalities better.

You can get the recommended Example Application - Air file included, the Lib SWC, Lib Source and AsDocs.

Btw, you should also check the code license page.

Hope this helps! and let me know if it’s useful or if you run into trouble, find bugs, etc.


Apr 01 2008

Why I hate MVC…

Tag: Air, Flex, ProgrammingIonut Grosu @ 2:57 am

Personally, I’m a big fan on design patterns, so don’t judge by the title. The thing is that you can easily step on to the other side…when you’ve got a new project and you’re thinking right away which pattern should you use. I don’t see this as the correct coding attitude.

For the mvc in short :

The MVC(model-view-controller) paradigm is a way of breaking an application, or more commonly, just a piece of an application’s interface, into three parts: the model, the view, and the controller.

Model
The domain-specific representation of the information on which the application operates. Domain logic adds meaning to raw data (e.g., calculating if today is the user’s birthday, or the totals, taxes, and shipping charges for shopping cart items).
Many applications use a persistent storage mechanism (such as a database) to store data. MVC does not specifically mention the data access layer because it is understood to be underneath or encapsulated by the Model.
View
Renders the model into a form suitable for interaction, typically a user interface element. Multiple views can exist for a single model for different purposes.
Controller
Processes and responds to events, typically user actions, and may invoke changes on the model.

You might want to look into this link if you want to know more about mvc.

In as3 there are many different MVC implementation already made and some of these that step up: Cairngorm and PureMVC. The reason why I don’t like to choose using mvc in my projects is that it takes the beauty away from coding. It is important to keep in mind that there are many different interpretations of how to implement the MVC pattern. But no matter if you choose creating your own or use one of the above, in MVC you will always be walking this line:

ModelViewControllerDiagram

This architectural pattern will always guide you that way. Cairgorm for example (being the one that I’ve used in as3), not only that it guides you on a straight line it also fixes many problems before you encounter them. Thus with no problems will come no experience and especially no fun. This will easily transform you from a programmer into a programming user. And yes, I know that using mvc has some great benefits also, the most important ones being:

1. Lower complexity

2. Interface Flexibility

But there are many-many ways to get there…and you can think your “way” there.


Mar 12 2008

Debug utility

Tag: Air, FlexIonut Grosu @ 2:36 am

At last, my first tech post. : )

Here’s a way to ease the debugging into flex. I’ve created a simple class which takes advantage of the getStackTrace() method of the Error class and traces the calling function name before any debug message.

package com.ionutgrosu.logging
{
import mx.utils.ObjectUtil;
/**
 * @author Ionut Grosu ( http://www.flexwizz.com )
 * Simple Debug Util Class
 */
public final class Logger
{
	/**
	 * enable logging
	 */
	public static var isDebug : Boolean = true;

	/**
	 * Traces a message
	 * @param str
	 * @param introspect Set this to true if you want the 1st param to be introspected
	 */
	public static function log(str : * = '', introspect : Boolean = false):void
	{
		if(!isDebug) return;
		if(introspect) str = ObjectUtil.toString(str);

		trace(getCallingFunction(new Error())+ str);
	}
	/**
	 * @private
	 */
	private static function getCallingFunction(err:Error):String
	{
	return (err.getStackTrace().split("at ")[2].split("()")[0]+'()').replace('/',".") + "  ";
	}
}
}

You simply use it like Logger.log(”message”) and check the output. Should look similar to appName.componentId.blabla.functionName() “message”.

Of course, you can step in deeper and redirect the output to a custom log target, filter messages and so on. But I’ll come back on this with a more compressive code built on top of logging framework which needs a little cleanup.

Note that the getStackTrace() method is only available in the debug version of flash player so you should disable the logger class when exporting a release version. A single call to getStackTrace() will usually crash the application with no errors. So make sure that you set isDebug to false before any log() calls when releasing.

Cheers.