JRuby on Rails Basics

In this exercise, you use the Ruby on Rails support in the NetBeans IDE to create and run a simple web application called RubyWebLog.  Even though this is a very simple application, you will get an exposure to the the whole development cycle of building a Rails application including the creation of the model, a controller, and a view.

Acknowledgment: This exercise is based on "Creating a Ruby Weblog in 10 minutes" tutorial contributed by Brian Leonard, maintained by Gail Chappell.

1. Start MySQL database server and create a database
2. Create Ruby on Rails project
3. Create a Model
4. Migrate database
5. Create a Controller
6. Set URL routing
7. Build and run the application
8. Add another field

1. Install MySQL database server (if you have not done so yet.)
2. Start the MySQL database server.  (You can start the MySQL server in a different way from the way described below.)

• Open a terminal window.
• Type "cd <MySQL-Install-Directory>\bin".
  
• Type "mysqld".  (Figure-1.11 below) This will start MySQL database server.
  

Figure-1.11: Start MySQL database server

2. Create a database.

• Open a terminal window.
• Type "cd <MySQL-Installation-Directory>/bin".
• Type "mysqladmin -u root -p create RubyWebLog_development".  (Figure-1.12 below)  This will create database called RubyWebLog_development.
• Press Enter key without entering a password - there is no password.
  

Figure-1.12: Create a database

                                                                                                                   return to top of exercise

1. Create Ruby on Rails NetBeans project.

• Select File from top-level menu and select New Project. (Figure-1.21 below)
  

Figure-1.21: Create a new NetBeans project

• Observe that the New Project dialog box appears.
• Choose Ruby under Categories section on the left and Ruby on Rails Application under Projects section on the right. (Figure-1.22 below)
  
• Click Next.
  

Figure-1.22: Create Ruby on Rails Application project

2. Give project a name.

• For the Project Name field, enter RubyWebLog.  (Figure-1.23 below)
• For the Database field, leave the default selection of mysql.
  
• Click Finish.

Figure-1.23: Give a name to a project

3. Observe that the IDE creates various directories.  (Figure-1.24 below)

Figure-1.24: Observe the directories that are created by the IDE

<Study point: Directory structure of a Rails application>

The directory structure of a Rails application looks as following.  Please note that NetBeans uses logical names to reflect these directories. For example, the Controllers node represents app/controllers directory while Models node represents app/models.  If you click Files view of the project, you will see the directories mentioned below.

app	Holds all the code that's specific to this particular application.
app/controllers	Holds controllers that should be named like weblogs_controller.rb for automated URL mapping. All controllers should descend from ApplicationController which itself descends from ActionController::Base.
app/models	Holds models that should be named like post.rb. Most models will descend from ActiveRecord::Base.
app/views	Holds the template files for the view that should be named like weblogs/index.rhtml for the WeblogsController#index action.
app/views/layouts	Holds the template files for layouts to be used with views. This models the common header/footer method of wrapping views. In your views, define a layout using the   <tt>layout :default</tt> and create a file named default.rhtml. Inside default.rhtml, call <% yield %> to render the view using this layout.
app/helpers	Holds view helpers that should be named like weblogs_helper.rb. These are generated for you automatically when using script/generate for controllers. Helpers can be used to wrap functionality for your views into methods.
config	Configuration files for the Rails environment, the routing map, the database, and other dependencies.
components	Self-contained mini-applications that can bundle together controllers, models, and views.
db	Contains the database schema in schema.rb.
db/migrate	Contains all the sequence of Migrations for your schema.
doc	This directory is where your application documentation will be stored when generated using <tt>rake doc:app</tt>
lib	Application specific libraries. Basically, any kind of custom code that doesn't belong under controllers, models, or helpers. This directory is in the load path.
public	The directory available for the web server. Contains subdirectories for images, stylesheets, and javascripts. Also contains the dispatchers and the default HTML files. This should be set as the DOCUMENT_ROOT of your web server.
script	Helper scripts for automation and generation.
test	Unit and functional tests along with fixtures. When using the script/generate scripts, template test files will be generated for you and placed in this directory.
vendor	External libraries that the application depends on. Also includes the plugins subdirectory. This directory is in the load path.

Directories that are created for the Ruby on Rails project

                                                                                                                   return to top of exercise

In this step, you are going to use the Rails Generator to create a model for the application. The RubyWebLog application requires a Post model for storing instances of blog posts.

<Study point: What is Model?>

Model-view-controller (MVC) is an architectural pattern used in software engineering. In complex computer applications that present a large amount of data to the user, a developer often wishes to separate data (model) and user interface (view) concerns, so that changes to the user interface will not affect data handling, and that the data can be reorganized without changing the user interface. The model-view-controller solves this problem by decoupling data access and business logic from data presentation and user interaction, by introducing an intermediate component: the controller.

<Study point: What is a Generator?>

Rails' use of runtime reflection and metaprogramming eliminates much of the boilerplate code that you would otherwise have to create. You can often avoid what little boilerplate code remains by using the built-in generator scripts of Rails to create it for you. This leaves you with more time to concentrate on the code that really matters--your business logic.

1. Generate a Model.

• Right click Models and select Generate. (Figure-1.31 below)
  

Figure-1.31: Generate a model

• Observe that the Rails Generator dialog box appears.
• For the Arguments field, enter Post.  (Figure-1.32 below) This is the name of the model. (Figure-1.32 below)
  
• Click OK.
  

Figure-1.32: Rails generator

• Observe that the Rails Generator creates a model named Post in post.rb file. (Figure-1.33 below)
  

• Observe that the Output window lists that files that are created as part of the model generation:
• app/models/post.rb. A file that holds the methods for the Post model.
  
• test/unit/post_test.rb. A unit test for checking the Post model.
• test/fixtures/posts.yml. A test fixture for populating the model.
• db/migrate/migrate/001_create_posts.rb. A migration file for defining the initial structure of the database.
  

Figure-1.33: post.rb

                                                                                                                   return to top of exercise

<Study point: What is a migration?> 

Migrations can manage the evolution of a schema used by several physical databases. It's a solution to the common problem of adding a field to make a new feature work in your local database, but being unsure of how to push that change to other developers and to the production server. With migrations, you can describe the transformations in self-contained classes that can be checked into version control systems and executed against another database that might be one, two, or five versions behind.  A simple migration example looks as following:

class AddSsl < ActiveRecord::Migration     def self.up       add_column :accounts, :ssl_enabled, :boolean, :default => 1     end     def self.down       remove_column :accounts, :ssl_enabled     end   end

The migration example above will add a column called ssl_enabled to the accounts table and remove it again, if you‘re backing out of the migration. It shows how all migrations have two class methods up and down that describes the transformations required to implement or remove the migration. These methods can consist of both the migration specific methods, like add_column and remove_column, but may also contain regular Ruby code for generating data needed for the transformations. (Quoted from ActiveRecord:Migration section of api.rubonrails.org)

1. In the Output window of the IDE, click the link for the db/migrate/001_create_posts.rb file.  The file opens to show the self.up method, which creates a table called posts, and the self.down method, which tears the posts table down. (Figure-1.41 below)


Figure-1.41: Migration

2. Add the title column (shown in bold and blue-colored font) to create_table  in the self.up  method as shown in the Code-1.42 below.

class CreatePosts < ActiveRecord::Migration   def self.up     create_table :posts do |t|       t.column "title", :string     end   end   def self.down     drop_table :posts   end end

Code-1.42: Modified migration file

<Study point: What is ActiveRecord?> 

ActiveRecord is the object-relational mapping (ORM) layer that connects business objects (models) to database tables. It is an implementation of the Active Record pattern described by Martin Fowler.

3.  Click Save All icon. (Figure-1.43 below)


Figure-1.43: Add a column

4. Right-click the RubyWebLog project node and choose Migrate Database > To Current Version.  (Figure-1.44 below) This action updates the the database to include the posts table.


Figure-1.44: Migrate database to the current version

5. Observe that the Output window indicates when the migration is complete. (Figure-1.45 below)


Figure-1.45: Migration

                                                                                                                   return to top of exercise

In this step, you are going to use the Rails Generator to create a controller to interact with the model.  Also, you are going to add scaffolding code, which provides a simple CRUD interface for creating, reading, updating, and deleting entries in the blog.

<Study point: What is an Action Controller?>

Action Controllers are the core of a web request in Rails. They are made up of one or more actions that are executed on request and then either render a template or redirect to another action. An action is defined as a public method on the controller, which will automatically be made accessible to the web-server through Rails Routes.

A sample controller could look like the one below.  There are two actions defined - index and sign.

class GuestBookController < ActionController::Base     def index       @entries = Entry.find(:all)     end     def sign       Entry.create(params[:entry])       redirect_to :action => "index"     end   end

Actions, by default, render a template in the app/views directory corresponding to the name of the controller and action after executing code in the action. For example, the index action of the GuestBookController would render the template app/views/guestbook/index.rhtml by default after populating the @entries instance variable.

Unlike index, the sign action will not render a template. After performing its main purpose (creating a new entry in the guest book), it initiates a redirect instead. This redirect works by returning an external "302 Moved" HTTP response that takes the user to the index action.

The index and sign represent the two basic action archetypes used in Action Controllers: Get-and-show and do-and-redirect. Most actions are variations of these themes.

1. Right-click the Controllers node and choose Generate. (Figure-1.51 below)


Figure-1.51: Generate a controller

2. In the Rails Generator dialog box, type Blog in the Name field. Leave the Views field blank. Click OK. (Figure-1.52 below)  This action creates the blog_controller.rb file and opens the file in the editing area.


Figure-1.52: Create a controller

3. Observe that the  blog_controller.rb node is added under the Controllers node in the Projects window. (Figure-1.53 below)


Figure-1.53: Result of creating a controller

4. Add scaffolding code.

• Edit blog_controller.rb file by adding the scaffolding code as shown in Code-1.55 below.  This provides a simple CRUD application around the Post model.

class BlogController < ApplicationController   scaffold :post end

Code-1.55: Add scaffolding

• Observe that blog_controller.rb file looks as following after the modification. (Figure-1.56 below)
  

Figure-1.56: Scaffolding is added

<Study point: What is Scaffolding?>

Rails can automatically create a full set of CRUD (Create, Retrieve, Update, and Delete) operations and views on any database table. This scaffolding can get you up and running quickly with manipulating your database tables. Over time, you can incrementally replace the generated CRUD operations and views with your own--presumably much prettier and more functional.

                                                                                                                   return to top of exercise

<Study point: URL routing> 

The default Rails mapping of URLs to controller actions is very simple and easy to understand. Rails tries very hard to present the user with pretty URLs. Rails URLs are simple and straightforward, not long and cryptic. Even so, you can still customize your URLs by using the Rails routing facility. Rails' URL routing is flexible enough to allow you to create virtually any URL mapping scheme. The Rails routing facility is pure Ruby code that even allows you to use regular expressions. Because Rails does not use the web server's URL mapping, your custom URL mapping will work the same on every web server. 

1.  Add a URL routing.

• Expand Configuration.
• Double click routes.rb to open in the source editor.
• Uncomment the line #14 and change "welcome" to "blog" as shown in Figure-1.61 below.
  

Figure-1.61: A new route

• Right click index.html under Public node and select Delete. (Figure-1.62 below)
  

Figure-1.62: Delete index.html

• Click Yes if you get a confirmation dialog box. (Figure-1.63 below)
  

Figure-1.63: Confirmation dialog box

• Click Save All icon.  (Figure-1.64 below)
  

Figure1.64: Save all

                                                                                                                   return to top of exercise

1. Run the application.

• Select Run from top-level menu items and select Run Main Project. (Figure-1.71 below)
  

Figure-1.71: Run Main Project

• If you see Run Main Project dialog box, select RubyWebLog and click OK. (Figure-1.72 below)
  

Figure-1.72: Seect Main project

• Observe that the browser now displays.
• Click New Post. (Figure-1.73 below)
  

Figure-1.73: Running the application - Listing posts

• For the Title field, type in some sentence.
  
• Click Create button. (Figure-1.74 below)
  

Figure-1.74: New post

• Observe that the browser displays the list of the postings - just one at this point. (Figure-1.75 below)
  

Figure-1.75: Listing posts

• Observe that the Output window of the IDE displays the URL requests that come from the browser. (Figure-1.76 below)
  

Figure-1.76: URL's

                                                                                                                   return to top of exercise

In this step, you are going to add another field so that, in addition to the Title field, the posts table includes a Body field for providing the text of the blog.

1. Generate Database migration.

• Right click Database Migration and select Generate. (Figure-1.81 below)
  

Figure-1.81: Generate  a new migration

• For Arguments field, enter AddBody. (Figure-1.82 below)
  
• Click OK.
  

Figure-1.82: Generate migration

• Observet that the IDE creates the versioned migration script 002_add_body.rb and opens the file in the editing area. (Figire-1.83 below)
  

Figure-1.83: 002_add_body.rb created

2.  Modify migration file.

• Modify 002_add_body.rb file as shown in Code-1.84 below. This migration adds a column calld body to the posts table and removes it again, if you are backing out of the migration.

class AddBody < ActiveRecord::Migration   def self.up     add_column 'posts', 'body', :text   end   def self.down     remove_column 'posts', :body   end end

Code-1.84: Modified migration

• Observe that the 002_add_body.rb file looks as shown below after it is modified. (Figure-1.85 below)
  
• Choose Save All icon.
  

Figure-1.85: New migration file

• Right-click the RubyWebLog project node and choose Migrate Database > To Current Version. (Figure-1.86 below)
  

Figure-1.86: Migrate database

• Observe that the Output window of the IDE displays the result of migration. (Figure-1.87 below)
  

Figure-1.87: Result of migation

3.  Refresh the browser.

• Click Refresh button of the browser.
• Observe that there is Body column. (Figure-1.88 below)
  
• Click New post.
  

Figure-1.88: Body column is now displayed

• Observe that the New post page is displayed.
• Enter some values to the Title and Body fields.  (Figure-1.89 below)
  
• Click Create.
  

Figure-1.89: New post

• Observe that the new title and body are displayed.  (Figure-1.90 below)
  

Figure-1.90: New post is displayed

                                                                                                                   return to top of exercise

The solution of this exercise is provided as a ready-to-build NetBeans project -  <LAB_UNZIP_DIR>/jrubyrailsbasics/samples/RubyWebLog.  You should be able to build and run the project.

In this exercise, you have learned how to build a simple Rails application going through the development steps of creating model. controller, and view.  You also learned how to migrate a database.

In this exercise, you will  get an exposure to more advanced features of JRuby on Rails.  This exercise is based on the Putting Filckr on Rails tutorial contributed by Brian Leonard.   This exercise requires direct connection to the Internet and does not work if you are working behind a proxy.   This is an optional exercise.  In other words, you should be able to do the homework without doing this exercise.

0. Obtain a Filickr API key
1. Install Flickr library
2. Create "Ruby on Rails" netBeans project
3. Add Flickr settings to the project
4. Add styles to the project
5. Create a Controller
6. Modify and create Views
7. Set URL routing
8. Run the application
9. Add spinner to the application
   

1. In your web browser, go to http://www.flickr.com/services/api/misc.api_keys.html.
2. Click Apply for your key online now.


Figure-2.01: Apply for Flickr key

3. Follow the steps for obtaining a Flickr key.
4. Copy the API key that Flickr generates and save it in a text file or other convenient location.

• Select Tools from the top-level menu and select Plugins.
• Select Installed tab.
• Check Ruby and Rails plug-in and click Uninstall. (Figure-2.02 below)
  

• Click Uninstall. (Figure-2.03 below)
  

• Check Restart IDE Now.
• Click Finish. (Figure-2.04 below)
  

• Select Tools from the top-level menu and select Plugins.
• Select Available Plugins.
• Check Ruby and Rails plug-in and click Install button. (Figure-2.05 below)
  
• Follow the instructions.
  

• Select Tools from the top-level menu and select Ruby Gems. (Figure-2.11 below) A library in Ruby is called a Gem.

Figure-2.11: Select Ruby Gems

• Observe that the Ruby Gems dialog box appears.
• Select New Gems tab window.
• In the Search field, enter flickr and presss Enter key.  You are now searching for Ruby Gems whose name contains flickr.
• Observe that Ruby Gems whose name include flickr get displayed in the left side of the dialog box. (Figure-2.12 below)

Figure-2.12: Search for a Gem

• Observe that Ruby Gems whose name include flickr get displayed in the left side of the dialog box.
• Select flickr. (Figure-2.13 below)
• Click Install button.
  

Figure-2.13: Install rflickr

• Click OK of the Gem Installation Settings dialog box. (Figure-2.14 below)
  

Figure-2.14: Gem Installation Settings

• Wait until the installation of the rflickr Gem succeeds.
• Click Close button. (Figure-2.15 below)
  

Figure-2.15: Installation

• Click Close of the Ruby Gems dialog box to close it. (Figure-2.16 below)
  

Figure-2.16: Close the Ruby Gems dialog box

Trouble-shooting: If you experience "java.lang.OutOfMemoryError: Java heap space " Exception while opening gem window" problem, it is becaue the the Ruby on Rails plug-in that comes with NetBeans 6.0 and 6.0.1 consumes large amount of heap space. Please uninstall and install the new version of the Ruby on Rails plug-in as described above.


Figure-2.17: java.lang.OutOfMemoryError Exception

                                                                                                                                                          return to top of the exercise

1. Create a new NetBeans project.

• Select File from top-level menu and select New Project. (Figure-2.21 below)
  

Figure-2.21: Create a new project

• Observe that the Choose Project pane gets displayed.
  
• Select Ruby under Categories section and Ruby on Rails Application from the Projects section. (Figure-2.22 below)
  
• Click Next.
  

Figure-2.22: Create Ruby on Rails Application

• Observe that the Name and Location pane gets displayed.
  
• For the Project Name field, enter Flickr.  (Figure-2.23 below)
  
• Click Finish.
  

Figure-2.23: Name and Location pane

• Observe that the IDE creates the directories for the Ruby on Rails application.  (Figure-2.24 below)
  

Figure-2.24: Ruby on Rails directories

                                                                                                                                                          return to top of the exercise

1. Add Flickr settings to the environment.rb file.

• Expand Configuration node and double click environment.rb to open it in the source editor window.
• Add the code below to the end of the environment.rb file.
• Change the value of the MY_KEY to the key you have obtained in the previous step. (Code-2.31 below)
  

require 'rubygems' require 'flickr' MY_KEY='0c457d8d59ae7a9af78dddd0a298338b' class Flickr   alias old_initialize initialize   def initialize(api_key=MY_KEY, email=nil, password=nil)     puts "new_initialize " + MY_KEY     old_initialize(api_key, email, password)     @host="http://api.flickr.com"     @activity_file='flickr_activity_cache.xml'   end end

Code-2.31: Configure Flickr environment

• Observe that the environement.rb file looks as below. (Figure-2.32 below)
  

Figure-2.32: Flickr environment

                                                                                                                                                          return to top of the exercise

A layout defines the surroundings of an HTML page. It's the place to define common look and feel of your final output. Layout files reside in app/views/layouts.  The process involves defining a layout template and then letting the controller know that it exists and to use it.

1. Create a layout.

• Expand Views->layouts and select New->RHTML.  (Figure-2.41 below)
  

Figure-2.41:  Create RHMTL file

• For the File Name field, enter application.  (Figure-2.42 below)
  
• Click Finish.
  

Figure-2.42: Name and Location pane

2. Create application-wide layout file.

• Modify the IDE generated content of the application.rhtml with the one in Code-2.43 below.
  

<Study point: Layout> At rendering time, the layout will yield the results of the template fragment's execution in place.  Note that wherever you put the <%= yield %> keyword is where the contents is placed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html>     <head>     <title>Flickr</title>       <%= javascript_include_tag :defaults %>       <%= stylesheet_link_tag 'flickr' %>     </head> <body>       <%= yield %> </body> </html>

Code-2.43: Modified application.rhtml

• Observe the application.rhtml looks as shown in Figure-2.44 below)
  

Figure-2.44: application.rhtml

3. Create a CSS file.

• Expand Public node.
• Right click stylesheets and select New->Other.  (Figure-2.45 below)
  

Figure-2.45: Create stylesheet

• Select Other under Categories section and select Cascading Style Sheet under File Types section. (Figure-2.46 below)
  
• Click Next.
  

Figure-2.46: Create Cascading Style Sheet

• For File Name field, enter flickr.  (Figure-2.47 below)
  
• Click Finish.
  

Figure-2.47: Name ane Location

• Add the following styles to the end of the flickr.css file.  (Code-2.48 below)
  

body {     background-color: #888;     font-family: Lucida Grande;     font-size: 11px;     margin: 25px; } form {     margin: 0;     margin-bottom: 10px;     background-color: rgb(222,231,236);     border: 5px solid #333;     padding: 25px; } fieldset {     border: none; } #spinner {     float: right;     margin: 10px; } #photos img {     border: 1px solid #000;     width: 75px;     height: 75px;     margin: 5px; }

Code-2.48: flickr.css

• Observe that the filckr.css looks as shown in Figure-2.49 below.
  

Figure-2.49: flickr.css

                                                                                                                                            return to top of the exercise

1. Create a Controller.

• Right click Controllers and select Generate.  (Figure-2.51 below)
  

Figure-2.51: Generate Controller

• Observe that the Rails Generator dialog box appears.
• For the Name field, enter flickr.
• For the Views field, enter index.  (Figure-2.52 below)
  
• Click OK.
  

Figure-2.52: Create Controller

• Observe that the IDE generated flickr_controller.rb file displayed in the source editor. (Figure-2.53 below)
  

Figure-2.53: flickr_controller.rb

2. Modify flickr_controller.rb.

• Modify the IDE generated contents of the flickr_controller.rb as shown in Code-2.54.  The code fragment that needs to be added is highlighted in bold font.  You are adding search method to the FlickrController class.

<Study point: Partials> Partials are “partial views”—fragments of RHTML that can be included in a view. They allow you to factor and reuse view logic.  You will need to create a partial view called _photo.rhtml in subsequent step.

class FlickrController < ApplicationController     def index   end     def search     flickr = Flickr.new     if params[:tags].empty?       render :text => '<h2>Please enter a search string</h2>'     else       begin         photos = flickr.photos(:tags => params[:tags], :per_page => '24')         render :partial => 'photo', :collection => photos       rescue NoMethodError         render :text => '<h2>No matching photos found</h2>'       end     end   end

Code-2.54: Modified flickr_controller.rb

• Observe that the flickr_controller.rb looks as following.  (Figure-2.55 below)
  

Figure-2.55: Modified flickr_controller.rb
                                                                                                                                             return to top of the exercise

1. Modify index.rhtml.

• Double click index.rhtml under Views->flickr to open in the source editor.
• Replace the IDE generated index.rhtml with the code  in Code-2.61 below.

<% form_remote_tag :url => {:action => 'search'}, :update => 'photos' do %>     <fieldset>         <label for="tags">Tags:</label>         <%= text_field_tag 'tags' %>         <%= submit_tag 'Find' %>     </fieldset>     <div id="photos"></div> <% end %>

Code-2.61: Modified index.rhtml

• Observe that the index.rhtml looks as shown in Figure-2.62 below.
  

Figure-2.62: Modified index.rhtml

2.  Create a new Partial View.

• Right click flickr under Views and select New->RHTML file. (Figure-2.63 below)
  

Figure-2.63: Create new RHTML file

• For File Name field, enter _photo.  (Figure-2.64 below)  You a
  
• Click Finish.
  

Figure-2.64: Name and Location

• Modify the IDE generated _photo.rhtml with the code in Code-2.65 below.  The code fragment that needs to be changed is highlighted in bold font.
  

<%# # To change this template, choose Tools | Templates # and open the template in the editor. %> <img class='photo' src="<%= photo.sizes[0]['source'] %>">

• Observe that _photo.rhtml looks as shown in Figure-2.65 below.
  

Figure-2.65: _photo.rhtml

                                                                                                                                                 return to top of the exercise

1. Set URL routing

• Double click routes.rb under Flickr->Configuration.
• Add the following to the routes.rb file.

map.connect "", :controller => 'flickr'

• Observe that the routes.rb file looks as following after the change is made. (Figure-2.72 below)
  

Figure-2,72: Modified routes.rb

2. Delete default index.html.

• Right click index.html under Public and select Delete.  (Figure-2.73 below)
  

Figure-2.73: Delete index.html

• Click Yes for the confirmation. (Figure-2.74 below)
  

Figure-2.74: Confirmation

                                                                                                                                             return to top of the exercise

1. Run the application

• Select Run from the top-level menu and select Run Main Project.  (Figure-2.81 below)
  

Figure-2.81: Run Main Project

• Observe that the browser gets displayed.
• Type NetBeans (or whatever you want to search) into the Tags field.  (Figure-2.82 below)
  
• Click Find.
  

Figure-2.82: Perform the Find operation

• Observe that the browser displays pictures. (It might take a minute or so.)  (Figure-2.83 below)
  

Figure-2.83: Result of the Find operation

                                                                                                                                          return to top of the exercise

1. Copy spinner.gif to the project.

• Drag the spinner.gif from <LAB_UNZIP_DIR>/jrubyrailsbasics/graphics directory of local file system and drop it to the Public->images directory node of NetBeans.  (Figure-2.91 below)   The <LAB_UNZIP_DIR> directory is the directory under which you unzipped the 5520_jrubyrailsbasics.zip (download)  file.
• Expand the images directory and observe that the spinner.gif is present.
  

Figure-2.91: Add spinner.gif file

2. Modify index.rhtml.

• Replace the index.rhtml under Views->flickr with the code in Code-2.92 below.

<% form_remote_tag :url => {:action => 'search'}, :update => 'photos',     :complete => visual_effect(:blind_down, 'photos'),     :before   => %(Element.show('spinner')),     :success  => %(Element.hide('spinner')) do %>     <%= image_tag 'spinner.gif', :id => 'spinner', :style => 'display: none' %>     <fieldset>         <label for="tags">Tags:</label>         <%= text_field_tag 'tags' %>         <%= submit_tag 'Find' %>     </fieldset>     <div id="photos" style="display: none"></div> <% end %>

Code-2.92: Modified index.rhtml

• Observe that the index.rhtml file looks as shown in Figure-2.93 below.
  

Figure-2.93: Modified index.rhtml

3. Run the application.

• Select Run from the top-level menu and select Run Main Project.
• Observe that the browser displays.
• Enter NetBeans into the Tags field and click Find.
• Observe the spinner on the right side of the browser.  (Figure-2.94 below)
  

Figure-2.94: Spinner is being displayed

                                                                                                                    return to top of the exercise

The solution of this exercise is provided as a ready-to-build NetBeans project -  <LAB_UNZIP_DIR>/jrubyrailsbasics/samples/Flickr.  You should be able to build and run the project.

1. The homework is to modify RubyWebLog project as following. (You might want to create a new project by copying the RubyWebLog project.  You can name the homework project in any way you want but here I am going to call it MyRubyWebLog.)

• Add another field called poster.
  
• Rebuild the application.

                                                                                                                    return to the top