Next steps with Performer
Now you have the basics
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.
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.
- 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
- The intro text is really long - can it be made shorter (but still have the same number of words)?
- The news box needs to show news from 3 different sources, but without taking up any more room
- The list of logged-in users needs to be refreshed every minute to show new users on the site
- The 'Flavour' form needs to show a list of tunes to play depending on which flavour you select
- 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:
- Hmm, he said "loop" for the main article images which makes
Loopera perfect fit (see this section)
- Make the intro text shorter, but with the same number of words? I think we need
Truncatorhere (see this section)
- Tabs are a popular interface widget and could be used to show different news sources in one place - so
Tabberis needed for the news feeds (see this section)
- Logged in users: ah, this one's easy:
ReLoaderwill repeatedly fetch the list of logged-in users after a specified length of time (see this section)
- There's a function built especially for the Flavour form, it's called
Selector(see this section)
- 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...