Transcript:

Hi everybody, welcome to Hacking with YUI. I’m Jenny Donnelly, and I’m an engineer on the YUI team, and today I want to give you a whirlwind tour of the YUI Library, and give you some ideas of how to use YUI for your hacks, or your rapid prototyping, and leave you with some sample code that you can actually copy and paste right into your page to get started really fast as well.

So let’s just get started. The approach I’m going to take today is to break down YUI into different ways that you might want work with it for your hacks. The YUI library itself is actually a pretty comprehensive framework of utilities and widgets, that’s meant to help you guys, the developers, build rich, interactive web applications. And the way you do that, you can think of it as four different building blocks — to send and receive data; to build actual user interfaces on your page; to display data in a meaningful and interactive way; and to edit data in a roundtrip fashion, from the end user back to your server.

So to start, we’ll talk about how you might use YUI to send and receive data. The Connection Manager‘s kind of a flagship utility that enables in-page Ajax types of data transactions, using the XMLHttpRequest. The great thing about that, of course, is you no longer have to take your user off of a web page to send and receive your data, and it enables a really rich, interactive transaction model, where you have a full application on a web page, and your user can interact with your server application without actually leaving that page.

Now, the Get Utility will dynamically load script nodes onto a page, and also will pull CSS resources as well. And it can do this at runtime, again, without having the end user leave your webpage. You can now go and get these resources at runtime. And the nice thing about the Get Utility is that it kind of bypasses the built-in browser security restrictions, so now you can actually go get resources from third party or external URLs that are not on your domain. So keep that in mind.

And the Data Source Utility is a layer that sits on top of the Connection Manager, or the Get Utility, and it is a value added feature set that can enable caching and pulling of your data requests. And it also provides a widget normalization layer, so you can use the data source to interact with widgets like AutoComplete, DataTable, and Charts, to go and fetch data from a known place, and have all of those widgets interact with a single data source, so maybe share a cache, for instance.

So here’s the YQL console —I don’t know if you guys have had a chance to check it out yet, but this makes it so easy, now, to go and access data, and all kinds of data, from the Yahoo! Network, as well as off the network now, as well. But what I’ve done here is just to give you a sense of how quick and easy it is to go ahead and access this data now. So in that first box, what I’ve done is set up a SQL-like query to go and get some data —this is getting a forecast from the weather feed for a particular zip code. And notice that I can choose to format that data as XML, or JSON, so I’m just going to stick with JSON. And notice that callback function —it’s called “cdFunc” —and that’s the default that you can use, that the console gives me. Keep your eye on that later —that’s the hook through which we’re now going to access the data on our page.

So I’ve set up my query, and this is the data that I’m going to go look for. It’s really easy that you can browse all the different tables of data that YQL has to offer. And up in the top right, there, those are actually pre-canned queries to give you a sense of different types of queries that you can perform now. But the real no-brainer part happens in the rest query, the URL there. That’s the part of the console where you can just copy and paste that part of the URL now, and go and get that data and work with it on your web page. So the idea is, you click the copy URL button, and now you can paste it right into a call to the Get Utilities. So we’re going to call this static method Script and just paste that URL right in there. So now what the Get Utilities going to do is dynamically load a script node pointing to that data —and all we have to do, as developers, is define this callback function. And so you can call that function whatever you want —you can go back to the console and re-name it, if you want, but this is the default so we’ll just go with that for now. So the idea is you can define that function to work with that data payload however you want, and that data payload is passed to you as the O argument there.

So going back to the console, I can see the TreeView version of the data —this is the live data snapshot of what’s going to come back to me —and I can drill down and figure out what parts of the data that I want to use, and figure out how to locate that in my JSON now. So you can see there is an item node, and under there there’s are links, or descriptions —so we can pull out different pieces of data that we want to work with, and given that kind of TreeView structure we can now drill down into the JSON and actually start working with it.

So now I’m going to define the callback function, and drill down into the O —Object. The first thing I do is just a quick sanity check to make sure the data is formatted in the way that I’m expecting—if not, you might want to have some sort of exception case to throw a data error message, or something like that. But so if it passes that sniff test, I can go ahead and drill down into “query.results.channel”—different data tables will have different formats of course—and output that data into a DIV live at runtime on the page. So I’ll just populate the innerHTML of the DIV, and call “data.description” and “data.item.description”—these are little pieces of the weather data feed now, that’s going to come back for my URL that I’ve put in. And all of a sudden you’ve got this really real-time weather forecast module on your page.

And that’s how easy it is, with the Get Utility, to make that cross domain request now, and work with that data on your page. YQL makes that super easy now—you don’t even have to dig around for the data in random places, it’s all in one place. The nice thing, also, of course with YQL, is that you can access the data super easily, but also pull it together—different data tables—and manipulate them within that console. And it’ll spit out that rack URL for you to populate the Get Scripts method.

More HERE
EXAMPLES to Dowlnoad here