Moodle is the best e-learning solution on the block and is revolutionizing courses on the Web. Using JavaScript in Moodle is very useful for administrators and dynamic developers, as it uses built-in libraries to provide the modern and dynamic experience that is expected by web users today.
The Moodle JavaScript Cookbook will take you through the basics of combining Moodle with JavaScript and its various libraries and explain how JavaScript can be used along with Moodle. It will explain how to integrate Yahoo! User Interface Library (YUI) with Moodle. YUI will be the main focus of the book, and is the key to implementing modern, dynamic, feature-rich interfaces to help your users get a more satisfying and productive Moodle experience. It will enable you to add effects, make forms more responsive, use AJAX and animation, all to create a richer user experience. You will be able to work through a range of YUI features, such as pulling in and displaying information from other websites, enhancing existing UI elements to make users' lives easier, and even adding animation to your pages for a nice finishing touch.
Chapter 1, Combining Moodle and JavaScript. In this chapter, we will learn the basic techniques for integrating our JavaScript code with Moodle 2.0. We will learn several methods of including our JavaScript code in a Moodle page through .js files, and how to get the code to run. Lastly, we will look at some best practices and also how to make Moodle data and language strings available to our JavaScript code.
Chapter 2, Moodle and Yahoo! User Interface Library (YUI). In this chapter, we will learn the basics of working with YUI. We will learn how to initialize the YUI and make it ready for use within our code and load additional modules from both Version 2 and 3 of the YUI. We will also learn how to manage the execution of code by attaching events to our controls, and finally how to debug our code with YUI logging tools.
Chapter 3, Moodle Forms Validation. Moodle provides a feature-rich web forms utility based on the PHP Extension and Application Repository (PEAR) library, QuickForm. Forms produced in Moodle not using this library are an exception. So, in this chapter, we will learn how to activate the built-in JavaScript form validation functions, and also how to add our own custom JavaScript form validation logic.
Chapter 4, Manipulating Data with YUI 3. In this chapter, we will look at the ways in which we can use JavaScript and YUI to retrieve and display data from a range of different sources. Using these techniques, we can integrate all types of data into our Moodle applications — from weather forecasts, stock updates, and news feeds to any type of custom text-based data you may have from external systems, and even data from Moodle itself (both the local Moodle system and any remote systems that your code is authorized to access), retrieved through Moodle's web services API.
Chapter 5, Working with Data Tables. Database driven applications, such as Moodle require efficient methods of displaying data to users, for example a table of assignment grades, or other recent user activity. This typically takes the form of an HTML table, the familiar grid of columns and rows in the style of a spreadsheet. So in this chapter, we will learn how to initialize a YUI DataSource, display data, sort columns, add paging, and enable scrolling and editing.
Chapter 6, Enhancing Page Elements. The Yahoo! UI Library (YUI) offers a range of widgets and utilities to bring modern enhancements to your traditional page elements. In this chapter, we will look at a selection of these, including features often seen on modern interactive interfaces such as auto-complete, auto-update, custom tooltips, and so on.
Chapter 7, Advanced Layout Techniques. In this chapter, we will look at a selection of techniques available that are designed to enhance the way in which users interact with our content. First of all, we will look at the different ways in which we can present a navigation menu, giving the user a convenient list of the content that we are making available to them. Secondly, we will look at two different ways in which we can present the actual content to which they have navigated. We will also look at methods of enhancing the display and navigation of page content, by extending existing markup in keeping with the concept of "progressive enhancement".
Chapter 8, Animating Components. Animation can provide beneficial effects in a range of situations. So, in this chapter, we will look at how to bring elements on our pages to life with the use of animation.
Chapter 9, Integrating External Libraries. In this chapter, we will look at the methods available to us for integrating external JavaScript libraries. We will also look at how to setup some of the more commonly used frameworks, and implement a basic "content ready" event handler for each one. Finally, we will look at some extensions for the Prototype framework, namely the script.aculo.us add-on, and we will finish by implementing the Lightbox image-viewer extension.
To work with the code provided with the recipes in this book, you will need an installation of Moodle 2.0 to run the code along with your favorite text editor for making any changes. Visit http://moodle.org/ for downloading links and installation instructions for Moodle 2.0.
This book is aimed at developers and administrators comfortable with customizing Moodle with the use of plugin modules, themes, and patches who want to make their site more dynamic. If you have prior knowledge of HTML, PHP, and CSS and a good working knowledge of the underlying structure of Moodle, then this book is for you. No prior experience with JavaScript is needed.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "We will create a simple MooTools script that will display a JavaScript alert when the domready event is fired."
A block of code is set as follows:
window.addEvent('domready', function() {
alert('Hello from MooTools');
});
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
{
key: "title",
label: "Title",
formatter: "string",
sortable: true
}
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "When the user clicks on the Show panel button, the window's show method is called".
Feedback from our readers is always welcome. Let us know what you think about this book — what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books — maybe a mistake in the text or the code — we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.