We will have a series of technical posts coming soon, talking about the challenges and tweaks me made to get everything working in the RESTful style we love. If you want to see the results you can checkout the Easy Money application here.

Facebook® is a registered trademark of Facebook Inc.

The way we had modeled the data made it very easy to pick out the specific icon or color theme (using an ActiveRecord finder for that type). However, based on the data instance returned by find I wanted to execute a series of methods to populate other models with data relevant to the Icon or Color instance.

A couple solutions presented themselves[3]:

1. Refactor the model so that each type was represented by a model type (the orange boxes would become brown ones). We could then call the method we needed from that type.
   • Each data type in our environment would only have one record. Changing the model this way didn’t really make any sense in our situation.
2. Create a map from data element name to a class that could be invoked to perform the required actions.
   • This would work, but I was feeling lazy and maintaining a map of names to types didn’t feel as DRY as I thought it could be.
3. Take advantage of the Rails constantize method.
   • We could use the name of the record and dynamically map that string to a class with a method or methods that could be invoked at runtime.

While any of theses solutions could work, the one that I found the most interesting was the one involving constantize (Module
ActiveSupport::CoreExtensions::String::Inflections). If you have poked around the rails source you see that constantize is used for things like in_place_edit (do a find on an object based on a parameter string). If I haven’t lost you yet included below is a code snippet illustrating how this works and solving my problem. It’s important to note that you need to camelize specific_theme_type before calling constantize or it will raise a NameException. In the example below I’ve created a rescue block because not all of my types are mapped to a specific content class and I wanted to fall back to a default in those cases.

begin
  content_type = "Content::#{specific_theme_type.camelize}Content".constantize
rescue NameError
  content_type = Content::Default
end
content_type.content_method

I’ve only touched the surface of things you can do with constantize. If you have also used constantize or another similar trick, please share it in the comments.

Notes:

1. Single Table Inheritance – Definition of STI, STI in Rails
2. Apologies for the small digram, full size available here.
3. I am sure there are other solutions, so feel free to leave comments detailing how you would have done it

Working with Timezones in Rails even after you have installed the TZInfo plugin is still a pain in the you know what. (You are using TZInfo, right?) I never liked having to jump through hoops converting from UTC to localtime when displaying times to Users. I suppose I could have used Javascript to do the conversion but I prefer to deal with the conversion on the back end.

Adding support for time zones to our apps wasn’t very fun. While adding timezones to another model model for the third or forth time I decided there had to be a better way. I pointed my browser to the agile web development plug in site and did a quick search. I found a couple plug-ins that helped with timezones or helped with date time pickers; but nothing that did quite what I wanted.Ideally I wanted a plugin similar to attachment_fu. I wanted to specify within a model a single method that handled all of the setup. So when I accessed a datetime field the local time would be returned. I also wanted to be able to set the field to local time and have that value converted to UTC before being saved to the database. And the plugin had to do all of this with minimal setup and effort on the part of the developer. Not finding anything that satisfied my requirements I decided to write something. After an hour or two I put together something that I think is worth sharing. Included at the bottom of this post are links to grab the plug-in.

While building ThriveSmart Sprout! we used plugins from various developers. The availability of plugins was on the the great strengths of the Rails comunity. In honor of techno weenie and the attachment_fu plug-in our plug-in was christened timezone_fu.

Timezone_fu makes it really easy to deal with datetime fields in your models. It adds a method to your models has_timezone that takes a hash of options. the README for the plugin describes all of the options but below is an example:

  class Event < ActiveRecord::Base
    has_timezone :fields => [ :start_datetime, :end_datetime]
  end

Our Event model has three fields a start_datetime and end_datetime and a timezone. Adding has_timezone to the model changes the behavior of the two datetime attributes.
Notice below that calling event.start_datetime shows the time in local time (“America/New York”).

>> event = Event.find(:first)
=> #<Event:0x1b71b40 @attributes={
      "end_datetime"   => "2007-11-21 15:00:00",
      "start_datetime" => "2007-11-21 14:15:00",
      "timezone"       => "America/New_York"}  
>> event.start_datetime
=> Wed Nov 21 09:15:00 UTC 2007  
>> event.display_start_datetime  
=> "Nov. 21, 2007 09:15 AM"  
>> event.utc_start_datetime
=> Wed Nov 21 14:15:00 UTC 2007

You can also set the value of the field to a local date/time and it will be converted to UTC automatically:

>> event.start_datetime = Time.now
=> Sun Nov 25 06:26:35 +0000 2007
=> #<Biz::Event:0x1b71b40 @attributes={
  "end_datetime"    =>  "2007-11-21 15:00:00"
  "start_datetime"  =>  Sun Nov 25 11:26:35 +0000 2007,
  "timezone"        =>  "America/New_York" }

If you want to access the fields and retrieve the database value you can use the utc_field_name method to access the UTC value of the attribute. The plugin makes a couple of core assumptions. One it assumes that the default rails timezone is UTC:

ENV['TZ'] = 'UTC'

Second it assumes that the model has a timezone attribute named timezone:

t.column :timezone, :string, :default => ''

The plug-in depends on TZInfo and has been tested under Rails 1.2.3

You can grab a copy of the plug-in here: http://www.thrivesmart.com/open_source/timezone_fu.
Or if zipped is more your style: http://www.thrivesmart.com/open_source/timezone_fu.zip

If you love and/ or hate the plug-in feel free to leave your comments below.

In the beginning there was Java and it was good, but something was missing. Java as a partner was not particularly pretty, it was not very fun to wake up to in the morning, but it got the job done. In late May Daniel sent an IM to Matt, He was having problems with eclipse and svn and went off on a tangent. The IM went something like this:

Daniel: “I see why the RoR people are in love. Not that SVN has anything to do with RoR”
Matt: “RoR?”
Daniel: “Ruby on Rails, I was playing with it yesterday”
Matt: “I see, is it good for backend? frontend? both?”
Daniel: “If you are ok with going with the defaults it lets you focus only on developing features, so you don’t have to worry about backend or frontend. Some of the deployment tools are pretty neat too. Ok, back to topic…”

Daniel had just watched the Rails Screencasts and was in love. The concerns we were having with Java and Google Web Toolkit seemed like they would probably go away with Rails. It took a long time to develop new features the way we had been doing things. After debating the topic for a while we had a founder’s meeting in the car while driving to Target, and decided: we would devote two weeks to try our hand at porting (rewriting) YouBook from Java to Ruby on Rails. We quickly purchased the PDF+Hard Copies of “Programming Ruby” and “Agile Web Development with Rails” from Pragmatic Programmers, and the adventure began.

The first couple weeks were incredibly hard. When you develop with Rails, you really have to know the Rails Way to be effective, and not feel like you’re swimming upstream. However, within days we were already starting to see an application take shape. What would have taken us days to change and test in our old environment we could do in minutes in Rails. The phrase, “Wow, I can’t believe how easy this is” was repeated time and again for at least the first month. As great a story as “How we learned Rails” might be, this article is also about the lessons we learned, and what we would do differently – as well as some really useful resources we found along the way.

Framework: Ruby on Rails!
Source Code Control: Git
Development Methodology: Speed of development, fixes, and new features

Why we chose Rails over Java + Google Web Toolkit (GWT):

Programming languages & frameworks are just tools. Depending on the job, some tools are better than others. We started with two tools we thought would be fantastic: Java & the Google Web Toolkit. We did so because we were experienced with Java web programming, and knew we wanted our application to have AJAX. Given Matt’s past employment at Google, the GWT framework seemed like a great fit. We wrote our first web application YouBook for ThriveSmart (our company), which let users book appointments online with businesses that partnered with us. Given our experience, they were definitely strong tools. For the next version of YouBook and our new application, we wanted to choose new tools that addressed some frustrations we ran into. GWT & Java have their strengths, but there were some big concerns:

Number of Serial HTTP Requests to Render Any Data
The biggest concern we had was that GWT made the first impression of our app feel slow – the load. We used Javascript to load and render the data of the page (in other words, the server didn’t render any dynamic data onto the page). That meant that (1) browser loaded the GWT “loader” js file, which then (2) interpreted and loaded the real GWT compiled javascript, which then (3) interpreted and then loaded the data (as JS objects which were then drawn by JS). Because this all happened in serial, it just made the page feel slow.

Pages Not Indexable
Another concern was that since our data was loaded in dynamically and not rendered on the original page, none of the content would have been indexable by search engines. Anything that we wanted to have searchable, we probably would have had to have Java + Struts (or whatever framework) render itself. GWT would have had to have been implemented on top of it.

UI more like Swing than HTML+CSS
Although it’s not perfect, designing layouts in HTML with CSS is incredibly flexible and elegant. You get a wonderful separation of design and data. With the UI components that come with GWT, it’s more like you’re developing UIs in Swing, which does not share the same benefits. GWT/Swing makes it easy to quickly mock up a moderately complex UI, but HTML+CSS gives you great results, has better design tools, and allows for far more stylish designs – which can all be changed with a swap of the CSS.

At the end of the day, it’s still Java
Java+GWT has some nice benefits: you can understand what’s going on, because you design the whole thing. You can really reduce the number of complex SQL statements because you have low level control. With GWT, you have the same language for both the server and the UI (cool!). However, at the end of the day you still have Java code, which is not particularly elegant, and any plugins you use for uploading, or RESTful design are usually bloated and not well tested. Perhaps Paul Buchheit says it best.

So we were always on the lookout for better tools that came along. Tools that truly supported our methodology of quickly responding to customer needs and rolling out new features. Thank goodness we found Rails! We learned it, practiced, and started writing our app. And we never looked back.

Let’s continue with what we love the most about Ruby on Rails – the community and light-weight plugins, and show you what we were able to implement within our application in short order!

The Great Rails Community & Plugins

One of the things that impressed about Ruby and Rails was the community. There was an abundance of information and extensions to the core Rails framework offering functionality that we needed. Browsing the source code for the plugins was also a great way to expand our Ruby knowledge – and a great way to expand our webapp features in a lighweight manner. We list all the tools & plugins we use at the end of the post (appendix). But here are some interesting pieces of the Rails community in no particular order:

Railscasts
Ryan Bates is putting together a library of video podcasts that walk you though creating a rails application. Currently at post # 74 I always find a nice nugget of information in each episode. It is also nice to see a topic covered after you have already coded up a solution to find out that you did it the “rails way”.

Peepcode
The one non-free resource in the list. Early on we purchased the RESTful rails episode and recently the Textmate episode. There are many other episodes on the site and for the price, they are a fantastic resource for developers that want to learn a specific subject.

Rails Wiki
A relatively up to date place to find out information on various recommended techniques for building your application.

Blogs
There are “google only knows” how many blogs offering up all kinds of tips and tricks for Rails applications. The one gripe we had with the community is that many blogs do not insert links into the Wiki and the only way to find the information was to (1) check the wiki, (2) search for and add it to del.icio.us

After spending days reading blogs, wikis and plugin source code, we learned a ton – and spent time designing and coding. At the end of the four months, we ended up with a great webapp, in our eyes. Here’s some of the key things we ended up with in short order:

What We ended up With

RESTful Routes
We wanted Sprout! to have pretty URL’s, with that in mind we looked at the two Rails routing options and choose the REST option. Once again, PeepCode screencasts came to the rescue.

Authentication & Authorization
We started off with the restful_authentication plugin and extended it to include authorization per User / Business

Git
We had worked with centralized repositories for years. I had not had the best luck with Subversion. after watching a video: Linus Torvalds on Git, and realizing that some of the issues he described we were having we switched to Git. We started off with local repositories and pulling changes between each other with git-deamon. When we setup our production server we also created a shared repository we could push and pull changes to via SSH. For fun we created a TextMate bundle to assist with commiting, pushing, pulling and getting status of changes – which we will release!

Capistrano based deployment
Capistrano rocks, we love being able to push changes to the website and the app with one command and a password. If you haven’t checked it out (Rails project or not), you are doing yourself a dis-service. It now takes us about 15 seconds, and we can roll back to any release easily.

Static Asset Hosting
As we got close to deployment we noticed that loading Javascript, images and style sheets from on host was slowing page loads. We had already created Apache rules to serve our static web pages, but that was not enough. Initially we used the builtin asset host (config.action_controller.asset_host ) and that was an improvement. We ran into an issue where our javascript files (particularly tinyMCE) would make GET requests against the static host and the inline pop ups stopped working. We also had issues with HTTPS pages showing security warnings in internet explorer. Since we had to come up with a way to serve javascript differently from images and stylesheets we figured we would add a requirement to not serve assets from the asset host if the request was HTTPS. A slightly modified (for HTTPS) version of multi-asset-locations plugin fulfilled our requirements very nicely.

Hosting
For our previous application we had a dedicated server. The cost was pretty high, but we could do whatever we wanted to the machine. We started looking at Virtual Private Servers as we were getting ready to deploy. We knew Joyent was the official rails host, and after poking around we saw that they also hosted twitter. We figured with their experience, great prices, and Daniel’s bias to Sun gear we would try them out. It took a little while to get our first instance (or accelerator as they call it). Now we have two and we love it.

Exception Reporting
Having your users get an error page, no matter how pretty it is, sucks! Going through logs looking for exceptions and stack traces is almost as fun. Early in the Beta we started looking at plugins that could help us by sending emails to the development team when exceptions occurred. We tried the exception_notifier plugin but couldn’t get it to work with Rails 1.2.3. Instead of trying to debug the plugin, Daniel wrote his own while Matt and Jenn were eating dinner.

Performance Monitoring
Being new to Ruby on Rails we are concerned about finding and removing performance hot spots in an intelligent fashion. Using the default Rails logs to do this can be painful. Thankfully we came across this post about a Hodel 3000 compliant logger. Now we get a nightly email showing the performance of the application over the previous day. The change makes it nearly impossible to read stack traces in the log. Thankfully we already had exception reporting

Image Uploads
Pictures are a big part of the Sprout! experience. With Attachment Fu, a good bit of Javascript a new tinyMCE plugin and a splash of CSS we were off to the races. Attachment fu managed the the uploaded images, resizing, and storage. Javascript and responds_to_parent allow us to do uploads without refreshing the page. And to top it off, we used the JonDesign’s SmoothGallery 2.0 to display stunning slideshows.

Testing
When we started porting YouBook, it was very important to us to decrease the amount of manual testing we had to do. We started off using the standard rails functional and unit tests and changed over to using the test_spec_on_rails plugin after two months. When creating a new feature we don’t always start with tests, but before we push the change, you better believe the tests are in there. We both really enjoying seeing the all green before a commit or right after a pull of the latest code.

Drag and Drop Sorting, Javascript callbacks
In our application, it was really important that our users could edit right in the context of what they’d see. This meant heavy javascript. First, we heavily use the Scriptaculous Drag and Drop code for easy ordering of slideshows or catalog items. The built-in javascript callbacks (for different request formats, like JS, ics, etc) were a lifesaver. We could respond with javascript directly and have it rendered in the browser. It’s so easy, and really efficient – no parsing javascript objects, just javascript code itself!

What We’d Do Differently

We had a great introductory ride on Ruby on Rails. We didn’t know Ruby or Rails at all before we started, and we were able to launch a pretty sophisticated web app in a short amount of time. But of course, as with all things, there were mistakes we had to make — mistakes that we would rather avoid in the future.

Design First in HTML + JS
Our biggest mistake: we didn’t complete our interface design before we started programming in rails (Getting Real did teach us to Design Interface First). This was completely understandable, because we didn’t really know what (design & interface-wise) was really hard, versus what was easy to implement in rails. We had to play around with the programming and implementation before we completely designed our app. If we hadn’t, we might have designed our way into an impossibly difficult interface to implement in rails.

But now we know what rails can and can’t do. And we really can’t stress this enough – WE WILL DESIGN OUR INTERFACE FIRST – COMPLETELY! This means we will sit down together and draw every page out on paper together (we like to do this over meals). Once the paper mockups are in order, we will then create full HTML mockups with javascript. Once we settle on the user interface, we’ll go back and “fill in the blanks” with server side code. The beauty is that in Rails, it really is fill-in-the-blanks, and it makes design first a breeze.

Good Javascript Libraries
There were a few painful points that we thought took a long time when writing our app. One of them was surely javascript. Although prototype and scriptaculous are a good start (particularly because there are great helpers to interface with them in rails), there is so far to go in this department. Before we try to write a lot of javascript, we’ll be sure to write additional helpers between rails and our JS code to make it drop-dead-easy to create features.

Use Fixtures Sparingly
When we started testing fixtures provided a way to quickly setup test data. However as our models became more complex and the relationships between them more involved, maintaining fixture data quickly became a headache. Going forward we will be using Mocha to create mock objects for our tests where there is a need to setup relationships between models.

Caching
When we started coding we had discussed implementing caching, but as deadlines approached we kept putting it off. Sure enough when the Beta launched, we didn’t take advantage of caching. In the future we know that we will need to implement caching, but it will probably require a good bit of refactoring to be effective.

Appendix – Resources We Used

Education

Programming Ruby
Best book for learning ruby, for noobies.
Agile Web Development with Ruby on Rails
If you’ve never done any rails development, prepare to get wowed with this great introduction.

PeepCode Screencasts
Regularly expand your Rails repritoire

Railscasts
Great short podcasts you can subscribe to – similar to Peepcode but covers different subjects.

Creating an Images plugin for TinyMCE in Rails
We wrote this little how to =)

Development Environment

Git
Solid source code management – and wicked fast. Plus you don’t get SVN dropplets all over your source directory.

Locomotive (Duh)
Get a Mac and then install this 1-stop-shop for rails development (download the ImageMagick Bundle).
Autotest & Growl (a gem, not a plugin)
Part of the Zentest suite, autotest runs tests in the background as you modify files. It is pretty good at determining what tests need to be run if you make changes to models, controllers or views. With Growl notification it was a lot of fun to see the “All tests passed” message pop up. The “X tests failed” message was not as fun causing many late night head scratching sessions especially when we were new to Ruby.

Ruby On Rails Plugins

Restful Authentication
A well tested and helpful authentication for your webapp on top of RESTful rails.

Attachment Fu
We use it to help us manage uploaded images. This plugins stand out quality is how easy it is to integrate. It comes with helpers for tests, it is robust offering File, database and Amazon S3 storage options for uploads. The other piece of functionality that put a big smile on my face was the ability to quickly add different image sizes to uploads, and the simple integration with image manipulation libraries like ImageMagik.

Test Spec on Rails
About two months into the project we tried to switch from rails builtin functional tests to using RSpec functional specifications. The functional spec tests were easier to read and with specify blocks it was easier to seperate tests by context such as if the user was an admin, customer, anonymous, etc. After an all nighter trying to figure out how to make autotest run RSpec tests and the three hundred existing tests we were about to give up when at around five am we came across the test_spec gem and test_spec_on_rails plugin. Thankfully it let us use our existing tests as is, and integrate specifications for future tests.

Responds to Parent
This little beauty helped us again in the image upload department. By using an iframe for the upload we were able to spare a page refresh after an upload completed. We liked it so much we integrated it with the tinyMCE editor, created our own image select and upload plugin and wrote a how-to about it.

Exception Notifier Plugin
Send email notifications when errors occur in a Rails application. NOTE: Has problems with Rails 1.2.3

Multi-Assets Locations Plugin
Easily map asset host URLs to different asset types (images, javascript, stylesheets) to hosts like static1.myhost.com, static2.myhost.com to improve page load time.
Hodel 3000 Compliant Logger
Changes the log format so you can use pl_analyze to gather performance application for your rails application.

Javascript

Prototype API Documentation
Way too much time spent in here – but necessary if you want to code in rails.

Scriptaculous Effects – Drag N Drop
Javascript effects library including drag and drop, sorting, and highlighting.

SmoothGallery 2.0
A fantastic javascript slideshow library by my friend Jonathan Schemoul.

Responds To Parent
Help with having a parent of an iframe execute returned javascript code.

TinyMCE
A good wysiwyg content editor, which wordpress also uses.

Deployment

Joyent Hosting
A wonderful Ruby on Rails host – we love it!

Capistrano
Deploy your rails app with it, period!

But I needed something (easy) to use in development. So I wrote a little tool I’d like to share with you!

So I present to you the CSS Color Extractor, where you can copy and paste CSS code, and it will visually display to you the results of the colors. For this 0.1 release, it’s pretty simplistic – it simply finds #[0-9a-zA-Z] in a closure ({}), and it’s all written in Javascript.

I hope it’s helpful to you as you do development – where my pages wouldn’t have to be published. I’d love feedback, too.

Particularly, if anybody has good ideas of a better way to sort hex values to get the colors in a more useful order, let me know!

In the first part of our how-to we created a tinyMCE plugin with a dynamic image selector panel based on the advimage plugin. Now we will add functionality to upload images or select an existing image.

Our plugin needed to satisfy the following requirements:

• Use the existing inline popup (IFRAME) adding a form for uploading an image. We did not want the user to be directed to another page or create a pop up window.
• In javascript determine which controller to call in the form because we can not pass a variable from the parent to the image selection IFRAME.
• The image selection IFRAME should not reload when the form is submitted. Reloading the IFRAME would trigger another fetch of uploaded images and that should be avoided.
• After an image is successfully uploaded the source and alternative text fields should be set as if the user had clicked on an existing image and the IFRAME should then disappear using the plugins existing functionality.

To follow along with this tutorial you will need:

• The updated advimage plugin from the end of How to Create an Image Selection Plugin for tinyMCE.
• The responds_to_parent rails plugin [1] installed, Sean Treadway has a great tutorial on using the plugin within a rails project.

With what we want our updated plugin to do, let’s get started!

1. The original image.htm (tiny_mce/plugins/ts_advimage/image.htm) has a form tag right after the body tag, we need to relocate this form in order for our image upload to function properly:

   <body id="advimage" onload="tinyMCEPopup.executeOnLoad('init();');" style="display: none">
   
       <form onsubmit="insertAction();return false;" action="#">
   
   

   Relocate the form just before the tabs div:

   <form onsubmit="insertAction();return false;" action="#">
   
    <div class="tabs">
   
   

2. Add a form for the image upload image.htm. Create a new div called “image-upload” to house the form. The form needs to have multipart/form-data encoding and will call a javascript function ts_onload (which we will write shortly) on submit. The target for our form is html_editor_image_upload_frame which we will create dynamically to avoid javascript errors when the plugin removes the IFRAME containing the inline popup window.

   <div id="image-upload">
   
     <fieldset>
   
       <legend>Upload New Image</legend>
       <form id='image_upload_form' enctype="multipart/form-data" method="post" onsubmit="ts_onload(); return true;" target="html_editor_image_upload_frame">
   
         <input class="input-file" id="image_uploaded_data" name="image[uploaded_data]" size="30" type="file" />
   
         <div class="submit">
   
           <input class="input-submit" name="commit" type="submit" value="Upload & Insert" />
   
         </div>
   
       </form>
   
     </fieldset>
   
   </div>
   
   

3. Adding the form to the panel breaks the plugin because the plugin was originally written assuming that there would only be one form. We need to change instances of document.forms[0] to document.forms[1]. We could simple do a find and replace but if we ever add a form in the future we would have to do that again. Instead let’s create a function called formElement that returns the proper form:

   function formElement() {
   
    return document.forms[1];
   
   }
   

   Now, search for instances of document.forms[0] and replace them with calls to formElement(); (there should be sixteen).

4. Create javascript functions to create the IFRAME and determine the path for the form action in tiny_mce/plugins/ts_advimage/jscripts/functions.jsts_onload: Create a hidden one pixel by one pixel IFRAME with an id of html_editor_image_upload_frame and add it to the end of the image-upload div we created in step two. The function also modifies our form action with the result from ts_upload_image_path(). The code highlighted below was generated [2] by DOMTool v1.1

   function ts_onload(){
   
    var iframe1=ts_ce('iframe','html_editor_image_upload_frame');
   
    iframe1.setAttribute('src','about:blank');
   
    iframe1.style.border="0px none";
   
    iframe1.style.position="absolute";
   
    iframe1.style.width="1px";
   
    iframe1.style.height="1px";
   
    iframe1.style.visibility="hidden";
   
    iframe1.setAttribute('id','html_editor_image_upload_frame');
   
    $('image-upload').appendChild(iframe1);
   
    $('image_upload_form').setAttribute("action", ts_upload_image_path());
   
   }
   

   ts_ce: A helper for creating the iframe

   function ts_ce(tag,name){
   
     if (name && window.ActiveXObject){
   
       element = document.createElement('<'+tag+' name="'+name+'">');
   
     }else{
   
       element = document.createElement(tag);
   
       element.setAttribute('name',name);
   
     }
   
     return element;
   
   }
   
   
   
   

   ts_upload_image_path: Determine the action for the image upload form based on the URI of the parent. Divide the path into segments delimited by a forward slash. Our path_prefix is always the token after the domain name. The result is a string used to call the controller with the action for uploading images.

   function ts_upload_image_path() {
   
     path_prefix = window.parent.location.pathname.split("/")[1];
   
     to_path = "/" + path_prefix + "/manage_images.js";
   
     return to_path;
   
   }
   
       

5. With the HTML and javascript completed, let’s revisit our manage images controller. In part one our controllers respond_to block looked like this:

       respond_to do |format|
   
         format.html
   
         format.js
   
       end
   
   

   We need to modify our create action so it notifies the parent IFRAME that the image was uploaded. We will use a responds_to_parent block to call the javascript ts_insert_image function we wrote in part one:

   def create
   
     @image = handle_uploaded_image params[:image]
   
     respond_to do |format|
   
       if @image.save
   
         format.js do
   
           responds_to_parent do
   
             render :update do |page|
   
               page << "ts_insert_image('#{@image.public_filename()}', '#{@image.name}');"
   
             end
   
           end
   
         end
   
       else
   
         format.js do
   
           responds_to_parent do
   
             render :update do |page|
   
               page.alert('sorry, error uploading image')
   
             end
   
           end
   
         end
   
       end
   
     end
   
   end
   

6. One final step. We need to modify the responds_to_parent plugin (vendor/plugins/responds_to_parent/lib/responds_to_parent.rb) to fix a javascript error caused when the IFRAME is removed from the DOM by the tinyMCE plugin. Change the rendor block near the end of the file from:

   render :text => "<html><body><script type='text/javascript' charset='utf-8'>
   
           var loc = document.location;
   
           with(window.parent) { setTimeout(function() { window.eval('#{script}'); loc.replace('about:blank'); }, 1) }
   
         </script></body></html>"
   
   

   To:

   render :text => "<html><body><script type='text/javascript' charset='utf-8'>
   
     var loc = document.location;
   
     with(window.parent) { setTimeout(function() { window.eval('#{script}'); try { loc.replace('about:blank'); } catch(ignored){} }, 1) }
   
   </script></body></html>"
   

You now have a new tinyMCE image plugin that allows a user to select an existing uploaded image or use a form to upload a new image. Once the image is uploaded the IFRAME is removed from the DOM and the image is inserted into the tinyMCE text box.

Notes:

1. The responds_to_parent plugin allows “AJAX” style file uploads by posting a form to a hidden IFRAME.
2. Dynamic IFRAME javascript code was generated by http://muffinresearch.co.uk/code/javascript/DOMTool/ – “The compatibility mode for attributes in Internet Explorer is only required should the user need to use innerHTML or outerHTML to get hold of the markup for a form. Using either name properties or setAttribute results in the name attributes being present in the document but not available to innerHTML or outerHTML. When disabled DOMTool uses setAttribute to generate name attributes”

http://hackd.thrivesmarthq.com/how-to-make-a-rails-partial-with-optional-locals-parameters

Some administrative details before we get started. You will need a couple things before you can follow along:

1. A working rails project and some images.
2. TinyMCE installed and working – A tutorial for that is here

We start a plugin that comes with tinyMCE called advimage and modify it by creating a a tab called uploaded images that will contain thumbnail images that can be selected by clicking one of them. After being clicked the window should close and the image should appear in the tinyMCE enabled text box. We want to keep the ability to provide a URL and alt text manually via the general tab. With that out of the way, lets jump into the code!

1. Navigate to the tiny_mce/plugins directory.
2. make a copy of the advimage directory, I called mine ts_advimage,
3. open ts_advimage/image.htm (or whatever you called your directory, from here on it will be ts_advimage)
4. We need to add prototype.js to the head section because we are going to use AJAX to fetch the images from our controller:

    <script language="javascript" type="text/javascript" src="/javascripts/prototype.js"></script>

5. look for the div with class=tabs and add code for a new tab:

   <div class="tabs"> <ul>
     <li id="dynamic_select_tab" class="current"><span><a href="javascript:mcTabs.displayTab('dynamic_select_tab','dynamic_select_panel');" onmousedown="return false;">Uploaded Images</a></span></li>
     <!--- existing plugin tab code --->
     <li id="general_tab"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{$lang_advimage_tab_general}</a></span></li>
     <li id="appearance_tab"><span><a href="javascript:mcTabs.displayTab('appearance_tab','appearance_panel');" onmousedown="return false;">{$lang_advimage_tab_appearance}</a></span></li>
     <li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">{$lang_advimage_tab_advanced}</a></span></li>
    </ul>
   </div>

   The new tab is called dynamic_select_tab with a label of ‘Uploaded Images’ it will open dynamic_select_panel, and it is the current tab, i.e. the default when the form is rendered. The only thing you should change below the existing plugin tab code line is to remove class=”current” from general_tab.

6. Create a new panel to house the images we are pulling from the controller.

   <div class="panel_wrapper">  <div id="dynamic_select_panel" class="panel current" style='overflow:auto'>
       <fieldset>
        <legend>Available Images</legend>
        <script type="text/javascript">//<![CDATA[
           new Ajax.Request("/manage_images",
             {asynchronous:true, evalScripts:true, method:'get'});     //]]>
        </script>
        <div id='dynamic_images_list'>
           Loading Images...<br />
           <img src='/images/loading.gif'>
       </div>
      </fieldset>
   </div>

   The ‘/manage_images’ parameter to Ajax.Request will need to be replaced with the path to your controller. It is important to note the style overflow:auto in the above code snippet. This will allow the area with images to grow (i.e. a scroll bar will appear as needed).

7. Modify your image controller’s index action to respond to javascript. In the index action for the controller you need to make sure the resond_to block has a format.js section has format.js:

       respond_to do |format|
         format.html
         format.js
       end

8. Create a new file in the controller’s views sub-folder called index.js with the following rjs code:

   page.replace_html :dynamic_images_list, :partial => 'show_image_list', :locals => { :images => @images }
   

   I chose to use a partial show_image_list, you can do the same and call it _show_image_list.rhtml.
   The page.replace_html call will convert the .rhtml from the partial to javascript and replace the dynamic_images_list div we created earlier with our list of images. The code for the partial:

   <% if images.size > 0 %>
   <ul>
     <% images.each do |image| %>
       <li>
         <a href="javascript:void(0)" onclick="<%="ts_insert_image('#{image.val.public_filename()}', '#{image.name}');" %>">
         <%= image_tag( image.val.public_filename(:thumb) ) %></a>
       </li>
     <% end %>
   </ul>
   <% else %>
    No Images Uploaded Yet.
   <% end %>

   The class variable @images contains all of the image models we would like displayed.

   QUICK TIP: If there is a chance that your image name or filename could have single quotes in it, you should escape them.

9. An onclick event in the partial is used to take action when a user clicks an image: onclick=”<%=”ts_insert_image(‘#{image.val.public_filename()}’, ‘#{image.name}’);” %>”. This javascript function sets fields in the tinyMCE popup. Create this function in functions.js which lives in ts_advimage/jscripts/functions.js:

   function ts_insert_image(url, alt_text){
    var formObj = document.forms[0]; formObj.src.value = url;
    formObj.alt.value = alt_text;
    insertAction();
   }

   This function sets the fields in the general tab and closes the popup inserting the image into the text box.

10. We are only a couple of steps away from being done, so hang in there. We need to tell tinyMCE about our new plugin so open up ts_advimage/editor_plugin.js. It is one long line (if you want to study the structure of the file look at editor_plugin_src.js). The code below is copied from editor_plugin_src.js so it is easy to understand. You must also make the changes in editor_plugin.js. What I changed is highlighted below:

    tinyMCE.importPluginLanguagePack('ts_advimage');
    var TinyMCE_ThriveSmartAdvancedImagePlugin = {
     getInfo : function() {
     	return {
     		longname : 'ThriveSmart Advanced image',
     		author : 'ThriveSmart LLC',
     		authorurl : 'http://www.thrivesmart.com',
     		infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/advimage',
     		version : tinyMCE.majorVersion + "." + tinyMCE.minorVersion
     	};
     },
     getControlHTML : function(cn) {
     	switch (cn) {
     		case "ts_image":
     			return tinyMCE.getButtonHTML(cn, 'lang_image_desc', '{$themeurl}/images/image.gif', 'mceTSAdvImage');
     	}
     	return "";
     },
     execCommand : function(editor_id, element, command, user_interface, value) {
     	switch (command) {
     		case "mceTSAdvImage":
     			var template = new Array();
     			template['file']   = '../../plugins/ts_advimage/image.htm';
     			template['width']  = 480;
     			template['height'] = 480;
     			// Language specific width and height addons
     			template['width']  += tinyMCE.getLang('lang_advimage_delta_width', 0);
     			template['height'] += tinyMCE.getLang('lang_advimage_delta_height', 0);
     			var inst = tinyMCE.getInstanceById(editor_id);
     			var elm = inst.getFocusElement();
     			if (elm != null && tinyMCE.getAttrib(elm, 'class').indexOf('') != -1)
     				return true;
     			tinyMCE.openWindow(template, {editor_id : editor_id, inline : "yes"});
     			return true;
     	}
     	return false;
     },

11. In the last line of editor_plugin.js and editor_plugin_src.js you need to change
    tinyMCE.addPlugin to tinyMCE.addPlugin(“ts_advimage”, TinyMCE_ThriveSmartAdvancedImagePlugin);
12. Now we need to add our ts_advimage plugin to the tinyMCE menu bar

    	tinyMCE.init({
      	mode : "textareas",
      	editor_selector : "tiny_mce",
      	theme : "advanced",
      	plugins : "inlinepopups,ts_advimage,advlink,emotions,iespell,zoom,searchreplace,fullscreen,visualchars,youtube",
      	theme_advanced_buttons1 : "undo,redo,removeformat,|,bold,italic,underline,strikethrough,sub,sup,|,outdent,indent,bullist,numlist,hr,backcolor,|,link,unlink,charmap,emotions,ts_image,youtube,iespell,|,search,replace,|,cleanup,code,fullscreen,help",
      	theme_advanced_buttons2 : "",
      	theme_advanced_buttons3 : "",
      	theme_advanced_toolbar_location : "top",
      	theme_advanced_toolbar_align : "left",
      	theme_advanced_path_location : "bottom",
      	gecko_spellcheck : true,
      	extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|style|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],span[class|align|style]",
      	theme_advanced_resizing : true,
      	theme_advanced_resize_horizontal : false
      });

    I’ve included the entire block for clarity, the important portions of the above code are in plugins : ts_advimage and
    theme_advanced_buttons1 : ts_image

Fire up your browser, clear the cache and try it out because now you have an image chooser plugin that works with tinyMCE.

I hope you enjoyed this post. Part two is out as well! will be out soon so stay tuned!

And then it hit me – it actually graphically displayed the concept of pages, and more natural spacing between words. And that made all the difference. I started looking around the web a bit more, and indeed, many layouts are starting to incorporate more real-life physicality and images into their layouts. It just makes people want to use the applications more. Don’t get me wrong – features are equally if not more important too (which is why I will continue to use the product displayed on the left). There is a company that is doing this really well right now: Apple. If you look at their products, from the iPod, to Pages, to iTunes, many of them incorporate real life, realistic graphics, not to mention a great tactile experience.

… And then I saw Microsoft Surface (at techcrunch, of course!). I have been koolaided. Multi-input, context aware, graphical interface is the next biggest thing in user experience since the window manager and the mouse! Yes, it’s been around since the ’80s, yes other companies might succeed over Microsoft at making this actually work, but the possibilities with this are endless. Combine it with a Wii controller (or something that takes gestures from a distance away), and you’re golden. Put your planner on the surface, and all your favorite web services talk to it and tell you what you should be doing when. Oy vey, I’m getting too excited – I need to rest.

Sending ThriveSmart through it showed that there is a lot of room for improvement. Things like using H1 tags and making sure your title has important keywords in it are really important. Put more than just the name of your product!

Guess we’ll be spending a few days cleaning up the site. Big time. And adding ways for interested people to sign up for updates to our business, like a feed and a newsletter.