What is Dribbble?

Dribbble is show and tell for designers, developers and other creatives. Share sneak peeks of your work as “shots” – small screenshots of the designs and applications you’re working on.

The Dribbble API

The Dribbble API has been developed recently to allow developers access to the “shots” that people share. There are a small amount of methods available at the moment, with plans in the future for more advanced API methods such as login and publishing a “shot”.

StarDribbbleLib

StarDribbbleLib is an AS3 library, which was built using StarRequests, that allows developers to connect to the Dribbble API. If you’ve used StarRequests (or StarImageLib) before then you’ll already know how to use StarDribbbleLib. Each of the methods of the Dribbble API have been made available as modular requests.

Modular Requests

Each request in the library implements the same interface, which is displayed below.

The started, progress and failed signals always dispatch the same payload. The started signal doesn’t dispatch a payload, the progress signal dispatches a Number (percentage) and the failed signal dispatches a String (the reason why it failed).

The only signal that changes its payload is the completed signal; this changes depending on the type of request you are making. For example, if you’re requesting shots (PopularShotsRequest) then the payload is of Shots type, whereas if you’re requesting a player (PlayerByIDRequest) then the payload is of Player type, likewise a shot request (ShotByIDRequest) will have a payload of type Shot.

Available API Methods

• DebutShotsRequest( page, amountPerPage )
• EveryoneShotsRequest( page, amountPerPage )
• FollowingShotsByPlayerIDRequest( playerID, page, amountPerPage )
• FollowingShotsByPlayerUsernameRequest( playerUsername, page, amountPerPage )
• PlayerByIDRequest( playerID )
• PlayerByUsernameRequest( playerUsername )
• PlayerShotsByIDRequest( playerID, page, amountPerPage )
• PlayerShotsByUsernameRequest( playerUsername, page, amountPerPage )
• PopularShotsRequest( page, amountPerPage )
• ShotByIDRequest( shotID )

Code examples

Simply download the SWC from the downloads page and use it in your project.

GitHub

The StarDribbbleLib is available on GitHub. Don’t forget you can fork the project and add issues.

Disclaimer

The Dribbble API is in its first draft and therefore isn’t completely defined. This library works with the API in its current form and is no way affiliated with Dribbble. I have been providing feedback to the API developers to help improve the service and will continue to keep this library up to date. The information displayed above is correct at the time of writing.

The concept of making modular requests is one I’ve used in recent projects, and I thought it was time to standardise and release this as a library. Each request revolves around a simple interface:

The aim is to make each request modular, consistent, simple and for it to clean up after itself. By making each request implement an interface, and therefore consistent, it facilitates the creation of useful utilities. With this in mind I thought I’d put together a library of common requests and utilities.

Benefits of using AS3 Signals

The main benefits of using AS3 signals over the traditional AS3 event system (for me) are that signals can be defined in an interface and a signal can free itself up for garbage collection by removing all of its listeners.

By defining the signals in an interface we can be certain that any implementation of the interface implements the defined signals; in this case each request much have an implementation of the started, progress, completed and failed signals. The advantage of this is that any utility class we create knows the signals that each request can dispatch, because they are enforced by the interface.

Another advantage of using AS3 signals in this library is the ability to remove all of the listeners of a particular signal at once, which is another feature not available to us when using the traditional event model. The benefit of using this method is that once a request has dispatch its failed or completed signal it can then confidently free itself up for garbage collection without worrying if all listeners have been removed (we all know that not removing event listeners is a common cause of memory leaks!).

As a side note, without the AS3 signals library I wouldn’t have thought of requests in terms of interfaces and thus created this library!

StarRequests

The initial release of StarRequests includes some common load requests, a batch utility and a queue utility. For now, I’ve only included the common requests that I’ve used in recent projects, which include loading an XML file, a Bitmap and BitmapData. I plan to add more varied requests as times go on as there’s no restriction on the types of requests that can be implemented. Heck, you could have a move request that moves a Sprite to a specified position. The point is that as long as a request implements the correct interface it doesn’t matter what the request does. Other ideas for requests include File I/O requests, database requests, etc.

The library includes a queue utility, which allows you to continuously add requests to the queue utility and it will execute them in the order they are added.  This utility could prove particularly useful when creating applications that are continuously updated via external APIs, such as a Twitter client.

The other utility that’s included initially is a batch utility that allows you to set up a batch of requests to be sent together, one after the other. The clever thing about this utility is that it also implements the request interface, so you can create a batch of requests that can then be included in another batch or added to a queue. Without defined interfaces, and the use of AS3 signals, implementing this functionality using the traditional event model would have been a lot more complex!

Timesaver

Not only are the requests included in StarRequests modular and consistent they also help you save time when coding. The idea being that not only do StarRequests promote a good use of polymorphism, but they also require less lines of code to use. The following snippet shows loading an XML file using normal loading techniques, and cleaning that request once it’s complete.

And now look at the same functionality using StarRequests.

It’s much quicker to write the code to load XML files using StarRequests, and it takes out the complexities of cleaning up for you! Now imagine trying to create a queue for loading XML files in the normal way, or a batch process, it would be complicated but StarRequests makes that really easy for you.

Using StarRequests with Robotlegs

I’m almost exclusively using Robotlegs with AS3 signals for all Flash Platform projects and so I wanted to make sure that StarRequests fits in with my current workflow. I think it does. Each request is completely modular, fitting in with Robotlegs’ philosophy, and therefore can easily incorporated into a Robotlegs project. It’s even possible to set up a centralised request queue service for your application so every service sends their requests to the centralised queue to be sent.

Using StarRequests to build API libraries

Using StarRequests to build API libraries could prove to be very powerful. Imagine a Twittier API library built using StarRequests; you could have a login request, update status request, get friends request and a get timeline request all of which could return strongly typed responses in their completed signals, and could be added to queues. This would be much more efficient than expecting the user to manual parse each response. Furthermore, if you look at the code examples above you’ll see how easy the API for the library could be!

Another advantage to using StarRequests is that, because each request is modular, the compiler only needs to include the requests that are used as opposed to the entire library (usually an API library is encompassed in one class). Separating the requests into their own classes can help to reduce the final file size of the compiled application.

Download StarRequests

The StarRequests library is available to download from GitHub as both the source code and a SWC file. It can be used in any AS3 project whether it uses the Flex framework or not; so you have no excuse not to try it out!

Feedback

Please feedback on any issues or requests you have using the issue tracking at GitHub and I will endeavour to solve the issue or implement your request (if I feel it fits in with the library).

Todo list

• Add ASDoc comments to the library Update: The library now has ASDocs!
• Implement unit testing
• Add more common requests/utilities
• (Possibly) create API libraries for common services (Twitter, Flickr, etc) using StarRequests

Disclaimer

This is the first release of StarRequests and thus as improvements and additions are made the structure of the library may change slightly.

One of the things that bugs me about the use of the event model with Robotlegs is that Mediators are tightly coupled with the views. Take my Twitter Search Demo for example, the SearchEntryMediator class expects an instance of the SearchEntry class as its view, see below.

One suggestion could be type the view to an interface in the mediator, but this is too loosely coupled because an interface cannot define the events an object can dispatch. There are a few solutions to this issue, for example we could use function callbacks, however Robert Penner has come up with a better solution, AS3-Signals.

The solution: AS3-Signals

Robotlegs and AS3-Signals work really well together, especially with the introduction of the Command Signal Extension. Each of these libraries don’t rely on string constants to function, they are strongly typed, therefore the compiler is able to throw errors much sooner if something is wrong.

A Signal gives an event a concrete membership in a class, for this reason we are able to include Signals in interfaces. Using this the SearchEntryMediator in my Twitter Search Demo can type the view to an ISearchEntry, and any class that implements this interface must include the searchRequested signal, see below.

The interface is very simple and just defines the searchRequested signal.

Why bother?

It’s a good question, why should we go to the effort of creating interfaces for our views? We could quite easily continue to use the Event model with Robotlegs and it would work, but the use of interfaces would be beneficial for a multi-platform Flash application or for a workflow that involved more than one person.

Imagine an application that is to be deployed to many different devices that have various screen sizes, some can use a mouse, some can be touch enabled and some are restricted to keys. To create the best user experience you would want the view of your application, and the interaction with that view, to be tailored to that device. By using interfaces for our views we can use the same code base for all applications but have different views for each device; as long as our views implement our interfaces the application will work. More advantages to this are seen if different people implement the views; by using Signals in the interface the person developing the view must implement them whereas there’s nothing specify that the person must implement an event.

P.S It’s also worth noting that there are many other benefits to using AS3-Signals, for example they provide significant speed improvements over using Events, not just the ability to define them in interfaces.

The first demo I put together was a simple Twitter Search application, using the Twitter Search API. You can see the demo in all it’s glory by clicking the image below! View Source is enabled so you can download the source and have a play; you will need the Robotlegs SWC to compile though, you’ll find this on the Robotlegs website. If you have any feedback or questions please leave a comment below!

Robotlegs has been gaining a lot of ground over the last few months within the Flash community, and so I thought it was about time I gave it a shot. This post includes some of the resources I found really useful when getting started with the framework.

What is Robotlegs?

If you haven’t heard of Robotlegs before there’s a good explanation on their website:

Robotlegs is a pure AS3 micro-architecture (framework) with a light footprint and limited scope. Simply put, Robotlegs is there to help you wire your objects together. It provides the glue that your application needs to easily function in a decoupled way. Through the use of automated metadata based dependency injection Robotlegs removes boilerplate code in an application. By promoting loose coupling and avoiding the use of Singletons and statics in the framework Robotlegs can help you write code that is highly testable.

Robotlegs was heavily influenced by PureMVC, another pure AS3 micro-architecture framework, therefore if you are familiar with the roles and architecture PureMVC has then you will find Robotlegs easy to pick up. You will also notice that there’s a helluva lot less boiler-plate code in Robotlegs!

Where should I start?

A lot of people recommend getting started with the Robotlegs best practices document and whilst this is a good place to start it can be really overwhelming, even for someone familiar with frameworks, so I’d recommend watching the following video tutorials first.

• RobotLegs Hello World Video Tutorial by John Lindquist
• Robotlegs MVCS: Walkthrough of an AIR Twitter Client by Joel Hooks

Once you watched the videos you’ll have an rough understanding of each of the roles within Robotlegs; this is a great time to check out the best practices document and build on that knowledge. If you then watch the video tutorials again you should really understand exactly what’s going on!

What’s next?

Start using it! You can download the latest release version from the Robotlegs website or, if you’re familiar with GitHub, you can fork the repository. There’s some really useful demos available on GitHub too, which include examples of using the framework with Flash, modular development and the integration of services such as Flickr and GoogleMaps.

Don’t forget, if you’re really stuck you can always ask for help!

Update: The source code is now available.

]]> http://markstar.co.uk/blog/2010/flashplatform/actionscript/hype-shapelayout-experiment/feed/ 4 http://markstar.co.uk/blog/2010/flashplatform/actionscript/filereference-woes-on-macs/ http://markstar.co.uk/blog/2010/flashplatform/actionscript/filereference-woes-on-macs/#comments Wed, 17 Feb 2010 22:37:02 +0000 Mark http://markstar.co.uk/blog/?p=221 Today I found out (the hard way) that there are several issues that can occur when trying to upload files using the FileReference class on MACs.

FileReference.type always returns null

It’s often that case that you want to restrict the file type the user can upload, or perform different processes depending on the type of file uploaded. However the type property of a FileReference object always returns null on MACs; to work around this you must get the file extension manually. To do this you can use the following code (it’s good practice to always convert the file extension to lower case before working with it).

Server script must return data

When uploading files using the FileReference class you may experience the upload getting stuck at 100% progress and never firing the Event.COMPLETE event. This will only happen on the MAC and it’s because Flash doesn’t realise that the file has finished uploading until it gets a response from the server. I don’t why this is implemented differently on the different operating systems, but to overcome this problem your server script must write something to the page (it can just be a space character!).

Parameters must be added using URLVariables

You may want to pass URL parameters to the server script when uploading a file, and in our case the parameters and the URL were passed as one string via Flash vars. MACs don’t like this. So instead we have to pass the parameters using the data property of the URLRequest; to do this you need to use the URLVariables class. The following code snippet shows you how.

Feedback!

Has anyone else come across any weird quirks or handy hints when working with the FileReference class? Please leave a comment if you have and I’ll add it to the post!

This tutorial will build upon the Introduction to using the StatefulToolkit example; it will add the ability to utilize the Clipboard in our example. The example will use the ClipboardUtil, which is a utility class included in the toolkit that allows the user to copy and paste objects using the clipboard. The example application will build upon the last one; it will allow the user to position four circles, to save and load the state of the circles (i.e. where the circles are positioned) and to copy and paste the circles. The example can be seen here and source files are available.

Preparation

Before you being implementing this tutorial make sure you have the latest version of the StatefulToolkit SWC, and that you’re project is set to target Flash Player 10 (if you want to target FP9, simple replace the Vector with an array in the circle container) . This tutorial also uses Keith Peter’s Minimal Comps component set to create the buttons in the application so you may want to grab the SWC for that too, but you can use your own buttons if you prefer. Both SWC files are included in the available flex project.

Creating the Statable Object

The original circle class could be left as it is, however it would be helpful to know which circle we have selected, so we know which one we are adding to the clipboard. In order to do show this we will add two new methods to the Circle; select and deselect. Each method draws the circle in a different colour. The full contents of this class can be seen below.

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 couk.markstar.examples.ui
{
	import couk.markstar.statefultoolkit.core.IStatable;
 
	import flash.display.Sprite;
 
	public class Circle extends Sprite implements IStatable
	{
		/**
		 * The constructor draws the circle with a grey outline
		 */
		public function Circle():void
		{
			super();
 
			drawCircle( 0x999999 );
		}
 
		/**
		 * Change the display of the circle to show it's selected
		 */
		public function select():void
		{
			drawCircle( 0x990000 );
		}
 
		/**
		 * Change the display of the circle to the default
		 */
		public function deselect():void
		{
			drawCircle( 0x999999 );
		}
 
		/**
		 * Retrieve the state of the circle storing the x and y properties
		 *
		 * @return The current state of the circle as an XML string
		 */
		public function retrieveState():String
		{
			var xml:String = '<object>';
			xml += '<x>' + x + '</x>';
			xml += '<y>' + y + '</y>';
			xml += '</object>';
			return xml;
		}
 
		/**
		 * Set the state of the circle by getting it's x and y values from the xml
		 *
		 * @param state The new state of the circle
		 */
		public function setState( state:XML ):void
		{
			x = Number( state.x );
			y = Number( state.y );
		}
 
		/**
		 * Used internally for creating the circles' graphics
		 * 
		 * @param lineColor The color of the line around the circle
		 */
		protected function drawCircle( lineColor:uint ):void
		{
			graphics.clear();
			graphics.lineStyle( 1, lineColor )
			graphics.beginFill( 0xFFFFFFF );
			graphics.drawCircle( 0, 0, 10 );
			graphics.endFill();
		}
	}
}

Creating the Container

Previously the circle container implemented the IStatable interface but it now implements the IStateContainer interface, because it needs to interact with the ClipboardUtil. The IStateContainer interface inherits functionality from the IStatable interface, so the circle container is still required to have the methods setState and retrieveState, but it is also required to have the methods addObjectByState, hasSelectedObject and retrieveSelectedObject.

The addObjectByState method was already implemented in the previous function, but was used internally, now it will be used by the ClipboardUtil when the user is pasting an object. In order to implement hasSelectedObject and retrieveSelectedObject we must add to the circleDownListener. After setting the _currentCircle we can call the select method of the circle to show that it has been selected. Then, before we set the _currentCircle to the one the user has mouse downed, we must deselect the old one by calling it’s deselect method. The full contents of this class can be seen below.

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

package couk.markstar.examples.ui
{
	import couk.markstar.statefultoolkit.core.IStatable;
	import couk.markstar.statefultoolkit.core.IStateContainer;
 
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;
 
	public class CircleContainer extends Sprite implements IStateContainer
	{
		protected var _circles:Vector.<Circle>;
 
		protected var _currentCircle:Circle;
		protected var _dragOffset:Point;
 
		/**
		 * The constructor the vector containing the circles shown in the container
		 */
		public function CircleContainer():void
		{
			_circles = new Vector.<Circle>();
			super();
		}
 
		/**
		 * Retrieve the selected object
		 *
		 * @return The selected object
		 */
		public function retrieveSelectedObject():IStatable
		{
			return _currentCircle;
		}
 
		/**
		 * Check whether the container has a selected object
		 *
		 * @return Boolean denoting if the container has a selected object
		 */
		public function hasSelectedObject():Boolean
		{
			return( _currentCircle ) ? true : false;
		}
 
		/**
		 * Retrieve the state of the container and all contained circles
		 *
		 * @return The current state of the container, including the state's of all circles
		 */
		public function retrieveState():String
		{
			var xml:String = "<container>";
 
			for( var i:uint = 0; i < _circles.length; i++ )
			{
				xml += _circles[ i ].retrieveState();
			}
			xml += "</container>";
			return xml;
		}
 
		/**
		 * Add an object to the container by it's state.
		 *
		 * @param state The state of the object to add, in this case the circle
		 */
		public function addObjectByState( state:XML ):void
		{
			var circle:Circle = new Circle();
			circle.addEventListener( MouseEvent.MOUSE_DOWN, circleDownListener );
			circle.setState( state );
			addChild( circle );
			_circles[ _circles.length ] = circle;
		}
 
		/**
		 * Set the state of the container by adding all circles contained within the state. The container will be cleared first.
		 *
		 * @param state The new state of the container
		 */
		public function setState( state:XML ):void
		{
			clearContainer();
 
			for( var i:uint = 0; i < state.object.length(); i++ )
			{
				addObjectByState( XML( state.object[ i ] ) );
			}
		}
 
		/**
		 * Clear the container of all circles
		 *
		 */
		protected function clearContainer():void
		{
			for( var i:uint = 0; i < _circles.length; i++ )
			{
				removeChild( _circles[ i ] );
			}
			_circles.splice( 0, _circles.length );
		}
 
		/*
		 * The following methods are all event listeners to enable the circles to be dragged
		 */
		protected function circleDownListener( e:MouseEvent ):void
		{
			// Deselect the current circle (if there is one)
			if( _currentCircle )
			{
				_currentCircle.deselect();
			}
 
			_currentCircle = Circle( e.currentTarget );
			_currentCircle.select();
 
			stage.addEventListener( MouseEvent.MOUSE_MOVE, circleMouseMoveListener );
			stage.addEventListener( MouseEvent.MOUSE_UP, circleMouseUpListener );
 
			_dragOffset = new Point( _currentCircle.x - mouseX, _currentCircle.y - mouseY );
		}
 
		protected function circleMouseMoveListener( e:MouseEvent ):void
		{
			_currentCircle.x = mouseX + _dragOffset.x;
			_currentCircle.y = mouseY + _dragOffset.y;
			e.updateAfterEvent();
		}
 
		protected function circleMouseUpListener( e:MouseEvent ):void
		{
			stage.removeEventListener( MouseEvent.MOUSE_MOVE, circleMouseMoveListener );
			stage.removeEventListener( MouseEvent.MOUSE_UP, circleMouseUpListener );
		}
	}
}

Creating the Document Class

The document class for this application very similar to the previous one. It was already responsible for creating the save and load buttons, creating the circle container, registering the circle container with the FileUtil and initialising the container with a default state. The only thing we need to add is the registration of the circle container with the ClipboardUtil. The full contents of this class can be seen below.

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
75
76
77

package {
	import com.bit101.components.PushButton;
 
	import couk.markstar.examples.ui.CircleContainer;
	import couk.markstar.statefultoolkit.utils.ClipboardUtil;
	import couk.markstar.statefultoolkit.utils.FileUtil;
	import couk.markstar.statefultoolkit.utils.IClipboardUtil;
	import couk.markstar.statefultoolkit.utils.IFileUtil;
 
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldType;
 
	[SWF( backgroundColor='#F3F3F3',frameRate='30',width='592',height='300' )]
	public class ClipboardExample extends Sprite
	{
		protected var _saveButton:PushButton;
		protected var _loadButton:PushButton;
 
		protected var _circleContainer:CircleContainer;
		protected var _fileUtil:IFileUtil;
		protected var _clipboardUtil:IClipboardUtil;
 
		/**
		 * Create the save and load buttons to save and load the state. Then create the circle container and register it with the FileUtil.
		 * By registering the container with the FileUtil it means the FileUtil knows which statable object to retrieve and set the state on
		 * when save and load are executed.
		 * Register the container with the ClipboardUtil so it can capture keyboard shortcuts.
		 */
 
		public function ClipboardExample():void
		{
			// PushButton( parent, x, y, label, MouseEvent.CLICK event listener )
			_saveButton = new PushButton( this, 196, 275, "Save", saveClickListener );
			_loadButton = new PushButton( this, 295, 275, "Load", loadClickListener );
 
			_circleContainer = new CircleContainer();
 
			_fileUtil = new FileUtil();
			_fileUtil.registerObject( _circleContainer );
 
			// ClipboardUtil requires reference to the stage so it can manage the keyboard shortcuts
			_clipboardUtil = new ClipboardUtil( stage );
			_clipboardUtil.registerContainer( _circleContainer );
 
			addChild( _circleContainer );
 
			initDefaultState();
		}
 
		protected function saveClickListener( e:MouseEvent ):void
		{
			_fileUtil.save();
		}
 
		protected function loadClickListener( e:MouseEvent ):void
		{
			_fileUtil.load();
		}
 
		/**
		 * Initialise the circle container with four circles
		 */
		protected function initDefaultState():void
		{
			var defaultState:String = '<container>';
			defaultState += '<object><x>196</x><y>100</y></object>';
			defaultState += '<object><x>196</x><y>200</y></object>';
			defaultState += '<object><x>396</x><y>100</y></object>';
			defaultState += '<object><x>396</x><y>200</y></object>';
			defaultState += '</container>';
 
			_circleContainer.setState( new XML( defaultState ) );
		}
	}
}

Testing the application

You will now be able to run the application and test that the state of the application can be saved and loaded and that you can copy and paste circles. The structure of the project can be seen below. If you do have any questions about the tutorial, or constructive criticism on the toolkit, don’t hesitate leave a comment below.

Compiled Application

Once you have compiled the application, you should get the same output as below. Try copying and pasting the circles, you will also be able to save and load the state like before.

Source Files

Source files are available from GitHub, under the heading ClipboardExample.