actionview michael brunner & sebastian knott b-it international program of excellence, agile...

ActionViewActionView

Michael Brunner & Sebastian KnottB-IT International Program of Excellence,Agile Fall 2008 Preparation Seminars,July 31st, 2008

OverviewOverview

ActionView ERB-Templates Layouts Partials Helper Methods Forms

Basic Techniques and AJAX Prototype Script.aculo.us

Summary

ActionView, Michael Brunner & Sebastian KnottB-IT International Program of Excellence

31. July 2008Agile Fall 20082

ActionViewActionView

Template System View layer in MVC To include dynamic content

Template Engines ERB-Templates (*.rhtml) XML-Markup-Templates (*.rxml) RJS-Templates (*.rjs)



Controller

ModelView

ActionView – ERB-Templates 1/2ActionView – ERB-Templates 1/2

Embedded Ruby Standard template of Rails Tags

<% %> execution & no display <%= %> execution & display <% -%> execution & no display (no new

line) <%# %> comment



<% for employee in @employees %> <tr>

<td><%= employee.firstname %></td><td><%= employee.lastname %></td>

</tr><% end %>

ActionView – ERB-Templates 2/2ActionView – ERB-Templates 2/2

Advantages Flexible All kinds of text files can be generated Similar to PHP

Disadvantages Mixed programming languages Hard to read

All Ruby commands are executable Liquid Templates



ActionView – Layouts 1/3ActionView – Layouts 1/3

Regular used design can be moved into layout files app/views/layouts

Support DRY-Principle Controller variables are available in the layout file

application.rhtml is used by all views <controller>.rhtml is used by the controller




yield In layout file To include the view templates



<html xmlns=http://www.w3.org/1999/xhtml xml:lang="en" lang="en"> <head> <%= yield :head %> </head> <body> <p style="color: green"><%= flash[:notice] %></p> <%= yield %> </body></html>

<% content_for :head do %> <%= stylesheet_link_tag “projects” %><% end %>

Rest …


layout template_name[, conditions] To specify the layout to be used



class EmployeesController < ApplicationController layout "admin“ # applies app/views/layouts/admin.rhtml layout "admin", :only => [:edit, :new] # only for edit.rhtml and new.rhtml. layout "admin", :except => :index # not for index.rhtml in app/views/employees/

layout :user_layout # applies app/views/layouts/admin.rhtml or# app/views/layouts/application.rhtml

protected def user_layout

if current_user.admin? “admin”else “application”end

end

end

ActionView – Partials 1/4ActionView – Partials 1/4

Sub template File name with leading underscore

render :partial => “partial”, :locals => {:<var> => “var”, …}



<h1>Editing employee</h1>

<%= render :partial => "form", :locals => {:submit_text => “Edit"}%>

app/views/employees/edit.rhtml

<h1>New employee</h1>

<%= render :partial => "form", :locals => {:submit_text => “Create"}%>

app/views/employees/new.rhtml

<% form_for @employee do |f| %> <p> <%= f.label :title => “Title" %><br /> ... </p> <p> <%= f.submit submit_text %> </p><% end %>

app/views/employees/_form.rhtml


Partials with Collection To perform actions on resources

is replaced by



<% for ad in @advertisements %> <%= render :partial => "ad", :locals => { :ad => ad } %><% end %>

<%= render :partial => "ad", :collection => @advertisements%>


render :partial => “partial”, :collection => @array,

[:spacer_template => “space”]



<div> <p> <b>Firstname:</b> <%= employee.firstname %> </p> <p> <b>Lastname:</b> <%= employee.lastname %> </p></div>

app/views/employees/_employee.rhtml

<h2>Mitarbeiter Details</h2>

<%= render :partial => “employee”, :collection = > @employees,

:spacer_template => "space" %>

app/views/employees/show.rhtml

app/views/employees/_space.rhtml

<hr />


Shared Partials Usually in app/views/shared

Layout Partials Assigning a layout to a partial Saved next to the corresponding partial yield to import the corresponding partial



<%= render :partial => "shared/copyright" %>

<div id="copyright"> <%= yield %> <p>All Rights reserved</p></div>

app/views/shared/_copyright_full.rhtml

<h1>List of Employees</h1>...<%= render :partial => "shared/copyright", :layout => "shared/copyright_full"%>

app/views/employees/index.rhtml

Helper MethodsHelper Methods

As little Ruby code as possible No programming logic in templates Calculations in helper methods

Helper Overview NumberHelper TextHelper TagHelper AssetTagHelper



SantizeHelper UrlHelper Custom Helper

Helper Methods – NumberHelper 1/2Helper Methods – NumberHelper 1/2

number_to_currency (number[, options]) precision (2), unit ($), separator (.), delimiter (,),

format (%u%n)

number_to_human_size (bytes[, precision(<=1)])



number_to_currency (1000.129)# => $1,000.13

number_to_currency (1000.129, :precision => 4, :unit => “€”, :separator => “,”, :delimiter => “.”, :format => "%n %u")

# => 1.000,1290 €

number_to_human_size (1500)# => 1.5 KB

number_to_human_size (1048576)# => 1 MB

number_to_human_size (2000000000, 2)# => 1.86 GB

Helper Methods – NumberHelper 2/2Helper Methods – NumberHelper 2/2

number_with_delimiter (number[, options]) delimiter (,), separator (.)

number_with_precision (number[, precision(3)])



number_with_delimiter (1240.99)# => 1,240.99

number_with_delimiter (1240.99, “.”, “,”)# => 1.240,99

number_with_precision (1240.4567)# => 1,240.457

number_with_precision (1240.4567, 2)# => 1.240,46

Helper Methods – TextHelper 1/2Helper Methods – TextHelper 1/2

highlight (text, phrase[, highlighter(<strong class="highlight">\1</strong>)])

word_wrap(text[, length(80)])



highlight('You searched for: rails', 'rails') # => You searched for: <strong class="highlight">rails</strong>

highlight('You searched for: rails', ['for', 'rails'], '<em>\1</em>') # => You searched <em>for</em>: <em>rails</em>

highlight('You searched for: rails', 'rails', "<a href='search?q=\1'>\1</a>") # => You searched for: <a href='search?q=rails’>rails</a>

word_wrap('Once upon a time') # => Once upon a time

word_wrap('Once upon a time', 8) # => Once upon\na time

word_wrap('Once upon a time', 1) # => Once\nupon\na\ntime

Helper Methods – TextHelper 2/2Helper Methods – TextHelper 2/2

truncate (text[, length(30), t_str(“…”)])

markdown(text) Package BlueCloth must be installed

textilize(text) Package RedCloth must be installed



markdown("We are using __Markdown__ now!") # => <p>We are using <strong>Markdown</strong> now!</p>

textilize("*This is Textile!* Rejoice!") # => <p><strong>This is Textile!</strong> Rejoice!</p>

truncate("Once upon a time in a world far far away") # => Once upon a time in a world f...

truncate("Once upon a time in a world far far away", 14, "... (continued)") # => Once upon a ... (continued)

Helper Methods – TagHelperHelper Methods – TagHelper

tag(name[, options, open(false), escape(true)]) XHTML or HTML 4.0 compatible

content_tag(name[, content, options, escape(true)]) Attribute values can be true instead of disabled/readonly



tag (“br”) # XHTML compatible# => <br />

tag (“br”, nil, true) # HTML 4.0 compatible

# => <br>

tag (“input”, {:type => ‘text’, :disabled => true})# => <input type=“text” disabled=“disabled”>

content_tag(:p, "Hello world!“) # => <p>Hello world!</p>

content_tag("select", options, :multiple => true) # => <select multiple="multiple">...options...</select>

<% content_tag :div, :class => "strong" do -%> Hello world! <% end -%> # => <div class="strong"><p>Hello world!</p></div>

Helper Methods – AssetTagHelper 1/2Helper Methods – AssetTagHelper 1/2

javascript_include_tag *sources[, html-options] defaults (register_javascript_include_default) all (javascript/) cache (ActionController::Base.perform_caching = true)



javascript_include_tag "common.javascript.js", "http://www.railsapplication.com/xmlhr" # => <script type="text/javascript" src="/javascripts/common.javascript"></script> <script type="text/javascript" src="http://www.railsapplication.com/xmlhr.js"></script>

javascript_include_tag :defaults # => <script type="text/javascript" src="/javascripts/prototype.js"></script> <script type="text/javascript" src="/javascripts/effects.js"></script> ... <script type="text/javascript" src="/javascripts/application.js"></script>

javascript_include_tag :all :cache => true# => <script type="text/javascript" src="/javascripts/all.js"></script>

Helper Methods – AssetTagHelper 2/2Helper Methods – AssetTagHelper 2/2

stylesheet_link_tag *sources[,html-options] all (stylesheets/) cache (ActionController::Base.perform_caching = true)



stylesheet_link_tag "style.css" , "http://www.railsapp.com/style" # => <link href="/stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" /> <link href="http://www.railsapp.com/style.css" media="screen" rel="stylesheet" type="text/css" />

stylesheet_link_tag "style", {:media => "all“, :class => “css”} # => <link href="/stylesheets/style.css" class=“css” media="all" rel="stylesheet" type="text/css" />

stylesheet_link_tag :all # => <link href="/stylesheets/style1.css" media="screen" rel="stylesheet" type="text/css" /> … <link href="/stylesheets/styleX2.css" media="screen" rel="stylesheet" type="text/css" />

stylesheet_link_tag :all, :cache => true # => <link href="/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />

Helper Methods – SanitizeHelperHelper Methods – SanitizeHelper

strip_links (text)

strip_tags (text)

h(text)



strip_links('Please e-mail me at <a href="mailto:[email protected]">[email protected]</a>.') # => Please e-mail me at [email protected].

strip_tags("<b>Bold</b> no more! <a href='more.html'>See more here</a>...") # => Bold no more! See more here... link

h("<b>Bold</b> no more!") # => <b>Bold</b> no more!

Helper Methods – UrlHelper 1/2Helper Methods – UrlHelper 1/2

link_to name[, options, html_options] anchor (nil), query (nil), only_path (true), trailing_slash

(false), host (nil), protocol (nil), user (nil), password (nil), escape (true)

method (GET), popup (false), confirm (nil)



link_to "Profiles", “/profiles"# => <a href="/profiles">Profiles</a>

link_to "Profile", profile_path(@profile) # => <a href="/profiles/1">Profile</a>

link_to "Profile", @profile # => <a href="/profiles/1">Profile</a>

link_to "Comment wall", profile_path(@profile, :anchor => "wall"), :class => “comment" # => <a href="/profiles/1#wall“ class=“comment“>Comment wall</a>

link_to "Help", {:controller => “testing” :action => "help“}, :popup => true # => <a href="/testing/help/" onclick="window.open(this.href);return false;">Help</a>

Helper Methods – UrlHelper 2/2Helper Methods – UrlHelper 2/2

button_to (name[, options, html_options]) anchor (nil), only_path (true), trailing_slash (false), host

(nil), protocol (nil), user (nil), password (nil), escape (true) method (POST), disabled (false), confirm (nil)



button_to "New", :action => "new"# => <form method="post" action="/controller/new" class="button-to"> <div><input value="New" type="submit" /></div> </form> button_to "Delete Image", { :action => "delete", :id => @image.id }, :confirm => "Are you sure?", :method => :delete # => <form method="post" action="/images/delete/1" class="button-to"> <div> <input type="hidden" name="_method" value="delete" /> <input onclick="return confirm('Are you sure?');" value="Delete" type="submit" /> </div> </form>

Helper Methods – Custom HelperHelper Methods – Custom Helper

app/helpers/<controller>_helper.rb Custom Helper Modules All helper files are loaded automatically

Modify helper :all in app/controllers/application.rb to change behavior



<h1>New employee</h1><%= error_messages_for :employee %>

<% form_for @employee do |f| %> ...<% end %>

<%= back_to_list %>

app/views/employees/new.rhtml

module EmployeesHelper def back_to_list link_to “Back to List", employees_path endend

app/helpers /employees_helper.rb

ActionView – Forms 1/6ActionView – Forms 1/6

Rails provides a fully integrated form interface

Forms provide access to application data Forms may be mapped directly to the

database... by convention or by the user.

Helper methods Construct HTML-Forms Handle dynamic requests






myapp_controller.rb(Controller)

edit.rhtml(Template)

Rails Webserver

Generated Form

Client


Controller actions for Rendering the form Process the data returned by the form



def new @product = Product.newend

def create @product = Product.new(params[:product]) …end

myapp_controller.rb


form_for helper generates HTML-form and gathers data for Data type: product Controller action: create

text_field and text_area helper generate HTML-Input fields



<% form_for :product, :url => { :action => :create } do |form| %><p>Title: <%= form.text_field :title, :size => 30 %></p><p>Description: <%= form.text_area :description, :rows => 3

%></p><p>Image URL: <%= form.text_field :image_url %></p><p>Price: <%= form.text_field :price, :size => 10 %></p><p><%= submit_tag %></p>

<% end %>

edit.rhtml


Names and ids will be set by the helpers Rails provides helpers for each input tag

All helpers require at least on parameter



<form action="/form_for/create" method="post" > <p>Title: <input id="product_title" name="product[title]" size="30" type="text" /> </p> <p>Description: <textarea id="description" name="product[description]" rows="3" /> </p> <p>Image URL: <input id="image_url" name="product[image_url]" size="30" type="text" /> </p> <p>Price: <input id="price" name="product[price]" size="30" type="text" /> </p></form>

edit.rhtml


Advanced Techniques Multiple models in one form Custom Form Builders Dynamic Forms

Auto completion Adaptive Forms Asynchronous Data Submission Error Handling



Basic Techniques and AJAXBasic Techniques and AJAX

HTML CSS JavaScript DOM AJAX

Prototype Script.aculo.us



HTML – Hypertext Markup Language 1/3HTML – Hypertext Markup Language 1/3

Basis of the user interface

Interpreted by a local client (Browser)

XML-like Syntax Tags Attributes



<html> <head> <title>Title</title> </head> <body> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </body></html>


Provides structure to a text

Basic styling Additional interactive

components



<html> <head> <title>Title</title> </head> <body> Lorem ipsum <b>dolor</b> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna <a href=“index.html”> aliquyam </a> </body></html>

Embedding of Media files

Images Flash

Scripts JavaScripts Coldfusion

Stylesheets CSS



<html> <head> <title>Title</title> <link rel=“stylesheet” type=“text/css”

href=“formats.css”> <script type=“text/javascript”>  </script> <script src=“square.js” type=“text/javascript”></script> </head> <body> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </body></html>

CSS – Cascading Style Sheets 1/4CSS – Cascading Style Sheets 1/4

Stylesheet language to supplement the presentation of a document

Commonly used to aggregate the style-information and further specify the layout

Abstraction of the document design from the document structure



Body { color: black;}#globalWrapper { font-size:127%;}HR, MENU, PRE { display: block }H5.big { font-size: .83em;

line-height: 1.17em; margin: 1.67em 0 }

:focus { float: right }A:link { voice-family: harry, male }


First limited support of CSS1 in IExplorer3 released in 1996

Near-full implementation in 2000 October 31, 2005 first browser passes the ACID2 test

Safari 2.0.2 Until today no Browser fully implements CSS2




Key features CSS1 Unique identification and generic classification by

class, id and tag Font properties (e.g. emphasis, typeface) Color properties Text attributes (e.g. spacing) Alignment of elements Margin, padding, border, positioning




Key features CSS2 Absolute, relative and fix positioning Media types Aural style sheets Bidirectional text New font properties



JavaScript 1/4JavaScript 1/4

JavaScript developed by Brendan Eich of Netscape

Contrary to popular belief not related to Java

Lightweight client-side script language

Designed to look like Java



function $type(obj){ if (!$defined(obj)) return false; if (obj.htmlElement) return 'element'; var type = typeof obj; if (type == 'object' && obj.nodeName){ switch(obj.nodeType){ case 1: return 'element'; case 3: return (/\S/).test(obj.nodeValue) ? 'textnode' :

'whitespace'; } }

if (type == 'object' || type == 'function'){ switch(obj.constructor){ case Array: return 'array'; case RegExp: return 'regexp'; case Class: return 'class'; }

if (typeof obj.length == 'number'){ if (obj.item) return 'collection'; if (obj.callee) return 'arguments'; } }

return type; };


Features Weakly typed Object-based Dynamic Runs in a “sandbox”

Most commonly used embedded in web browsers Internet Explorer 3+




What JavaScript does Post-process HTML

Dynamic documents

Controlling the browser (within certain limits) Extract some information about browser and operation

system Open asynchronous connections to server Access the DOM




Issues Microsoft Jscript

„Almost the same“

XSS and other security related issues

Adblocker, NoScript, etc.



DOM – Document Object Model 1/2DOM – Document Object Model 1/2

Standard object model for XML-like formats Platform-, system- and language independent Provides a model for standardized access to HTML-

Documents First introduced by W3C in October 1998

Bundled with HTML 4 By now browser developers compete for the strictest

and most advanced implementation



DOM – Document Object Model 2/2DOM – Document Object Model 2/2



<table> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>Donald</td> <td>Duck</td> </tr> </tbody></table>

AJAX – Asynchronous JavaScript and XML1/3AJAX – Asynchronous JavaScript and XML1/3

The basis of all Web2.0 Key functionality XMLHttpRequest Asynchronous data traffic between Server and

Browser HTML

JSON XML






Web1.0

*click*

Webserver Webbrowser

No Userinterface

Incomplete UI

Complete UI

Web2.0

*click*

Webserver Webbrowser

*click*

*click*


Pros Less traffic Faster response No 3rd party software

Cons No integration with

browsers navigation engine „Back“-button Bookmarks

Enforces JavaScript



AJAX and RailsAJAX and Rails

Prototype Development tools

Shortcuts Extensions Utilities

Standards-compliant Eases the pain out

of cross-browser development

script.aculo.us Dynamic visual

effects Standard GUI-

elements Controls Behaviours

Compact syntax



AJAX – Prototype 1/2AJAX – Prototype 1/2

Shortcuts $()for selecting elements by ID

Chaining $$() for selecting elements by CSS filter $F() for extraction values of input fields

Extensions String replacement by String.gsub

Search by regex or fixed string Replacement patterns



AJAX – Prototype 2/2AJAX – Prototype 2/2

Utilities AJAX objects

Automated XMLHttpRequest generation

onSuccess onFailure handling

Automated replacement of HTML-content

Evaluate Javascript



function searchSales(){ var empID = $F('lstEmployees'); var y = $F('lstYears'); var url = 'http://yourserver/get'; var pars = 'empID='+ y;

var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: showResponse } ); }

function showResponse(originalRequest){ //put returned XML in the text area $('result').value = originalRequest.responseText; }

AJAX – Script.aculo.us 1/2AJAX – Script.aculo.us 1/2

Visual effects Highlight Morph Move Opacity Scale Parallel Queues

Behaviors Draggable Droppable Sortable

Controls Ajax.InPlaceEditor Ajax.Autocompleter Builder



Demos

AJAX – Script.aculo.us 2/2AJAX – Script.aculo.us 2/2



new Effect.Fade('id_of_element');

new Effect.Fade('id_of_element', { duration:2.0, from:0.0, to:0.8 });

<div id="ghosttrain"> <div class="controls" style="font-size:11px"> <h1>Ghost Train</h1> testtext234 <ul> <li class="active" onclick="test()">Record</li> </ul> </div></div>

element = Builder.node('div',{id:'ghosttrain'},[ Builder.node('div',{className:'controls',

style:'font-size:11px'},[ Builder.node('h1','Ghost Train'), "testtext", 2, 3, 4, Builder.node('ul',[ Builder.node('li',{className:'active',

onclick:'test()'},'Record') ]) ]) ]);

Compact code Easy to use Compatible

Builder HTML out of thin

air

SummarySummary

ActionView Template System corresponding to the view in MVC

Layouts Used to extract common design

Partials Sub templates

Helper Methods To reduce the amount of Ruby code

Forms Fast and easy HTML-form generation

AJAX Dynamic websites and eye candy



actionview michael brunner & sebastian knott b-it international program of excellence, agile...

Documents

agile fall

actionview layouts23yield

rest actionview

actionview layouts13regular

rhtml layout admin

layout fileto

appviewsemployees layout

layout fileapplication