Grafik Kaos 
Using Adobe Spry with CodeIgniter
In this tutorial, we will be looking at how to use Adobe Spry with CodeIgniter. There have been several tutorials shows you how to use CodeIgniter with other JavaScript frameworks but none really have touched on Spry. So I hope this will be the first of many tutorials that will showcase Spry's usage with CodeIgniter.
Purpose
Read database data using Adobe Spry
Display data
Paginate data with Spry
Prerequisites
The Spry Ajax Framework http://labs.adobe.com/technologies/spry/
Download and extract the SpryAssets folder into your CodeIgniter setup folder. Make sure you place the folder in your site's root. The image below show what my setup looks like:
Next download and extract the supplied SQL file into your MySQL Server.
Alternatively, you can just copy the SQL code below and execute it on your server.
DROP TABLE IF EXISTS `tbl_articles`; CREATE TABLE IF NOT EXISTS `tbl_articles` ( `id_art` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `title_art` text, `content_art` longtext, PRIMARY KEY (`id_art`) ) TYPE=InnoDB;
We will now start off with creating out application's model. In the models folder, create a file called spry_model.php. For the purposes of this tutorial, we will keep out model very simple. All we will simply do is get all our database table records returned. So create the code shown below in the spry_model.php file.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Spry_Model extends Model {
function __construct() {
parent::__construct();
}
function readAll() {
$query = $this->db->get('tbl_articles');
if ($query->num_rows > 1) {
return $query->result();
}
}
}
It is as simple as that. Now onto our controller. Create a new file called spry.php in your controller folder and add the code below:
<?php if ( ! defined('BASEPATH') ) exit('No direct script access allowed');
class Spry extends Controller {
function __construct() {
parent::__construct();
$this->load->model('spry_model');
}
function index() {
$this->load->view('spry_example/spry_articles', $data);
}
function articles() {
// Send the headers
header('Content-type: text/xml');
header('Pragma: public');
header('Cache-control: private');
header('Expires: -1');
$data['articles'] = $this->spry_model->readAll();
$this->load->view('xml/articles', $data);
}
}
A quick breakdown of what we are doing in the controller.
The index function is loaded by default and this is what display the main page that will list all our articles that have been loaded. Normally if we were not using Spry, we would have been adding $data['articles'] = $this->spry_model->readAll(); to the index function.
The articles function allows us to dynamically create an XML file which will display a record of all the articles or items in our database table.
If we decided to access the function directly from the url (i.e. in my case: http://www.ci-tutorials.eo/spry/articles), the outcome will be shown below:
Well not exactly legible is it? With all that mess, you would'nt think, it had generated out XML output. But by viewing the page's source code, the XML has been generated as shown in the image below.
Time to start working on the view files. Create 2 folders called xml and spry_example inside the Views folder. Inside the xml folder, create a file called articles.php and open it. Once opened, copy and paste the code below:
<?php echo '<?xml version="1.0" encoding="utf-8"?>' . "\n"; ?>
<articles>
<?php if (count($articles) > 0) : ?>
<?php foreach($articles as $article) : ?>
<article>
<id><![CDATA[<?php echo $article->id_art; ?>]]></id>
<title><![CDATA[<?php echo $article->title_art; ?>]]></title>
<content><![CDATA[<?php echo $article->content_art; ?>]]></content>
</article>
<?php endforeach; ?>
<?php endif; ?>
</articles>
In this file, we are simply listing all the articles in our table and instructing PHP to display this page as an XML file. And that is all this file is going to do.
Next, create a file called spry_articles.php inside the spry_example folder that was created earlier on. Copy and paste the code below into the spry_articles.php file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Spry and CodeIgniter</title> <style> /* .SpryHiddenRegion { display: none; } */ </style> </head> <body> <div class="gkArticles SpryHiddenRegion"> <a href="#" onclick="pvArticles.previousPage();">« Previous Page</a> | <a href="#" onclick="pvArticles.nextPage();">Next Page »</a> <div class="loading"> <div style="text-align: center;"> <p>...loading recent articles...</p> </div> </div> <div class="error"> <div style="text-align: center;"> <p>...failed to load articles list...</p> </div> </div> <div id="readArticle" class="repeatArticlesRow"> <h2><a href="/article/{id_art}/" title="{title_art}">{title}</a></h2> <div id="fullArticle">{content}</div><br /> </div> <a href="#" onclick="pvArticles.previousPage();">« Previous Page</a>| <a href="#" onclick="pvArticles.nextPage();">Next Page »</a> </div> <script type="text/javascript"> var global_baseurl = '<?php echo base_url(); ?>'; </script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/SpryAssets/xpath.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/SpryAssets/SpryData.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/SpryAssets/SpryDOMUtils.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/SpryAssets/SpryPagedView.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/spry_test.js"></script> </body> </html>
Finally open up the external javascript file (spry_test.js) that was created earlier, and copy and the paste the code below into the file. I am not going to go into the details as to how Adobe Spry work (too in depth for this tutorial),
var dsArticles = new Spry.Data.XMLDataSet(global_baseurl+"spry/articles", "articles/article",{useCache:false});
dsArticles.setColumnType("title","html");
dsArticles.setColumnType("content","html");
// Code for paging the articles
var pvArticles = new Spry.Data.PagedView(dsArticles, { pageSize: 5 });
var pvArticlesPagedInfo = pvArticles.getPagingInfo();
// Add a listener that fires after the page is loaded.
Spry.Utils.addLoadListener(function()
{
Spry.$$(".gkArticles").setAttribute("spry:region","pvArticles dsArticles");
Spry.$$(".repeatArticlesRow").setAttribute("spry:repeat","pvArticles");
Spry.$$(".gkArticles_Paging").setAttribute("spry:region","pvArticlesPagedInfo");
Spry.$$(".repeatArticles_Paging").setAttribute("spry:repeatchildren",
"pvArticlesPagedInfo");
Spry.$$(".loading").setAttribute("spry:state","loading");
Spry.$$(".ready").setAttribute("spry:state","ready");
Spry.$$(".error").setAttribute("spry:state","error");
});
In the spry_test.js, we have defined an Spry XML Dataset and linked into to the dynamic xml file that will be generated in our controller. We have also set the columntype for the title and content fields to html. This will prevent any html tags from showing on our final view.
Please bare in mind that in the example code above, I made use of the SpryDOMUtils in order to avoid using Adobe Spry proprietary attributes. Using the latter, is quite simply not good for validating your web pages. Well I doubt any sane person would want their web pages wto be filled with things such as spry:repeat etc...
If you wish to learn more about Abobe Spry, please http://labs.adobe.com/technologies/spry/
You can download the application files here