ActionView - SE-Wiki

jellytrickInternet and Web Development

Nov 10, 2013 (3 years and 9 months ago)

103 views

ActionView

Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence,

Agile Fall 2008 Preparation Seminars,

July 31
st
, 2008

Overview


ActionView


ERB
-
Templates


Layouts


Partials


Helper Methods


Forms



Basic Techniques and AJAX


Prototype


Script.aculo.us



Summary


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

2

ActionView


Template System


View layer in MVC


To include dynamic content





Template Engines


ERB
-
Templates (*.rhtml)


XML
-
Markup
-
Templates (*.rxml)


RJS
-
Templates (*.rjs)

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

3

Controller

Model

View

ActionView



ERB
-
Templates




1/2


Embedded Ruby


Standard template of Rails


Tags


<% %>


execution & no display


<%= %>


execution & display


<%
-
%>


execution & no display (no new line)


<%# %>


comment




ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31.
July

2008

Agile Fall 2008

4

<%
for

employee
in

@employees
%>


<tr>


<td>
<%=

employee
.firstname %>
</td>


<td>
<%=

employee
.lastname %>
</td>


</tr>

<%
end

%>

ActionView



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, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

5

ActionView



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


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

6

ActionView



Layouts





2/3











yield



In layout file


To include the view templates






ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

7

<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 …


ActionView



Layouts





3/3


layout

template_name[, conditions]


To specify the layout to be used


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

8

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/4


Sub template


File name with leading underscore



render

:partial => “partial”,




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


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

9

<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

ActionView



Partials






2/4


Partials with Collection


To perform actions on resources





is replaced by


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

10

<%
for

ad
in

@advertisements

%>


<%=
render

:partial

=>
"ad"
,


:locals

=> {
:ad

=> ad }


%>

<%
end

%>

<%=
render

:partial

=>
"ad"
,


:collection

=>
@advertisements

%>

ActionView



Partials






3/4


render
:partial => “partial”,




:collection => @array,




[:spacer_template => “space”]

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

11

<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 />

ActionView



Partials






4/4


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



ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

12

<%=
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 Methods


As little Ruby code as possible


No programming logic in templates


Calculations in helper methods




Helper Overview


NumberHelper


TextHelper


TagHelper


AssetTagHelper

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

13


SantizeHelper


UrlHelper


Custom Helper



Helper Methods


NumberHelper



1/2


number_to_currency (
number[, options]
)


precision (2), unit ($), separator (.), delimiter (,),


format (%u%n)






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



ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

14

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/2


number_with_delimiter (
number[, options]
)


delimiter (,), separator (.)






number_with_precision (
number[, precision(3)]
)



ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

15

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/2


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







word_wrap(
text[, length(80)]
)



ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

16

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
\
n
a time


word_wrap
(
'Once upon a time'
, 1)

# =>

Once
\
n
upon
\
n
a
\
n
time

Helper Methods


TextHelper




2/2


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





markdown(
text
)


Package BlueCloth must be installed




textilize(
text
)


Package RedCloth must be installed



ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

17

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


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


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

18

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/2


javascript_include_tag
*sources[, html
-
options]


defaults (register_javascript_include_default)


all (javascript/)


cache (ActionController::Base.perform_caching = true)







ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

19

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/2


stylesheet_link_tag
*sources[,html
-
options]


all (stylesheets/)


cache (ActionController::Base.perform_caching = true)



ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

20

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


SanitizeHelper


strip_links (
text
)




strip_tags (
text
)




h(
text
)


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

21

strip_links
(
'Please e
-
mail me at <a href="mailto:me@email.com">me@email.com</a>.'
)

# =>
Please e
-
mail me at me@email.com.

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

link
--
>"
)

# =>
Bold no more! See more here... link

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

# =>
&lt;b&gt;Bold&lt;/b&gt; no more!

Helper 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)


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

22

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/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)

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

23

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 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


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

24

<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


end

end

app/helpers /employees_helper.rb

ActionView



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

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

25

ActionView



Forms






2/6

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

26

myapp_controller.rb

(Controller)


edit.rhtml

(Template)


Rails Webserver

Generated

Form

Client

ActionView



Forms






3/6








Controller actions for


Rendering the form


Process the data returned by the form

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

27

def
new


@product
=
Product.new

end


def
create


@product
=
Product.new
(
params
[
:product
])




end

myapp_controller.rb

ActionView



Forms






4/6







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

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

28

<%
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

ActionView



Forms






5/6










Names and ids will be set by the helpers


Rails provides helpers for each input tag


All helpers require at least on parameter

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

29

<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

ActionView



Forms






6/6


Advanced Techniques


Multiple models in one form


Custom Form Builders


Dynamic Forms


Auto completion


Adaptive Forms


Asynchronous Data Submission


Error Handling


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

30

Basic Techniques and AJAX


HTML


CSS


JavaScript


DOM


AJAX


Prototype


Script.aculo.us


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

31

HTML


Hypertext Markup Language



1/3



Basis of the user
interface


Interpreted by a local
client (Browser)



XML
-
like Syntax


Tags


Attributes


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

32

<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>

HTML


Hypertext Markup Language



2/3



Provides structure to
a text


Basic styling


Additional interactive
components


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

33

<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>

HTML


Hypertext Markup Language



3
/
3


Embedding of


Media files


Images


Flash


Scripts


JavaScripts


Coldfusion


Stylesheets


CSS


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

34

<html>


<head>


<title>
Title
</title>


<link
rel
=

stylesheet


type=
“text/
css




href
=
“formats.css”
>


<script
type=
“text/
javascript

>


<!
--

alert(“Hello World!”)
--
>


</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/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


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

35

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 }

CSS


Cascading Style Sheets




2/4


First limited support of CSS
1
in IExplorer
3
released in
1996


Near
-
full implementation in
2000


October
31
,
2005
first browser passes the ACID
2
test


Safari
2.0.2


Until today no Browser fully implements CSS
2

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

36

CSS


Cascading Style Sheets




3
/
4


Key features CSS
1


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

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

37

CSS


Cascading Style Sheets




3/4


Key features CSS2


Absolute, relative and fix positioning


Media types


Aural style sheets


Bidirectional text


New font properties

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

38

JavaScript








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


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

39

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;

};

JavaScript








2
/
4


Features


Weakly typed


Object
-
based


Dynamic


Runs in a “sandbox”



Most commonly used embedded in web browsers


Internet Explorer
3
+


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

40

JavaScript








3/4


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


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

41

JavaScript








4/4


Issues


Microsoft Jscript


„Almost the same“


XSS and other
security related
issues


Adblocker, NoScript,
etc.


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

42

DOM


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 W
3
C in October
1998


Bundled with HTML
4


By now browser developers compete for the strictest
and most advanced implementation


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

43

DOM


Document Object Model




2
/
2

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

44

<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 XML

1
/
3


The basis of all Web2.0


Key functionality XMLHttpRequest


Asynchronous data traffic between Server and
Browser


HTML


JSON


XML


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

45

AJAX


Asynchronous JavaScript and XML

2/3

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

46

Web
1.0

*click*

Webserver

Webbrowser

No Userinterface


Incomplete UI


Complete UI

Web
2.0

*click*

Webserver

Webbrowser

*click*

*click*

AJAX


Asynchronous JavaScript and XML

3/3


Pros


Less traffic


Faster response


No 3
rd

party
software



Cons


No integration with
browsers navigation
engine


„Back“
-
button


Bookmarks


Enforces JavaScript


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

47

AJAX 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

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

48

AJAX


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


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

49

AJAX


Prototype






2/2


Utilities


AJAX objects


Automated
XMLHttpRequest
generation


onSuccess onFailure
handling


Automated
replacement of HTML
-
content


Evaluate Javascript

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31
. July
2008

Agile Fall
2008

50

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
/
2


Visual effects


Highlight


Morph


Move


Opacity


Scale


Parallel


Queues


Behaviors


Draggable


Droppable


Sortable


Controls


Ajax.InPlaceEditor


Ajax.Autocompleter


Builder


ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

51

Demos

AJAX


Script.aculo.us





2
/
2

ActionView, Michael Brunner & Sebastian Knott

B
-
IT International Program of Excellence

31. July 2008

Agile Fall 2008

52

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:
11
px
"
>


<h
1
>
Ghost Train
</h
1
>


testtext
234


<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:
11
px'
},[


Builder.node(
'h
1
'
,
'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


Summary


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

31
. July
2008

Agile Fall
2008

53