I’m working on a project where I’m using CSS to add a border radius and background image to an input field. Background images are supported by all browsers, but border radius is only supported by Firefox, Safari, and Google Chrome.

border-radius

To apply a border-radius to an input field:

input {
	-webkit-border-radius: 3px;
	-moz-broder-radius: 3px;
}

-webkit-border-radius is supported by Webkit-based browsers such as Safari and Google Chrome.

-moz-border-radius is supported by Mozilla (Gecko)-based browsers such as Firefox.

Although Internet Explorer does not yet support the border-radius CSS Attribute, I found a project on Google Code that enables a developer to add border-radius support for IE6-8:

ms-border-radius

Background Image Inside Input Text

The next CSS attribute that I needed for the project was to place the image of a magnifying glass inside the input field. I do this by using the background-image and background-position attributes.

input {
	width:200px;
	height: 25px;
        -webkit-border-radius: 3px;
	-moz-broder-radius: 3px;
        background-image: url(magnifying-glass.png);
        background-repeat: no-repeat;
        background-position: right;
}

I can alternatively use CSS Shorthand:

input {
	width:200px;
	height: 25px;
        -webkit-border-radius: 3px;
	-moz-broder-radius: 3px;
        background: url(magnifying-glass.png) no-repeat right;
}

Replace Input Field with Background Image

For different project, I wanted to replace the input field with a background image. I didn’t want to use a browser-based input field, so I designed one using Photoshop.

#searchCntnr input {
	display:block;
	border:0;
	float:left;
	background:url('images/search_input.png') no-repeat;
	font: 32px bold helvetica, arial, sans-serif;
	color:#333;
	width:660px; /*668 - padding-left*/
	height:44px; /*62 - padding-top*/
	padding-left:8px;
	padding-top:18px;
	padding-bottom:0;
}

The most important CSS attribute to note when replacing an input field with a background image is the border. If you do not set the border to 0, then the default input field border will appear around the background image.

I also added padding to the input field so that the input text would appear correctly within the background image, but doing so caused the background image to be pushed down and to the right. To fix this, I changed the width and height of the background image. The background image was originally:

#searchCntnr input {
	background:url('images/search_input.png') no-repeat;
	width:668px; 
	height:62px; 
}

But because I added 8px to the left padding and 18px to the top padding, I subtracted those values from the width and height of the background image, respectively:

#searchCntnr input {
	background:url('images/search_input.png') no-repeat;
	width:660px; 
	height:44px; 
	padding-left:8px;
	padding-top:18px;
}

Using CSS to add background images to input fields is fairly straightforward, but you will usually have to do a lot of playing in order to get it to appear the same in all browsers. Enjoy.

I’m working on a new JQuery Plugin that requires the text to be vertical. This can easily be accomplished using CSS, but I found that the vertical text may appear differently in each browser depending upon the element that is used. I was able to display the text vertically in Firefox, IE8 (and IE7), Google Chrome and Safari. I looked at Opera’s CSS support and it doesn’t appear to support vertical text.

To display vertical text:

#right-col {
	background-color:#000;
	color:#ff6600;
	width:390px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	writing-mode: tb-rl;
}

<div id="right-col">FeedBack</div>

-webkit-transform is supported by Webkit-based browsers such as Safari and Google Chrome.

-moz-transform is supported by Mozilla (Gecko)-based browsers such as Firefox.

writing-mode is supported by Internet Explorer (8, 7, not sure about 6). Can also be written as:

-ms-writing-mode: tb-rl;

writing-mode is a W3C draft specification, -ms-writing-mode is an Internet Explorer specific CSS attribute.

The Writing Mode CSS attribute was initially designed for right-to-left languages, so the vertical text rotation is 90 degrees. In order for the text to appear with a -90 degree like the Mozilla and Webkit transforms:

#right-col {
	background-color:#000;
	color:#ff6600;
	width:390px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	writing-mode: tb-rl;
        filter: flipv fliph;
}

Keep in mind that the entire container will be rotated, not just the text. But when you attempt to use CSS to create vertical text on an element within a container, the placement of the text in Firefox, Safari, and Google Chrome is not where you think it would be.

#right-col {
	background-color:#000;
	color:#ff6600;
	width:390px;
}
 
#right-col p {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	writing-mode: tb-rl;
        filter: flipv fliph;
}

The height of the container (#right-col) will not increase to accommodate the new position of the P element. And the P element is displayed below the container, vertically centered. So,

<div id="right-col"><p>FeedBack</p></div>

Will be displayed as:

I made several attempts to correct the placement of the element, but was unable. It is easier to just apply the CSS vertical text attributes on the container.

I wanted to use CSS to create a Unordered List where the color of the list-style (the bullet) was different than the list-item (the text). First I set the color for the Unordered List:

.certsBlock ul {
        color:#1AB7EA;
}
.certsBlock ul  li {
        list-style:square;
        margin-bottom:5px;
}

Then I add an additional element inside the list-item (the text) and change it’s color:

.certsBlock ul  li p {
        color:#fff; /*white*/
        margin:0;
}

Now I create my Unordered List:

<div class="certsBlock">
        <ul>
                <li><p>Item 1</p></li>
                <li><p>Item 2</p></li>
                <li><p>Item 3</p></li>
        </ul>
</div>

So the color of the list-style (the square bullet) will be a blue and the list-item text will be white. Easy enough.

I’m working on a project that uses Drupal and I wanted to add a few images to the home page.

First I created the folders files/images under the root directory. I then created the home page (Create Content->Page). When adding images to the home page, the file location is relative to the root directory:

<img src="files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

But when I created another Drupal page (a page other than the home page), the relative path for the image is different:

<img src="../files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

And when I created a page using Drupal’s Panels Module, the relative path for the image is once again relative to the root directory:

<img src="files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

Adding content to Drupal seems to be fairly straightforward, but I did struggle a bit as I tried to figure out the relative paths of images/files so I hope this helps anyone else who may be struggling.

I recently stumbled upon the site FlashScope.com. It is a website where flash developers can sell their flash files, components, etc. The site contains a lot of great components such as Image galleries, page templates, and games.

A few weeks ago, I started converting some of my Flash AS2 class packages to AS3. I am creating a few new Flash components/products and updating others that I created a few years ago. One of the Flash products that I am creating, I want to distribute a free version and a version that I can get paid for.

I don’t want to take the time to setup an e-commerce site (and promote it) just to sell a few inexpensive products, so I searched for an existing site that marketed Flash products. Flashscope.com seems to be the perfect site.

One other aspect of Flashscope.com that I like is that most of the products on the site are not expensive. While perusing the site, I don’t think that I saw a product that was over $30 (the average cost is probably $10). So, in the event that I don’t want to take the time to create a particular Flash product, Flashscope seems to have enough of a variety of products that I don’t have to reinvent the wheel – and I won’t have to cut deeply into my profits for a project.

Flashscope.com also has a free flash gallery that you can download. You can demo the gallery here. I think that I will be visiting the site quite often in the future.

As a freelance developer, I am always looking for more work. The other day I was reading the skills required for a particular job and it mentioned that the candidate should have knowledge of the Blueprint CSS Framework. I had never heard of the framework before and was curious as to why one would need a framework for CSS. I consider myself to be an expert CSS designer, but I decided to check out this Blueprint thingy.

The website says that by using the Blueprint CSS Framework, I can cut down my development time and it eliminates the discrepancies across browsers. Sounds intriguing. After a bit more research, I found that Eric Meyer’s Reset CSS is incorporated into the framework. I have learned a great deal about CSS from Eric Meyer over the years:

Since I was beginning a redesign for a client, I decided to use the Blueprint framework as the basis for the effort.

After downloading the framework, I opened the screen.css file. I noticed a bunch of generically named CSS classes. Looked rather confusing. The file also contained quite a few span classes with width attributes only.

...
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}
.span-8 {width:310px;}
.span-9 {width:350px;}
.span-10 {width:390px;}
.span-11 {width:430px;}
.span-12 {width:470px;}
.span-13 {width:510px;}
.span-14 {width:550px;}
.span-15 {width:590px;}
.span-16 {width:630px;}
.span-17 {width:670px;}
.span-18 {width:710px;}
.span-19 {width:750px;}
.span-20 {width:790px;}
.span-21 {width:830px;}
.span-22 {width:870px;}
.span-23 {width:910px;}
.span-24 {width:950px;margin-right:0;}
...

I didn’t understand the concept until I opened the grid.html file (tests/parts/grid.html). I saw how the page was designed using these spans.

Note: The Blueprint CSS Framework was designed with a 1024 screen width in mind, so the maximum container width is set to 950px.

So I started of by creating the home page for the site. I added the necessary CSS files to the top of the page:

<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="style.css" type="text/css" media="screen">

You should not modify the framework files – create your custom styles in a separate CSS file. The style.css file is my custom CSS file. This file will be used to augment the stylings of the Blueprint Framework.

The Container Class

First, I will use the framework’s container class. This will hold all of the content on the page.

<div class="container">
 
</div>

You will notice in the screen.css file that the width for the container class is set at 950px.

.container {
        width:950px;
        margin:0 auto;
}

The framework automatically centers the container class on the page. I want to create additional styles for the container class. I do this in my style.css file.

.container {
	background-color:#1E4366;
}

I can optionally add a minimum height to the container.

.container {
	background-color:#1E4366;
        min-height: 800px;
}

CSS Span Classes

I designed the site with a menu at the top of the page. I will create a menu container using one of the framework’s span classes.

<div class="container">
	<div class="iet_main_menu span-24">
 
        </div>
</div>

The span-24 class will create the container with a width of 950px. The span classes are automatically floated. I created the iet_main_menu class in my style.css file.

.iet_main_menu {
	background:url(images/menu_top.jpg) no-repeat;
	height:40px;
}

Now I create the banner using the same span class.

<div class="container">
	<div class="iet_main_menu span-24">
 
        </div>
        <div class="banner span-24">
 
        </div>
</div>

And in my style.css file:

.banner {
	background:url(images/banner.jpg) no-repeat;
	height:128px;
}

Now I want to create left and right column containers. These will be contained within a main-content div.

<div class="container">
	<div class="iet_main_menu span-24">
 
        </div>
        <div class="banner span-24">
 
        </div>
        <div id="main-content" class="span-24">
		<div id="left-col" class="span-13"></div>
		<div id="right-col" class="span-11"></div>
	</div>
</div>

I created the left-col and right-col id’s because I am creating a web application and I know that I may have to reference these id’s in the app. If your website is just html (and no programming will be required), then you can probably just use the span classes. These id’s are not part of the framework.

I want to set a minimum height for my left-col and main-content divs. Obviously this is optional.

#main-content {
	min-height:450px;
}
#left-col {
	min-height:300px;
}

CSS Drop-Down Menu Framework

The Blueprint CSS Framework does not have any specific styles to create a menuing system, so I decided to use the CSS Drop-Down Menu Framework. While I wish that the Blueprint Framework came with a menu plugin, this menu framework comes with a lot of options.

After deciding on the type of menu that I wanted to display, I loaded the necessary CSS files.

<link href="css-dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />

Depending on the type of menu that you want to use, you can optionally load a small JQuery plugin that will be used for IE 7 compatibility.

<!--[if lte IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

So next I added the menus to the menu container:

<div class="iet_main_menu span-24">
        <ul id="nav" class="dropdown dropdown-horizontal">
	        <li>Home</li>
	        <li>About</li>
	        <li>Services
	                <ul>
		                <li>Services 1</li>
		                <li>Services 2</li>
		                <li>Services 3</li>
	               </ul>
	        </li>
	        <li>Contact Us</li>
        </ul>
</div>

I then copied some of the styles from one of the theme files (dropdown/themes/_template/default.css) into my style.css file and modified them to match the look and feel of my site.

ul.dropdown {
        font-weight: normal;
        float:right;
        margin-top:8px;
}
 
ul.dropdown li {
 	padding: 7px 20px;
 	border-style: solid;
 	color: #1AB7EA;
}
 
ul.dropdown li.hover, ul.dropdown li:hover {
	color: #1AB7EA;
}
 
ul.dropdown a:link,
ul.dropdown a:visited	{ color: #1AB7EA; text-decoration: none; }
ul.dropdown a:hover		{ color: #fff; }
ul.dropdown a:active	{ color: #fff; }
 
ul.dropdown ul {
        width: 150px;
        margin-top: 1px;
}
 
ul.dropdown ul li {
	font-weight: normal;
	background-color:#1E4366;
}

That’s it. Now I can add as many menu items as I want and won’t have to worry about browser compatibility.

I still need to explore the Blueprint CSS Framework a bit more. I can see that over time, using the framework (along with the CSS Drop-Down Menu Framework) will enable me to design a site much faster than starting from scratch.

I’m redesigning my portfolio site and decided to use Joomla. I just installed it on my Ubuntu box. It wasn’t difficult, but it could have been easier.

First I downloaded Joomla from here. I had the option of download a nightly build, but I wanted the latest stable version.

I unzipped the files in a directory on my web server, opened my browser and navigated to where the joomla files were located to begin the installation.

Pre-installation Check

After choosing a language, I started the Pre-installation check. According to the installation, my configuration.php file was not writable.

PHP Version >= 4.3.10  	  Yes    
- Zlib Compression Support 	Yes  
- XML Support 	Yes  
- MySQL Support 	Yes  
MB Language is Default 	Yes  
MB String Overload Off 	Yes   
configuration.php Writable  -	No

I found the file configuration.php-dist in the main Joomla folder. I opened Terminal and navigated to that location to rename the file and change the file permissions:

mv configuration.php-dist configuration.php
chmod 777 configuration.php

I then clicked the Check Again button to re-run the Pre-installation check. All of the checks were now okay.

Database Configuration

I was then asked to enter my database information. I selected MySQL and entered localhost as the host. I then entered the username and password for my MySQL.

The database name must already exist, so I opened phpMyAdmin and created a database. I then came back and entered the database name.

Note: For information on installing PHP, MySQL, and phpMyAdmin on Ubuntu, see my post,
Setting up Ubuntu for Web Development

FTP Connection

Because I’m installing Joomla on my computer, I skipped this step.

Main Configuration

Now I entered my site name, my email address, and an admin password. I then clicked the ‘Install Sample Data’ button. I received an error:

Error: the XML response that was returned from the server is invalid.

After some searching, I found that I should not have created the configuration.php file. I don’t know why this is part of the installation pre-check if it can cause problems. Perhaps it only causes problems on Ubuntu/Linux.

So I renamed configuration.php file back to configuration.php-dist and was able to install the sample data.

But when I clicked the next button, I received two errors:

Notice: Undefined index: DBtype in /home/les/public_html/greenscorpion/installation/installer/models/model.php on line 764

Fatal error: Call to undefined method JException::getNullDate() in /home/les/public_html/greenscorpion/installation/installer/helper.php on line 290

After further reading, I found that I should have created an empty configuration.php file (should be empty and writable).

touch configuration.php
chmod 777 configuration.php

I then removed removed all the database tables that were created and started the installation again. This time, I was able to successfully install Joomla.

I then removed the installation directory (Joomla security feature) and proceeded to the administrative area.

While some of these problems may occur only on Ubuntu/Linux, I was able to install Joomla and I can now work on my first template.

As a developer, I hate writing similar code for the same process over and over again. Just like highly optimized database design, developers should always try to write code as efficiently as possible.

I’m working on a project where I use YUI and CakePHP to fill multiple combo boxes on a page using Json data. At first, I wrote separate code with the same functionality for each combo box. Every time I needed to change the functionality, I had to change it for each combo box. After doing this multiple times, I decided to combine the functionality on both the front-end (YUI) and the back-end (CakePHP).

The Back-end (CakePHP)

The key to creating the optimized code on the back-end is creating a method in 1 controller. The data for each combo box come from separate tables, so initially I was going to create a new method in each of the relevant CakePHP controllers. But if I decided to change the functionality, I would have to change it in each controller file. So I am creating the method only in the controller of the relevant view. In this case, I have a Requestors page (view), so the method is created in the requestors_controller.

function getComboData($cntrl=null, $id="id", $desc="name") {
        // set autoRender to false for Ajax requests
	$this->autoRender = false;
        // set debug to 0 so debug information is not sent back to the application
	Configure::write('debug', 0);
	$result = $this->Requestor->$cntrl->find('all', array('fields' => array($cntrl.".$id", $cntrl.".$desc"), 'recursive' => -1));
	return json_encode($result);
}

So I have a getComboData method that takes the controller, field id, and field description as parameters.

($cntrl=null, $id="id", $desc="name")

I set up the method with default values for id and description so that if you named your table fields using CakePHP’s naming conventions, you don’t have to pass these values.

Notice in the find all method: When calling different model within a CakePHP controller, you have to prefix it with the existing model. In this case, the controller model is Requestor.

$this->Requestor->$cntrl->find

If I passed Language as the controller, the statement would look like:

$result = $this->Requestor->Language->find('all', array('fields' => array(Language.id, Language.name), 'recursive' => -1));

For more information on creating ajax methods and CakePHP’s recursive option, read my post: YAHOO.util.Connect, CakePHP, Json Data.

The Front-end – YUI

Now that the back-end is complete, we will create the front-end code. Again, we want to optimize the code as much as possible. We know that we have multiple combo boxes on this page (view). We will use the Yahoo Connection Manager (Yahoo.util.connect) to retrieve the Json data.

First we create the combo boxes on the page:

<label for="state_id">State:</label><select name="state_id" id="state_id"></select>
 
<label for="country_id">Country of Origin:</label><select name="country_id" id="country_id"></select>
 
<label for="language_id">Native Language:</label><select name="language_id" id="language_id"></select>
 
<label for="cbxStaff">Staff</label><select name="cbxStaff" id="cbxStaff"></select>

Next I am going to create a multidimensional array that will store the combo box name/id, the CakePHP controller name, the id field name, and the description field name for each combo box. I also created an optional default value for the selected option of the combo box ‘Select…‘.

var Dom = YAHOO.util.Dom, $ = Dom.get;
var aCB = new Array();
var cbSelect;
// cbCount will be used to keep track of which
// combo box I'll be updating based upon 
// it's position in the arrray
var cbCount = 0;
aCB[0] = new Array ('language_id', 'Language', 'id', 'name', 'Select...');
aCB[1] = new Array ('country_id', 'Country', 'id', 'name', 'Select...');
aCB[2] = new Array ('state_id', 'State', 'id', 'name', 'Select...');
aCB[3] = new Array ('cbxStaff', 'User', 'id', 'last_name', 'Select...');

I created a shortcut for YAHOO.util.Dom and another for Dom.get. cbSelect will store the selected combo box.

We will loop through the aCB array and use Yahoo.util.connect to retrieve the Json data for each combo box.

var aCBLngth = aCB.length;
var sUrl, request;
// set cbSelect to the first combo box
// aCB[0][0] = language_id
// remember, we set $ to Dom.get
cbSelect = $(aCB[0][0]);
for (var i=0; i<aCBLngth; i++) {
	sUrl = 'getComboData/' + aCB[i][1] + '/' + aCB[i][2] + '/' + aCB[i][3];
	request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);	
}

I build the url string as I iterate over the array. I’m adding the parameters needed for the getComboData in the Requestor controller. For instance, when i == 0, I retrieve the values for language.

// So:
sUrl = 'getComboData/' + aCB[0][1] + '/' + aCB[0][2] + '/' + aCB[0][3];
 
// Becomes:
sUrl = 'getComboData/Language/id/name';

Remember the parameters for the getComboData method:

getComboData($cntrl=null, $id="id", $desc="name")

Also, notice that I did not need the name of the controller in the url string. I was a bit surprised about this as well. You would think that url string would be:

sUrl = 'Requestor/getComboData/Language/id/name';

Apparently, because I am using the Requestor controller to view this page, CakePHP knows that it should look within the Requestor controller to find the getComboData method.

So now we create the callback methods for YAHOO.util.Connect.

var callback =	{
  	success:handleSuccess,
  	failure:handleFailure
};
 
var handleFailure = function(o){
// do something 			
}
 
var handleCmbSuccess = function(o){
	var response = [];
 
	if (o.responseText !== undefined) {
		try {
                        // parse the json data
	                response = YAHOO.lang.JSON.parse(o.responseText);
	            }
	            catch (x) {
	                alert("JSON Parse failed! " + o.responseText);
	                return;
	            }
                // get the total number of records
		var nL = response.length;
 
                 // if the aCB array has a default option for the combo box 'Select...',
                 // create a select option
                 // cbCount is currently 0 which corresponds to the language array
                 // aCB[0] = new Array ('language_id', 'Language', 'id', 'name', 'Select...'); 
		if (aCB[cbCount][4]) {
                        // create new option
			var opt = document.createElement("option");
			// set the value-attribute to 0:
			opt.setAttribute('value',0);
			// set the displayed value: 'Select...'
			opt.innerHTML = aCB[cbCount][4];
                        // cbSelect = $(aCB[0][0]) = the language_id combo box
			cbSelect.appendChild(opt);
		}
		// get the controller
                // cbCount = 0 (the language array)
                // aCB[cbCount][1] = 'Language'
		var cntrl = aCB[cbCount][1];
		for (var i=0; i<nL; i++) {
                        // create an option
			var opt = document.createElement("option");
			// set the value-attribute:
                        // the json data is in the following format:
                        // {"Language":{"id":"1","name":"Afrikaans"}},{"Language":{"id":"2","name":"Albanian"}},{"Language":{"id":"3","name":"Amharic"}}]
                        //  var cVal = response[0]['Language'][aCB[0]['id']] = 1
			var cVal = response[i][cntrl][aCB[cbCount][2]];
			opt.setAttribute('value', cVal);
 
			// set the displayed value:
                        // var cVal = response[0]['Language'][aCB[0]['name']] = 'Afrikaans'
			opt.innerHTML = response[i][cntrl][aCB[cbCount][3]];
			cbSelect.appendChild(opt);
		}
                // update cbCount 
		cbCount++;
                // if the cbCount is less than the number of records in the aCB array,
                // change cbSelect to the next combo box 
                if (cbCount < aCBLngth) {
                        // cbCount now = 1, so 
                        // aCB[1][0] = country_id 
			cbSelect = $(aCB[cbCount][0]);
		}
	}
}

I’m updating cbCount so that the next time the handleSuccess method is called, it will create options for the next combo box in the array. Remember, I am looping through the aCB array, so that the handleSuccess method is called for each index in the array:

for (var i=0; i<aCBLngth; i++) {
	var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);	
}

That’s it. Using YUI and CakePHP together to update multiple combo boxes may be a bit difficult, but at least I don’t have to write the same handleSuccess method for each combo box.

I’ve been upgrading an Intranet application that I created for a client. I created the front-end using YUI (Yahoo! User Interface Library) and I am working on migrating the back-end to CakePHP. After setting up CakePHP, my first step of integrating YUI with CakePHP is retrieving data ajaxally. The application was already using YAHOO.util.Connect to retrieve the data, but I had to change my parsing code due to the format of the Json data that is returned by CakePHP.

The CakePHP Controller

First we’ll setup the controller. We need to add the Javascript Helper and the RequestHandler Component.

var $helpers = array('Javascript');
var $components = array('RequestHandler');

Next we create a controller method. Let’s say that we want method that retrieves all language id’s and descriptions from the Language controller.

function getLanguages() {
        // set autoRender to false for Ajax requests
	$this->autoRender = false;
        // set debug to 0 so debug information is not sent back to the application
	Configure::write('debug', 0);
	$result = $this->Language->find('all', array('fields' => array('Language.id', 'Language.name'), 'recursive' => -1));
	return json_encode($result);
}

I’m using CakePHP’s find method with type ‘all’. The important thing to notice the recursive option. If I don’t set the recursive option to -1, then find all will retrieve more than just language data. It will also retrieve all associated model data.

Also notice that I am using json_encode. I attempted to use CakePHP’s Javascript Object method, but after an hour of trying to return a result, I moved on.

$javascript->object($result);

Normally when I deal with Json data from a database query, I am used to seeing it in the following format:

[{"id" :  "1", "name":  "Afrikaans"}, {"id" :  "2", "name":  "Albanian"}, {"id": "3", "name": "Amharic"}]

But the format created by CakePHP’s find all (after json encoding), looks like the following:

[{"Language" : {"id": "1", "name": "Afrikaans"}},{"Language":{"id": "2", "name": "Albanian"}},{"Language": {"id": "3", "name": "Amharic"}}]

This format will be important to remember when we parse the data using YUI.

YUI – YAHOO.util.Connect

Ok, now comes the fun. First we use YAHOO.util.Connect to retrieve the json data from the Language controller method.

var request = YAHOO.util.Connect.asyncRequest('GET', 'Language/getLanguages', callback);

We’ll create a simple callback method.

var callback =	{
  	success:handleSuccess,
  	failure:handleFailure
};

Now we handle success and failure:

var handleFailure = function(o){
// do something			
}
 
var handleSuccess = function(o){
	var response = [];
 
	if (o.responseText !== undefined) {
		try {
                        // parse the json data
	                response = YAHOO.lang.JSON.parse(o.responseText);
	            }
	            catch (x) {
	                alert("JSON Parse failed! " + o.responseText);
	                return;
	            }
                // get the number of records
		var nL = response.length;
                // iterate through the data
		for (var i=0; i<nL; i++) {
                        // get language id
			console.log(response[i]['Language']['id']);
                        // get Language name
                        console.log(response[i]['Language']['name']);
		}
	}
}

Remember each Json record is formatted with the controller name:

{"Language" : {"id": "1", "name": "Afrikaans"}}

So

response[i] = {"Language" : {"id": "1", "name": "Afrikaans"}}
 
response[i]['Language'] = {"id": "1", "name": "Afrikaans"}
 
response[i]['Language']['id'] = 1

Now I could have used dot notation to retrieve the data:

response[i].Language.id

Whatever floats your boat. That’s it. So as you can see using YUI (YAHOO.util.Connect) to retrieve Json data returned from CakePHP is not that difficult. Enjoy.

I justed received an error when logging into a CakePHP app. It was the Auth Component error:

you are not authorized to access that location

It occurred when I attempted to create two session variables:

if ($loggedIn == 1) {
	$result = $this->User->findByUsername($this->Auth->user("username"));
	if ($result) {
		$this->Session->write('User.langID', $result['User']['language_id']);
		$this->Session->write('User.cntryID', $result['User']['country_id']);
		echo '{"type":"continue"}';
	}
}

Because one generally receives this error message when attempting to access a page that is secured by the Auth Component and ACL, I thought that the session component was attempting to write to a restricted area. After a bit of testing, I realized that the User session var (User.langID) was being used by the Auth Component. So I changed User to an application specific variable:

$this->Session->write('rdsStaff.langID', $result['User']['language_id']);
$this->Session->write('rdsStaff.cntryID', $result['User']['country_id']);

No more errors. I hope this will be useful to someone in the same situation.