If you have ever wanted to use YUI in your next PhoneGap (Cordova) application you are in luck, it is so easy, it’s almost trivial. This will be the first in what will probably be a series of posts about using YUI with PhoneGap (Cordova).

This tutorial assumes that you already know the basics of YUI but, at least for this first instalment, you shouldn’t have any problem following along if you don’t. I am also not going to cover the installation and setup as it is covered in detail in the Getting Started Guide. If you have never built a PhoneGap app I highly recommend completing their Hello World application first. I will be progressing through using an HTC Incredible S with Android 2.3.3 but I will be sure to point out what is device or OS specific. The application that we are going to make is going to build upon the aforementioned Hello World application adding in a button to change the text color.

Most of the confusion with using YUI and PhoneGap (Cordova) is the combo loading - How do you use the Loader in a mobile app? The simple answer is that to get started we aren’t going to be. To accomplish our task we require a certain set of YUI modules. To simplify this tutorial we are going to use the YUI Configurator. In the All Module list, click on the Node and Event Rollups. These rollups include more code than necessary but it makes the setup easier.

The configurator will generate two script tags, be sure to select both urls individually Then copy the URL portions of the link generated by the configurator and paste it into the address bar of your browser. If you are having trouble with the configurator I have included the link to the two required files: File 1 and File 2

Copy the code which is in your browser window and save the code into your assets/www directory in yui-file-1.js and yui-file-2.js respectively, the order these files are loaded is important

Now we are going to get YUI loaded and set up in our index.html file with three additional script tags.

<script type="text/javascript" src="cordova-1.8.0.js"></script>
<script type="text/javascript" src="yui-file-1.js"></script>
<script type="text/javascript" src="yui-file-2.js"></script>
<script type="text/javascript">YUI_CONFIG = { bootstrap: false };</script>

First we load in the Cordova script followed by the two files generated by the YUI configurator plus one more to configure the YUI instance to follow. By setting bootstrap to false we are preventing YUI from trying to load the Loader. Additional details can be found in the bootstrap api documentation.

We are ready for our typical YUI().use statement. Add another script tag just above the closing body tag and instead of loading in specific modules like you normally would, we are going to load in all modules that have been loaded into the page using the * symbol.

<script type="text/javascript">
YUI().use('*', function(Y) {

	var button = Y.one('button'),
		header = Y.one('h1');

	button.on('touchstart', function(e) {
		header.setStyle('color', '#00B2EE');
	});

});
</script>

We use the Y.one() method to select our dom elements as usual and then attach an event listener to the button using the Node.on() method. But instead of using the typical click event, we substitute it for the touchstart event. Just for fun you can change the touchstart back to click and you will see that it works but there is a noticeable delay in the action - this will happen with any click event handler with PhoneGap (Cordova). we then take the element we assigned to the header property and set it’s color with the Node.setStyle() method.

And that’s it! You can now load this onto your device using the same method described in the PhoneGap (Cordova) example and you have made your very first YUI PhoneGap (Cordova) application. I hope you enjoyed this brief tutorial and if you have any questions feel free to comment below, mention me on twitter or join #yui on irc.freenode.net

<!DOCTYPE HTML>
<html>
<head>
<title>My First Cordova YUI App</title>
<script type="text/javascript" src="cordova-1.8.0.js"></script>
<script type="text/javascript" src="yui-file-1.js"></script>
<script type="text/javascript" src="yui-file-2.js"></script>
<script type="text/javascript">YUI_CONFIG = { bootstrap: false };</script>
</head>
<body>

<h1>YUI PhoneGap (Cordova) Example</h1>
<p>Click this button for a surprise</p>
<button>Click Me</button>

<script type="text/javascript">
YUI().use('*', function(Y) {

	var button = Y.one('button'),
		header = Y.one('h1');

	button.on('touchstart', function(e) {
		header.setStyle('color', '#00B2EE');
	});

});
</script>
</body>
</html>