How-To Tutorials - Web Development

  Moodle JavaScript Cookbook Over 50 recipes for making your Moodle system more dynamic and responsive with JavaScript In this article, we will cover: Initializing the YUI 3 library Loading YUI 3 modules Loading YUI 2 modules from YUI 3 Attaching basic event handlers Attaching advanced DOM event handlers Implementing Event Delegation Debugging with the YUI console Introduction There are a lot of common tasks that need to be performed when writing JavaScript. A large proportion of this simply involves dealing with differences between web browsers. The need for a way to hide or abstract the specifics of each browser into a standard interface gave rise to sets of tools known as JavaScript libraries. One of the leading libraries in use on the web today is the Yahoo! User Interface Library (YUI). Moodle includes a copy of the YUI as its preferred JavaScript library. YUI provides developers with access to a wide range of tools for enhancing their web applications: The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses. YUI is proven, scalable, fast, and robust. Built by frontend engineers at Yahoo! and contributors from around the world, it's an industrial-strength JavaScript library for professionals who love JavaScript. Yahoo! Developer Network http://developer.yahoo.com/yui/ In this article, 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 versions 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. Initializing the YUI 3 library In this recipe, we will learn how to initialize the YUI 3 environment within Moodle, which will get us ready to start using YUI 3 features. Moodle takes care of most of the initial setup, namely loading the required CSS and JavaScript files, so all we need to be concerned with is activating the YUI environment. This example will show how to execute JavaScript code from within the YUI environment. We will set up a small YUI script which will simply display a message including the version number of the active YUI environment in a JavaScript alert box. This provides a simple view of what is required to get YUI up and running that we will build on further in the subsequent recipes. Getting ready We begin by setting up a new PHP file yui_init.php in the cook directory with the following content: <?php require_once(dirname(__FILE__) . '/../config.php'); $PAGE->set_context(get_context_instance(CONTEXT_SYSTEM)); $PAGE->set_url('/cook/yui_init.php'); $PAGE->requires->js('/cook/yui_init.js'); echo $OUTPUT->header(); echo $OUTPUT->footer(); ?> Notice that the preceding code references a JavaScript file yui_init.js, which has the following content: YUI().use ( function(Y) { alert('Hello from YUI ' + Y.version); } ); How to do it... We have created a PHP file that sets up a Moodle programming environment and includes a JavaScript file, in a way now familiar to us from previous recipes. What is new here is the content of the JavaScript file, which is where we will make ready the YUI 3 environment. Moodle has already included all the JavaScript files required for YUI (this happened when we output the value returned from $OUTPUT->header();). This means we now have a global object named YUI available within our JavaScript code. We create a new instance of the YUI object with the statement YUI() and then immediately call the use method. The only parameter we will pass to the use method is an anonymous function. This is just like a regular JavaScript function, except that it has no name specified; hence it is "anonymous". A name is not required, as it is not referred to again, but it is simply passed directly to the use method. This function itself accepts a single input parameter Y, which will be a reference to the new instance of the YUI object. (Note that the use method is also used to load additional YUI modules; this is the subject of the next recipe.) The anonymous function just created is the most important part of the code to take note of as this is where we will be putting our entire code that will be making use of the YUI features. In this example, you can see that we are just creating a JavaScript alert with a short message including the value of Y.version, which is simply a string containing the version number of YUI that has been loaded as seen in the following screenshot: Here, we can see that our code has successfully initialized the YUI 3.2.0 environment and is ready for us to start using the features available within the YUI and its additional modules. How it works... We have created a new instance of the global object YUI, and called the use method, passing in an anonymous function that contains the code we wish to run. When the new instance of the YUI object is fully loaded, it makes a call to our anonymous function, and our code is executed. In this example, our code displays a short message containing the version number of the YUI instance we created, confirming that we have a fully functional YUI 3 environment as a basis to implement further YUI features. Loading additional YUI modules YUI has a whole host of additional modules providing a very wide range of functionalities. Some examples of commonly used functionalities provided by additional modules include: Animation Drag and drop Manipulating DOM elements Handling DOM events (that is an input button's "click" event) Handling data (JSON/XML) For a current list of all the modules available, please refer to the Yahoo! Developer Network website for YUI 3 at the URL: http://developer.yahoo.com/yui/3/ How to do it... The loading of additional modules is achieved via the use method of the YUI object. In the previous recipe we learned how to run code via the use method with the following syntax: YUI().use ( function(Y) { /* <code to execute> */ } ); Note that the use method takes an arbitrarily long number of arguments (one or more) and only the last argument must be the anonymous function described in the previous recipe. The preceding arguments are a list of one or more modules you wish to load. So for example, to load the Animation module (anim) and the DOM Event Utility module (event), we would use the following syntax in place of the preceding one: YUI().use ( "anim", "event", function(Y) { /* <code to execute> */ } ); Now all of the features of these two additional modules (anim and event) will be available within the anonymous function that contains the code we want to execute. This technique will be used to load the modules we require in the examples contained in the subsequent recipes.

Time for action - files and folders for a new theme We could start off from scratch, but let's not make it more complicated than necessary: Simply copy the BlackCandy theme to a new folder in the same directory. We'll just call it bar as the page should be for a bar business. Now reload the CMS backend and you should be able to switch to the new bar theme. As we won't use any of the available images we can delete all image files, but leave the folder intact—we'll add our own pictures later on. Basic layout Next, we'll create our page's general layout. Time to put our template skills into action! Here's the basic layout we want to create: So far it's a pretty basic page. We'll take a good look at the templates and basic structure but won't spend much time on the HTML and CSS specifics. Do, however pay attention on how to set up the different CSS files to make the most out of them. We won't list every line of code involved. If you'd prefer, you can simply copy the missing parts from the code provided here (Ch:2) File themes/bar/templates/Page.ss This page is pretty empty. We'll later add an intro page with a different structure, so the code these templates will share is rather limited. Time for action - the base page Add the following code to the file themes/bar/templates/Page.ss: <!doctype html> <html lang="$ContentLocale"> <head> <meta charset="utf-8"/> <% base_tag %> <title> <% if MetaTitle %> $MetaTitle <% else %> $Title <% end_if %> </title> $MetaTags(false) <link rel="shortcut icon" href="favicon.ico"/> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> </head> <body> $Layout <noscript> <br/>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/>&nbsp; <div><p> <b>Please activate JavaScript.</b><br/> Otherwise you won't be able to use all available functions properly... </p></div> </noscript> </body> </html> What just happened? The highlighted parts are SilverStripe specific: First, we set the language of our content. Depending on what you've selected during the installation process this can vary. By default, it will be: <html lang="en-US"> Setting the page's base; this can be useful when referencing images and external files. Depending on how you set up your system this will vary. Setting the title just like in the BlackCandy theme. Next, adding meta tags without the title element. These are only set if you actually enter them in the CMS on the Metadata tab on the desired page's Content tab. Empty fields are simply left out in the output. Only the SilverStripe note is set in any case. Finally, including the page's specific layout. The JavaScript we include for Internet Explorer versions before 9 fixes their inability to correctly render HTML5 tags. To learn more about the specific code, head over to https://code.google.com/p/html5shim/. Why HTML5? The motivation behind it isn't to stay buzz-word compliant. While HTML5 is not a finished standard yet, it already adds new features and makes the development a little easier. Take a look at the doctype declaration for example: that's much shorter than XHTML. Now there's a real chance of actually remembering it and not needing to copy it every time you start from scratch. New features include some very handy tags, but we'll come to those in the next code sample. The output on the final HTML page for the second and third elements (we've already taken a look at the first) in the header looks like the following listing. Which part in the template is responsible for which line or lines? <title>home</title> <meta name="generator" content="SilverStripe - http://silverstripe.org" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="some keyword" /> <meta name="description" content="the description of this page" /> Did you notice that there is no reference to a CSS file and the styling is still applied? Remember that CSS files are automagically included if you stick to the naming convention we've already discussed. File themes/bar/templates/Layout/Page.ss Now let's move beyond the basics and do something a bit more interesting. Time for action - the layout page Add the following code to the file themes/bar/templates/Layout/Page.ss: <div> <img src="$ThemeDir/images/background.jpg" alt="Background" id="background"/> </div> <section id="content" class="transparent rounded shadow"> <aside id="top"> <% include BasicInfo %> </aside> <% include Menu %> <section class="typography"> $Content $Form </section> </section> <% include Footer %> We rely on just three includes which are very easy to reuse on different pages. We then reference the page's content and possible forms (no comments will be required). The only template part we've not yet covered is the $ThemeDir. This is replaced by the path to our theme, in our case themes/bar/. So you don't need to worry about hard-coded paths when copying template files between different themes. You only need to take care of paths in the CSS files as they are not processed by the template engine. The includes: BasicInfo.ss, Menu.ss, and Footer.ss In the previous code segment, we've referenced three includes. Let's not forget to create them. Time for action - the includes The includes we're yet to explore are Menu.ss, BasicInfo.ss, and Footer.ss. The menu is very simple, we only include the first level, highlighting the currently active item, as we won't have more subpages: <nav id="menu"> <ul> <% control Menu(1) %> <li class="$Linkingmode"> <a href="$Link">$MenuTitle</a> </li> <% end_control %> </ul> </nav> BasicInfo.ss only contains the $ThemeDir placeholder besides good old HTML: <a href="home"> <img src="$ThemeDir/images/logo.png" alt="Logo" id="logo"/> </a> <ul id="details-first"> <li>Phone: <b>01 23456789</b></li> <li>Contact: <a href="contact">[email protected]</a></li> <li>Address: <a href="location">Bar Street 123</a></li> </ul> <div id="details-second"> <div class="left">Opening hours:</div> <div class="right"><p> <b>Mon - Thu 2pm to 2am</b><br/> <b>Fri - Sat 2pm to 4am</b> </p></div> </div> <a href="http://www.facebook.com/pages/"> <img src="$ThemeDir/images/facebook.png" alt="Facebook" id="facebook"/> </a> Be sure to replace bar.com with your own domain. However, using it here is quite fitting because we're making a page for a bar and http://www.bar.com is only a placeholder itself. It's derived from foobar or foo bar, a placeholder name often used in computer programming. But take a look at the site yourself for more information. Finally, the footer makes use of the $Now placeholder and the date formatter .Year to retrieve the current year: <footer> <span><a href="imprint">Imprint</a></span> <span>&copy; Bar $Now.Year</span> </footer> Have a go hero - create the layout and pages Now that we've gone over all of the content, it's time to build the page. Feel free to copy some code as we're not a typing class, but take careful note of every SilverStripe specific part, so you understand what you're doing. We use three includes, so create these files and remove the rest still available from BlackCandy as well as the unused templates/Layout/Page_results.ss. And don't forget to flush the cache by appending ?flush=all to the page's URL! When working with includes it will save you a lot of trouble. We've hardcoded some links to different pages in the template files. Make sure you add all necessary pages including the imprint, but don't add it to the menu.

IBM Lotus Domino: Classic Web Application Development Techniques A step-by-step guide for web application development and quick tips to enhance applications using Lotus Domino Provide view navigation buttons Simple views intended to provide information (for example, a table of values) or links to a limited number of documents can stand alone quite nicely, embedded on a page or a view template. But if more than a handful of documents display in the view, you should provide users a way to move forward and backward through the view. If you use the View Applet, enable the scroll bars; otherwise add some navigational buttons to the view templates to enable users to move around in it. Code next and previous navigation buttons If you set the line count for a view, only that number of rows is sent to the browser. You need to add Action buttons or hotspots on the view template to enable users to advance the view to the next set of documents or to return to the previous set of documents—essentially paging backward and forward through the view. Code a Next button with this formula: @DbCommand("Domino"; "ViewNextPage") Code a Previous button with this formula: @DbCommand("Domino"; "ViewPreviousPage") Code first and last buttons Buttons can be included on the view template to page to the first and last documents in the view. Code an @Formula in a First button's Click event to compute and open a relative URL. The link reopens the current view and positions it at the first document: @URLOpen("/"+@WebDbName+"/"+@Subset(@ViewTitle;-1) + "?OpenView&Start=1") For a Last button, add a Computed for Display field to the view template with this @Formula: @Elements(@DbColumn("":"NoCache"; "" ; @ViewTitle; 1)) The value for the field (vwRows in this example) is the current number of documents in the view. This information is used in the @Formula for the Last button's Click event: url := "/" + @WebDbName + "/" + @Subset(@ViewTitle;-1) ; @URLOpen(url + "?OpenView&Start=" + @Text(vwRows)) When Last is clicked, the view reopens, positioned at the last document. Please note that for very large views, the @Formula for field vwRows may fail because of limitations in the amount of data that can be returned by @DbColumn. Let users specify a line count As computer monitors today come in a wide range of sizes and resolutions, it may be difficult to determine the right number of documents to display in a view to accommodate all users. On some monitors the view may seem too short, on others too long. Here is a strategy you might adapt to your application, that enables users to specify how many lines to display. The solution relies on several components working together: Several Computed for display fields on the view template A button that sets the number of lines with JavaScript Previous and Next buttons that run JavaScript to page through the view The technique uses the Start and Count parameters, which can be used when you open a view with a URL. The Start parameter, used in a previous example, specifies the row or document within a view that should display at the top of the view window on a page. The Count parameter specifies how many rows or documents should display on the page. The Count parameter overrides the line count setting that you may have set on an embedded view element. Here are the Computed for display fields to be created on the view template. The Query_String_Decoded field (a CGI variable) must be named as such, but all the other field names in this list are arbitrary. Following each field name is the @Formula that computes its value: Query_String_Decoded: Query_String_Decoded vwParms: @Right(@LowerCase(Query_String_Decoded); "&") vwStart: @If(@Contains(vwParms; "start="); @Middle(vwParms; "start="; "&"); "1") vwCount: @If(@Contains(vwParms; "count="); @Middle(vwParms; "count="; "&"); "10") vwURL: "/" + @WebDbName + "/"+ @Subset(@ViewTitle;1) + "?OpenView" vwRows: @Elements(@DbColumn("":"NoCache"; ""; @ViewTitle; 1)) countFlag "n" newCount: "1" Add several buttons to the view template. Code JavaScript in each button's onClick event. You may want to code these scripts inline for testing, and then move them to a JavaScript library when you know they are working the way you want them to. The Set Rows button's onClick event is coded with JavaScript that receives a line count from the user. If the user-entered line count is not good, then the current line count is retained. A flag is set indicating that the line count may have been changed: var f = document.forms[0] ; var rows = parseInt(f.vwRows.value) ; var count = prompt("Number of Rows?","10") ; if ( isNaN(count) | count < 1 | count >= rows ) { count = f.vwCount.value ; } f.newCount.value = count ; f.countFlag.value = "y" ; The Previous button's onClick event is coded to page backward through the view using the user-entered line count: var f = document.forms[0] ; var URL = f.vwURL.value ; var ctFlag = f.countFlag.value ; var oCT = parseInt(f.vwCount.value) ; var nCT = parseInt(f.newCount.value) ; var oST = parseInt(f.vwStart.value) ; var count ; var start ; if ( ctFlag == "n" ) { count = oCT ; start = oST - oCT ; } else { count = nCT ; start = oST - nCT ; } if (start < 1 ) { start = 1 ; } location.href = URL + "&Start=" + start + "&Count=" + count ; The Next button pages forward through the view using the user-entered line count: var f = document.forms[0] ; var URL = f.vwURL.value ; var ctFlag = f.countFlag.value ; var oCT = parseInt(f.vwCount.value) ; var nCT = parseInt(f.newCount.value) ; var start = parseInt(f.vwStart.value) + oCT ; if ( ctFlag == "n" ) { location.href = URL + "&Start=" + start + "&Count=" + oCT ; } else { location.href = URL + "&Start=" + start + "&Count=" + nCT ; } Finally, if First and Last buttons are included with this scheme, they need to be recoded as well to work with a user-specified line count. The @formula in the First button's Click event now looks like this: count := @If(@IsAvailable(vwCount); vwCount; "10") ; parms := "?OpenView&Start=1&Count=" + count ; @URLOpen("/" + @WebDbName + "/" + @Subset(@ViewTitle;-1) + parms) ;7 The @formula in the Last button's Click event is also a little more complicated. Note that if the field vwRows is not available, then the Start value is set to 1,000. This is really more for debugging since the Start parameter should always be set to the value of vwRows: start := @If(@IsAvailable(vwRows); @Text(vwRows); "1000") ; count := @If(@IsAvailable(vwCount); vwCount; "10") ; parms := "?OpenView&Start=" + start + "&Count=" + count ; url := "/" + @WebDbName + "/" + @Subset(@ViewTitle;-1) ; @URLOpen(url + parms) ; Code expand and collapse buttons for categorized views Two other navigational buttons should be included on the view template for categorized views or views that include document hierarchies. These buttons expand all categories and collapse all categories respectively: The Expand All button's Click event contains this @Command: @Command([ViewExpandAll]) The Collapse All button's Click event contains this @Command: @Command([ViewCollapseAll]) Co-locate and define all Action buttons Action Bar buttons can be added to a view template as well as to a view. If Action buttons appear on both design elements, then Domino places all the buttons together on the same top row. In the following image, the first button is from the view template, and the last three are from the view itself: If it makes more sense for the buttons to be arranged in a different order, then take control of their placement by co-locating them all either on the view template or on the view. Create your own Action buttons As mentioned previously, Action Bar buttons are rendered in a table placed at the top of a form. But on typical Web pages, buttons and hotspots are located below a banner, or in a menu at the left or the right. Buttons along the top of a form look dated and may not comply with your organization's web development standards. You can replace the view template and view Action buttons with hotspot buttons placed elsewhere on the view template: Create a series of hotspots or hotspot buttons on the view template, perhaps below a banner. Code @formulas for the hotspots that are equivalent to the Action Bar button formulas. Define a CSS class for those hotspots, and code appropriate CSS rules. Delete or hide from the Web all standard Action Bar buttons on the view template and on the view.

Views are important to most Domino applications. They provide the primary means by which documents are located and retrieved. But working with views on the Web is often more complicated or less satisfactory than using views with the Notes client. Several classic view options are available for web applications, all of which have draw-backs and implementation issues. A specific view can be displayed on the Web in several different ways. So it is helpful to consider view attributes that influence design choices, in particular: View content View structure How a view is translated for the Web How a view looks in a browser Whether or not a view template is used View performance Document hierarchy In terms of content, a view contains: Data only Data and HTML tags In terms of structure, views are: Uncategorized Categorized In terms of the techniques used by Domino to translate views for the Web, there are four basic methods: Domino-generated HTML (the default) Developer-generated HTML (the view contains data and HTML tags) View Applet (used with data only views) XML (the view is transmitted to the browser as an XML document) The first three of these methods are easier to implement. Two options on the Advanced tab of View Properties control which of these three methods is used: Treat view contents as HTML Use applet in the browser If neither option is checked, then Domino translates the view into an HTML table and then sends the page to the browser. If Treat view contents as HTML is checked, then Domino sends the view to the browser as is, assuming that the developer has encoded HTML table tags in the view. If Use applet in the browser is checked, then Domino uses the Java View Applet to display the view. (As mentioned previously, the Java Applets can be slow to load, and they do require a locally installed JVM (Java Virtual Machine)). Using XML to display views in a browser is a more complicated proposition, and we will not deal with it here. Pursue this and other XML-related topics in Designer Help or on the Web. Here is a starting point: http://www.ibm.com/developerworks/xml/ In terms of how a view looks when displayed in a browser, two alternatives can be used: Native styling with Designer Styling with Cascading Style Sheets In terms of whether or not a view template is used, there are three choices: A view template is not used The default view template is used A view template created for a specific view is used Finally, view performance can be an issue for views with many: Documents Columns Column formulas Column sorting options Each view is indexed and refreshed according to a setting on the Advanced tab of View Properties. By default, view indices are set to refresh automatically when documents are added or deleted. If the re-indexing process takes longer, then application response time can suffer. In general, smaller and simpler views with fewer column formulas perform better than long, complicated and computationally intensive views. The topics in this section deal with designing views for the Web. The first few topics review the standard options for displaying views. Later topics offer suggestions about improving view look and feel. Understand view Action buttons As you work with views on the Web, keep in mind that Action buttons are always placed at the top of the page regardless of how the view is displayed on the Web (standard view, view contents as HTML) and regardless of whether or not a view template is used. Unless the Action Bar is displayed with the Java applet, Action buttons are rendered in a basic HTML table; a horizontal rule separates the Action buttons from the rest of the form. Bear in mind that the Action buttons are functionally connected to but stylistically independent of the view and view template design elements that display lower on the form. Use Domino-generated default views When you look at a view on the Web, the view consists only of column headings and data rows. Everything else on the page (below any Action buttons) is contained on a view template form. You can create view templates in your design, or you can let Domino provide a default form. If Domino supplies the view template, the rendered page is fairly basic. Below the Action buttons and the horizontal rule, standard navigational hotspots are displayed; these navigational hotspots are repeated below the view. Expand and Collapse hotspots are included to support categorized views and views that include documents in response hierarchies. The view title displays below the top set of navigational hotspots, and then the view itself appears. If you supply a view template for a view, you must design the navigational hotspots, view title, and other design elements that may be required. View contents are rendered as an HTML table with columns that expand or contract depending upon the width of cell contents. If view columns enable sorting, then sorting arrows appear to the right of column headings. Here is an example of how Domino displays a view by default on the Web: In this example, clicking the blue underscored values in the left-most Last Name column opens the corresponding documents. By default, values in the left-most column are rendered as URL links, but any other column—or several columns—can serve this purpose. To change which column values are clickable, enable or disable the Show values in this column as links option on the Advanced tab of Column Properties: Typically a title, subject, or another unique document attribute is enabled as the link. Out of the box default views are a good choice for rapid prototyping or for one-time needs where look-and-feel are less important. Beyond designing the views, nothing else is required. Domino merges the views with HTML tags and a little JavaScript to produce fully functional pages. On the down side, what you see is what you get. Default views are stylistically uninspiring, and there is not a lot that can be done with them beyond some modest Designer-applied styling. Many Designer-applied styles, such as column width, are not translated to the Web. Still, some visual improvements can be made. In this example, the font characteristics are modified, and an alternate row background color is added: Include HTML tags to enhance views Some additional styling and behavior can be coded into standard views using HTML tags and CSS rules. Here is how this is done: In this example, <font> tags surround the column Title. Note the square brackets that identify the tags as HTML: Tags can also be inserted into column value formulas: "[<font color='darkblue'>]" + ContactLast + "[</font>]" When viewed with a browser, the new colors are displayed as expected. But when the view is opened in Notes, it looks like this: (Move the mouse over the image to enlarge it.) The example illustrates how to code the additional tags, but frankly the same effects can be achieved using Designer-applied formatting, so there is no real gain here. The view takes longer to code and the final result is not very reader-friendly when viewed with the Notes client. That being said, there still may be occasions when you want to add HTML tags to achieve a particular result. Here is a somewhat more complicated application of the same technique. This next line of code is added to the Title of a column. Note the use of <sup> and <font> tags. These tags apply only to the message See footnote 1: Last Name[^{<font color='red'>]See footnote 1[</font>}] The result achieves the desired effect: More challenging is styling values in view columns. You do not have access to the <td> or <font> tags that Domino inserts into the page to define table cell contents. But you can add <span> tags around a column value, and then use CSS rules to style the span. Here is what the column formula might look like: "[<span class='column1'>]" + ContactLast + "[</span>]" Here is the CSS rule for the column1 class: .column1 { background-color: #EEE; cursor: default; display: block; font-weight: bold; text-decoration: none; width: 100%; } These declarations change the background color of the cell to a light gray and the pointer to the browser default. The display and width declarations force the span to occupy the width of the table cell. The text underscoring (for the link) is removed and the text is made bold. Without the CSS rule, the view displays as expected: With the CSS rule applied, a different look for the first column is achieved:

CMS Made Simple Development Cookbook Over 70 simple but incredibly effective recipes for extending CMS Made Simple with detailed explanations – useful for beginners and experts alike! These recipes have been specially selected to demonstrate capabilities. While they may be useful as provided, they are designed to show the range of what can be done with tags, and to provide examples of useful operations such as setting Smarty variables, interfacing with the database, interacting with modules, and consuming data from remote web services. You are encouraged to use these recipes as starting points for your own projects. Introduction One of the most popular uses of CMS Made Simple involves an administrator who creates a basic site structure and template, and one or more editors who maintain page content without having to worry about the site layout. In this configuration, you can think of the CMS essentially as a big template engine with some utilities to add content. Each page of the site comprises a page template with areas that get populated with various kinds of content. These areas are either tags or variables, where the distinction is that a tag involves the execution of code, while a variable is a simple substitution of values. The CMS comes with a large assortment of built-in tags, including the fundamental "content" tag and a variety of useful supporting tags for building navigation, links, including images, and so forth. Because CMS Made Simple can be seen as being built around tags, it is not surprising that there are facilities for creating your own tags. You can create tags directly through the Admin panel—these are called User-Defined Tags or UDTs. If you want even more extensive capabilities in your tag, you can have those capabilities by creating a file that follows a few basic conventions. The template engine used by CMS Made Simple comes from the Smarty project. Pages are Smarty templates, and the built-in CMS tag types are all Smarty tags. Behind the scenes, both UDTs and file-based tags also become Smarty tags. For additional information on Smarty, the documentation provided by the Smarty project is invaluable. You can read more at http://www.smarty.net/docsv2/en/ Displaying the User's IP address from a User-Defined Tag This recipe demonstrates creating a very simple User-Defined Tag, and using it to display information, that it gets from PHP globally-defined variables. Getting ready For this recipe, you will need to have CMS Made Simple installed and working. You will need login access to the site's Administration area as a member of the "admin" group, or as a member of a group with permissions to "Modify User-Defined Tags" and "Manage All Content". How to do it... Log in to your CMS Administration area. Using the top menu, go to "Extensions" and click on "User Defined Tags". Click on the "Add User Defined Tag" button. In the "Name" field type "user_ip". In the "Code" text area, type the following code: echo 'Welcome user from '.$_SERVER['REMOTE_ADDR'].' -- enjoy your visit!'; Click on the "Submit" button. Using the top menu, go to "Content" and click on "Pages". Click on the "Add New Content" button. In the "Title" and "Menu Text" fields, type "Tag Test". In the "Content" text area, type the following code: {user_ip} Click on the "Submit" button. View your site from the user side. Click on the new "Tag Test" page. How it works... User-Defined Tags work by linking a piece of PHP code to a tag which is recognized by Smarty. When Smarty parses a template and encounters that tag, it executes the code in question, and substitutes the tag markup with any output from that PHP code. When we create a UDT in the CMS Made Simple admin area, the name we enter into the text field becomes the tag which Smarty will look for, and the code we enter into the text area is the PHP associated with the tag. This recipe is an example of outputting text directly from a User-Defined Tag. It works by echoing a string, that then replaces the {user_ip} tag in the content. This substitution of the tag can take place either in a page template or in the page content, which might seem a little confusing since it's stated earlier that Smarty processes tags that it finds in templates. The confusion, though, is mostly due to terminology; CMS Made Simple processes both layout templates and page content through Smarty, so while it is being processed, page content serves as a template from Smarty's perspective. The User-Defined Tag we create accesses one of the PHP "superglobals"—the $_SERVER variable . This variable contains information about the HTTP request and some environmental information about the PHP server. In this case, we're getting the user's IP address information to display. Using the CmsObject and the current content object in a User-Defined Tag This recipe shows you how to access the Page Content object via the CmsObject in a User-Defined Tag. The primary technique that it demonstrates—getting a reference to the CmsObject and using the CmsObject to get a reference to other important CMS runtime objects—is one that you will use to solve many different kinds of problems. In this recipe, we use the CmsObject to get a reference to the Page Content object. Once we have a reference to this object, we can call upon its methods to report all kinds of interesting information about the current page content. Getting ready For this recipe, you will need login access to your site's Administration area with permission to "Modify User-Defined Tags" and "Manage All Content". How to do it... Log in to your CMS Administration area. Using the top menu, go to "Extensions" and click on "User Defined Tags". Click on the "Add User Defined Tag" icon. In the "Name" field, type "content_description". In the "Code" field, type the following code: $gCms = cmsms(); $contentops = $gCms->GetContentOperations(); $content_obj = $contentops->getContentObject(); echo 'Current content object is "'.$content_obj->Name().'"<br />'; echo 'which was created on '.$content_obj->GetCreationDate().'<br />'; echo 'its alias is "'.$content_obj->Alias().'"<br />'; echo 'and its URL is "'.$content_obj->GetURL().'"<br />'; Click on the "Submit" button. Using the top menu, select "Content" and click on "Pages". Click on the "Add New Content" button. Enter "New Content Page" into the "Title" and "Menu Text" fields. In the "Content" field, enter: {content_description} Click on the "Submit" button. View your site from the user side. Click on the new "Content Page" page. How it works... CMS Made Simple uses an internal object called "CmsObject" to keep track of a great deal of what it needs to serve content. This information includes the site hierarchy, the installed and active modules, references to the database, and more. The CmsObject is available to Modules, Tags, and User-Defined Tags via the cmsms() function. In this recipe, we want to display information from the current Content object. However, this object is not directly accessible. To get access to this object, we need to make a static call to the ContentOperations object, but this object is also not directly accessible from our code. To get access to these objects, we need to get references to them. We start by gaining access to the CmsObject by calling the global cmsms() function. From our reference to the CmsObject, we request a reference to the ContentOperations object, that we then use to request a reference to the current content object. Once we have the current content object, we can call assorted methods on it to retrieve information about the current content. In this recipe, we get the content's name, when it was last modified, its alias, and its URL. Since this recipe is an example, we don't format these various pieces of information or use a template, but simply echo them. In a production UDT or one in which there's any complexity to what is being displayed, it would be more advisable to use the values to populate Smarty variables for later display, or use a template for formatting them. There's more... There are a number of interesting objects, that CmsObject manages. References can be requested to: BookmarkOperations— used in the Admin area ContentOperations—which has methods to handle Content and content metadata Db— which wraps the ADODB database API GlobalContentOperations— which has methods to handle Global Content Blocks GroupOperations— which has methods to handle Admin Groups HierarchyManager— which has methods for handling site content hierarchies ModuleOperations— which has methods for managing Modules Smarty— which wraps the Smarty template engine StylesheetOperations—which has methods for handling TemplateOperations— which has methods for handling Smarty templates UserOperations— which has methods for handling Admin Users UserTagOperations— which has methods for handling User-Defined Tags Getting attributes using page_attr If you're looking to display information about the current content object, CMS Made Simple has a custom Smarty tag that provides some attributes: {page_attr}. You can use this tag to display page attribute information—simply by specifying a key to the information you're requesting. For example, to get the page's "image" attribute, you could use the tag {page_attr key="image"}. Other keys that are supported include: target image thumbnail extra1 extra2 extra3 searchable pagedata disable_wysiwyg content_en As you can see, this is not as rich a collection of information as you can get from the content object directly using your own UDT. Old code and the use of globals If you look at old modules or User-Defined Tags that have been posted in the CMS Made Simple forum, you may see the following code: global $gCms; instead of the $gCms = cmsms() used here. For a long time, the use of the global declaration was the preferred way to access the CmsObject. This approach is now deprecated for a number of reasons, most important of which is a security issue and also including portability of code between CMS Made Simple 1.x and the upcoming 2.x versions. While use of the global declaration to access the CmsObject will likely still work, it is strongly discouraged.  

Templates and themes All pages within SilverStripe are rendered using a template, which is basically an HTML/XHTML file with added control code. A template allows you to make conditional statements, create menus, access data stored in the database, and much more. Instead of using PHP for these enhancements, templates rely on a dedicated template engine. When the user accesses a page the engine replaces the control code with PHP. This transformation is then evaluated by the web server to regular markup code, which every browser can display. A theme consists of a collection of template, CSS, and image files. Design-specific JavaScript is also stored here. Together they form the layout of a page. Switching between themes You can have multiple themes and switch between them whenever you like. You're definitely encouraged to give everything described here a try. It helps you in becoming an active developer instead of a passive user. So let's get things started! Time for action - change the default theme Simply perform the following steps in the CMS and you're all set: Log into the CMS by appending /admin to your page's base URL. Provide the credentials you defined during the installation and you should be logged-in. Go to the general configuration page by clicking on the globe within the Page Tree section. The default text of this element is Your Site Name. The Theme is set to (Use default theme) by default; change this to tutorial. Click on the Save button. Go to the base URL / and reload the page. What just happened? We've successfully changed the theme of our website. It's as easy as that. Note that you need to package your theme into a subfolder of themes/ to be able to switch between them. While you can also put the contents of a theme directly into the mysite/ folder, keeping your system modularized is a good practice. Therefore we won't integrate the layout into the site specific folder and will instead always create a dedicated, switchable theme. Getting more themes After unpacking a theme, copy it to the themes/ folder, change the theme in the CMS, and you're good to go. Using a prebuilt theme really is that simple. Next, we'll take a look at the facilities for building our own themes—specifically, the template engine that powers all themes in SilverStripe. By the end of this article and next, you'll even be ready to upload and share your own themes with the rest of the community at the address above. New contributions are always welcome. Template engine As described earlier, the SilverStripe architecture consists of three layers, each serving a specific purpose. The one responsible for the layout is called View, which we'll cover in detail in this article. Another template engine? One might wonder why it is necessary to learn another template language, while there are already so many others available and PHP can do all of it as well. The main reasons behind this are: The template engine and the rest of the system fit perfectly together. After getting the hang of it, it makes the creation of templates and communication with the other layers faster and easier. The available control code is very simple. Designers without a lot of programming knowledge can create feature-rich layouts. It enforces good coding practice. Without the ability to use raw PHP, one cannot by-pass the other layers and undermine the architecture. Only layout and rendering information should be used within templates. Taking a look at BlackCandy First of all, switch back to the BlackCandy theme as we want to take a better look at it. Within your installation, navigate to the folder themes/blackcandy/ and you'll see three folders: css/, images/, and templates/. The images/ folder contains any image used in your theme; if you like, you can create subfolders to keep things organized. The remaining folders are a bit more complicated, so let's break them down. CSS At first this looks a bit messy—five files for the CSS; couldn't we use just a single one? We could, but many developers consider it a good practise splitting the functionality into different parts, making it easier to navigate later on. Sticking to this convention adds functionality as well. This is a common principle, called convention over configuration. If you do things the way they are expected by the system, you don't need to configure them specifically. Once you know the "way" of the system, you'll work much quicker than if you had to configure the same things over and over again. editor.css This file is automagically loaded by SilverStripe's what you see is what you get (WYSIWYG) editor. So if you apply the correct styling via this file, the content in the CMS' backend will look like the final output in the frontend. Additionally you'll have all custom elements available under the Styles dropdown, so the content editors don't need to mess around with pure HTML. As this file is not automatically linked to the frontend, it's common practice to put all frontend styling information into typography.css and reference that file in editor.css: @import "typography.css"; If you want to provide any styling information just for the CMS, you can put it below the @import. layout.css, form.css, and typography.css These files are automagically included in the frontend if they are available in your theme. While layout.css is used for setting the page's basic sections and layout, form.css deals with the form related styling. typography.css covers the layout of content entered into the CMS, generally being imported by editor.css as we've just discussed. Elements you will include here are headers (<h1>, <h2>, and so on), text (for example <p>), lists, tables, and others you want to use in the CMS (aligning elements, <hr>, and so on). ie6.css This file isn't part of the SilverStripe convention, but is a useful idea you might want to adopt. You must include it manually but it will still be a good idea to stick to this naming schema: ie.css for styling elements in any version of Internet Explorer, ie6.css for Internet Explorer 6 specifics, and so on. What about performance? Cutting down on the number of files being loaded is an effective optimization technique for websites. We'll take a look at how to do that. Templates Now that we've discussed the styling, let's take a look at how to put the content together with the help of templates. Learning the very basics Before we continue, some basic facts and features of templates: Templates must use the file extension .ss instead of .html or .php. Templates can be organized alongside their PHP Controllers, so you can use the same powerful mechanism as in the other layers. We'll take a better look at what this means a little later. Page controls consist of placeholders and control structures, which are both placed within the regular markup language. Placeholders start with a $ and are processed and replaced by the template engine. Control structures are written between opening <% and closing %>. They look a bit like HTML tags and they are used the same way. Some consist of a single element, like HTML's <br>, whereas others consist of two or more. Starting to use templates Now that we've covered the basics, let's put them into practice. Time for action - using site title and slogan We shall use placeholders, taking a look at the code level and how to use them in the CMS: Open the file themes/blackcandy/templates/Page.ss in your preferred editor. If the syntax highlighting is disabled due to the unknown file extension, set it to HTML. Find the two placeholders $SiteConfig.Title and $SiteConfig.Tagline in the code. Go to the general configuration page in the CMS, the one where we've changed the theme. Edit the Site title and Site Tagline/Slogan to something more meaningful. Save the page. Go to the base URL and hit refresh. If you view the page's source, you can see that the two placeholders have been replaced by the text we have just entered in the CMS. If you are wondering about the short doctype declaration: there is nothing missing, this is HTML5, which SilverStripe is already using in its default theme. If you prefer XHTML or an older HTML standard, you can freely change it. The CMS happily works with all of them. What just happened? The file we've just edited is the base template. It's used for every page (unless specifically overwritten). You can define your general layout once and don't have to repeat it again. You should always try to avoid repeating code or content. This is generally called don't repeat yourself (DRY) or duplication is evil (DIE). SilverStripe supports you very well in doing this. The site title and slogan are globally available. You can use them on every page and they share the same content across the whole website. These placeholders are prefixed with SiteConfig. as well as a $ sign. In the CMS they are all available on the site's root element, the one with the globe. By default, there are just two, but we'll later see how to add more. Other placeholders are available on specific pages or can be different on each page. We'll come to those next. Layout Looking again at the Page.ss we've just opened, you'll also see a $Layout placeholder. This is replaced by a file from the themes/blackcandy/templates/Layout folder. There are only two files available by default and for every standard page Page.ss is used. When a page is loaded, the template engine first finds the base templates/Page.ss (excluding the theme specific part of the path as this can vary). It's evaluated and the $Layout is replaced by templates/Layout/Page.ss, which is also evaluated for further SilverStripe controls. Ignore Page_results.ss for the moment. It's only used for search queries which we'll cover later. We'll also add more page types so the layout's Page.ss can then be replaced by a more specific template, while the base templates/Page.ss is always used. Includes Both Page.ss files include statements like <% include BreadCrumbs %>. These controls are replaced by files from the themes/blackcandy/templates/Includes/ folder. For example, the above include grabs the themes/blackcandy/templates/Includes/BreadCrumbs.ss file. Note that filenames are case sensitive. Otherwise you're free to select a meaningful name. Try sticking to one naming convention to make your own life easier later on, and also note that you mustn't include the <code>.ss</code> extension. If you're seeing a Filename cannot be empty error, make sure the included file really exists. Have a go hero - using page name, navigation label, and metadata title Now that we've explored all available files and how they are used, let's take a better look at the system. In the CMS backend, go to the Home page. Change the text currently entered into Page name, Navigation label (both in the Main tab), and Title (Metadata tab). Take a look at: Where on the page they are used In which file they are located (take a look at all three possible locations) What template placeholders represent them You might notice $MetaTitle, $Title, and $MenuTitle in your template files (for the moment ignore the appended .XML). We will explore these later on.

  WordPress 3 Plugin Development Essentials Create your own powerful, interactive plugins to extend and add features to your WordPress site         Read more about this book       (For more resources on WordPress, see here.) The plan What exactly do we want this plugin to do? Our widget will display a random bit of text from the database. This type of plugin is frequently used for advertisement rotations or in situations where you want to spruce up a page by rotating content on a periodic basis. Each instance of our plugin will also have a "shelf life" that will determine how frequently its content should be randomized. Let's take a moment to come up with some specifications for this plugin. We want it to do the following: Store multiple chunks of content, such as bits of Google Adsense code Be able to randomly return one of the chunks Set a time limit that defines the "shelf life" of each chunk, after which the "random" chunk will be updated Widget overview Even if you are already familiar with widgets, take a moment to look at how they work in the WordPress manager under Appearance | Widgets. You know that they display content on the frontend of your site, usually in a sidebar, and they also have text and control forms that are displayed only when you view them inside the manager. If you put on your thinking cap, this should suggest to you at least two actions: an action that displays the content on the frontend, and an action that displays the form used to update the widget settings inside the manager. There are actually a total of four actions that determine the behavior of a standard widget, and you can think of these functions as a unit because they all live together in a single widget object. In layman's terms, there are four things that any widget can do. In programmatic terms, the WP_Widget object class has four functions that you may implement: The constructor: The constructor is the only function that you must implement. When you "construct" your widget, you give it a name, a description, and you define what options it has. Its name is often __ construct(), but PHP still accepts the PHP 4 method of naming your constructor function using the name of the class. widget(): It displays content to users on the frontend. form(): It displays content to manager users on the backend, usually to allow them to update the widget settings. update(): It prepares the updated widget settings for database storage. Override this function if you require special form validation. In order to make your widget actually work, you will need to tell WordPress about it by registering it using the WordPress register_widget() function. If you want to get a bit more information about the process, have a look at WordPress' documentation here. Let's outline this in code so you can see how it works. Preparation As always, we're going to go through the same setup steps to get our plugin outlined so we can get it activated and tested as soon as possible. Create a folder inside the wp-content/plugins/ directory. We are naming this plugin "Content Rotator", so create a new folder inside wp-content/ plugins/ named content-rotator. Create the index.php file. Add the Information Head to the index.php file. If you forgot the format, just copy and modify it from the Hello Dolly plugin like we did in the previous article, Anatomy of a WordPress Plugin. We're giving you bigger sections of code than before because hopefully by now you're more comfortable adding and testing them. Here is what our index.php looks like: <?php/*------------------------------------------------------------------------------Plugin Name: Content RotatorPlugin URI: http://www.tipsfor.us/Description: Sample plugin for rotating chunks of custom content.Author: Everett GriffithsVersion: 0.1Author URI: http://www.tipsfor.us/------------------------------------------------------------------------------*/// include() or require() any necessary files here...include_once('includes/ContentRotatorWidget.php');// Tie into WordPress Hooks and any functions that should run onload.add_action('widgets_init', 'ContentRotatorWidget::register_this_widget');/* EOF */ Add the folders for includes and tpls to help keep our files organized. Add a new class file to the includes directory. The file should be named ContentRotatorWidget.php so it matches the include statement in the index.php file. This is a subclass which extends the parent WP_Widget class. We will name this class ContentRotatorWidget, and it should be declared using the extends keyword. <?php /*** ContentRotatorWidget extends WP_Widget** This implements a WordPress widget designed to randomize chunksof content.*/class ContentRotatorWidget extends WP_Widget { public $name = 'Content Rotator'; public $description = 'Rotates chunks of content on a periodic basis'; /* List all controllable options here along with a default value. The values can be distinct for each instance of the widget. */ public $control_options = array(); //!!! Magic Functions // The constructor. function __construct() { $widget_options = array( 'classname' => __CLASS__, 'description' => $this->widget_desc, ); parent::__construct( __CLASS__, $this->name,$widget_ options,$this->control_options); } //!!! Static Functions static function register_this_widget() { register_widget(__CLASS__); } } /* EOF */ This is the simplest possible widget—we constructed it using only the __ construct() function. We haven't implemented any other functions, but we are supplying enough information here for it to work. Specifically, we are supplying a name and a description, and that's enough to get started. Let's take a moment to explain everything that just happened, especially since the official documentation here is a bit lacking. When we declared the ContentRotatorWidget class, we used the extends keyword. That's what makes this PHP class a widget, and that's what makes object-oriented code so useful. The __construct() function is called when an object is first created using the new command, so you might expect to see something like the following in our index. php file: <?php $my_widget = new ContentRotatorWidget();?> However, WordPress has obscured that from us—we just have to tell WordPress the classname of the widget we want to register via the register_widget() function, and it takes care of rest by creating a new instance of this ContentRotatorWidget. There is a new instance being created, we just don't see it directly. Some of the official documentation still uses PHP 4 style examples of the constructor function— that is to say that the function whose name shares the name of the class. We feel that naming the constructor function __construct is clearer. You may have wondered why we didn't simply put the following into our index.php file: register_widget('ContentRotatorWidget'); // may throw errors if called too soon! If you do that, WordPress will try to register the widget before it's ready, and you'll get a fatal error: "Call to a member function register() on a non-object". That's why we delay the execution of that function by hooking it to the widgets_ init action. We are also tying into the construct of the parent class via the parent::__ construct() function call. We'll explain the hierarchy in more detail later, but "parent" is a special keyword that can be used by a child class in order to call functions in the parent class. In this case, we want to tie into the WP_Widget __ construct() function in order to properly instantiate our widget. Note our use of the PHP __CLASS__ constant—its value is the class name, so in this case, we could replace it with ContentRotatorWidget, but we wanted to provide you with more reusable code. You're welcome. Lastly, have a look at the class variables we have declared at the top of the class: $name, $description, and $control_options. We have put them at the top of the class for easy access, then we have referenced them in the __construct() function using the $this variable. Note the syntax here for using class variables. We are declaring these variables as class variables for purposes of scope: we want their values to be available throughout the class. Please save your work before continuing. Activating your plugin Before we can actually use our widget and see what it looks like, we first have to activate our plugin in the manager. Your widget will never show up in the widget administration area if the plugin is not active! Just to be clear, you will have to activate two things: your plugin, and then your widget. The code is simple enough at this point for you to be able to quickly track down any errors. Activating the widget Now that the plugin code is active, we should see our widget show up in the widget administration area: Appearance | Widgets. Take a moment to notice the correlation between the widget's name and description and how we used the corresponding variables in our constructor function. Drag your widget into the primary widget area to make it active. Once it has been activated, refresh your homepage. Your active widget should print some text in the sidebar. (Move the mouse over the image to enlarge it.) Congratulations! You have created your first WordPress widget! It is printing a default message: function WP_Widget::widget() must be over-ridden in a sub-class, which is not very exciting, but technically speaking you have a functional widget. We still need to enable our widget to store some custom options, but first we should ensure that everything is working correctly. Having problems? No widget? If you have activated your plugin, but you do not see your widget showing up in the widget administration area, make sure you have tied into a valid WordPress action! If you misspell the action, it will not get called! The action we are using in our index.php is widgets_init—don't forget the "s"! White screen? Even if you have PHP error-reporting enabled, sometimes you suddenly end up with a completely white screen in both the frontend and in the manager. If there is a legitimate syntax error, that displays just fine, but if your PHP code is syntactically correct, you end up with nothing but a blank page. What's going on? A heavy-handed solution for when plugins go bad is to temporarily remove your plugin's folder from /wp-content/plugins, then refresh the manager. WordPress is smart enough to deactivate any plugin that it cannot find, so it can recover from this type of surgery. If you are experiencing the "White Screen of Death", it usually means that something is tragically wrong with your code, and it can take a while to track it down because each time you deactivate the plugin by removing the folder, you have to reactivate it by moving the folder back and reactivating the plugin in the WordPress manager. This unenviable situation can occur if you accidentally chose a function name that was already in use (for example, register()—don't use that as a function name). You have to be especially careful of this when you are extending a class because you may inadvertently override a vital function when you meant to create a new one. If you think you may have done this, drop and do 20 push-ups and then have a look at the original parent WP_Widget class and its functions in wp-includes/widgets.php. Remember that whenever you extend a class, it behooves you to look at the parent class' functions and their inputs and outputs. If this sounds like Greek to you, then the next section is for you.

To design a data model with Core Data, we need to create a new project. So, let's start there... Creating a new project To create a new project, perform the following steps: Launch Xcode and create a new project by selecting the File | New Project option. The New Project Assistant window will appear, prompting us to select a template for the new project, as shown in the next screenshot. We will select the Navigation-based Application template. Ensure that the Use Core Data for storage checkbox is checked and click on the Choose... button. On selecting the Choose... button, we will get a dialog box to specify the name and the location of the project. Let us keep the location the same as default (Documents folder) and assign the project name as: prob (any name). Click on Save. Xcode will then generate the project files and the project gets opened in the Xcode project window. The checkbox Use Core Data for storage will ask Xcode to provide all the default code that is required for using Core Data. This option is visible with only two project templates: Navigationbased Application and Window-based Application templates. Designing the data model Designing a data model means defining entities, attributes, and relationships for our application using a special tool. Xcode includes a data modeling tool (also known as Data Model Editor or simply a modeler) that facilitates the creation of entities, defining attributes, and the relationships among them. Data Model Editor The Data Model Editor is a data modeling tool provided by Xcode that makes the job of designing a data model quite easy. It displays the browser as well as a diagram view of the data model. The Browser view displays two panes, the Entity pane and the Properties pane, for defining entities and their respective properties. The diagram view displays rounded rectangles that designate entities and lines to show relationships among the entities. Adding an entity To add an entity to our data model, perform the following steps: Invoke the data modeling tool by double-clicking the prob.xcdatamodel file in the Resources group found in the Xcode Project window. Xcode's data modeling tool will open and we will find that an entity by default is already created for us by the name: Event (as shown in the next image) with an attribute: timeStamp. We can delete or rename the default entity Event as desired. Let us select the default Event entity and delete it by clicking on the minus (-) button in the Entity pane followed by either choosing plus (+) button in the Entity pane or by choosing Design | Data Model | Add Entity option from the menu bar. This will add a blank entity (by the name Entity) to our data model, which we can rename as per our requirements. Let us set the name of the new entity as: Customer. Automatically, an instance of NSManagedObject will be created to represent our newly created Customer entity. The next step is to add attributes to this entity. Adding an attribute property We want to add three attributes by name—name, emailid, and contactno—to the Customer entity. Let's follow the steps mentioned next for the same: Select the entity and choose the Design | Data Model | Add Attribute option from the menu bar or select the + (plus) button in the Property pane. A menu with several options such as Add Attribute, Add Fetched property, Add Relationship, and Add Fetch Request will pop up. We select the Add Attribute option from the popped up menu. We see that a new attribute property is created for our Customer entity by a default name: newAttribute in the inspector. Let us rename our new attribute as: name (as we will be using this attribute to store the names of the customers). Then, we set the type of the name attribute to String as shown in the next screenshot (as names consists of strings): Below the Name field are three checkboxes: Optional, Transient, and Indexed. Though we will be using the Optional checkbox for the name attribute, let us see the usage of all three: Optional: If this checkbox is checked, it means the entity can be saved even if the attribute is nil (empty). If this checkbox is unchecked and we try to save the entity with this attribute set to nil, it will result in a validation error. When used with a relationship, if the checkbox is checked it means that the relationship can be empty. Suppose that we create one more entity say: Credit Card (where information of the customer's credit card is kept). In that case, the relationship from customer to the credit card will be optional (we have to leave this checkbox checked) as a customer may or may not have a credit card. And if we create an entity say: Product—in that case, the relationship from the Customer to the Product cannot be empty as a customer will definitely buy at least a single product (the checkbox has to be unchecked). Transient: This checkbox, if checked, means that the attribute or the relationship is of a temporary nature and we don't want it to be stored (persist) in the persistent store. This checkbox must be unchecked for the attributes or relationship that we want to persist (to be stored on the disk). Indexed: This checkbox has to be checked to apply indexing on the attribute. It is used when we want to perform sorting or searching on some attribute. By checking this checkbox, an index will be created on that attribute and the database will be ordered on that attribute. Types of attributes Using the Type drop-down list control, we select the data type (that is, numerical, string, date, and so on) of the attribute to specify the kind of information that can be stored in the attribute. The following is the list of data types: Integer 16, Integer 32, and Integer 64 data types are for storing signed integers. The range of values that these types are able to store is as follows: Integer 16:-32,768 to 32, 767 Integer 32:-2,147,483,648 to 2,147,483,647 Integer 64:-9,223,372,036,854,775,808 to 9,223,372,036,854,775,807 Decimal, Double, and Float data types are for storing fractional numbers. The Double data type uses 64 bits to store a value while the Float data type uses 32 bits for storing a value. The only limitation with these two data types is that they round off the values. To avoid any rounding of values, the Decimal data type is preferred. The Decimal type uses fixed point numbers for storing values, so the numerical value stored in it is not rounded off. String data type is used for storing text contents. Boolean data type is used for storing YES or NO values. Date data type is used for storing dates as well as timestamps. Binary data type is used for storing binary data. Transformable data type works along with Value Transformers that help us create attributes based on any Objective-C class, that is, we can create custom data types other than the standard data types. This data type can be used to store an instance of UIColor, UIImage, and so on. It archives objects to instances of NSData. Below the Type drop-down menu, we will see a few more fields in the detail pane, as shown in the next screenshot: Fields applying constraints Min Length: and Max Length: fields are for applying constraints of minimum and maximum number of characters to an attribute. If we exceed the range supplied in these fields, we get a validation error. Meaning, if we enter the string of fewer characters than the value supplied in Min Length: or the string has more characters than the value supplied in Max Length: field, this will result in a validation error while saving managed objects. Reg. Ex: field stands for regular expression and is used for applying validation checks on the data entered in the attribute by making use of regular expressions. Default Value: field is for specifying default value of the attribute. If we create a new managed object, the attribute will automatically be set to the default value specified in this field. Let us add two more attributes to the Customer entity: emailid and contactno (for storing a customer's e-mail address and contact number, respectively). These two attributes will also be of type: String as shown in the next screenshot. Now, save the .xcdatamodel.

  Moodle JavaScript Cookbook Over 50 recipes for making your Moodle system more dynamic and responsive with JavaScript Introduction 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 enhancements, including features often seen on modern interactive interfaces, such as: Auto-complete: This feature suggests possible values to the user by searching against a list of suggestions as they start typing. We will look at two different ways of using this. First, by providing suggestions as the user types into a text box, and second, by providing a list of possible values for them to select from a combo list box. Auto-update: This technique will allow us to update an area of the page based on a timed interval, which has many uses as we'll see. In this example, we will look at how to create a clock by updating the time on the page at one second intervals. This technique could also be used, for example, to update a news feed every minute, or update stock information every hour. Resizable elements: A simple enhancement which allows users to dynamically resize elements to suit their needs. This could be applied to elements containing a significant amount of text which would allow the user to control the width of the text to suit their personal preference for ideal readability. Custom tooltips: Tooltips appear when an element is hovered, displaying the associated title or alternative text (that is, a description of an image or the title of a hyperlink). This enhancement allows us to have more control over the look of the tooltips making them more visually appealing and more consistent with the overall look and feel of our page. Custom buttons: This enhancement allows us to completely restyle button elements, modifying their look and feel to be consistent with the rest of our page. This also allows us to have a consistent button style across different platforms and web browsers. We will once again be using mostly YUI Version 2 widgets and utilities within the YUI Version 3 framework. At the time of writing, few YUI2 widgets have been ported to YUI3. This method allows us the convenience of the improvements afforded by the YUI3 environment combined with the features of the widgets from YUI2. Adding a text box with auto-complete A common feature of many web forms is the ability to provide suggestions as the user types, based on a list of possible values. In this example, we enhance a standard HTML input text element with this feature. This technique is useful in situations where we simply wish to offer suggestions to the user that they may or may not choose to select, that is, suggesting existing tags to be applied to a new blog post. They can either select a suggested value that matches one they have started typing, or simply continue typing a new, unused tag. How to do it... First, set up a basic Moodle page in the usual way. In this example, we create autocomplete.php with the following content: <?php require_once(dirname(__FILE__) . '/../config.php'); $PAGE->set_context(get_context_instance(CONTEXT_SYSTEM)); $PAGE->set_url('/cook/autocomplete.php'); $PAGE->requires->js('/cook/autocomplete.js', true); ?> <?php echo $OUTPUT->header(); ?> <div style="width:15em;height:10em;"> <input id="txtInput" type="text"> <div id="txtInput_container"></div> </div> <?php echo $OUTPUT->footer(); ?> Secondly, we need to create our associated JavaScript file, autocomplete.js, with the following code: YUI().use("yui2-autocomplete", "yui2-datasource", function(Y) { var YAHOO = Y.YUI2; var dataSource = new YAHOO.util.LocalDataSource ( ["Alpha","Bravo","Beta","Gamma","Golf"] ); var autoCompleteText = new YAHOO.widget.AutoComplete("txtInput", "txtInput_container", dataSource); }); How it works... Our HTML consists of three elements, a parent div element, and the other two elements contained within it: an input text box, and a placeholder div element to use to display the auto-complete suggestions. Our JavaScript file then defines a DataSource to be used to provide suggestions, and then creates a new AutoComplete widget based on the HTML elements we have already defined. In this example, we used a LocalDataSource for simplicity, but this may be substituted for any valid DataSource object. Once we have a DataSource object available, we instantiate a new YUI2 AutoComplete widget, passing the following arguments: The name of the HTML input text element for which to provide auto-complete suggestions The name of the container element to use to display suggestions A valid data source object to use to find suggestions Now when the user starts typing into the text box, any matching auto-complete suggestions are displayed and can be selected, as shown in the following screenshot: Adding a combo box with auto-complete In this example, we will use auto-complete in conjunction with a combo box (drop-down list). This differs from the previous example in one significant way—it includes a drop-down arrow button that allows the user to see the complete list of values without typing first. This is useful in situations where the user may be unsure of a suitable value. In this case, they can click the drop-down button to see suggestions without having to start guessing as they type. Additionally, this method also supports the same match-as-you-type style auto-complete as that of the previous recipe. How to do it... Open the autocomplete.php file from the previous recipe for editing, and add the following HTML below the text box based auto-complete control: <div style="width:15em;height:10em;"> <input id="txtCombo" type="text" style="vertical-align:top; position:static;width:11em;"><span id="toggle"></span> <div id="txtCombo_container"></div> </div> Next, open the JavaScript file autocomplete.js, and modify it to match the following code: YUI().use("yui2-autocomplete", "yui2-datasource", "yui2-element", "yui2-button", "yui2-yahoo-dom-event", function(Y) { var YAHOO = Y.YUI2; var dataSource = new YAHOO.util.LocalDataSource ( ["Alpha","Bravo","Beta","Gamma","Golf"] ); var autoCompleteText = new YAHOO.widget.AutoComplete("txtInput", "txtInput_container", dataSource); var autoCompleteCombo = new YAHOO.widget.AutoComplete("txtCombo", "txtCombo_container", dataSource, {minQueryLength: 0, queryDelay: 0}); var toggler = YAHOO.util.Dom.get("toggle"); var tButton = new YAHOO.widget.Button({container:toggler, label:"↓"}); var toggle = function(e) { if(autoCompleteCombo.isContainerOpen()) { autoCompleteCombo.collapseContainer(); } else { autoCompleteCombo.getInputEl().focus(); setTimeout(function() { autoCompleteCombo.sendQuery(""); },0); } } tButton.on("click", toggle); }); You will notice that the HTML we added in this recipe is very similar to the last, with the exception that we included a span element just after the text box. This is used as a placeholder to insert a YUI2 button control. This recipe is somewhat more complicated than the previous one, so we included some extra YUI2 modules: element, button, and yahoo-dom-event. We define the AutoComplete widget in the same way as before, except we need to add two configuration options in an object passed as the fourth argument. Next, we retrieve a reference to the button placeholder, and instantiate a new Button widget to use as the combo box 'drop-down' button. Finally, we define a click handler for the button, and register it. We now see the list of suggestions, which can be displayed by clicking on the drop-down button, as shown in the following screenshot: How it works... The user can type into the box to receive auto-complete suggestions as before, but may now use the combo box style drop-down button instead to see a list of suggestions. When the user clicks the drop-down button, the click event is fired. This click event does the following: Hides the drop-down menu if it is displayed, which allows the user to toggle this list display on/off. If it is not displayed, it sets the focus to the text box (to allow the user to continue typing), and execute a blank query on the auto-complete widget, which will display the list of suggestions. Note that we explicitly enabled this blank query earlier when we defined the AutoComplete widget with the "minQueryLength: 0" option, which allowed queries of length 0 and above.  

  ASP.NET jQuery Cookbook Over 60 practical recipes for integrating jQuery with ASP.NET   Introduction Some useful inbuilt functions in jQuery that we will explore in this article for achieving animation effects are: animate ( properties, [ duration ], [ easing ], [ complete ] ): This method allows us to create custom animation effects on any numeric css property. The parameters supported by this method are: properties: This is the map of css properties to animate, for e.g. width, height, fontSize, borderWidth, opacity, etc. duration: This is the duration of the animation in milliseconds. The constants slow and fast can be used to specify the durations, and they represent 600 ms and 200 ms respectively. easing: This is the easing function to use. Easing indicates the speed of the animation at different points during the animation. jQuery provides inbuilt swing and linear easing functions. Various plugins can be interfaced if other easing functions are required. complete: This indicates the callback function on completion of the animation. fadeIn ( [ duration ], [ callback ] ): This method animates the opacity of the matched elements from 0 to 1 i.e. transparent to opaque. The parameters accepted are: duration: This is the duration of the animation callback: This is the callback function on completion of the animation fadeOut( [ duration ], [ callback ] ): This method animates the opacity of the matched elements from 1 to 0 i.e. opaque to transparent. The parameters accepted are: duration: This is the duration of the animation callback: This is the callback function on completion of the animation slideUp( [ duration ], [ callback ] ): This method animates the height of the matched elements with an upward sliding motion. When the height of the element reaches 0, the css property display of the element is updated to none so that the element is hidden on the page. The parameters accepted are: duration: This is the duration of the animation callback: This is the callback function on completion of the animation slideDown( [ duration ], [ callback ] ): This method animates the height of the matched elements from 0 to the specified maximum height. Thus, the element appears to slide down on the page. The parameters accepted are: duration: This is the duration of the animation callback: This is the callback function on completion of the animation slideToggle( [ duration ], [ callback ] ): This method animates the height of the matched elements. If the element is initially hidden, it will slide down and become completely visible. If the element is initially visible, it will slide up and become hidden on the page. The parameters accepted are: duration: This is the duration of the animation callback: This is the callback function on completion of the animation jQuery.fx.off: If there is a need to disable animations because of a resource constraint or due to difficulties in viewing the animations, then this utility can be used to turn off the animation completely. This is achieved by setting all animated controls to their final state. stop ( [ clearQueue ], [ jumpToEnd ] ): This method stops the currently running animations on the page. The parameters accepted are: clearQueue: This indicates whether any queued up animations are required to be cleared. The default value is false. jumpToEnd: This indicates if the current animation is to be cleared immediately. The default value is false. In this article, we will cover some of the animation effects that can be achieved in ASP.NET using the capabilities of jQuery. Getting started Let's start by creating a new ASP.NET website in Visual Studio and name it Chapter5. Save the jQuery library in a script folder js in the project. To enable jQuery on any web form, drag-and-drop to add the following to the page: <scriptsrc="js/jquery-1.4.1.js" type="text/javascript"></script> Now let's move on to the recipes where we will see different animation techniques using jQuery. Enlarging text on hover In this recipe, we will animate the font size of text content on hover. Getting ready Add a new web form Recipe1.aspx to the current project. Create a Css class for the text content that we want to animate. The font size specified in the css Class is the original font size of the text before animation is applied to it: .enlarge { font-size:12.5px; font-family:Arial,sans-serif; } Add an ASP.NET Label control on the form and set its Css Class to the preceding style: <asp:LabelCssClass="enlarge"runat="server">Lorem ipsum dolor sit ...............</asp:Label> Thus, the ASPX markup of the form is as follows: <form id="form1" runat="server"> <div align="center"> Mouseover to enlarge text:<br /> <fieldset id="content" style="width:500px;height:300px;"> <asp:LabelCssClass="enlarge" runat="server">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</ asp:Label> </fieldset> </div> </form> Thus, initially, the page will display the Label control as follows: We will now animate the font size of the Label on hover on the containing fieldset element. How to do it… In the document.ready() function of the jQuery script block, retrieve the original font size of the Label: var origFontSize = parseFloat($(".enlarge").css('font-size')); The parseFloat() function takes in an input string and returns the first floating point value in the string. It discards any content after the floating point value. For example, if the css property returns 12.5 px, then the function will discard the px. Define the hover event of the containing fieldset element: $("#content").hover( In the mouseenter event handler of the hover method, update the cursor style to pointer: function() { $(".enlarge").css("cursor", "pointer"); Calculate the maximum font size that we want to animate to. In this example, we will set the maximum size to thrice the original: var newFontSize = origFontSize * 3; Animate the fontSize css property of the Label in 300 ms: $(".enlarge").animate({ fontSize: newFontSize }, 300); }, In the mouseleave event handler of the hover method, animate the fontSize to the original value in 300 ms as shown: function() { $(".enlarge").animate({ fontSize: origFontSize }, 300); } ); Thus, the complete jQuery solution is as follows: <script language="javascript" type="text/javascript"> $(document).ready(function() { var origFontSize = parseFloat($(".enlarge").css('fontsize')); $("#content").hover( function() { $(".enlarge").css("cursor", "pointer"); var newFontSize = origFontSize * 3; $(".enlarge").animate({ fontSize: newFontSize }, 300); }, function() { $(".enlarge").animate({ fontSize: origFontSize }, 300); } ); }); </script> How it works… Run the web form. Mouseover on the fieldset area. The text size will animate over the stated duration and change to the maximum specified font size as displayed in the following screenshot: On removing the mouse from the fieldset area, the text size will return back to the original. Creating a fade effect on hover In this recipe, we will create a fade effect on an ASP.NET Image control on hover. We will use the fadeIn and fadeOut methods to achieve the same. Getting ready Add a new web form Recipe2.aspx to the current project. Add an image control to the form: <asp:Image src="images/Image1.jpg" ID="Image1" runat="server" /> Define the properties of the image in the css: #Image1 { width:438px; height:336px; } Thus, the complete ASPX markup of the web form is as follows: <form id="form1" runat="server"> <div align="center"> Mouseover on the image to view fade effect: <fieldset id="content" style="width:480px;height:370px;"> <br /> <asp:Image src="images/Image1.jpg" ID="Image1" runat="server" /> </fieldset> </div> </form> On page load, the image is displayed as follows: We will now create a fade effect on the image on hover on the containing fieldset area. How to do it… In the document.ready() function of the jQuery script block, define the hover event on the containing fieldset area: $("#content").hover( In the mouseenter event handler of the hover method, update the cursor to pointer: function() { $("#Image1").css("cursor", "pointer"); Apply the fadeOut method on the Image control with an animation duration of 1000 ms: $("#Image1").fadeOut(1000); }, In the mouseleave event handler of the hover method, apply the fadeIn method on the Image control with an animation duration of 1000 ms: function() { $("#Image1").fadeIn(1000); } ); Thus, the complete jQuery solution is as follows: <script language="javascript" type="text/javascript"> $(document).ready(function() { $("#content").hover( function() { $("#Image1").css("cursor", "pointer"); $("#Image1").fadeOut(1000); }, function() { $("#Image1").fadeIn(1000); } ); }); </script> How it works... Run the web page. Mouseover on the Image control on the web page. The image will slowly fade away as shown in the following screenshot: On mouseout from the containing fieldset area, the image reappears. Sliding elements on a page In this recipe, we will use the slideUp and slideDown methods for achieving sliding effects on an ASP.NET panel. Getting ready Add a new web form Recipe3.aspx in the current project. Add an ASP.NET panel to the page as follows: <asp:Panel class="slide" runat="server"> Sliding Panel </asp:Panel> The css class for the panel is defined as follows: .slide { font-size:12px; font-family:Arial,sans-serif; display:none; height:100px; background-color:#9999FF; } Add a button control to trigger the sliding effect on the panel: <asp:Button ID="btnSubmit" runat="server" Text="Trigger Slide" /> Thus, the complete ASPX markup of the web form is as follows: <form id="form1" runat="server"> <div align="center"> <fieldset style="width:400px;height:150px;"> <asp:Button ID="btnSubmit" runat="server" Text="Trigger Slide" /> <br /><br/> <asp:Panel class="slide" runat="server"> Sliding Panel </asp:Panel> </fieldset> </div> </form> On page load, the page appears as shown in the following screenshot: We will now use jQuery to slide up and slide down the panel. How to do it… In the document.ready() function of the jQuery script block, define the click event of the button control: $("#btnSubmit").click(function(e) { Prevent default form submission: e.preventDefault(); Check if the ASP.NET panel control is hidden: if ($(".slide").is(":hidden")) The jQuery selector :hidden selects matched elements that are hidden on the page. If yes, then slide down the panel until its height reaches the maximum (100 px) defined in the css property. $(".slide").slideDown("slow"); If the panel is initially visible then slide up so that its height slowly reduces until it becomes 0 and the panel disappears from the page: else $(".slide").slideUp("slow"); }); Thus, the complete jQuery solution is as follows: <script language="javascript" type="text/javascript"> $(document).ready(function() { $("#btnSubmit").click(function(e) { e.preventDefault(); if ($(".slide").is(":hidden")) $(".slide").slideDown("slow"); else $(".slide").slideUp("slow"); }); }); </script>  

SilverStripe 2.4 Module Extension, Themes, and Widgets: Beginner's Guide: RAW Create smashing SilverStripe applications by extending modules, creating themes, and adding widgets Why can't we simply use templates and $Content to accomplish the task? Widgets and short codes generally don't display their information directly like a placeholder does They can be used to fetch external information for you—we'll use Google and Facebook services in our examples Additionally they can aggregate internal information—for example displaying a tag cloud based on the key words you've added to pages or articles Widget or short code? Both can add more dynamic and/or complex content to the page than the regular fields. What’s the difference? Widgets are specialized content areas that can be dynamically dragged and dropped in a predefined area on a page in the CMS. You can't insert a widget into a rich-text editor field, it needs to be inserted elsewhere to a template. Additionally widgets can be customised from within the CMS. Short codes are self-defined tags in squared brackets that are entered anywhere in a content or rich-text area. Configuration is done through parameters, which are much like attributes in HTML. So the main difference is where you want to use the advanced content. Creating our own widget Let's create our first widget to see how it works. The result of this section should look like this: Time for action – embracing Facebook Facebook is probably the most important communication and publicity medium in the world at the moment. Our website is no exception and we want to publish the latest news on both our site and Facebook, but we definitely don't want to do that manually. You can either transmit information from your website to Facebook or you can grab information off Facebook and put it into your website. We'll use the latter approach, so let's hack away: In the Page class add a relation to the WidgetArea class and make it available in the CMS: public static $has_one = array( 'SideBar' => 'WidgetArea', ); public function getCMSFields(){ $fields = parent::getCMSFields(); $fields->addFieldToTab( 'Root.Content.Widgets', new WidgetAreaEditor('SideBar') ); return $fields; } Add $SideBar to templates/Layout/Page.ss in the theme directory, wrapping it inside another element for styling later on (the first and third line are already in the template, they are simply there for context): $Form <aside id="sidebar">$SideBar</aside> </section> <aside> is one of the new HTML5 tags. It's intended for content that is only "tangentially" related to the page's main content. For a detailed description see the official documentation at http://www.w3.org/TR/html-markup/aside.html. Create the widget folder in the base directory. We'll simply call it widget_facebookfeed/. Inside that folder, create an empty _config.php file. Additionally, create the folders code/ and templates/. Add the following PHP class—you'll know the filename and where to store it by now. The Controller's comments haven't been stripped this time, but are included to encourage best practice and provide a meaningful example: <?php class FacebookFeedWidget extends Widget { public static $db = array( 'Identifier' => 'Varchar(64)', 'Limit' => 'Int', ); public static $defaults = array( 'Limit' => 1, ); public static $cmsTitle = 'Facebook Messages'; public static $description = 'A list of the most recent Facebook messages'; public function getCMSFields(){ return new FieldSet( new TextField( 'Identifier', 'Identifier of the Facebook account to display' ), new NumericField( 'Limit', 'Maximum number of messages to display' ) ); } public function Feeds(){ /** * URL for fetching the information, * convert the returned JSON into an array. */ $url = 'http://graph.facebook.com/' . $this->Identifier . '/feed?limit=' . ($this->Limit + 5); $facebook = json_decode(file_get_contents($url), true); /** * Make sure we received some content, * create a warning in case of an error. */ if(empty($facebook) || !isset($facebook['data'])){ user_error( 'Facebook message error or API changed', E_USER_WARNING ); return; } /** * Iterate over all messages and only fetch as many as needed. */ $feeds = new DataObjectSet(); $count = 0; foreach($facebook['data'] as $post){ if($count >= $this->Limit){ break; } /** * If no such messages exists, log a warning and exit. */ if(!isset($post['from']['id']) || !isset($post['id'] || !isset($post['message'])){ user_error( 'Facebook detail error or API changed', E_USER_WARNING ); return; } /** * If the post is from the user itself and not someone * else, add the message and date to our feeds array. */ if(strpos($post['id'], $post['from']['id']) === 0){ $posted = date_parse($post['created_time']); $feeds->push(new ArrayData(array( 'Message' => DBField::create( 'HTMLText', nl2br($post['message']) ), 'Posted' => DBField::create( 'SS_Datetime', $posted['year'] . '-' . $posted['month'] . '-' . $posted['day'] . ' ' . $posted['hour'] . ':' . $posted['minute'] . ':' . $posted['second'] ), ))); $count++; } } return $feeds; } Define the template, use the same filename as for the previous file, but make sure that you use the correct extension. So the file widget_facebookfeed/templates/FacebookFeedWidget.ss should look like this: <% if Limit == 0 %> <% else %> <div id="facebookfeed" class="rounded"> <h2>Latest Facebook Update<% if Limit == 1 %> <% else %>s<% end_if %></h2> <% control Feeds %> <p> $Message <small>$Posted.Nice</small> </p> <% if Last %><% else %><hr/><% end_if %> <% end_control %> </div> <% end_if %> Also create a file widget_facebookfeed/templates/WidgetHolder.ss with just this single line of content: $Content We won't cover the CSS as it's not relevant to our goal. You can either copy it from the final code provided or simply roll your own. Rebuild the database with /dev/build?flush=all. Log into /admin. On each page you should now have a Widgets tab that looks similar to the next screenshot. In this example, the widget has already been activated by clicking next to the title in the left-hand menu. If you have more than one widget installed, you can simply add and reorder all of them on each page by drag-and-drop. So even novice content editors can add useful and interesting features to the pages very easily. Enter the Facebook ID and change the number of messages to display, if you want to. Save and Publish the page. Reload the page in the frontend and you should see something similar to the screenshot at the beginning of this section. allow_url_fopen must be enabled for this to work, otherwise you're not allowed to use remote objects such as local files. Due to security concerns it may be disabled, and you'll get error messages if there's a problem with this setting. For more details see http://www.php.net/manual/en/filesystem.configuration.php#ini.allow-url-fopen. What just happened? Quite a lot happened, so let's break it down into digestible pieces. Widgets in general Every widget is actually a module, although a small one, and limited in scope. The basic structure is the same: residing in the root folder, having a _config.php file (even if it's empty) and containing folders for code, templates, and possibly also JavaScript or images. Nevertheless, a widget is limited to the sidebar, so it's probably best described as an add-on. We'll take a good look at its bigger brother, the module, a little later. You're not required to name the folder widget_*, but it's a common practice and you should have a good reason for not sticking to it. Common use cases for widgets include tag clouds, Twitter integration, showing a countdown, and so forth. If you want to see what others have been doing with widgets or you need some of that functionality, visit http://www.silverstripe.org/widgets/. Keeping widgets simple In general widgets should work with default settings and if there are additional settings they should be both simple and few in number. While we'll be able to stick to the second part, we can't provide meaningful default settings for a Facebook account. Still, keep this idea in mind and try to adhere to it where possible. Facebook graph API We won't go into details of the Facebook Graph API, but it's a powerful tool—we've just scratched the surface with our example. Looking at the URL http://graph.facebook.com/<username>/feed?limit=5 you only need to know that it fetches the last five items from the user's feed, which consists of the wall posts (both by the user himself and others). <username> must obviously be replaced by the unique Facebook ID—either a number or an alias name the user selected. If you go to the user's profile, you should be able to see it in the URL. For example, SilverStripe Inc's Facebook profile is located at https://www.facebook.com/pages/silverstripe/44641219945?ref=ts&v=wall—so the ID is 44641219945. That's also what we've used for the example in the previous screenshot. For more details on the Graph API see http://developers.facebook.com/docs/api. Connecting pages and widgets First we need to connect our pages and widgets in general. You'll need to do this step whenever you want to use widgets. You'll need to do two things to make this connection: Reference the WidgetArea class in the base page's Model and make it available in the CMS through getCMSFields(). Secondly, we need to place the widget in our page. $SideBar You're not required to call the widget placeholder $SideBar, but it's a convention as widgets are normally displayed on a website's sidebar. If you don't have a good reason to do it otherwise, stick to it. You're not limited to a single sidebar As we define the widget ourselves, we can also create more than one for some or all pages. Simply add and rename the $SideBar in both the View and Model with something else and you're good to go. You can use multiple sidebars in the same region or totally different ones—for example creating header widgets and footer widgets. Also, take the name "sidebar" with a grain of salt, it can really have any shape you want. What about the intro page? Right. We've only added $SideBar to the standard templates/Layout/Page.ss. Shouldn't we proceed and put the PHP code into ContentPage.php? We could, but if we wanted to add the widget to another page type, which we'll create later, we'd have to copy the code. Not DRY, so let's keep it in the general Page.php. The intro page is a bit confusing right now. While you can add widgets in the backend, they can’t be displayed as the placeholder is missing in the template. To clean this up, let's simply remove the Widget tab from the intro page. It's not strictly required, but it prevents content authors from having a field in the CMS that does nothing visible on the website. To do this, simply extend the getCMSFields() in the IntroPage.php file, like this: function getCMSFields() { $fields = parent::getCMSFields(); $fields->removeFieldFromTab('Root.Content.Main', 'Content'); $fields->removeFieldFromTab('Root.Content', 'Widgets'); return $fields; }

Alice 3 provides an extensive gallery with hundreds of customizable 3D models that you can easily incorporate as actors. This article provides many tasks that will allow us to start making simple animations with many actors in the 3D environment provided by Alice. We will search for models of specific animals in the diverse galleries. We will locate and orient the actors in the 3D space. We will give some simple orders to the actors to create simple animations. Browsing galleries to search for a specific class In this recipe, we will create a new project and set a simple scene. Then we will browse the different packages included in Alice to search for a specific class. We will visualize the thumbnail icons that represent each package and class. Getting ready We have to be working on a project in order to be able to browse the galleries. Therefore, we will create a new project and set a simple scene. Follow these steps: Select File New...| in the main menu to start a new project. A dialog box will display the six predefined templates with their thumbnail previews in the Templates tab. Select GrassyProject.a3p as the desired template for the new project and click on OK. Alice will display a grassy ground with a light blue sky. Click on Edit Scene, at the lower-right corner of the scene preview. Alice will show a bigger preview of the scene and will display the Model Gallery at the bottom. Go to the Model Gallery and select Generic Alice Models Environments | Skies|. Use the horizontal scroll bar to find the ForestSky class. Click on the ForestSky thumbnail. Leave the default name, forestSky, for the new instance and click OK to add it to the existing scene. The scene preview will replace the light blue sky with a violet one. Many trees will appear at the horizon, as shown in the next screenshot: (Move the mouse over the image to enlarge it.) How to do it... Follow these steps to browse the different packages included in Alice to search for a specific class: Make sure that Alice is displaying the scene editor. If you see the Edit Code label at the lower-right corner of the big preview of the scene, it means that Alice is displaying the scene editor. If you see the Edit Scene label at the lower-right corner of a small scene preview, you should click on this label to switch to the scene editor. You will see the Model Gallery displayed at the bottom of the window. The initial view of the Model Gallery shows the following three packages located in the gallery root folder, as shown in the following screenshot: Looking Glass Characters: This package includes many characters that perform realistic animations for the characters. For example, you can make a person walk with a simple call to a procedure. Looking Glass Scenery: This package includes different kinds of scenery elements. Generic Alice Models: This package includes models that provide the basic and generic procedures. For example, you can move a person with a simple procedure call, but there isn't a procedure to make the person walk. If you don't see the previously shown screenshot with the three packages, it means that you are browsing a subfolder of gallery and you need to go back to the gallery root folder. Click on the gallery button and Alice will display the thumbnails for the three packages. If you don't see the three packages, you should check your Alice installation. Click on the search entire gallery textbox, located at the right-hand side of the gallery button. Enter rab in the search entire gallery textbox. Alice will query for the classes and packages that contain the rab string and will display the thumbnails for the following classes, as shown in the next screenshot: Rabbit Scarab WhiteRabbit Parabola Now you know that you have two different rabbits, Rabbit and WhiteRabbit. You can select your favorite rabbit and then add it as an actor in the scene. Select File Save as...| and give a name to the project, for example, MyForest. Then, you can use this new scene as a template for your next Alice project. How it works... Alice organizes its gallery in packages with hierarchical folders. The previously mentioned three packages are located in the gallery root folder. We can browse each package by clicking on its thumbnail. Each time we click on a thumbnail, the related sub-folder will open and Alice will display the thumbnails for the new sub-folders and the classes. The thumbnail that represents a folder, known as a package, displays a folder icon at the upper-left corner and includes the preview of some of the classes that it includes. The next screenshot shows the thumbnails for three packages, amusementpark, animals, and beach. These packages are sub-folders of the Generic Alice Models package: The thumbnails for classes don't include the previously mentioned folder icon and they show a different background color. The next screenshot shows the thumbnails for three classes, Bird1, BirdBaby, and BlueBird: The names for packages included within one of the three main packages use lowercase names, such as, aquarium, bedroom, and circus. The names for classes always start with an uppercase letter, such as, Monitor and Room. When a class name needs more than one word, it doesn't use spaces to separate them but it mixes lowercase with uppercase to mark the difference between words, such as, CatClock and OldBed. The main packages contain hundreds of classes organized in dozens of folders. Therefore, we might spend hours browsing the galleries to find an appropriate rabbit for our scene. We took advantage of Alice query features to search the entire gallery for all the classes that contain a string. This way, we could find a simple rabbit, Rabbit, and a dressed rabbit, WhiteRabbit. There's more... While you type characters in the search entire gallery textbox, Alice will query all the packages and will display the results in real-time. You will notice that Alice changes the results displayed as you are editing the textbox. The results for your search will include both packages and classes that contain the entered string. For example, follow these steps: Click on the search entire gallery textbox, located at the right-hand side of the gallery button. Enter bug in the search entire gallery text box. Alice will query for the classes and packages that contain the bug string and will display two thumbnails. One thumbnail is the bugs package and the other thumbnail is the Ladybug class, as shown in the following screenshot: If you think that Ladybug isn't the appropriate bug you want as an actor, you can click on the thumbnail for the bugs package and you will find many other bugs. When you click on the thumbnail, the text you entered in the search entire gallery textbox will disappear because there is no filter being applied to the gallery and you are browsing the contents of the gallery Generic Alice Models | animals | bugs| package. You can add a Beetle or a Catepillar, as shown in the following screenshot: Creating a new instance from a class in a gallery In this task, we will add a new actor to an existing scene. We will drag and drop a thumbnail of a class from the gallery and then we will learn how Alice adds a new instance to the scene. Getting ready We want to add a new actor to an existing scene. Therefore, we will use an existing project that has a simple scene. Open an existing project based on one of the six predefined Alice templates. You can open the MyForest project saved in the Browsing galleries to search for a specific class recipe in this article. Select Starting Camera View in the drop-down list located at the top of the big scene preview. How to do it... Follow these steps to add a new instance of the WhiteRabbit class: Search for the WhiteRabbit class in the gallery. You can browse gallery Generic Alice Models | animals| or enter rab in the search entire gallery textbox to visualize the WhiteRabbit thumbnail. Drag the WhiteRabbit thumbnail from the gallery to the big scene preview. A bounding box that represents the 3D model in the 3D space will appear, as shown in the next screenshot: Keep the mouse button down and move the mouse to locate the bounding box in the desired initial position for the new element. Once you have located the element in the desired position, release the mouse button and the Declare Property dialog box will appear. Leave the default name, whiteRabbit, for the new instance and click on OK to add it to the existing scene. The scene preview will perform an animation when Alice adds the new instance and then it will go back to the starting camera view to show how the new element appears on the scene. The next screenshot shows the new dressed white rabbit added to the scene, as seen by the starting camera: Select File Save as...| from Alice's main menu and give a new name to the project. Then, you can make changes to the project according to your needs. How it works... When we dropped the thumbnail for the WhiteRabbit class, the Declare Property dialog box provided information about what Alice was going to do, as shown in the following screenshot: Alice defines a new class, MyWhiteRabbit, that extends WhiteRabbit. MyWhiteRabbit is a new value type for the project, a subclass of WhiteRabbit. The name for the new property that represents the new instance of MyWhiteRabbit is whiteRabbit. This means that you can access this new actor with the whiteRabbit name and that this property is available for scene. Because the starting camera view is looking at the horizon, we see the rabbit looking at the camera in the scene preview. If you select TOP in the in the drop-down list located at the top of the big scene preview, you will see the rabbit on the grassy ground and how the camera is looking at the rabbit. The next screenshot shows the scene seen from the top and you can see the camera with a circle around it: There's more... When you run the project, Alice shows a new window with the rendered scene, as seen by the previously shown camera, the starting camera. The default window size is very small. You can resize the Run window and Alice will use the new size to render the scene with a higher resolution. The next time you run the project, Alice will use the new size, as shown in the next screenshot that displays the dressed white rabbit with a forest in the background:

  Moodle 2.0 for Business Beginner's Guide Implement Moodle in your business to streamline your interview, training, and internal communication processes. The Repository integration allows admins to set up external content management systems and use them to complement Moodle's own file management system. Using this integration you can now manage content outside of Moodle and publish it to the system once the document or other content is ready. The Portfolio integration enables users to store their Moodle content in an external e-portfolio system to share with evaluators, peers, and others. Managing content in repositories The repository system of Moodle 2 allows you to store and manipulate content outside of Moodle and easily add it to courses. By managing content outside of Moodle, you can provide users with a more robust editing experience. Many organizations utilize workflows and approval processes to ensure the accuracy of the content used in the LMS. A content repository can help you manage that process, and then make the content available on Moodle when it is ready for final publication. Using Alfresco to manage content Alfresco is an open source, enterprise content management system, similar in many ways to Microsoft Sharepoint or EMC's Documentum. Alfresco has seen widespread adoption over the last few years as more people begin to recognize the advantages of open source software. We will start by installing Alfresco, then look at how to link it to Moodle and add content to a Moodle site. At the end of this section, we'll take a look at Alfresco's content conversion services as a tool to ensure content is reliably converted to web friendly formats. Time for action - installing Alfresco on your test site To get us started, we'll install Alfresco on our test system to experiment with the integration. Alfresco runs on a different architecture than Moodle. Alfresco requires a Java application server instead of PHP. Fortunately, there are installers available on the Alfresco site that include everything we will need to develop a test system on your local computer. To install Alfresco, run through the following steps: Open your browser and go to http:www.alfresco.com. Go to the Downloads tab and select the Download Now button for Alfresco Document Management in the Community Edition column. Select the installer for your operating system and download it to your computer. Double-click on the installer (it may take a moment to get started). Select your language for the installer. Choose the database option you want to use. Use the included database, unless you have a good reason not to. When prompted, enter a database password. Be sure to write it down somewhere. The next screen will prompt you for an Alfresco admin password. Definitely write this down. The final screen will prompt you to choose the packages you want to install. Choose the defaults and click on Next. For the examples below, you will need to make sure that you have the OpenOffice component installed. The installer will begin to run. This will probably take a while, so it may be time to go and get a cup of tea. Once the installer is complete, select Launch. This will take a while as well, so a second cup of tea might be in order. Once Alfresco has launched, you can configure the interface with Moodle. What just happened You now have a full-functioning open source enterprise content management system installed on your personal computer. Alfresco has a lot of power for manipulating and sharing documents, but we will only focus on a few features for now. There are a lot of books available to help you learn how to use the more advanced features in Alfresco (a few of them from this publisher as well). Time for action - add a repository plugin to Moodle To allow users to access your new Alfresco repository, you will need to configure Moodle to allow access to the repository. The new repository architecture of Moodle 2 enables developers to create plugins to connect Moodle with other systems. Each system will have its own type of plugin to allow a direct connection between Moodle and the system. To enable Moodle to talk to an external repository, we need to enable the plugin and any associated options. To enable the Alfresco repository plug-in, go through the following steps: Login to Moodle as a Moodle admin. From the Site administration menu, select Plugins and then Repositories. The Manage repositories screen allows you to select from all of the available plugin repositories. For now, we will focus on the Alfresco repository. From the menu in the Active column, select Enabled and visible.The Alfresco plugin allows users in Moodle to add multiple instances of the repository. Most of the time, you will not want to allow users to add additional instances of the repository. As the admin, you can create a single site-wide instance of the repository plugin to allow users to link to Alfresco files. However, if you have more than one Alfresco instance, you can allow multiple users to create additional repositories at either the course level or the user level. Click the Save button to save the initial settings. This will return you to the Manage repositories page. Click on Settings under the Settings column to the right of the Alfresco repository row. This will take you back to the Alfresco settings page, but will provide an additional ability to add a repository instance at the site level. Click the Create a repository instance button at the bottom of the page. Give the name of your Alfresco instance. If this is an institutional repository, give it the same name as you commonly use. For example, if you commonly refer to your Alfresco instance as the "ECM" (for Enterprise Content Management), name the Alfresco instance ECM. Add the URL of your Alfresco site. Be sure to point to the Alfresco Explorer, not the Share application. You will also need to add the API pointer at the end of the string. For example, if you are pointing to the locally installed Alfresco which we described in the preceding case, the URL should be http://127.0.0.1:8080/alfresco/api. Click on Save. You will now have an instance of Alfresco available for users to add content to their courses. If you get the following error: Notice SOAP extension must be enabled for Alfresco plugin, then make sure that the SOAP library is enabled in your php.ini file. The location of the file will vary depending on the system you are using. Find the php.ini file and un-comment the extension=php_soap.dll line. Then restart Moodle and this should solve the error. What just happened You have just configured the Alfresco repository plugin to enable Moodle to talk to Alfresco. When you bring up the file picker in a course or at the site level, you should now see the Alfresco repository as an option. Have a go hero In the next article, we will configure the Google Docs plugin for Moodle, but there are a number of other plugins. Picasa and Flickr are two photo repositories on the web where many people share their photos. Wikimedia and YouTube are two very popular sources of media as well. Enable one or two of these additional plugins to practice configuring Moodle on your own. Time for action - adding content to Alfresco In Moodle 2, repository integrations are read-only. The Moodle design team decided the repository integration should only read from repositories, and the portfolio integration should save content to portfolio repositories. So you can't add content directly to Alfresco with the default plugin. To add content to the repository, we need to use the repository's own interface, then we can add it to Moodle. With Alfresco, that interface is either the Alfresco Explorer or Alfresco Share. To add content to the repository using Share, run through the following steps: Go to your Alfresco share interface, found at http://<your Alfresco server>/share. If your Alfresco is on your local machine with the default install, go to http://127.0.0.1:8080/share. Login with your username and password. Select the Repository link from the top of the page. This will display the folder structure for the default Alfresco repository. Select User Homes and then select your user space. From the menu above the file browser, select Upload. Click on the Select file(s) to upload button at the top of the Upload Files screen. Browse to find your file and then click on the Upload File(s) button. The file you selected should now appear in the file browser. What just happened You have now added a file to your Alfresco repository. We've explored a very simple example of adding a single file with no workflow or approval needed. You can use Share to create content, share it with colleagues, and use versioning and other features to manage the content creation process. Have a go hero Now that you've added a simple file to Alfresco Share, try some of the other features. Check out a file for editing, change it and check it back in for others to use, or create some content directly in Share.

ASP.NET jQuery Cookbook Over 60 practical recipes for integrating jQuery with ASP.NET      The reader can benefit from the previous article on ASP.NET: Creating Rich Content. Using the datepicker control The datepicker is a popular control for date fields in online submission forms. In this recipe, let's see how to use the jQuery UI to attach a datepicker to an ASP.NET TextBox control. Getting Ready Create a new web form Recipe5.aspx in the current project. Add controls to create a simple search form that accepts an input date field as follows: <form id="form1" runat="server"> <div align="center"> <asp:Label ID="lblDate" runat="server">Search by registration date: </asp:Label> <asp:TextBox ID="txtDate" runat="server"></asp:TextBox> <asp:Button ID="btnSubmit" Text="Search" runat="server" /> </div> </form> Thus, on page load, the web form appears as shown in the following screenshot: We will now use jQuery UI to attach a datepicker to the TextBox control. How to do it... In the document.ready() function of the jQuery script block, apply the datepicker() method to the TextBox control: $("#txtDate").datepicker(); Thus, the complete jQuery solution for the given problem is as follows: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#txtDate").datepicker(); }); </script> How it works... Run the web form. On mouseclick on the TextBox control, the datepicker is displayed as shown in the following screenshot: The desired date can be picked from the displayed calendar as required. There's more… For detailed documentation on the jQuery UI datepicker widget, please visit http://jqueryui.com/demos/datepicker/. Using the progress bar control jQuery UI provides a Progressbar widget to show the processing status during a wait time in an application. In this recipe, we will learn to create a Progressbar in ASP.NET. Getting Ready Include an animated gif file pbar-ani.gif in the images folder in the project. Add a new web form Recipe6.aspx to the current project. Add an ASP.NET panel control for the progressbar as follows: <asp:Panel id="progressbar" runat="server"></asp:Panel> Define some basic css style for the above as follows: #progressbar { width:300px; height:22px; } The jQuery UI progressbar uses the jQuery UI CSS Framework for styling. Hence, to set the background of the progressbar to the animated gif file, add the following css style: .ui-progressbar-value { background-image: url(images/pbar- ani.gif); } Create another content panel that is initially hidden and displayed only after the progressbar loads completely. <asp:Panel id="contentArea" runat="server">Page successfully loaded</asp:Panel> We will use the following css class to hide this panel: .hide 21 { display:none; } Thus, the complete aspx markup of the form is as follows: <form id="form1" runat="server"> <div align="center"> <asp:Panel id="progressbar" runat="server"></asp:Panel> <asp:Panel id="contentArea" runat="server">Page successfully loaded</asp:Panel> </div> </form> Now, we will look at the jQuery solution for applying the Progressbar widget to the ASP.NET panel. How to do it... In the document.ready() function of the jQuery script block, hide the display message: $("#contentArea").addClass("hide"); Initialise a counter: var cnt = 0; Define the maximum value of the counter: var maxCnt = 100; Use the JavaScript timer function setInterval() to define the timeout interval and the callback function after each interval: var id = setInterval(showprogress, 10); Now, define the previous callback function: function showprogress() { Check if the current value of the counter is less than or equal to the maximum allowable value: if (cnt <= maxCnt) { If yes, then apply the progressbar() function with the current counter value: $("#progressbar").progressbar({ value: cnt }); Increment the counter: cnt++; } If the current value of the counter is greater than the maximum value, clear the timer using the respective ID: lse { clearInterval(id); Show the display message: $("#contentArea").removeClass("hide"); Hide the progress bar: $("#progressbar").addClass("hide"); } } Thus, the complete jQuery solution is a follows: <script language="javascript" type="text/javascript"> $(document).ready(function() { $("#contentArea").addClass("hide"); var cnt = 0; var maxCnt = 100; var id = setInterval(showprogress, 10); function showprogress() { if (cnt <= maxCnt) { $("#progressbar").progressbar({ value: cnt }); cnt++; } else { clearInterval(id); $("#contentArea").removeClass("hide"); $("#progressbar").addClass("hide"); } } }); </script> In this solution, we have used the JavaScript timer setInterval(customFunction, timeout) to call a custom function after the timeout (in milliseconds). Important points to note are: The setInterval method returns a numeric number,id to track the timeout. This ID can be later used to clear the timer. The timer calls the custom function showprogress() repeatedly after every timeout interval until the clearInterval(id) is called. After every timeout, we will increment the variable cnt by 1 and apply it to the progressbar. When cnt reaches maxCnt, the progressbar loads completely. How it works... Run the web form. You will see that the progressbar loads in steps, as shown in the following screenshot: After the load is complete, the progressbar is hidden and the content panel is displayed instead, as follows: There's more… For detailed documentation on the jQuery UI progressbar widget, please visit http://jqueryui.com/demos/progressbar/.  

Moodle 2.0 for Business Beginner's Guide Implement Moodle in your business to streamline your interview, training, and internal communication processes         The Repository integration allows admins to set up external content management systems and use them to complement Moodle's own file management system. Using this integration you can now manage content outside of Moodle and publish it to the system once the document or other content is ready. The Portfolio integration enables users to store their Moodle content in an external e-portfolio system to share with evaluators, peers, and others. Using Google Docs as a repository for Moodle A growing number of organizations are using Google Docs as their primary office suite. Moodle allows you to add Google Docs as a repository so your course authors can link to word processing, spreadsheet, and presentation and form documents on Google Docs. Time for action - configuring the Google Docs plugin To use Google Docs as a repository for Moodle, we first need to configure the plugin like we did with Alfresco. Login to Moodle as a site administrator. From the Site Administration menu, select Plugins and then Repositories. Select Manage Repositories from the Repositories menu. Next to the Google Docs plugin, select Enabled and Visible from the Active menu. On the Configure Google Docs plugin page, give the plugin a different name if you refer to Google Docs as something different in your organization. Click on Save. What just happened You have now set up the Google Docs repository plugin. Each user will have access to their Google Docs account when they add content to Moodle. Time for action - adding a Google Doc to your Moodle course After you have configured the Google Docs plugin, you can add Google Docs to your course. Login to Moodle as a user with course editing privileges. Turn on the editing mode and select File from the Add a resource.. menu in the course section where you want the link to appear. Give the file a name. Remember the name will be the link the user selects to get the file, so be descriptive. Add a description of the file. In the Content section, click the Add.. button to bring up the file browser. Click the Google Docs plugin in the File Picker pop-up window. The first time you access Google Docs from Moodle, you will see a login button on the screen. Click the button and Moodle will take you to the Google Docs login page. Login to Google Docs. Docs will now display a security warning, letting you know an external application (Moodle) is trying to access your file repository. Click on the Grant Access button at the bottom of the screen. Now you will be taken back to the File Picker. Select the file you want to link to your course. If you want to rename the document when it is linked to Moodle, rename it in the Save As text box. Then edit the Author field if necessary and choose a copyright license. Click on Select this file. Select the other options for the file as described in Getting Started with Moodle 2.0 for Business. Click on Save and return to course. What just happened You have now added a Google Doc to your Moodle course. You can add any of the Google Doc types to your course and share them with Moodle users. Google Docs File Formats The Moodle Google Docs plugin makes a copy of the document in a standard office format (rtf, xls, or ppt). When you save the file, any edits to the document after you save it to Moodle will not be displayed. Have a go hero Try importing the other Google Docs file formats into your Moodle course and test the download. Time for reflection Using Google Docs effectively requires clear goals, planning, integration with organizational workflows, and training. If you want to link Moodle with an external content repository, how will you ensure the implementation is successful? What business processes could you automate by using one of these content services? Exporting content to e-portfolios Now that we've integrated Moodle with external content repositories it's time to turn our attention to exporting content from Moodle. The Moodle 2 portfolio system allows users to export Moodle content in standard formats, so they can share their work with other people outside of Moodle, or organize their work into portfolios aimed at a variety of audiences. In a corporate environment, portfolios can be used to demonstrate competency for promotion or performance measurement. They can also be used as a directory of expertise within a company, so others can find people they need for special projects. One of the more popular open source portfolio systems is called Mahara. Mahara is a dedicated e-portfolio system for creating collections of work and then creating multiple views on those collections for specific audiences. It also includes a blogging platform, resume builder, and social networking tools. In recent versions, Mahara has begun to incorporate social networking features to enable users to find others with similar interests or specific skill sets. To start, we'll briefly look at installing Mahara, then work through the integration of Moodle with Mahara. Once we've got the two systems talking to each other, we can look at how to export content from Moodle to Mahara and then display it in an e-portfolio. Time for action - installing Mahara Mahara is a PHP and MySQL application like Moodle. Mahara and Moodle share a very similar architecture, and are designed to be complementary in many respects. You can use the same server setup we've already created for Moodle in Getting Started with Moodle 2.0 for Business. However, we need to create a new database to house the Mahara data as well as ensure Mahara has its own space to operate. Go to http://mahara.org. There is a Download link on the right side of the screen. Download the latest stable version (version 1.3 as of this writing). You will need version 1.3 or later to fully integrate with Moodle 2. For the best results, follow the instructions on the Installing Mahara wiki page, http://wiki.mahara.org/System_Administrator%27s_Guide/Installing_Mahara. If you are installing Mahara on the same personal machine as Moodle, be sure to put the Mahara folder at your web server's root level and keep it separate from Moodle. Your URL for Mahara should be similar to your URL for Moodle. What just happened You have now installed Mahara on your test system. Once you have Mahara up and running on your test server, you can begin to integrate Mahara with Moodle. Time for action - configuring the networking and SSO To begin the process of configuring Moodle and Mahara to work together, we need to enable Moodle Networking. You will need to make sure you have xmlrpc, curl, and openssl installed and configured in your PHP build. Networking allows Moodle to share users and authentication with another system. In this case, we are configuring Moodle to allow Moodle users to automatically login to Mahara when they login to Moodle. This will create a more seamless experience for the users and enable them to move back and forth between the systems. The steps to configure the Mahara portfolio plugin are as follows: From the Site administration menu, select Advanced features. Find the Networking option and set it to On. Select Save changes. The Networking option will then appear in the site admin menu. Select Networking, then Manage Peers. In the Add a new host form, copy the URL of your Mahara site into the hostname field and then select Mahara as the server type. Open a new window and login to your Mahara site as the site admin. Select the Site Admin tab. On your Mahara site, select Configure Site. Then select Networking. Copy the public key from the BEGIN tag to the END CERTIFICATE and paste it into the Public Key field in the Moodle networking form. On the resulting page, select the Services tab to set up the services necessary to integrate the portfolio. You will now need to configure the SSO services. Moodle and Mahara can make the following services available for the other system to consume. Moodle/Mahara Services Descriptions Remote enrollment service: Publish: If you Publish the Remote Enrollment Service, Mahara admins will be able to enroll students in Moodle courses. To enable this, you must also publish to the Single Sign On Service Provider service. Subscribe: Subscribe allows you to remotely enroll students in courses on the remote server. It doesn't apply in the context of Mahara. Portfolio Services: You must enable both Publish and Subscribe to allow users to send content to Mahara. SSO: (Identity Provider) If you Publish the SSO service, users can go from Moodle to Mahara without having to login again. If you Subscribe to this service, users can go from Mahara to Moodle without having to login again. SSO: (Service Provider) This is the converse of Identity Provider service. If you enabled Publish previously, you must enable Subscribe here. If you enabled Subscribe previously, you must enable Publish here. Click on Save changes. What just happened You have just enabled Single Sign-On between Moodle and Mahara. We are now halfway through the setup and now we can configure the Mahara to listen for Moodle users. Have a go hero Moodle Networking is also used to enable Moodle servers to communicate with each other. The Moodle Hub system is designed on top of Moodle networking to enable teachers to share courses with each other, and enable multiple Moodle servers to share users. How could you use this feature to spread Moodle within your organization? Could you create an internal and an external facing Moodle and have them talk to each other? Could different departments each use a Moodle and share access to courses using Moodle networking? For your "have a go hero" activity, design a plan to use Moodle networking within your organization.