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.)
- Setting up the basics Adding the requirements and setting up a basic layout
- 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.
- 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.
- 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.
- 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.
- Conclusion What have we learned?
