According to wikipedia, a “final” state machine is

a mathematical model used to design computer programs and digital logic circuits. It is conceived as an abstract machine that can be in one of a finite number of states. The machine is in only one state at a time; the state it is in at any given time is called the current state. It can change from one state to another when initiated by a triggering event or condition, thisis called a transition. A particular FSM is defined by a list of the possible states it can transition to from each state, and the triggering condition for each transition.

Applied to flash, a state machine could be an entity that manage levels in a game or, more advanced, manage the display list in order to be at the good state at any time. And that’s exactly what i did.

In order to make a decision of which transition it should trigger, the state machine needs the ability to choose, by knowning the triggering event or condition ; but for more flexibility, we’ll introduce to our state machine an object named : the Front Controller.

The smart guy

It should be very familiar to you if you come from the server-side world. In this world, there’s only need of a such an object, and not a state machine, since every webpage is a new instance of the program.

In the client-side world, the application is always the same instance. It needs to know if it’s displaying the homepage or the contact form, and how translate from one to each other.

So the plan is simple, the front controller will decide which state to apply, and the state machine will only apply the change.

Let’s do some code. To make lines shorter and cleaner, i called the state machine State, and the interface of a FrontController Controller.

First, we create the state machine, and initialize it.

var state:State = new State();
state.hook(this, new MyController());

and to trigger a change :

state.load('/home');

As said in the wikipedia definition, a finite state machine should know about all the states and all the triggers. But since the task is separated into two objects, only the front controller needs to know about that.

Let’s have a look at our MyController() :

public class MyController implements Controller
{
	public function handle(slug:String):Statement
	{
		switch(slug)
		{
			case '/home':
				return new Statement(HomeClip);

			case '/contact':
				return new Statement(ContactClip);
		}

		return null;
	}
}

Ok that’s it.

Now, when the state machine will be aware of a triggering event, it will ask the front controller what it should do.

Here, the Statement object represents a wrapper for data about the next state. It’s holding : the next state itself, and also some parameters you would pass to it, the type of transition to apply, and maybe some parameters for that transition.

Yes ; because it’s visual, you may want to pass transitions so your clips just don’t appear/disappear straight in a millisecond.

Transitions

I spent a lot of time thinking about modularity, and what would be the best compromize between a dummy implementation and a brain fucking one. After a while, i went to this simple idea : a transition only needs to know about where it comes from and where it goes. That’s it.

Let’s say we want to create something like a crossfading transition :

public class CrossFading extends Transition
{
	public function CrossFading(a:DisplayObject, b:DisplayObject):void
	{
		super(a, b);
	}

	override public function start():void
	{
	}
}

That’s all you need to start. The end of your transition should be notified by a Transition.STOP event dispatch.

Because of the diversity of the effects you would want to perform, i figured out that the state machine should not care about dealing with the addChild/removeChild stuff. It’s up to the transition to know what to display at any time.

public class CrossFading extends Transition
{
	private var duration:Number;

	public function CrossFading(a:DisplayObject, b:DisplayObject):void
	{
		super(a, b);
	}

	override public function setup(mod_params:Object = null, trans_params:Object = null):void
	{
		this.duration = trans_params.duration;
	}

	override public function start():void
	{
		TweenMax.to(a, 400, { autoAlpha:0, onComplete:p.removeChild, onCompleteParams:[a] });

		TweenMax.from(b, 400, { autoAlpha:0, onComplete:dispatchEvent, onCompleteParams:[new Event(Transition.STOP)] });
	}
}

There are some details about what’s going on here :

• the setup function is called by the state machine right after the construction of the transition, and it initializes it with some given parameters.

• the Transition has a function start():void; function that remember the Stackable interface from martian.t1me package. Maybe because it implements it :) ! So any transition is Stackable and can be used in sequences of transitions (madness).

• An other good thing is that if you take some time to code your transition and design it well, you can keep it in a separate toolbox.

• Finally, it’s also very cool to notice that Transition could also work in standalone mode. If you need a special fx for a project that doesn’t use any state machine, it doesn’t matter.

So now, how to plug this nice transition into our front controller :

public class MyController implements Controller
{
	public function handle(slug:String):Statement
	{
		switch(slug)
		{
			case '/home':
				return new Statement(HomeClip, { transition:CrossFading, transition_parameters:{ duration:200 } });

			case '/contact':
				return new Statement(ContactClip, { transition:CrossFading, transition_parameters:{ duration:200 } });
		}

		return null;
	}
}

I had lots of differents tries with that implementations. Thing is, sometimes i was passing parameters to the state itself, sometimes not ; sometimes i was using a Transition, and sometimes with parameters. Too much sometimes, i decided to give the only mandatory parameter, and then, extra parameters all together in a big anonymous object — it can be lame, but it’s pretty handy.

So now, when triggering an changing event, the state machine will take the condition, give it to the front controller, receive a Statement of what to do. It will create the new state, the given transition and let the transition do its work until it finished.

The first transition i did was a core transition which’s named Cut and does a simple addChild/removeChild switch. Then, i realized sometimes, a displayobject should want to manage itself how it should appear and disappear. Then, i coded my second core transition, called Slave.

Introducing Module

What’s a Module ? It could be seen as a super Sprite. A Sprite that is aware of the different steps of being a part of a state changing process. It knows about initialization, appearance, disappearance, and destruction.

I chose not calling it a State because it’s not a State. As it’s pretty useful, it could be used as a replacement of the regular Sprite, without any state machine. It’s a common concept, but i think it has to be separated to keep in mind the modularity.

It has 4 main functions : init, show, hide, and kill for initialization, appearance, disappearance, and destruction.

As this type is known by the state machine, this one can handle initialization and destruction processes. The initialization one is known as completed by the state machine by dispatching a Module.READY. That way, the state machine knows that the module is ready to be added to the stage and displayed. Appearance and disappearance processes should be handled, naturally, by a Transition since it’s a visual effect.

And that’s what the Slave transition does. It performs a simple hide/show sequence as the visual transition, letting each module (current and next) deal with their visual animations ; and to let the Slave transition know about the progression of appearance/disappearance, each module needs to dispatch a Module.SHOWN or Module.HIDDEN event.

With that kind of system, it’s damn easy to do whatever you want :

• If you need a kind of “external” transition, extend Transition and let’s go
• If you need a kind of internal transition, use Slave directly
• If you need an overlaping kind-of internal transition, use Slave, and dispatch your Module.HIDDEN before the end of your transition
• If you need both internal and external transition system, you can try your own Transition and take care internally of the events

That way, it’s fully customizable with staying the best compromize between flexibility and hard coding.

Deeplinking

As i already worked on my own deeplinking solution, it has been very easy to insert the deeplinking idea into the state machine. But. As it’s not necessary to use it, i prefered to separate it.

That way, the deeplinking part is away from the state machine, and should be initialized separatly ; when it’ll be done, the state machine will know it automatically, and any external change will be treated as a triggering event by the state machine.

var deeplinking:Deeplinking = new Deeplinking();
deeplinking.hook(stage);

What it does under the hood is that both State and Deeplinking classes inherits from a common class which registers each of them in a common static dictionary, so they can ask for each other.

Cherry on the cake

Because medium to big projects can have the same front controller structure, i decided to create an xml based configurable controller.

It’s highly inspired from the C# routing system, and that’s maybe why it’s called “Router”.

Let’s see how it works, and then, its xml definition scheme.

var state:State = new State();
state.hook(this, new Router(someXML, customValidationObject));

For now, that’s it. Focus on someXML. If you give an XML, it will use it directly. If you pass a String containing a ‘.xml’ or ‘.php’, it will embed the process of loading and can be queued since Router is a Stackable object.

<data>
	<states app="app.states" default="/">
		<state>
			<id>home</id>
			<module>Home</module>
			<slug>/</slug>
			<title></title>
			<keywords></keywords>
		</state>

		<state>
			<id>page1</id>
			<module>Page1</module>
			<slug>
				<pattern>/page/1</pattern>
				<parameters>
					<color>0xff0000</color>
				</parameters>
			</slug>
			<title></title>
			<keywords></keywords>
		</state>

		<state>
			<id>pages</id>
			<module>OtherPage</module>
			<slug>
				<pattern>/page/{var1}/{var2}/{var3}</pattern>
				<constraints>
					<var1>@[0-9]</var1>
					<var2>delegatefunction</var2>
					<var3 optional='true' />
				</constraints>
			</slug>
			<title></title>
			<keywords></keywords>
		</state>

		<state>
			<id>404</id>
			<module>Error404</module>
			<slug>/404</slug>
			<title></title>
			<keywords></keywords>
		</state>
	</states>

	<notfound>/404</notfound>

	<transitions app="app.transitions" default="Slave">
		<transition from="home" to="*">OverlapIn</transition>

		<transition from="*" to="home">
			<name>MyCustomTransitionBack</name>

			<parameters>
				<duration>2</duration>
			</parameters>
		</transition>
	</transitions>
</data>

Hum.

So here, nothing complicated.

Each state is defined into a state node, nested in the states area.

The states area has only 2 attributes, which are app, the package of the states, and default, a default url to launch (if needed).

Each state node has the same structure :

<state>
	<id>a unique id for this state</id>
	<module>the name of the module's class</module>
	<title></title>
	<keywords></keywords>
</state>

And a specific and modulable slug node which can have multiple definitions :

The static url one :

<slug>/url/to/match</slug>

The dynamic url one :

<slug>
	<pattern>/url/{to}/{match}</pattern>
</slug>

The constraint driven dynamic url one :

<slug>
	<pattern>/url/{to}/{match}</pattern>
	<constraints>
		<to>@^regex_expression[0-9]*</to>
		<match>delegateFunctionCall</match>
	</constraints>
</slug>

In those constraints, you can type a regular regex, or the name of a function. This function must be part of my customValidationObject, given in the hook of the state machine, and must take a String, an return a Boolean.

You can also pass optional parameters, which can have default values. Any time a default value is written, the parameter becomes optional :

<slug>
	<pattern>/url/{to}/{match}/{eventually}</pattern>
	<constraints>
		<to>@^regex_expression[0-9]*</to>
		<match>delegateFunctionCall</match>
		<eventually default="false">@(true|false)</eventually>
	</constraints>
</slug>

If any pattern matches, the code will eventually throw an Error and break your swf. To prevent that, you can give a notfound node inside of the states node, and this will be handled as your 404 document url.

var customValidationObject:Object = new Object();
customValidationObject.delegateFunctionCall = function(s:String):Boolean { return s.indexOf('valid') != -1; };

var state:State = new State();
state.hook(this, new Router(someXML, customValidationObject));

All those parameters will be given in an object in the init call of your module. You can even force passing extra parameters with a parameters node (as seen in the ‘page1′ module above).

Transitions can also be set up from here. There’s a transitions area where you can find the same app and default concepts than in states.

Each transition node has a name node, which holds the name of the transition’s class, and a parameters one, similar to slug‘s one. Those datas will be given in an object at the transition’s setup call. You can also set Flex-like filters to define where transitions should apply with the from and to attributes, which can be defined separatly, or together, with the id value of a state or * to match all.

I know it can be a bit complex, but as i’m using it all the time, i can affirm that the daily use is very easy.

Other thing to notice is that you must force inclusion of your states and transitions since they should’nt be linked to your application.

Here’s a simple working example, and the app-side sources.

Sources for this package can be found here

Description

The idea is simple. You have 3 mains objects, an 1 interface to know. Those main objects are kind of “managers” for a stack of tasks to execute. Tasks can be whatever you want, from a loading task to a tweening one. Main objects are : Sequence, Group, and Queue. Interface for a task is Stackable.

• A sequence is an object that executes one task by one task :

• A group executes all its tasks in parallel :

• A queue is a mix of sequence and group. It executes N tasks of a stack in parallel, and pick an other task of the stack when a task ends until the queue ends :

To quickly highlight the benefits of each, think that each task of the images above are actually assets. The width of the image represents the amount of time to complete the tasks, but the height represents a kind of how slow your downloads will be, because of the parallelism of the tasks.

The black line represents when those 3 types of objects dispatch an event : when their stack of task is finished.

• The Stackable interface represents an object that can be stored in a stack of tasks.

A nice thing to notice is that Sequence, Group ans Queue are Stackable. So you can make sequences of sequences, groups of sequences, sequences of queues, or whatever that may fit your needs at any time.

Because of the daily use, i already made Stackable objects :

• Load, which attempts to uniform in a unique way most of the loaders of the flash APi, Loader, URLLoader, Sound.

• Message is a Stackable AMFphp call.

• Call is a single function call with custom arguments. It looks useless alone, but it can be very handy embedded into a stack.

• Delay makes a pause into a stack.

• Shell is a wrapper for any existing object to be Stackable without having to extends or create something special. Good for edge cases.

Cherry on the cake, i’ve implemented two more interfaces :

• Progressive which defines a “progress:Number” getter.

• Pausable which is a pause/resume concept.

Both are implemented on the Queue/Sequence/Group objects already (and some other objects, such as Load).

That’s it ! Some misc classes :

• Preloader holds an abstract logic to handle preloaders with Stackable objects.

• Time is only made of static constants.

Examples

• Load uniformity (events, content access) :

var image:Load = new Load('img.png', Load.IMAGE);
image.addEventListener(Event.COMPLETE, oncomplete);
image.load();

function oncomplete(e:Event):void { var bm:Bitmap = e.target.data as Bitmap; }

var xml:Load = new Load('config.xml', Load.TEXT);
xml.addEventListener(Event.COMPLETE, oncomplete);
xml.load();

function oncomplete(e:Event):void { var data:XML = new XML(e.target.data); }

Let’s try to embed Load into our containers :

• Using a sequence to preloads assets of a website :

var config:Load = new Load('config.xml', Load.TEXT);
var locale:Load = new Load('fr_FR.xml', Load.TEXT);
var brands:Load = new Load('brands.png', Load.IMAGE);
var themes:Load = new Load('themes.swf', Load.RSL);

var data:Message = new Message('News.getAll');
var pics:Library = new Library('lib.xml');

var sequence:Sequence = new Sequence();
sequence.addEventListener(Time.STOP, oncomplete);
sequence.stack.push(config, locale, brands, themes, new Call(setup_ui), assets);
sequence.start();

function setup_ui():void { /*do something directly with the RSL*/ }
function oncomplete(e:Event):void { /* display your data */ }

• Using a Group to synchronize ending of custom objects :

var shell1:Shell = new Shell(myCustomObject1, "startFunction", "endingEvent");
var shell2:Shell = new Shell(myCustomObject2, "anotherStartFunction", "diffEndingEvent");

var group:Group = new Group();
group.addEventListener(Time.STOP, oncomplete);
group.stack.push(shell1, shell2);
group.start();

function oncomplete(e:Event):void { /* continue process */ }

• Using a Queue to parallelize some heavy downloads while small are sequenced :

var bigEmbedVideo:Load = new Load('video.swf', Load.SWF);

var queue:Queue = new Queue(2);
queue.addEventListener(Time.STOP, oncomplete);
queue.stack.push(bigEmbedVideo);
for (var i:int = 0; i < 50; i++) { queue.stack.push(new Load(i + '.jpg', Load.IMAGE)); }
queue.start();

function oncomplete(e:Event):void { /* loading done */ }

I think those examples are covering most of the main topics of the package !

As usual, comments are welcome :)

Sources for this package can be found here

First is, as i’m tired of huge structures, i decided not to deliver it as a framework. No big need to start a project with something, and apply to an obscure skeleton. There’s only small-to-medium tools which can be used all together, or not. I separated this library in many packages, let’s try to describe them quickly :

• daem0n is a suite of tools that are meant to act just like computer daemons. Most of them are managers, mainly used as singletons, but i’m sure they can do more.

• ev3nts contains some tools around the event model

• m4gic is full of small tools which looks magic for the everyday use

• sta7es keeps my state/transition machine and a very powerful and flexible routing system

• t1me is my abstracted sequencing lib.

I’ll try to add a serie of posts for each package soon.
For now, here’s the github :

let’s fork !

As said, C# was first a big discovery.

Quickly, the pros i can see from my own background are :

• Brackets based Object initializators. After typing new and your class name, add {} and define some of its property.

• This fucking awesome technology which is the lamdba expression system. It a kind of inline delegation declaration system, but strongly typed and highly flexible. I still don’t get all the power of it ; the best way to summarize it is to provide a very simple and understandable example, and its C# lambda equivalent
Let’s say, in javascript :

var strings = ['My', 'rAnDomlY', 'caSEd', 'sTRInG'];
for (var i = 0; i < strings.length; i++) { strings[i] = strings[i].toUpperCase(); }

C# Lambda made :

List<String> strings = new List<String>{ "My", "rAnDomlY", "caSEd", "sTRInG" };
strings.ConvertAll(i => i.ToLower());

It’s D.A.M.N cool.

• Linq, which is also an amazing thing. It looks like sql queries, but strongly typed as it’s no longer a String, but rather some language keywords. The main idea with it is to make a kind of select * from table, store the instance of the query, and then execute some filters on it ; but as long as you’re not executing the query, the SQL server is not polled : the instance is prepared and optimized to handle your first query and then its filtering or whatever kind of process. I didn’t had to use it directly because i wasn’t involved in the database design and its related queries, but i’ve been seduced by the clarity of it. Best thing is to have a look on an introduction to Linq there

Saying that, i feel some cons. Most of the time, shortcuts like Lambda and so on are decreasing the time of development ; sometimes, a very smart language can be long and fastidious.
Have a look at this PHP Post request :

$c = curl_init();
curl_setopt($c, CURLOPT_URL, "http://some.distant.url");
curl_setopt($c, CURLOPT_RETURNTRANSFER, true);
curl_setopt($c, CURLOPT_HEADER, false);
curl_setopt($c, CURLOPT_POST,true);
curl_setopt($c, CURLOPT_POSTFIELDS,array('param0'=>'value0','param1'=>'value1'));
$output = curl_exec($c);
var_dump($output);
curl_close($c);

See how easy it is ? I’m sure it can be reduced easily.
Same in C# :

WebRequest request = WebRequest.Create ("http://some.distant.url");
request.Method = "POST";
string postData = "param0=value0&param1=value1";
byte[] byteArray = Encoding.UTF8.GetBytes(postData);
request.ContentType = "application/x-www-form-urlencoded";
request.ContentLength = byteArray.Length;
Stream dataStream = request.GetRequestStream();
dataStream.Write(byteArray, 0, byteArray.Length);
dataStream.Close();
WebResponse response = request.GetResponse();
Console.WriteLine(((HttpWebResponse)response).StatusDescription);
dataStream = response.GetResponseStream();
StreamReader reader = new StreamReader(dataStream);
string responseFromServer = reader.ReadToEnd();
Console.WriteLine(responseFromServer);
reader.Close();
dataStream.Close();
response.Close();

Do you get what i mean now ?

Otherwise, it’s not a big deal if you’re not on a mac. Visual Studio is the smartest IDE i ever seen so far, tons of features, and a great memory management. I recognize more than ever FlashDevelop’s influences now :) You should really have a look on this one.

I worked with the .NET MVC framework

It’s also a great tool, well designed, with simplicity in mind. There’s nothing special around it when you know how great are tools like the Zend Framework or Symfony.

By the way, a very good feature in it is the templating engine, named Razor. It’s pretty simple, and all the calls are easily findable since they’re prefixed with an @. You can even type strong C# embedded in a @{} block. It’s not something new for php people, because there are dozen of templating engines, such as Smarty, etc…, but since it’s a Microsoft technology, it looked for C# devs that it’s no longer a pain in the ass, since the older templating engine was a very big crap, so it’s noticeable.

I also loved of the Routing system. I had to deal with it very deeply with it, and since i had needs like regex and custom validation on urls, i appreciated how simple it is to manage those in a single line of code.

I reproduced some concepts in my own actionscript 3 library. More to come on this subject soon ; i’m about to publish it on github. Stay tuned.

The basic is very simple. Put a timer which checks everytime the current browser values against some stored values. If different, the url has changed and a function is called. That’s it.

The current SWFAddress system works like that with old browsers. It listens to browser’s events with modern ones. With both, it checks the window.location.hash property, which holds only what’s after the hash character. Pretty easy hu ?

As you may know, some new parts of javascript includes nice history handling methods, such as pushState which, for our case, has the ability to rewrite the current url without having to use a hash. Prettier urls indeed.

Having this new kind of url introduces a new technical problem. Remember, the hash system is relative. It only cares about what’s after the hash. With manipulating the history with pushState, things are differents. As you’re not manipulating the hash anymore, you need to get your data in the window.location.href property. But as you could guess, it stores the absolute request uri, which holds your base url and some subfolder you could requests ; and mess up any kind of comparison you may try because of it.
Solving that is easy. There are plenty of solutions. The html best practice i found is that writing a base tag which describes the base url could help my code to know what’s relative to the web application in the url. With this data, the script will be able to substract the base url from window.location.href and will be able to compare stored value against browser’s current url.

So, for now, that’s required.

As for now a big amount of (dummy) users are still using some old browsers, i also implemented the regular hash engine, and choose what method to use with window.history.pushState != undefined test. I really thought that compatibility wouldn’t be a problem, but since internet explorer doesn’t store hash values in its history, i had to hack a bit with an iframe, thanks to stackoverflow.

So, it’s working both ways : with and without hash.

I decided to write it as a jQuery plugin because it was easier for me, especially with crossbrowser domready detection. After, i rewrote it in a pure javascript object. It’s less automatic but there’s no dependencies.

So it can be embedded in jQuery.deeplinking or used without dependencies as a global Deeplinking javascript object.

The plugin is also able to hook on the top of swfobject directly (both jQuery and standalone). It will try to fire a single function called ‘deeplinking’ with the event type as the first argument. Because jQuery’s swfobject plugin had a different behavior — including the object element in the selector instead of replacing it — i had to fork it.

So you can use it with flash.

Btw, if you’re kind of people to use that jquery plugin for a flash projet, you may be interested in fixing an annoying resizing bug generated by jQuery itself.

Documentation

You’ll referer to the deeplinking lib with the deeplinking object for the standalone lib and $.deeplinking for the jQuery plugin.

After that, you’ve a bunch of methods you may be interested in :

deeplinking.onready : It’s a function you’ve to set to know when the deeplinking object is ready and running.

deeplinking.oninternalchange : It’s a function you’ve to set to handle any internal url update (basically, when you set the deeplinking value by the code).

deeplinking.onexternalchange : It’s a function you’ve to set to handle any external url update. It’s the most useful. It’ll be fired when the user changes the url, or press back/forward buttons.

deeplinking.value() : It’s a getter/setter (depending if you provide an argument or not). It will set the url the way you want and fire the oninternalchange function you provided.

deeplinking.initialize() : With jQuery, it’s automatically fired on domready. When using the standalone library, it’s your business to call it first. When used with flash, the best practice i found is to let Flash call himself this method with an ExternalInterface.call().

deeplinking.activate() : Enables the url watching functions

deeplinking.deactivate() : Disables the url watching functions.

deeplinking.debug : Boolean which is used to know if some debug calls have to be fired

deeplinking.log : A function you can set to know what’s going on inside when debug is true. Its default is console.log if defined.

deeplinking.html5 : You can force this to false to use only the hash system even on modern browser.

After that, there might be other public properties/methods you want to call.

Compatibility

It’s now working on my testing browsers, known as :

Mozilla Firefox 6 and 7, Chrome 14, Internet Explorer 6/7/8 and Safari 4 for Windows for the PC part, and Mozilla Firefox 7, Chrome 14, Safari 4 for the MacOSX part.

Downloads

Deeplinking Library : standalone – jQuery

Demos

Javascript Standalone demo – (zip)
Javascript jQuery demo – (zip)

Flash Standalone demo – (zip)
Flash jQuery demo – (zip)

Fourchette it on github :)

I had the chance to work with great people before, and had lots of talks about the zend framework or symfony. I heard a lot about their processes, their pros and cons, but didn’t get the point with using those big engines for small/medium projects.

It was a good time for me. I enjoyed a lot scratching my head on problems that i knew Zend or Symfo writers had. About the structure, about performances. Since i still feel newbie with php, i didn’t matter that much on execution’s performances.

Since my project folder was fully empty, I first put some basics concepts, such as a lib folder that would have contained common framework code, a src folder that would have contained my app code, and a www folder in which i would have put public files.

Then, i started with a single monolithic static object called “App” in that lib/ folder, and a index.php in www/ that triggers my App::dispatch method, with also an .htaccess file that redirects any non-physical request to the index.php file.

After that, my strategy was to parse the url with a single type of route which was /{controller}/{action}/{parameters}.

Project changed, and a second app was also needed : the backend. I added a src/ folder that would contain a specific folder for each application handled by the framework. Since i didn’t know the best way to link urls to specific applications, i built a simple file which was called “config.php” containing an associative array was describing this relationship between urls and application.

When it was about to choose how i would do to call my actions, i started to understand why framework suffixes controller and action names : they probably needed to avoid multiple definition that could occurs between lib code and app code that couldn’t be under control.

I was not very happy with having a big structure with controller objects that had actions as methods, it looked very huge to me. As i’m a wordpress fan, i decided to use filesystem’s file as controller’s concept and simple global functions as action.

I only had to have function index($params = null) {} in my src/front/controllers/index.php file and it was working ! YAY ! After that, all was easy :) My process was kind of defined, so it was only about pimping it up… and that’s what i did !

I added a functions.php file which acted as a starter file of each application, and so i learnt about the “pre” and “post” dispatch concept i heard so much about from panosru.

I also changed the config.php file to a more simple xml file that would be parsed automatically… MUCH easier, and also inspired by the Zend’s ini file. I still ask myself if xml is the best format. I still prefer it from others, but i’ll like to consider using json, yaml or ini too.

Danetag told me a long time ago about orms, and about doctrine was working. I wanted to try myself, something more humble of course. I wrote a first “Model” object that would contain all the logic of a single abstract model object. I thought it was logic to have a static “get” method, since any model object should perform a get action to a database. Then, the instances should be able to be saved or deleted. The save method should know if an insert or update query should occur. My implementation was working fine, but i was too deep in the code to see that i would had to call Model::get any time i would get something. That was very bad because i was expecting something like User::get, or Admin::get… Hopefully for myself, php keeps inheritance of static methods. It’s still a strange and disturbing thing to me but it looks like php won’t change, since it’s still working wih php6.

I’m still not able to make NN requests, and i’m not that confident with execution’s performances. But as a piece of learning, i really enjoy what i did. I learnt a lot, and i highly recommand to try this trip into mvc. You’re in front of choices that others took before, you’re passing through some state of mind they probably had, and you take decisions that may be different than them. If the timing is good, try yourself, you’ll know what i meant ;)

I’m currently re-writing the url parsing, to let the coder choose the url pattern. I also want to taste the difficulty of i18n better than i tried to do (aka ‘DIY’).

I put my code on github, if you give it a try, feel free to comment.

Don’t be rude, it’s a 0.1 alpha :)

Most of the time, you can expect a simple box with an image, and a overlay, with a transparent black background and white font color. Even if you can predict that it could easily turn to crap, and teach your client about it, most of the time, what you predicted comes to reality.

With a bright image, if the black background is too opaque, you loose some data about the image, and more, you change the perception you had about shape of the image. If the black background is too transparent, you may find the white font unreadable very quickly.

So i went up with this stupid and almost useless idea to adapt the alpha of the background depending on what’s behind. That way, wherever the overlay could be, the alpha would always be the way it should to provide a good compromize between the visibility of the image and the readability of the font.

For a small proof of concept, i just put 4 greys and tried differents overlay. To see what i meant with visibility and readability, i made those overlays draggable:

I turned to be usefull with a real image:

Here, i put the .8 alpha overlay on the eye, to show how a too opaque background could hide image data ; and the .2 alpha overlay on a bright shoulder to show that a too transparent background could affect the readability of a text. The perfect case would be to switch them but… they’re still different (.8 vs .2 alpha). The dynamic overlay fits everywhere correctly !

I used a small object for my overlay. I think the methods written are clear enough.

var rect:Rectangle = new Rectangle(overlay.x, overlay.y, overlay.width, overlay.height);
var ba:ByteArray = image.bitmapData.getPixels(rect);

ba.position = 0;
var total:uint, color:Array;
while (ba.position < ba.length)
{
	color = int2rgb(ba.readUnsignedInt() - 0xff000000);
	total += color[0] < color[1] ? color[1] < color[2] ? color[2] : color[1] : color[0];
}

var average:Number = (total / luminosity.position) / 100;
var ratio:Number = total / (0xff * luminosity.position);

overlay.refresh({ text:'dynamic alpha (' + average.toFixed(2) + ')', alpha:average });

I expect more blogposts on subjects i care about. More as3, more php, more code.

Moar !