YUI Library Examples: YUI Loader Utility: Using addModule to Add Custom (Non-YUI) Content with YUILoader

Using `addModule` to Add Custom Modules via YUILoader

The purpose of this example is to illustrate one mechanism for adding custom (non-YUI) content to the page using the YUILoader Utility. For full documentation on this feature of the YUILoader, please refer to the "Using addModule" section of the YUILoader Utility User's Guide.

Identifying an External Module to Load: The Yahoo! Maps AJAX API

Yahoo! Maps offers an excellent UI widget that allows you to put mapping magic on any HTML page. This widget requires some YUI base components, so an excellent way to put it on the page is to use the YUI Loader.

Invoke `addModule` to Make YUILoader Aware of the Yahoo! Maps Module

This is a simple step in which we invoke addModule and pass in relevant metadata about our new module:


1	loader.addModule({
2	name: 'yahoomaps', //module name; must be unique
3	type: 'js', //can be "js" or "css"
4	// a variable that will be available when the script is loaded. Needed
5	// in order to act on the script immediately in Safari 2.x and below:
6	varName: "YahooMapsAPIAjax",
7	//can use a path instead, extending base path:
8	fullpath: 'http://us.js2.yimg.com/us.js.yimg.com/lib/map/js/api/ymapapi_3_8_0_7.js',
9	//the list of modules that this new module requires:
10	requires: ['yahoo','dom','event','json','animation','dragdrop']
11	});
	view plain \| print \| ?

Note that in this case we're setting up a dependency relationship between the yahoomaps module and six standard YUI modules. YUI Loader, when asked to load yahoomaps, will look at the current environment and load any of these requirements that aren't already present before loading the yahoomaps module.

Full Source for This Example

The addModule step is the most important elements of this example with respect to adding non-YUI content to the page via YUI Loader. The full source of the example, including the use of the YUI Button Control to actuate the loading of the maps widget, follows here.

The varName property is required for external scripts that need to run in Safari 2.x or lower. This is the name a variable that the downloaded script will contain. The onSuccess handler will only be executed once this property is detected.


1	<!--Container for our call-to-action button-->
2	<div id="buttonContainer"></div>
3
4	<!--Container for our Maps instance-->
5	<div id="mapContainer">Click the button above; Yahoo! Maps will load here.</div>
6
7	<script type="text/javascript">
8	//create our Button Instance which will trigger Loader to
9	//load the JSON utility from json.org.
10	YAHOO.example.buttoninit = function() {
11
12	//Create the button instance:
13	var oButton = new YAHOO.widget.Button({
14	id: "mapInsertButton",
15	type: "button",
16	label: "Click here to load Yahoo! Maps",
17	container: "buttonContainer"
18	});
19	YAHOO.log("Button created; click button to begin loading Yahoo! Maps.", "info", "example");
20
21	//Create a handler that handles the button click;
22	//it logs the click, hides the button, then fires
23	//the function (loaderinit) that brings in the Maps module:
24	var onButtonClick = function() {
25	YAHOO.log("Button clicked; hiding button now and loading Yahoo! Maps", "info", "example");
26	this.set("disabled", true); //disable the button
27	YAHOO.example.loaderinit(); //initialize loader
28	}
29
30	//attach the handler to the Button's click event:
31	oButton.on("click", onButtonClick);
32	};
33
34	//Once the buttonContainer element is on the page, we can create
35	//our button instance; in this case, the onContentReady deferral is unnecessary,
36	//because we're writing the element to the page before this script,
37	//but in many cases the onContentReady wrapper gives you added
38	//flexibility and it comes at low expense:
39	YAHOO.util.Event.onAvailable("buttonContainer",
40	YAHOO.example.buttoninit);
41
42	//Once Yahoo! Maps is loaded, we want to initialize the Maps display:
43	YAHOO.example.onMapsLoaded = function(){
44	YAHOO.log("onMapsLoaded firing.");
45
46	//The following lines employ the Yahoo! Maps
47	//Ajax API: http://developer.yahoo.com/maps/ajax/
48
49	// Create a lat/lon object
50	var myPoint = new YGeoPoint(37.754164,-122.454464);
51	// Create a map object
52	var map = new YMap(document.getElementById('mapContainer'));
53	// Add a pan control
54	map.addPanControl();
55	// Add a slider zoom control
56	map.addZoomLong();
57	// Add map type control
58	map.addTypeControl();
59	// Display the map centered on a latitude and longitude
60	map.drawZoomAndCenter(myPoint, 6);
61
62	//Log the completion of the process:
63	YAHOO.log("Yahoo! Maps was successfully loaded into the page, and the Maps display was initialized. The process is complete.", "info", "example");
64
65	};
66
67	YAHOO.example.loaderinit = function() {
68	YAHOO.log("YAHOO.example.loaderinit firing; we'll define our custom Maps module and load it now.", "info", "example");
69
70	//Begin by creating a new Loader instance:
71	var loader = new YAHOO.util.YUILoader({
72	onSuccess: YAHOO.example.onMapsLoaded
73	});
74
75	//Here we define the Yahoo! Maps API module
76	//in YUI Loader:
77	loader.addModule({
78	name: 'yahoomaps', //module name; must be unique
79	type: 'js', //can be "js" or "css"
80	// a variable that will be available when the script is loaded. Needed
81	// in order to act on the script immediately in Safari 2.x and below:
82	varName: "YahooMapsAPIAjax",
83	//can use a path instead, extending base path:
84	fullpath: 'http://us.js2.yimg.com/us.js.yimg.com/lib/map/js/api/ymapapi_3_8_2_1.js',
85	//the list of modules that this new module requires:
86	requires: ['yahoo','dom','event','json','animation','dragdrop']
87	});
88
89	//This appid, available from
90	//http://developer.yahoo.com/maps/ajax/ , must come before
91	//the insert method is called. And yes, this must be a global variable:
92	YMAPPID = "YUIBlogger";
93
94	loader.require("yahoomaps"); //include the new module
95
96	//Insert JSON utility on the page, passing in our callback:
97	loader.insert();
98
99
100	};
101	</script>
	view plain \| print \| ?

<div id="buttonContainer"></div>

<div id="mapContainer">Click the button above; Yahoo! Maps will load here.</div>

//Create the button instance:
	var oButton = new YAHOO.widget.Button({ 
		id: "mapInsertButton",  
		type: "button",  
		label: "Click here to load Yahoo! Maps",  
		container: "buttonContainer"  
	});
	YAHOO.log("Button created; click button to begin loading Yahoo! Maps.", "info", "example");

//Create a handler that handles the button click;
	//it logs the click, hides the button, then fires 
	//the function (loaderinit) that brings in the Maps module:
	var onButtonClick = function() {
		YAHOO.log("Button clicked; hiding button now and loading Yahoo! Maps", "info", "example");
		this.set("disabled", true); //disable the button
		YAHOO.example.loaderinit(); //initialize loader
	}
	
	//attach the handler to the Button's click event:
	oButton.on("click", onButtonClick);
};

//Once the buttonContainer element is on the page, we can create
//our button instance; in this case, the onContentReady deferral is unnecessary,
//because we're writing the element to the page before this script,
//but in many cases the onContentReady wrapper gives you added
//flexibility and it comes at low expense:
YAHOO.util.Event.onAvailable("buttonContainer", 
							  YAHOO.example.buttoninit);

//Once Yahoo! Maps is loaded, we want to initialize the Maps display:
YAHOO.example.onMapsLoaded = function(){
	YAHOO.log("onMapsLoaded firing.");

//The following lines employ the Yahoo! Maps
	//Ajax API: http://developer.yahoo.com/maps/ajax/
	
	// Create a lat/lon object
	var myPoint = new YGeoPoint(37.754164,-122.454464);
	// Create a map object
	var map = new YMap(document.getElementById('mapContainer'));
	// Add a pan control
	map.addPanControl();
	// Add a slider zoom control
	map.addZoomLong();
	// Add map type control
	map.addTypeControl();
	// Display the map centered on a latitude and longitude
	map.drawZoomAndCenter(myPoint, 6);

//Log the completion of the process:
	YAHOO.log("Yahoo! Maps was successfully loaded into the page, and the Maps display was initialized.  The process is complete.", "info", "example");

};

YAHOO.example.loaderinit = function() {
	YAHOO.log("YAHOO.example.loaderinit firing; we'll define our custom Maps module and load it now.", "info", "example");
	
	//Begin by creating a new Loader instance:
	var loader = new YAHOO.util.YUILoader({
		onSuccess: YAHOO.example.onMapsLoaded
	});
	
	//Here we define the Yahoo! Maps API module 
	//in YUI Loader:
	loader.addModule({		
		name: 'yahoomaps', //module name; must be unique
		type: 'js', //can be "js" or "css"
		// a variable that will be available when the script is loaded.  Needed
        // in order to act on the script immediately in Safari 2.x and below:
		varName: "YahooMapsAPIAjax", 
		//can use a path instead, extending base path:
		fullpath: 'http://us.js2.yimg.com/us.js.yimg.com/lib/map/js/api/ymapapi_3_8_2_1.js',
		//the list of modules that this new module requires:
		requires: ['yahoo','dom','event','json','animation','dragdrop']
	});
	
	//This appid, available from 
	//http://developer.yahoo.com/maps/ajax/ , must come before 
	//the insert method is called.  And yes, this must be a global variable:
	YMAPPID = "YUIBlogger";

loader.require("yahoomaps"); //include the new  module

//Insert JSON utility on the page, passing in our callback:
    loader.insert();

};
</script>

Overriding skins

In version 2.4.1 of the YUI Loader, defining modules that override existing YUI skins requires that you load them in two phases: 1) The YUI component, 2) The custom component:


1	// first load treeview
2	new YAHOO.util.YUILoader({
3	require: ['treeview'],
4	onSuccess: function() {
5	// when treeview is finished loading, define and load the custom tree modules
6	var loader = new YAHOO.util.YUILoader();
7	// define the css module that overrides the default treeview css
8	loader.addModule({
9	name:'customtreecss',
10	type:'css',
11	fullpath:'http://domain/customtree.css',
12	requires:['treeview']
13	});
14	// define the script module that extends treeview
15	loader.addModule({
16	name:'customtree',
17	type:'js',
18	fullpath:'http://domain/customtree.js',
19	// make the css file a requirement for the script
20	requires:['customtreecss']
21	});
22	loader.onSuccess = function() {
23	// build the custom tree
24	};
25	loader.insert();
26	}
27	}).insert(); // insert the treeview component immediately
28	});
	view plain \| print \| ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 1567ms (+1538) 8:24:07 PM:
LogReader  instance0
LogReader initialized

INFO 29ms (+28) 8:24:06 PM:
example
Button created; click button to begin loading Yahoo! Maps.

INFO 1ms (+1) 8:24:06 PM:
global
Logger initialized

YUI Library Examples: YUI Loader Utility: Using addModule to Add Custom (Non-YUI) Content with YUILoader

Using `addModule` to Add Custom Modules via YUILoader

Identifying an External Module to Load: The Yahoo! Maps AJAX API

Invoke `addModule` to Make YUILoader Aware of the Yahoo! Maps Module

Full Source for This Example

Overriding skins

Configuration for This Example

YUI Logger Output:

Logger Console

YUI Loader Utility Examples:

More YUI Loader Utility Resources:

YUI Library Examples: YUI Loader Utility: Using addModule to Add Custom (Non-YUI) Content with YUILoader

YUI Loader Utility: Using addModule to Add Custom (Non-YUI) Content with YUILoader

Using addModule to Add Custom Modules via YUILoader

Identifying an External Module to Load: The Yahoo! Maps AJAX API

Invoke addModule to Make YUILoader Aware of the Yahoo! Maps Module

Full Source for This Example

Overriding skins

Configuration for This Example

YUI Logger Output:

Logger Console

YUI Loader Utility Examples:

More YUI Loader Utility Resources:

Using `addModule` to Add Custom Modules via YUILoader

Invoke `addModule` to Make YUILoader Aware of the Yahoo! Maps Module