Home
Username:
Password:
JavaScript Libraries Tutorials

Project: YUI / YUI Review




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

In our final YUI tutorial we're going to do a short review over what we have discussed and learned about the YUI Library. Now, first of all we discovered how we can go to Yahoo's website and get the information as well as the configuration that we need for all of the elements that we're going to be using for our projects. The YUI Dependency Configurator is a wonderful utility that's going to allow us to get the elements that we need and not have to deal with the things we don't. We also learned how to set up our page for Cascading Style Sheet information using the class of the YUI -skin -sam. Then, in our html we also looked at how we had to set up our HTML a number of times to be in compliance with how the different widgets worked including setting up a container for our panel, setting up containers for different sections for our panel, for the Head, the Body, and then later on the Foot. We also took a look at, in our JavaScript, how to write information to the Header and Footer, right there it is inside of our panel. We learned how to configure and set up our panel as well as the secrets of render and how we had to render a lot of our different elements if they were going to be manipulated on-screen using code. So, let me go ahead and just scroll down here at the bottom because we also learned about the onDOMReady, which basically says the document is ready to be scripted to, however not all elements have been loaded to the browser so it's not quite displaying yet, so we can do some magic behind the scenes. And then, inside of our call back here, we trigger the function initializeMe and if you recall, we could have also used an anonymous function in there as well. So everything that is above here is in the initializeMe function, which included the creation of our Calendar widget, the rendering of that widget, and the hiding of that widget. Then we took a look at that blogEditor and how the Blog Editor's used, both as an editor and as a simple editor; some of the configuration options with that, and again the render for that. And there's that Blog Panel again looking at the target, and the configuration options. Then we took a look at setting up our buttons so we have YUI Buttons, and we looked at how we could take a button that already existed and turn it into a YUI Button, as well as taking containers that exist and turning those into buttons. Then we learned how to set up our Event Handling using addListeners, setting up the specific element we are wanting to look for and then the Call Back function. We also learned how some elements are going to require us to subscribe to specific events of that object, including the calendar with the selectEvent, and our animation with the onComplete. We also looked at how we can select objects inside of YUI and it's very similar to what you do with standard JavaScript. We also took a look at how we can set up some basic animations there using our FadeIn and FadeOut with the YAHOO. util dot anim, and then the last thing that we did was set up our autoComplete widget and our JSON Data Source being retrieved from our database using a PHP Page. So as you can see here we did quite a bit with our YUI and we created a nice little application here that we could easily, you know, implement anywhere that we need the functionality of either some type of blog poster or comment editor. So, that is our project for the YUI Library. I hope you learned a lot about YUI and had some fun doing so. I had a pretty good time doing this project as well.

Tutorial Information

Course: JavaScript Libraries
Author: James Street
SKU: 33984
ISBN: 1-935320-39-4
Release Date: 2009-04-06
Duration: 12.5 hrs / 157 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available