Monday, April 26, 2010

Workshop 5: Admiring the scenery - Forms, AJAX screen layout and mobile interfaces

Topic objectives
• To reflect on what has been done so far with Ruby on Rails;
• To reflect on my role and decide to continue as EITHER a Developer OR as an IT infrastructure manager;
• To complete either the Developer’s Thread exercises or the IT Infrastructure manager’s Thread exercises below, according to my new role (NOT BOTH).
• To work with others in the same role via the subject forum or similar learning tool.
• To read and find out what those who chose the other role are doing each of the workshops 5 to 8 and discussing on the subject forum or learning tool.
• To be willing to change roles and share perspectives as developers learn from managers and vice versa.

DEVELOPERS THREAD (RED team)
• To create a Rails application framework with the WEBbrick or Mongrel Web server and:
o generate a controller and an action by adding a method(s) to a controller;
o create a view template for each action and to link to actions from views;
o use Rails for building applications with document requests, screen layouts and forms processing.
• To share your findings with others.

DEVELOPER’S THREAD

1. Introduction
By now you will have tackled the version problems with Rails and tools like InstantRails 2.0 and the scaffolding issues. Many developers get mixed up and annoyed to find that a tutorial does not match with changes to the framework or is for a different version. Even a lot of the Ruby language tutorials are years earlier than the first appearance of Ruby on Rails in 2005. Such lag is commonplace especially with new production tools like Ruby on Rails, so you need to work with a strategy to check each new resource and its version.

2. Building applications via document requests in Rails
The pre-packaged InstantRails 2.0 for Windows or Locomotive2 for MacOS can be treated as self-contained systems outside the Windows or MacOS environment, so interactions can be done via the Windows command (console) window or via the Terminal application in MacOS.

When you installed InstantRails, the “black I” symbol presents a menu which includes access to Rails Application>Open Ruby Console Window. This takes you to the command line in the base directory for issuing Rails commands. It is here that you add a new directory or folder for all your Rails applications. I call mine projects.

Inside the new projects folder, a new application is created. Lets us use the animals application from workshop 4. The new application animals is created within projects by the following command and Rails responds by creating files and directories:

C:\InstantRails\...\projects\>rails animals

The first folder of interest to examine here is app, which contains 4 sub-folders called models, views, controllers (according to the MVC architecture of a Rails application) and helpers which contains methods for helping with building the application.

Other folders of interest are script which contains more Ruby scripts to perform a variety of services, the most important script being generate as it is used to create the stub of an application controller and public which holds the HTML forms. The controller class can have methods added to perform certain actions. Each action or method such as forms processing, document requests or database editing will in turn require a view template.


To Do:
Part A: Viewing the action

1. Create the Rails application framework in the projects folder: C:\InstantRails\...\projects\>rails animals

C:\Ruby>rails animals
create
create app/controllers
create app/helpers
create app/models
create app/views/layouts
create config/environments
create config/initializers
create config/locales
create db
create doc
create lib
create lib/tasks
create log
create public/images
create public/javascripts
create public/stylesheets
create script/performance
create test/fixtures
create test/functional
create test/integration
create test/performance
create test/unit
create vendor
create vendor/plugins
create tmp/sessions
create tmp/sockets
create tmp/cache
create tmp/pids
create Rakefile
create README
create app/controllers/application_controller.rb
create app/helpers/application_helper.rb
create config/database.yml
create config/routes.rb
create config/locales/en.yml
create db/seeds.rb
create config/initializers/backtrace_silencers.rb
create config/initializers/inflections.rb
create config/initializers/mime_types.rb
create config/initializers/new_rails_defaults.rb
create config/initializers/session_store.rb
create config/environment.rb
create config/boot.rb
create config/environments/production.rb
create config/environments/development.rb
create config/environments/test.rb
create script/about
create script/console
create script/dbconsole
create script/destroy
create script/generate
create script/runner
create script/server
create script/plugin
create script/performance/benchmarker
create script/performance/profiler
create test/test_helper.rb
create test/performance/browsing_test.rb
create public/404.html
create public/422.html
create public/500.html
create public/index.html
create public/favicon.ico
create public/robots.txt
create public/images/rails.png
create public/javascripts/prototype.js
create public/javascripts/effects.js
create public/javascripts/dragdrop.js
create public/javascripts/controls.js
create public/javascripts/application.js
create doc/README_FOR_APP
create log/server.log
create log/production.log
create log/development.log
create log/test.log

2. Running the application on localhost:3000 using the WeBrick ruby server (or Mongrel as alternative) and access via Web browser at http://localhost:3000/

C:\Ruby\animals>ruby script/server
=> Booting WEBrick
=> Rails 2.3.5 application starting on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server
[2010-05-23 13:48:59] INFO WEBrick 1.3.1
[2010-05-23 13:48:59] INFO ruby 1.8.7 (2010-01-10) [i386-mingw32]
[2010-05-23 13:48:59] INFO WEBrick::HTTPServer#start: pid=176 port=3000



3. Create the controller to make the application do an action. This is under the controller-action/model-view structure.

Stop the WEBrick server each time you edit Ruby classes and then re-start or refresh the views you are testing. Use the Ruby command below:

>ruby script/generate controller Mammal

The mammal_controller.rb contains just a bare class description:

class MammalController


and the ApplicationController class inherits from ActionController::Base class in the ActionController module under Rails.


C:\Ruby\animals>ruby script/generate controller Mammal
exists app/controllers/
exists app/helpers/
create app/views/mammal
exists test/functional/
create test/unit/helpers/
create app/controllers/mammal_controller.rb
create test/functional/mammal_controller_test.rb
create app/helpers/mammal_helper.rb
create test/unit/helpers/mammal_helper_test.rb


4. Test the controller by starting the WEBrick server and navaigatibng the browser to http://localhost:3000/mammal Note how the controller name is appended to the end of the URL and that no action resulted because there are no controller methods.








5. Create an action by editing and saving the mammal_controller.rb class in projects\animals\app\controllers using your text editor to add the method below:

class MammalController<>





6. Start the WEBrick server and browse at http://localhost:3000/mammals/breathe where you will get a “missing template” message since it is missing a view for the breathe method.


Rails is trying to connect the breathe method action of the mammal controller to a view, by using the action’s name – breathe. This view template is created as breathe.rhtml and stored in the \projects\animals\views\mammal directory.

7. Create and save a view in that directory by using a text editor to create a view called breathe.rhtml


Restart the WEBrick server and browse again at http://localhost:3000/mammals/breathe



8. Try Ruby code and HTML in the action view by using the wrapper around the inserted Ruby code. Here are some snippets to try from workshop 4:



NOTE: in practise you normally perform calculations in the action (method) and pass the results to the view.







Part B: The active view: passing data from an action too a 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

C:\Ruby>rails scenery
create
create app/controllers
create app/helpers
create app/models
create app/views/layouts
create config/environments
create config/initializers
create config/locales
create db
create doc
create lib
create lib/tasks
create log
create public/images
create public/javascripts
create public/stylesheets
create script/performance
create test/fixtures
create test/functional
create test/integration
create test/performance
create test/unit
create vendor
create vendor/plugins
create tmp/sessions
create tmp/sockets
create tmp/cache
create tmp/pids
create Rakefile
create README
create app/controllers/application_controller.rb
create app/helpers/application_helper.rb
create config/database.yml
create config/routes.rb
create config/locales/en.yml
create db/seeds.rb
create config/initializers/backtrace_silencers.rb
create config/initializers/inflections.rb
create config/initializers/mime_types.rb
create config/initializers/new_rails_defaults.rb
create config/initializers/session_store.rb
create config/environment.rb
create config/boot.rb
create config/environments/production.rb
create config/environments/development.rb
create config/environments/test.rb
create script/about
create script/console
create script/dbconsole
create script/destroy
create script/generate
create script/runner
create script/server
create script/plugin
create script/performance/benchmarker
create script/performance/profiler
create test/test_helper.rb
create test/performance/browsing_test.rb
create public/404.html
create public/422.html
create public/500.html
create public/index.html
create public/favicon.ico
create public/robots.txt
create public/images/rails.png
create public/javascripts/prototype.js
create public/javascripts/effects.js
create public/javascripts/dragdrop.js
create public/javascripts/controls.js
create public/javascripts/application.js
create doc/README_FOR_APP
create log/server.log
create log/production.log
create log/development.log
create log/test.log

C:\Ruby>cd scenery

C:\Ruby\scenery>


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

C:\Ruby\scenery>ruby script/generate controller Demo
exists app/controllers/
exists app/helpers/
create app/views/demo
exists test/functional/
create test/unit/helpers/
create app/controllers/demo_controller.rb
create test/functional/demo_controller_test.rb
create app/helpers/demo_helper.rb
create test/unit/helpers/demo_helper_test.rb


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


class DemoController<>

end




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.



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


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



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< time_now =" Time.now">
end
end



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:



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



Data has been passed from the action to the view as it is done with SQL requests. The instance variables of a Ruby class are available to view templates by referencing the action’s instance variables by name in the view .rhtml template.





Part C: Screen layouts and forms processing with text fields, check boxes, radio buttons and multiple list controls

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

> rails cabs
> cd cabs

C:\Ruby>rails cabs
create
create app/controllers
create app/helpers
create app/models
create app/views/layouts
create config/environments
create config/initializers
create config/locales
create db
create doc
create lib
create lib/tasks
create log
create public/images
create public/javascripts
create public/stylesheets
create script/performance
create test/fixtures
create test/functional
create test/integration
create test/performance
create test/unit
create vendor
create vendor/plugins
create tmp/sessions
create tmp/sockets
create tmp/cache
create tmp/pids
create Rakefile
create README
create app/controllers/application_controller.rb
create app/helpers/application_helper.rb
create config/database.yml
create config/routes.rb
create config/locales/en.yml
create db/seeds.rb
create config/initializers/backtrace_silencers.rb
create config/initializers/inflections.rb
create config/initializers/mime_types.rb
create config/initializers/new_rails_defaults.rb
create config/initializers/session_store.rb
create config/environment.rb
create config/boot.rb
create config/environments/production.rb
create config/environments/development.rb
create config/environments/test.rb
create script/about
create script/console
create script/dbconsole
create script/destroy
create script/generate
create script/runner
create script/server
create script/plugin
create script/performance/benchmarker
create script/performance/profiler
create test/test_helper.rb
create test/performance/browsing_test.rb
create public/404.html
create public/422.html
create public/500.html
create public/index.html
create public/favicon.ico
create public/robots.txt
create public/images/rails.png
create public/javascripts/prototype.js
create public/javascripts/effects.js
create public/javascripts/dragdrop.js
create public/javascripts/controls.js
create public/javascripts/application.js
create doc/README_FOR_APP
create log/server.log
create log/production.log
create log/development.log
create log/test.log

C:\Ruby>cd cabs

C:\Ruby\cabs>


2. Create a controller called Vehicle in cabs\app\controllers
cabs> ruby script/generate controller Vehicle

C:\Ruby\cabs>ruby script/generate controller Vehicle
exists app/controllers/
exists app/helpers/
create app/views/vehicle
exists test/functional/
create test/unit/helpers/
create app/controllers/vehicle_controller.rb
create test/functional/vehicle_controller_test.rb
create app/helpers/vehicle_helper.rb
create test/unit/helpers/vehicle_helper_test.rb


3. Add an action to vehicle_controller.rb as the method called cabtype
class VehicleController< id="BLOGGER_PHOTO_ID_5475605928490243650" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 320px; CURSOR: hand; HEIGHT: 190px; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFTsvLg4uUKFpBH4n3lbi1tWFcujLnn3hXJZl69ViaYjGnMC4XX1bOKcOpbILNKQL_0mcCfdY09jCT4Z1Ml_cOFLHhwmlYO6eyznKZ2Vwfcg89DsfBeTkavpqWUuJ149uanMzRuLpVANe/s320/wk5_p17.JPG" border="0">

4. Add a view template - cabs\app\views\vehicle\cabtype.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.



5. Save the view and restart the Web server and navigate to http://localhost:3000/cabs/cabtype



6. Create a file in the public directory - \cabs\public called input.html



7. Edit the vehicle_controller.rb here is a start. The data in each form element in the Rails application can be accessed via its name and a hash called params

class VehicleController< data1 =" params[:text1]" data2 =" params[:check1]" data3 =" params[:radios1]" data4 =" params[:building1]" id="BLOGGER_PHOTO_ID_5475608956186520114" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 320px; CURSOR: hand; HEIGHT: 154px; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGixhYi0cAUsPc_bGU8F5dtw3oE7hd07l91-bnzKHtwsEjddGB3N7ZHDgw1bOhgule9bokSQdEH8NdFDrJvue26krI8gmuookk124OpRU_VV_HCNs6xrdOgyy9gGQ-h-o7s9go7w6UKa9L/s320/wk5_p21.JPG" border="0">
8. Edit the view template cabtype.rhtml




9. Start the Web server and go to the opening page of this application at http://localhost:3000/input.html





10. Submit the forms data. What do you find?



How it works

When you use the params method in Rails, it implements the details of the parameter hash to be changed without breaking existing code. For example, the params hash for radios1 will contain the value of the radio button and the data is extracted in the cabtype action. With the multiple list box example in Rails, using the select controls, the params hash of building1 is an associative array (dictionary) holding the users multiple selections and is not just a drop-down list.

Rails supports other HTML controls for forms processing via text fields, check boxes, radio buttons and list select controls etc. As an example start_form_tag abd stop_form_tag as well as methods for each item such as the create field method text_field_tag

11. Report your progress or findings in your Developers Blog.

The controller cannot perform any action until the application_controller.rb inserted with following entry:
Protect_from_forgery :only => [create, :update, :destroy]

And with the following commented:
#protect_from_forgery

The input.html not function properly until the follow is modified:

form action =”vehicle/cabtype”


No comments:

Post a Comment