Personal tools
You are here: Home Documentation Tutorials Using YUI on Grok

Using YUI on Grok

This Tutorial applies to: 1.0
This Tutorial is intended for: Developer

In this tutorial you'll be learning how to use the Yahoo! User Interface Library, or YUI in short in your Grok project. YUI is a JavaScript and CSS library providing all sorts of handy components that you can use to make you site work an look better without too much effort, and in a cross-browser compatible way. In the process, you'll also be learning some basic uses of megrok.layout, megrok.navigation and JSON.

All content on one page (useful for printing, presentation mode etc.)

  1. Setting up the basics Adding the requirements and setting up a basic layout
  2. Adding a YUI menu We'll first define a menu using megrok.navigation, and then override the default template to make it YUI compatible. Then call some YUI js code to make it work.
  3. Introducing AJAX Up until now we haven't done anything AJAXy, however. We've used some JavaScript to make the page look a bit more dynamic, but that's about it.
  4. Return to sender All we've done now is requesting data from the server. How about sending some to the server? We'll add an edit tab with a form that posts the data without reloading the entire page.
  5. JSON meets the Panel Finally, we'll see how to use JSON for data interchange in Grok. We'll also see how to use a YUI Panel in the process.
  6. Conclusion What have we learned?