Here’s what our finished product will look like:

Getting Started
1. Download Source (download / old version link)Once downloaded, created a folder called image_scroller inside your public folder. Then, place: scroller_x.swf and swf_object.js inside the image_scroller folder. The rest of the files you really don’t need for what we’re doing.

2. Insert the code onto your page.

Open up the view file you want to place the code on. Insert the following code to get the project rolling:
<div id="scroller2" style="width:375px; height: 66px;">
Your browser is not able to run this Flash script.<br />
<br />
Requirements: <br />
- JavaScript must be enabled<br />
- You must have Flash installed<br />

<script type="text/javascript">
var so2 = new SWFObject("/image_scroller/scroller_x.swf", "scroller2", "100%", "90", "8");

so2.addVariable("sourceFile", "<%= url_for :controller => 'teamhub', :action => 'faces_photos', :sport_id => @sport.id %>");
so2.addVariable("fileType", "XML");
so2.addVariable("scrollSpeed", "10");
so2.addVariable("stageWidth", "375");
so2.addVariable("stageHeight", "75");
so2.addVariable("thumbSize", "50");
so2.addVariable("bgColor", "ffffff");
so2.addVariable("navColor", "000000");
so2.addVariable("autoScroll", "no");
so2.addVariable("thumbBackgroundColor", "ffffff");
so2.addVariable("thumbBackgroundOpacity", "100");
so2.addVariable("captionAlign", "left");
so2.write("scroller2");
</script>
</div>

A few notes about the code above:

• The first line let’s you specify the height and width of the object.
• Inside the javascript, you see: var so2 = new SWFObject(“/image_scroller/scroller_x.swf”, “scroller2″, “100%”, “90″, “8″); The params of the SWFObject are calling for the following: (source location, the name of your scroller object’s div id, width to occupy, height to occupy, version of the image_scroller software).
• Following this you see the first line of addVariable: so2.addVariable(“sourceFile”, “<%= url_for :controller => ‘user’, :action => ‘faces_photos’, :user_id=> @user.id %>”); The ruby code inside of here is pulling out the XML. note the controller, action, and ID for the info we want to pull in. In this case, we have a user controller, an action faces_photos which pulls our photo array for the user with the id of @user.id.
• All the rest of great customizations that you can add to your scroller. BenjaminKeen documents (configuration link) them all and what you can do with them. For this example, you have to keep the fileType of XML present.

Ruby Controller

We’ve used attachment_fu to upload all of our images (see Mike Clark’s tutorial). Here’s what our controller looks like:
def faces_photos
@userphotos= Userphoto.find(:all, :conditions => ['thumbnail IS ? AND user_id = ?', nil, params[:user_id]])
render :layout => false
end

A quick break down:

• Our first line pulls the array of user photos for that user. We search for thumbnail IS nil so that we don’t pull all the different versions of the photo that attachmenu_fu created for us.
• The second line is also important, as it says not to use our layout, cause we’re going to use XML.

XML View

We need an XML file which we’ve called faces_photos.rxml. Here’s what it looks like:
xml.items{
for photo in @userphotos
xml.item{
xml.thumbURL(photo.user.userphoto.public_filename(:thumb))
xml.linkURL(url_for :controller => :portal, :action => :view_profile, :username => photo.user.username)
}
end
}

What we’re doing is cycling through all the photos in our @userphotos array. We have a few things we’re putting into our items list:

• thumbURL: this is the link to the location of the thumbnail image (or whatever image you want to use in the scroller)
• linkURL: an optional item, this is where clicking on the image in the scroller will take you. In this case, we’re going to the user’s profile.
• caption: A caption for the photo, also optional. We didn’t put one in this example, but you could throw in the title of the picture quite easily that then displays below the photo.

With this, we’re all set! Customize your scroller to be user it’s what you want and give it a run.

Common Errors

1. Photos aren’t displaying: Double check your XML file and be sure you’re constructing it the right away. A good test is to browse to the xml file itself to see if the links are correct. In this example, we’d browse to controller\faces_photos.xml\3
2. When you scroller, images are appearing outside the box: You have a problem with your widths not matching. Make sure all the places where width is listed are matching; there’re 3 locations: the div id line, the creation of the SWF object line, and finally the configuration of the scroller.

Enjoy your new image scroller and using Ruby to got to play with some XML. A few more XML tutorials will be coming as I show you how to put some killer charts and maps onto your app in the upcoming weeks.

I highly recommend checking out amcharts. It’s gonna be an amazing tool for not only ruby charts, but any charting needs you have that can use XML.

Hopefully I’ll write a bit more about ruby in the upcoming months — sorry for the lack of tutorials. In the meantime, I highly recommend Ryan’s railscast’s. It’s a great video-podcast with over 70 short, quick, and highly useful tutorials.

The bad: I didn’t get the tutorial done.

The good: I’ve got a system in development that goes live this fall which uses ruser as a platform. I’m super excited because I have some interest and potential investors happening with it! That’ll be news later this summer.

• I’ve added dynamic pages to the ability of the admin. Needs some fine-tuning, but very cool and powerful. Great for an ‘about’ page or a ‘faq’ page.
• I’m seriously going to start working on the next installment of the tutorial. I had a bit of a distraction of applying to an MBA program and then a trip to Orlando for a conference. Well, I’m back and ready to get going!

On the logged-in page of ruser, you’ll be able to see what’s left to be developed before the first official release. An ever changing list, hopefully it’ll be done in the next month. Then ruser will be implemented in the its first application…which will be announced in the upcoming months.

Thanks all! Catch ya around the blogosphere.

Making it Run

To get started, let’s just make sure we have things all well in the Ruby world. You should still have a command prompt open and your favorite editor. In the command prompt, let’s do the following:

ruby script/server

You just started the ruby server on your computer. Where did it come from? From when you installed ruby of course! Now, go to your internet browser and enter:

http://localhost:3000/

This is the address of your local machine and the ruby server. You should see something like this:

Yah! It works! Okay now. Time to get this thing going.

Setting Up the Controller — just like a remote control

The time has come to see something on the screen. For this project, we’re going to really just focus on using one controller. Remember, a controller is the gateway between what the user sees and interacting with the database. We’re going to use this project as a portal for other projects, so, let’s call the controller: portal.

Open another command prompt (leaving the other one opening and running) and in your command prompt, type the following:

ruby script/generate controller portal

This will run and create a handful of things in your project. The main thing this will create, in the app folder, a controller! Yah! (That was our goal and all.) You’ll notice the file is called: portal_controller.rb. The convention in ruby is to use the underscore for files/variables/etc with multiple words. Notice we also have a folder under app for views called portal. This will come in handy in a little bit.

Open the portal_controller.rb file and let’s get some things going. When you start, you’ll see just this:

class PortalController < ApplicationController
end

Just like any other coding language, everything we code has a beginning and an end. In ruby, we use the term end as our ender. In our file, let's add the following in between the class and end lines:

scaffold :user

This will create a real generic scaffold (set of guides) for our portal controller using the user class. Now, we can play around with our file and still have functionality. Point your browser to: http://localhost:3000/portal. In ruby, we put the controller we want to use after the localhost:3000. So, if we wanted to look at a zoo_keeper controller, we'd browse to: localhost:3000/zoo_keeper.

You should see this:

Sure, it's nothing pretty -- but it is pretty cool. With the scaffold being used, we have created a simple CRUD interface. No, not nasty grim, CRUD - Create, Read, Update, and Delete. With this we can add new records, view records, edit, and delete them. Go ahead, click around, add some files. Here we've added a user and you can see he now has show, edit, and delete functions.

Notice the nice green message at the top -- Ruby is great at keeping us posted with what's going on. In this case, we've successfully created a user.

Today’s goal: set up the basics so we can start playing with the actual system! (feel free to fast forward through what you know, but we’ll take it slow for those following along.)
Note: This is all done on a windows machine. Some Mac things may vary…but I’m sure you’ll figure out what needs to happen…

Setting up the Directory

Throughout this process you’ll need a command prompt open. Keep it open — as we’ll come back to it often. I recommend having a folder in C:\ called rails to host most of your files. in the C:\rails directory, start a new rails program

rails membership

This will create all the directory files for a new rails project.

Next, create the user model. (The model will handle the passing of information between the program and the database.) First, go into your rails project at the command prompt (cd membership) and then At the command prompt:

ruby script/generate model user

Model created! Rails is smart and knows that because we named this model user, it’s going to interact with our users table. Rails can add the plurals to your models and is smart. Just remember that — rails is smart.
You can now use your favorite editor to mess with the files (I use RadRails) we just created.

First thing we’re going to do is set up our database. The key to a great ruby program is being intentional and well-planned with your database. Your database will drive your program and make life so much easier. You should always plan what you want to do.

You need to set-up a database to do your damage. You’ll need to do this one own, but call it: membership_development. You should then go into your editor and go to: config\database.yml and edit the code to fit your new database name, username, and password.

Now, to start setting it all up.

In your editor, go to: db\migrate\ and you should see a file labeled 001_something_or_other. These are migrations set to make your database manipulation much easier. You’ll be able to add more migrations later and continue to add to your database through rails.

Edit the 001 file to be the following:

def self.up


create_table "users" do |t|

t.column "username", :string, :limit => 24, :default => "", :null => false
t.column "hashed_password", :string
t.column "first_name", :string
t.column "last_name", :string
t.column "email", :string
t.column "url", :string

end