Week 7: Dynamic Image Gallery Part 2

Topics:

• Adding Flexibility to Your Image Gallery with XML data
• Using XML with Actionscript
• Javascript
  • Using jQuery to simplify Javascript
  • A JQuery XML Gallery

Adding Flexibility to Your Image Gallery with XML data

Last week we explored loading images dynamically into a Flash movie using Actionscript and an HTML5 file using Javascipt. While our technique last week was great for a simple image gallery, it was limited. We had to rename our images numerically to make it work, and we weren’t able to display any information with the images.

Today we are going to solve these two problems by learning how to load external data in much the same way that we loaded the images. The type of data that we are going to load is an XML document. XML stands for eXtensible Markup Language and is basically a specially formatted text document that looks a lot like HTML—the language that web pages are written in. But with XML, instead of prescribed tags, you make up your own (which is where the extensible part comes in). You are probably already interacting with XML documents without knowing it—podcasts and RSS feeds are actually XML files with a specific structure.

Create your XML Document

For the purpose of our image gallery, we are going to use XML to store data about a folder of images. When preparing an XML file for use in Flash, first you need to include this line to identify the document type and encoding (character set):

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

Next we want to create a parent tag, or node to hold all of our data:

<images>
</images>

Notice that you must be sure open and close each node, and that nodes are nested inside each other.

Next you will add a node type to hold data for each image. In this case, the <photo> node holds two other nodes, <image> which holds the image path, and <caption> which holds a short description or title of the image.

<images>
      <photo>
        <image>images/saharan.jpg</image>
        <caption>Saharan on Sunset</caption>
      </photo>
</images>

That’s the basic structure, you then can add a photo node for every image you want to display.

<images>
      <photo>
        <image>images/saharan.jpg</image>
        <caption>Saharan on Sunset</caption>
      </photo>
      <photo>
        <image>images/sedona.jpg</image>
        <caption>Sedona Skyline</caption>
      </photo>
      <photo>
        <image>images/capecod.jpg</image>
        <caption>Cape Cod Beach Fence</caption>
      </photo>
      <photo>
        <image>images/unguarded.jpg</image>
        <caption>Unguarded Area</caption>
      </photo>
      <photo>
        <image>images/montauk.jpg</image>
        <caption>Montauk is Listening</caption>
      </photo>
</images>

The structure and names of the node in your document is arbitrary and completely up to you.

It’s important to validate your XML documents before trying to load them into your application. Even a small syntax error can cause the whole thing to fail with no explanation. Check your XML file by loading it into any Web browser.

Using XML in Flash

We are going to take our gallery code from last week and modify it to use XML. There are a few new objects we’ll use for this, here is reference for them:

• Arrays
• XML
• URLLoader

Using Jquery to simplify Javascript

What is JQuery?

JQuery is a JavaScript library that is designed to make it easier to add complex behaviors to your HTML.

How Do I Use It?

Including the JQuery core

The core jQuery code is a single JavaScript file that you include as an external file in your page.

You can download the latest version here.  This page also has links to several publicly hosted copies of the JQuery core that you can link directly to.

You include the jQuery core in your page like this:

 <script src="jquery.js"></script>

That’s assuming the script file is in the same directory. You can put this code in either the head or the body element of your page. If you are going to put it in the body, it’s best to put it at the end, right before the ending </body> tag.

jQuery is built on Javascript, but the syntax is a little different, and all designed to make it easier to target an element in your HTML. The primary difference is that all jQuery is preceded by the $ function, which is basically a shortcut that signals the browser that the code to follow is jQuery.

Initializing JQuery

This starts with the way you initialize it in your page. Javascript will often use the onload event of the window object to trigger JavaScript once the page is loaded:

window.onload = somefunction();

jQuery accomplishes the same thing through its document.ready event

 $(document).ready(function(){
   // Your code here
 });

If you are using jQuery in conjunction with other JavaScript libraries, the $ function can cause a conflict. We’ll talk about how to handle this later.

> JQuery HTML Template

What can I do with it?

Events

One of the advantages of using jQuery over plain JavaScript is the easy ability to add behavior to elements without modifying the html of those elements. For example, if you wanted to add behavior to an div with the class “hi” when it is clicked, this is the code:

$('div.hi').click(function() {
  alert("Hi there!");
});

If you wrap this in a document.ready function, then when the document is loaded, all matching elements will have this behavior added on click.

Here is a list of all the events you can react to with jQuery.

Effects

Jquery has a number of built in effects that allow you to create simple animations. For example, if you wanted to fade in a div named “shyguy”:

$("div.shyguy").fadeIn("slow");

Here is a list of all the effects.

You can find a lot more info about jQuery here

Parsing XML with jQuery

Loading info into an HTML file from an XML file requires some cooperation between the server side and the client side. To do this, we use AJAX (Asychronous Javascript and XML) which allows us to retrieve new data without refreshing the page. The first place we started seeing major applications of AJAX were on dynamic web apps like Google Maps.

Jquery makes it easy to use ajax. Unfortunately, the instructions on the jquery site are not so simple, so I’m going to walk you through it.

Homework

1. Finish what we began in class today – convert your Flash gallery to use XML as the data source
2. Use the same XML file to display your images/captions using HTML and jQuery. You can either use my HTML/CSS, or create your own.
3. Project 2: Wireframe – Create a sketch of the rich media player you will build for project 2. This interface should include either still images and audio or a series of video. If you create this on paper, scan it in so we can look at it up on the projector.
4. Look at the JQuery plugin library, and find a gallery or slideshow plugin that you would like to try out. Bring 10-15 images to class next week, and a link to that code.