Code front-end CakePHP apps like you code Flex Apps

For those who like coding in Flex (now Flash Builder) and like Flex's component-based development, you can have a very similar way of working this code structure in CakePHP using elements and javascript. I will use the JQuery framework with CakePHP for a UI widget, and show side-by-side comparisons with a similar Flex UI widget. This post should be of interest to anyone who creates both Flex and Javascript/HTML front end UI widgets, or who uses flex and want to broaden their skills to use CakePHP and JQuery.

However, you should have a basic understanding of CakePHP and have a test CakePHP site setup for our use here. You can follow the installation intructions at cakephp.org if necessary

Flex component development is done with Actionscript 3 and MXML. Actionscript 3's evolved from ECMAscript, just like javascript, so syntax is nearly identical to javascript. MXML is a markup in Flex that can be compared to HTML. Here are two UI widgets, one written using CakePHP and JQuery and the other written using Flex. mouseover to see an animation effect and click to alert:

Very similar in functionality are these two widgets. But before I show you the code, I have to disclaim that I've purposely added complexity to the code on both widgets to illustrate the wide range of possibilities with my proposed coding structures. Having that said, let's dive into the Flex code first:

UIWidget.mxml

	
		<![CDATA[
			import mx.controls.Button;
			protected function application1_ccHandler(e:Event):void
			{
				var buttons:Number = buttonList.numElements
				for  (var i=0; i < buttons; i++){
					var btn:growButton = growButton(buttonList.getElementAt(i))
					btn.gButton.label = 'button '+ i
				}
			}
		]]>
	
	
		
		
		
	

GrowButton.mxml

	

	
		<![CDATA[
			import mx.controls.Alert;
			private function ccHandler(){
				//creation complete handlers here
			}

			private function mouseOverHandler(me:MouseEvent){
				grow.play();
			}

			private function mouseOutHandler(me:MouseEvent){
				shrink.play();
			}

			private function mouseClickHandler(me:MouseEvent){
				Alert.show(me.currentTarget.label + ' has been clicked');
			}
		]]>
	
	
		
		
		
		
		
	
	

GrowButton.mxml is the component in the UIWidget.mxml application. You can see the GrowButton component has click, mouseOver and mouseOut handlers, and in the UIWidget.mxml app there is a creationComplete handler that populates each button with a label.

Now for the CakePHP and JQuery version:

/app/view/tests/uiwidget.ctp

<?php
   echo $javascript->link('jquery-1.3.2.min.js',false);
   echo $html->css('buttonList',null,array(),false);
   $js_code = "
   $(document).ready(ccHandler);  

	function ccHandler(){
		var buttons = $('#buttonList').children().length;
		for  (var i=1; i<=buttons; i++){
			var btn = $('#buttonList button:nth-child('+i+')').html('button '+ (i-1));
		}
	}
   ";
   echo $javascript->codeBlock($js_code, array('inline'=>false));
?>

	element('grow_button'); ?>
	element('grow_button'); ?>
	element('grow_button'); ?>

/app/view/elements/grow_button.ctp

<?php
   echo $javascript->link('jquery-1.3.2.min.js',false);
   echo $html->css('growButton',null,array(),false);
   $js_code = "

	function mouseClickHandler(me){
		alert($(me.target).html());
	}

	function mouseOverHandler(me){
		$(me.target).stop();
		$(me.target).animate({width: '160px'}, 1000 );
	}

   	function mouseOutHandler(me){
   		$(me.target).stop();
		$(me.target).animate({width: '70px'}, 1000 );
	}

   ";
    echo $javascript->codeBlock($js_code, array('inline'=>false));
?>

To run this you have to set up a tests_controller here: /app/controllers/tests_controller.php:

<?php
class TestsController extends AppController {
	var $name = 'Tests';
	var $uses = array();

	function uiwidget(){}
}
?>

And that's it. The CSS for the widget is in this page source (buttonList.css and growButton.css). Using this code structure allows me to switch between Flex and CakePHP/JQuery without spending very much time rethinking code placement since this general structure works for both frameworks. This code structure is very useful especially when developing heavy UI and AJAX apps, as you can breakout various widgets into elements and not have excessively bloated files.

Click the image below to view a side by side comparison chart:

One thing to note, remember when using CakePHP and JQuery that javascript functions and variables, as well as ids and classnames that the functions are bound to, MUST be uniquely named throughout all elements and their parent views/layouts or else you will get conflict errors. With Flex this is not an issue since components are compiled as objects.

I understand Ruby on Rails has things called 'partials', which may be similar to Flex components and CakePHP elements. If there are any Ruby on Rails developers out there that can supply a similar structure example compared to these examples, I would love to add it to the chart and credit you for your work.