Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

Dojo and CodeIgniter

Wednesday, March 17th, 2010

I finally found time to add my imRichEditor widget (a Dojo widget that integrates TinyMCE) to my demo site. I built my demo site using CodeIgniter and I had to figure out the best way to integrate/call the Dojo files.

When I created the demo site, I created an assets folder under the root directory (http://grasshopperpebbles.com/demos/assets). Under the assets folder, I have a folder named js (assets/js/).

I copied the dojo, dijit, and dojox folders under the js folder. I also created a folder named imDojoWidgets under the js folder. This folder will store all of the Dojo widgets that I create.

Config.php

I then created a few configuration items in CodeIgniter’s configuration file (system/application/config/config.php). The items store the location of each dojo folder.

^?View Code PHP

$config['dojo_assets'] = 'assets/js/dojo/';
$config['dijit_assets'] = 'assets/js/dijits/';
$config['dojox_assets'] = 'assets/js/dojox/';

The Controller

I set up every controller on my demo site the same way. I try to avoid redundancy. I first create variables that can be used in every method in the controller.

^?View Code PHP

class richeditor extends Controller {
 
	var $page_title = '';
	var $dojo_nav = '';
	var $dojo = '';
	var $dijit = '';
	var $dojox = '';
	var $plugin = '';
	var $nav_caption = '';
	var $demo_title = '';
	var $view_dir = '';
	var $blog_post = '';

I then set these variables in my constructor:

^?View Code PHP

function richeditor() {
	parent::Controller();
	$this->page_title = 'GrasshopperPebbles.com Demos: imRichEditor - ';
	$this->dojo_nav = $this->config->item('dojo_nav');
	$this->dojo = base_url() . $this->config->item('dojo_assets');
	$this->dijit = base_url() . $this->config->item('dijit_assets');
	$this->dojox = base_url() . $this->config->item('dojox_assets');
	$this->plugin = base_url() . 'assets/js/imDojoWidgets/';
	$this->nav_caption = 'Dojo Widgets'; 
	$this->demo_title = 'imRichEditor - '; 
	$this->view_dir = 'dojo/richeditor/main';
	$this->blog_post = 'http://grasshopperpebbles.com/ajax/dojo-and-tinymce-creating-a-widget/';
}

Notice how I set location for the Dojo files by using CodeIgniter’s $this->config->item:

^?View Code PHP

$this->dojo = base_url() . $this->config->item('dojo_assets');
// http://grasshopperpebbles.com/demos/assets/js/dojo/
 
$this->dijit = base_url() . $this->config->item('dijit_assets');
// http://grasshopperpebbles.com/demos/assets/js/dijit/
 
$this->dojox = base_url() . $this->config->item('dojox_assets');
// http://grasshopperpebbles.com/demos/assets/js/dojox/

Now I can use these values in any controller method:

^?View Code PHP

function simple() {
	$data['title'] = $this->page_title . 'TinyMCE Simple Mode';
	$data['nav_caption'] = $this->nav_caption; 
	$data['demo_title'] = $this->demo_title . 'TinyMCE Simple Mode'; 
	$data['nav'] = $this->dojo_nav;
	$data['dojo'] = $this->dojo;
	$data['dijit'] = $this->dijit;
	$data['dojox'] = $this->dojox;
	$data['plugin'] = $this->plugin;
	$data['blog_post'] = $this->blog_post;
	$this->load->vars($data);
	$this->load->view('dojo/richeditor/simple');
}

The View

Now I can use these values in my view:

^?View Code PHP

<style type="text/css">
	@import "<?php echo $dojo; ?>resources/dojo.css";
	@import "<?php echo $dojo; ?>resources/dnd.css";
	@import "<?php echo $dijit; ?>themes/soria/soria.css";
</style>
 
<script type="text/javascript" src="<?php echo $dojo; ?>dojo.js" djConfig="parseOnLoad: true, isDebug: true, usePlainJson: true, modulePaths:{'im':'<?php echo $plugin; ?>'}"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	dojo.require("dijit.form.Button");
	dojo.require("dijit.form.TextBox");
	dojo.require("im.imRichEditor");
</script>
<script type="text/javascript">
	dojo.addOnLoad(function() {
	var txt = '<h2 id="demo_headerText">Discover How To Quit Your Job And Work From Home As An Affiliate Marketer</h2>';
	var ta = new im.imRichEditor({editorNode: "tAreas", skin_variant:"black", content_css:"<?php echo base_url(); ?>css/styles.css", value: txt}, 'tEditor');
	});
</script>

Easy enough. I can streamline the code even more. All of the methods in this controller use a different main view file, but most of the code in these views are the same. The only difference are the options for the widget and the example text. So I create a main view name richeditor.php:

^?View Code PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title><?php echo $title; ?></title>
		<style type="text/css">
			@import "<?php echo $dojo; ?>resources/dojo.css";
			@import "<?php echo $dojo; ?>resources/dnd.css";
			@import "<?php echo $dijit; ?>themes/soria/soria.css";
		</style>
		<link href="<?php echo base_url(); ?>css/styles.css" rel="stylesheet" type="text/css" media="screen" />
 
		<script type="text/javascript" src="<?php echo $dojo; ?>dojo.js" djConfig="parseOnLoad: true, isDebug: true, usePlainJson: true, modulePaths:{'im':'<?php echo $plugin; ?>'}"></script>
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/tiny_mce/tiny_mce.js"></script>
		<script type="text/javascript">
			dojo.require("dijit.form.Button");
    		dojo.require("dijit.form.TextBox");
			dojo.require("im.imRichEditor");
		</script>
                <?php $this->load->view($plugin_option); ?>
	</head>
	<body>
		<div id="header">
			<?php $this->load->view('header'); ?>	
		</div>
		<div id="leftSide">
			<?php $this->load->view($nav); ?>	
		</div>
		<div id="body">
                        <?php $this->load->view($page); ?>
                </div>
               <?php $this->load->view('footer'); ?>	
	</body>
</html>

The main differences in the code is that I replaced:

^?View Code PHP

<script type="text/javascript">
dojo.addOnLoad(function() {
	var txt = '<h2 id="demo_headerText">Discover How To Quit Your Job And Work From Home As An Affiliate Marketer</h2>';
	var ta = new im.imRichEditor({editorNode: "tAreas", skin_variant:"black", content_css:"<?php echo base_url(); ?>css/styles.css", value: txt}, 'tEditor');
});
</script>

with:

^?View Code PHP

<?php $this->load->view($plugin_option); ?>

I also removed all of the example text and replaced it with:

^?View Code PHP

<?php $this->load->view($page); ?>

Now in my controller’s constructor, I set the view_dir (view directory):

^?View Code PHP

$this->view_dir = 'dojo/richeditor/';

In the controller methods, I specify which view pages to load based upon the plugin options.

^?View Code PHP

function simple() {
	...
	$data['plugin_option'] = $this->view_dir. 'simple_option';
	$data['page'] = $this->view_dir. 'simple';
	$this->load->vars($data);
	$this->load->view('dojo/richeditor/richeditor');
}
 
function advanced() {
	...
	$data['plugin_option'] = $this->view_dir. 'advanced_option';
	$data['page'] = $this->view_dir. 'advanced';
	$this->load->vars($data);
	$this->load->view('dojo/richeditor/richeditor');
}

I then create views named simple.php, simple_option.php, advanced.php, and advanced_option.php. All of these will be stored under system/applications/views/dojo/richeditor/.

The simple_option.php view file will contain:

^?View Code PHP

<script type="text/javascript">
dojo.addOnLoad(function() {
	var txt = 'Hello, how are you';
	var ta = new im.imRichEditor({theme: 'simple', editorNode: "tAreas", skin_variant:"", value: txt}, 'tEditor');	
});
</script>

While the advanced_option.php view file will contain:

^?View Code PHP

<script type="text/javascript">
dojo.addOnLoad(function() {
	var txt = '<h2 id="demo_headerText">Discover How To Quit Your Job And Work From Home As An Affiliate Marketer</h2>';
	var ta = new im.imRichEditor({editorNode: "tAreas", skin_variant:"black", content_css:"<?php echo base_url(); ?>css/styles.css", value: txt}, 'tEditor');
});
</script>

The simple.php and advanced.php view files will contain example text that is relevant to the option.

So when loading the main view (richeditor.php) via the simple method:

^?View Code PHP

<?php $this->load->view($plugin_option); ?>

The simple_option.php view file will be loaded on the page:

^?View Code PHP

<script type="text/javascript">
dojo.addOnLoad(function() {
	var txt = 'Hello, how are you';
	var ta = new im.imRichEditor({theme: 'simple', editorNode: "tAreas", skin_variant:"", value: txt}, 'tEditor');	
});
</script>

Now if I need to change the layout of the view file, I only have to update one page, not two (or however many controller methods are being used).

CodeIgniter makes it easy to integrate Dojo (or any other Ajax/Javascript Framework), just make sure you think through the process and streamline your code to remove as much redundancy as possible. Enjoy.

Categories: Ajax, Codeigniter, Dojo
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.