Building Blocks even if you aren’t testing your code, you should write testable code

24Jan/095

Adding a ToolTip function to a ComboBox in Flex

My screens get a bit crowded sometimes, especially when dealing with forms. Users want to be able to see additional information, but there is just no place to put it. The data is dynamic though, so the toolTip needs to change based on the currently selectedItem of the ComboBox. With a DataGrid, for example, you have a showDataTip property on a column and can assign a dataTipFunction. There is no similar function in the ComboBox, but it is easy enough to add. I'm also using the HtmlToolTip class for a little extra style in the ToolTip itself.

View Source is enabled.

19Dec/083

Introspective PureMVC Console

This project is intended to help Flex and AS3 application developers, that use the PureMVC framework for AS3 - simple or multicore version - by providing them deep insights on what happens at the framework level: Notifications, Commands, Mediators and Proxies.
PureMVC is a highly recognized MVC framework, that has also many portages in various languages, and that's now quite widely in Flex applications, though not as much as Cairngorm.

What a fantastic tool. You can really dig deep into your application.

  • Monitors the internal flow of PureMVC in real time
  • Discover and inspect Mediators
  • Inspect Views associated to Mediators
  • Discover and inspect Proxies
  • Find starting point in source code
  • Integrated with KapInspect

http://lab.kapit.fr/display/puremvcconsole/PureMVC+Console

21Sep/088

Django Authorization from Flex/AIR via PyAMF

Django views serve nicely as service end-points for Flex applications. Here are some notes on maintaining authenticated sessions between a Flex/Air/Flash application and your Django backend.

gateway.py

1
2
3
4
5
6
7
8
from pyamf.remoting.gateway.django import DjangoGateway
 
import myproject.myapp.views as views
 
gw = DjangoGateway({
    'login'                       : views.login_user,
    'logout'                     : views.logout_user,
})

views.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import pyamf
from django.contrib import auth
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
 
try:
    pyamf.register_class( User,  'django.contrib.auth.models.User')
except ValueError:
    print "Classes already registered"
 
def logout_user(http_request):
    logout(http_request)
 
def login_user(http_request, username, password):
    user = authenticate(username=username, password=password)
    if user is not None:
        login(http_request, user)
        return user
    return None
 
@login_required
def registered_user_protected_function(http_request):
    return "You are a registered user."
 
@login_required
def staff_protected_function(http_request):
    if http_request.user.is_staff != True: return None
    return "You are staff."

from flex

1
2
3
4
var netConnection:NetConnection = new NetConnection();
netConnection.connect("http://mysite.com/gateway");
var responder:Responder = new Responder(loginResult, handleFault);
netConnection.call("login", responder, "username", "password")

The http_request carries a reference to the currently authenticated user throughout the session. This works for web based Flex application as well as AIR applications on the desktop. Note that I am using a try/except on the pyamf class registration calls. Because this is session based, the classes only need to be registered once. Without the trap, it throws a TypeError letting you know the registration has already taken place.

Django User Authentication Documentation
All of the various things you can do with authentication in Django. It is, of course, based mostly on the use of the very nice Django HTML template system. While those bits aren't handy to the likes of us, it is a good read either way.

pyAMF ByteArray example
This example shows the basic structure for setting up Django/Flex communication. It doesn't cover authentication, but covers a good bit of territory with examples in Flash and Flex.

24May/084

Updated: Continuous scrolling image thumbnail and slideshow component for Flex.

I've updated this to a proper component implementation that can be found here.

I've updated this component to allow for keyboard and forward/back navigation. I'm still improving it, refactoring, but it is almost finished.

Here is the original post.

11May/0884

Continuous scrolling image thumbnail and slideshow component for Flex.

I've updated this to a proper component implementation that can be found here.

I've been working on improvements for this thumbnail/slideshow component. The way the continuous scroll flows is very nice. It provides a very fluid feel. I have it reading XML from SlideShowPro director. SSPD simply gives a structure of albums and images, so the component should work from essentially any XML source as long as it follows the same schema:

1
2
3
4
5
6
<gallery>
     <album id="0" description="DESCRIPTION" title="TITLE" tn="PATH" lgpath="PATH" tnpath="PATH">
          <img src="FILENAME" />
          ...
     </album>
</gallery>

There is still a good bit of work to do. Right now the slideshow is coupled with the thumbnail container. I think that should be seperated, because I can see various uses for thumbnails outside of a slideshow. It needs style and event metadata so that it will function as a proper Flex component. I am also going to roll it into mediated PureMVC components for inclusion in VE:Session.

28Apr/085

Enumerating data types in Actionscript 3 (AS3)

In computer programming, an enumerated type is an abstract data type used to model an attribute that has a specific number of options (or identifiers) such as the suit of a playing card (i.e. a Club, Diamond, Heart or Spade). Using this type allows the program to handle the attribute more efficiently than a string while maintaining the readability of the source code.
-from Wikipedia

I've found this method (illustrated in code below) for enumeration of datasets to be useful, and at this point even essential, in my applications. Prior to this I was actually cutting and pasting the arrays that I was using in my various combo boxes and other selection components as dataProviders. By breaking the dataset into an enumeration class, it makes it easy to maintain the list and lets the dataset function as a first class citizen, ensuring that your data is consistent throughout the application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
package enum
{
	/**
	 * CloudTypeEnum enumerates cloud types.
	 * @author JHooks
	 *
	 */
	public class CloudTypeEnum
	{
		public static const NONE:CloudTypeEnum			= new CloudTypeEnum( "None",	   -1 );
		public static const CUMULUS:CloudTypeEnum		= new CloudTypeEnum( "Cumulus", 	0 );
		public static const STRATUS:CloudTypeEnum		= new CloudTypeEnum( "Stratus", 	1 );
		public static const CIRRUS:CloudTypeEnum		= new CloudTypeEnum( "Cirrus", 		2 );
		public static const NIMBUS:CloudTypeEnum		= new CloudTypeEnum( "Nimbus", 		3 );
 
		public var value:String
		public var ordinal:int
 
		/**
		 * CloudTypeEnum constructor
		 * @param value
		 * @param ordinal
		 *
		 */
		public function CloudTypeEnum( value:String, ordinal:int )
		{
			this.value = value;
			this.ordinal = ordinal;
		}
 
		/**
		 * A list of cloud types
		 * @return
		 *
		 */
		public static function get list( ):Array
		{
			return [ CUMULUS,
					 STRATUS,
					 CIRRUS,
					 NIMBUS ];
		}
 
		/**
		 * A list of cloud types appropriate for use in ComboBox and other
		 * selection components as a DataProvider
		 *
		 * myComboBox.dataProvider = CloudTypeEnum.cList;
		 * @return
		 *
		 */
		public static function get cList( ):Array
		{
			return list.unshift( NONE );
		}
 
		/**
		 * Select a cloud type by its value property
		 * @param value
		 * @return
		 *
		 */
		public static function selectByValue( value:String ):TaskTypeEnum
		{
			for each ( var cloudType:TaskTypeEnum in CloudTypeEnum.list )
			{
				if ( value == cloudType.value )
					return cloudType;
			}
 
			return NONE;
		}
	}
}

Thanks to Cliff Hall who showed this to me via one of his PureMVC demo applications. For the life of me I can't remember which one.

21Apr/085

Continuous scrolling image thumbnail component for Flex.

I've updated this to a proper component implementation that can be found here.

Here is the beginnings of a full featured open-source continuous scroll thumbnail component for Flex. It is rough right now, but I plan to polish it and make it something useful. This format is really appealing, as it gives the user a seamless view of a gallery, without any jumps or aggravating scroll bars. Up until now I have been using H and V Lists in flex for my thumbnailing, but they are ugly and don't provide as rich of an experience.

The Scroll Panel from AFComponents was my first choice. It is a very nice component, well priced, and would be just what I need, if not for the fact that my project is open-source and using a commercial component sorta kills the whole thing. After scouring the internet I finally stumbled upon the work Peter Wright has put in on a perpetual scrolling list.

I've modified it to accept an XML list of image objects, as well as perform horizontally. It is also functioning as a slideshow, and I want to allow it to go either H or V depending on the need. It should shape up to be a nice reusable component. Much thanks to Peter for supplying the code to get me started.

Source Enabled

20Apr/0813

Using the Senocular AS3 TransformTool in Flex

Hey,I am so interested about that you had ever used the ‘TransformTool’ library in your Flex project. But there is little examples showing how to use it in flex, Would you please share some example about how to use ‘TransformTool’ in Flex? I have tried as such a way:

but it failed at line
canvas.addChild(defaultTool);
Can you give any hints? Thanks.

Like most pure AS3 display classes, the TransformTool needs to be added to a UIComponent wrapper to function properly in Flex.

Source.

25Mar/080

Renju – AS3 board game built with the PureMVC framework.

renju.jpg

This is awesome. Here is a polished board game with nice graphics and sounds - full AI - and best of all, the complete source. This is a great example of PureMVC in action. All of the projects on Actionscript Notes utilize PureMVC, and the owner seems to be generous with the source. Many thanks for that.

23Mar/080

Christian Cantrell's ever-growing selection of useful Actionscript 3/AIR libraries.

Here's the full list of what he has on Google Code.

The CoreLib is essential, but he's been busy writing useful libraries for AIR. I've used the notification library, which has some great features and makes notifications on the desktop sensible. The exchange library is interesting, for sure. They are all worth checking out.

There are also a number of interesting example applications using AIR, including a motion detection application, an Amazon S3 interface, a screen saver, and an MS Exchange calendar.