Next steps with Performer

Now you have the basics

In the Hello, world! example you were introduced to the basics of Performer; giving you access to JavaScript functions through the use of standard HTML attributes and CSS classes. Now it's time to take things a little further.

In this section we'll be looking at some more functions in Performer, and also looking at ways to build accessible web pages that work without JavaScript. You'll need to know what CSS parameters are, and how to use them, so read this page first.

The Jazz-Lovers Portal

To explore some of the more advanced features of Performer we need a web page which would benefit from some slick interactive gubbins. Why, here's just such a page.

This example page is the front page of a portal for jazz lovers. The site owner (your client) wants some more 'pizzazz' and 'that cool stuff like those big sites have'. You're not a JavaScript wizard, so this sounds like a job for Performer. Let's take a good look at the page. If you're eager to see the final thing you can do so here.

By the way, it would be handy to keep referring back to the source code of each example page as we go through this tutorial, as limited space means I can only show you basic code here. And I've not shown you any of the CSS styling I've done to the page to make it display nicely, as how things look is entirely up to you.

You can see a navigation menu, a list of logged-in users, a news section and a large image linking to an article. There's also a simple survey form, a signup box, and a form to select your favourite flavour of jazz. Let's have a look at what our fictional client wants to do with the page - all without reloading the page.

  1. There are 4 different main articles, each with a large image, which visitors need to be able to loop through to decide which one to read
  2. The intro text is really long - can it be made shorter (but still have the same number of words)?
  3. The news box needs to show news from 3 different sources, but without taking up any more room
  4. The list of logged-in users needs to be refreshed every minute to show new users on the site
  5. The 'Flavour' form needs to show a list of tunes to play depending on which flavour you select
  6. The survey form needs to be submitted and show the results without reloading the page

Step 1: Deciding which functions are suitable

It's pretty obvious that a range of Performer functions will be needed. Let's have a look at the ones we'll be using:

  1. Hmm, he said "loop" for the main article images which makes Looper a perfect fit (see this section)
  2. Make the intro text shorter, but with the same number of words? I think we need Truncator here (see this section)
  3. Tabs are a popular interface widget and could be used to show different news sources in one place - so Tabber is needed for the news feeds (see this section)
  4. Logged in users: ah, this one's easy: ReLoader will repeatedly fetch the list of logged-in users after a specified length of time (see this section)
  5. There's a function built especially for the Flavour form, it's called Selector (see this section)
  6. And for submitting the survey form we'll use Submitter (see this section)

Remember, a full description with sample code is available for all these functions (and many more) in the documentation section. Let's press on, the client is breathing down our necks! Go to step 2...

Pages: 1 2 3 4 5 6 7 8