Workshop 5: Admiring the secenery Forms, AJAX screen layout and and mobile interfraces: Part B The active view:

1. Create a new application called scenery in the same projects directory to demonstrate the use of an active view.

> rails scenery
> cd scenery

Result in my computer:


2. Create a controller called Demo in scenery\app\controllers scenery> ruby script/generate controller Demo

Result in my computer:


3. Add an action to demo_controller.rb as the method called rubycode

class DemoController < ApplicationController
def rubycode
end
end

The method called rubycode is added into demo_controller.rb:


4. Add a view template - scenery\app\views\demo\rubycode.rhtml We will edit this view in later steps but you may like to add your own test HTML code to the view at this stage.

I copy the breathe.rb from the above animal application into scenery\app\views\demo and rename the file to rubycode.rb

5. Save and restart the Web server and navigate to http://localhost:3000/scenery/rubycode

Result in my computer:


I change the navigate to http://localhost:3000/demo/rubycode, the result is OK now:


6. Use the Time.now example to pass data from an action to a view.

I change rubycode.rb in the scenery\app\views\demo:


Result in the Web browser:


7. Modify and save the rubycode action with a value for the time instance variable in the DemoController class in app\controllers\demo_controller.rb

class DemoController < ApplicationController
def rubycode
@time_now = Time.now
end
end

The demo_controller.rb in my computer:


8. Then modify and save the corresponding view template in \app\views\demo\rubycode.rhtml by adding a call by reference to the action’s instance variable: The time is <%= @time.now %>

The rubycode.rhtml in my computer:
AS the error occur, I change the statement into:
The time is <%= @time_now %>


9. Restart the Web server and navigate the browser to http://localhost:3000/demo/rubycode

The instance variable time_now are passing successfully from the Ruby class to the view templates by reference. Result in my computer: