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…”

Using the YUI Loader Utility

Saturday, June 13th, 2009

The YUI Loader Utility is a client-side JavaScript component that allows you to load specific YUI components and their dependencies into your page via script. While I haven’t used the YUI Loader Utility that often, I like using the utility beacause I don’t have to remember all of the dependencies needed by each component. In addition, I can use the loader utility to load any custom plugins.

To use the YUI Loader Utility, first add it to the head section of your page. In the example below, I have added it to the header page of a wordpress blog.

^?View Code JAVASCRIPT

<script src="/lib/yui/yuiloader/yuiloader-min.js" type="text/javascript"></script>

I then create an anonymous function:

^?View Code JAVASCRIPT

(function(){
	var loader = new YAHOO.util.YUILoader();
 
	loader.addModule ({
			name: 'INTRIG.imSliderMenu',
			type: 'js',
			fullpath: "/lib/intrig/slidermenu/slidermenu.js",
			varName: 'imSliderMenu'
	});
 
	loader.require("yahoo","yahoo-dom-event","animation", "element", "selector", "fonts", "tabview", "yuiloader", "INTRIG.imSliderMenu");
	filter: "MIN";
	loader.insert({
		base: "/lib/yui/",
		loadOptional: true,
		onSuccess: function() {
			var Event = YAHOO.util.Event,
			Selector = YAHOO.util.Selector,
			Dom = YAHOO.util.Dom;
			Event.onDOMReady(function(){
				var tabView = new YAHOO.widget.TabView('tabbedContent');
				var imSliderMenu = new YAHOO.INTRIG.imSliderMenu({
					menu_container: 'pages',
					active_menu_class: 'selected',
					labels: [{
						caption: "About",
						id: "about"
					}, {
						caption: "Links",
						id: "links"
					}, {
						caption: "Free Stuff",
						id: "freeStuff"
					}],
					anim_options: {
						attributes: 'height',
						duration: 1,
						outMethod: YAHOO.util.Easing.backOut,
						inMethod: YAHOO.util.Easing.backIn
					}
				});
			});
			var elmnts = Dom.getElementsByClassName('yui-content', 'div');
			for (var i=0; i &lt;= elmnts.length; i++) {
      			Dom.setStyle(elmnts[i], 'background-color', '#798992');
			}
 
		}
	});
})();

First I instantiated the loader:

^?View Code JAVASCRIPT

var loader = new YAHOO.util.YUILoader();

Then I added a custom plugin using the addModule method:

^?View Code JAVASCRIPT

loader.addModule ({
	name: 'INTRIG.imSliderMenu',
	type: 'js',
	fullpath: "/lib/intrig/slidermenu/slidermenu.js",
	varName: 'imSliderMenu'
});

Then I load the required files needed to run my YUI application. The loader.require method also includes any custom plugins. I also include the “MIN” filter so that the minimized version of the component is loaded:

^?View Code JAVASCRIPT

loader.require("yahoo","yahoo-dom-event","animation", "element", "selector", "fonts", "tabview", "yuiloader", "INTRIG.imSliderMenu");
filter: "MIN";

Next comes loader.insert where list the base path for the YUI files. I also set loadOptional to true so YUI will load all dependent files such as the relevant CSS files.

When all of the required files have been loaded (onSuccess), I instantiate my custom widget (imSliderMenu).

There are other configurations that can be set with the Loader Utility and there are other ways to set it up. For more information see YUI Loader Utility.

Categories: Ajax, YUI
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.

Using the YUI Loader Utility

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll