Advanced Web

Programming
Jaume Aragons Ferrero
Department of Software
and Computing Systems
Advanced Web Programming
MOOTOOLS
A compact JavaScript framework
Advanced Web Programming
Index

What is MooTools

Where to find

!ow to download

!ello World example"

A little bit of knowledge"

#reating a console"

$orm data validation"

%xercises"
Advanced Web Programming
What is MooTools

MooTools is a JavaScript framework

MooTools is a lightweight abstraction

la&er between the browser and the
code &o' write"

It is (b)ect*(riented

It allows to write cross*browser code"

It respects standards and it+s

extensivel& doc'mented"

It is released 'nder (pen So'rce MIT

license
Advanced Web Programming
What is MooTools

Wikipedia,

MooTools is an open so'rce-

lightweight- mod'lar ob)ect*oriented
programming JavaScript web
application framework"

It incl'des b'ilt*in f'nctions for

manip'lation of #SS- .(M elements-
native JavaScript ob)ects- A)ax
re/'ests- and more"
Advanced Web Programming
What is a $ramework

It is an abstraction in which common code

providing generic f'nctionalit& can be
overriden b& 'ser code providing specific
f'nctionalit&"

The idea is similar to SW libraries, the& are

re'sable abstractions of code in a well
defined API"

In other words, it is a SW la&er between the

programmer and the developing platform in
order to help b'ilding programs"
Advanced Web Programming
What can I do
Some examples of things &o' can do with
MooTools,
#ode Javascript easil&, Mootools feat'res
improve Javascript capabilities"
#ode #lient*Side (b)ect (riented, #reate &o'r
own classes with Javascript"
Work with JS(0, sending and reciving data"
#reate $1 with Javascript, 'ser interaction-
dinamic men's- transitions 2tween- morphs3-
slides- scrolls- etc"
Work with AJA1 and interact with &o'r server
scripts"
Advanced Web Programming
What is JS(0

JS(0 stands for Javascript (b)ect

0otation

It is a data interchange format

JS(0 information is in text format

It is s'pported b& man& lang'ages,

Javascript- #- P!P- ASP"0%T- Java-
P&thon- etc"

JS(0 data takes this form,

Advanced Web Programming
Where to find

http,44mootools"net- home page"

http,44mootools"net4download-
download page"

http,44mootools"net4docs-
doc'mentation page"

http,44www"mootorial"com4wiki- a
good t'torial
Advanced Web Programming
!ow to download

5o to www"mootools"net4download

!ere &o' can download the MooTools

core"

6se the 'ncompressed version for

development and the compressed one
for the real site"

The core download incl'des, librar&

base- a)ax working- effects- classes and
extensions"
Advanced Web Programming
!ow to download

The download page,

Advanced Web Programming
!ow to download

The +more 7'ilder+ link allows &o' to get

the MooTools Add*ons,

#lasses

0ative (b)ects- %lement classes

$orms

$1- .rag- 8e/'est

6tilities- Interface- etc"

J'st check the scripts &o' want- choose a

compression t&pe and then donwload the
incl'de file"
Advanced Web Programming
!ow to download

The +more 7'ilder+ page with some

options,
Advanced Web Programming
!ow to download

Tip, choose the whole librar& for

development onl& if &o' don+t know
which script &o' will need to 'se"

#ompression t&pes remove extra blank

spaces and rename variables in a
shorter wa&- making a m'ch smaller file"

96I compressor is the most efficient"

It will be ver& 'sef'l when releasing
&o'r code"
Advanced Web Programming
7efore start working"""

$ireb'g,

%xtension for $irefox

allows deb'gging- editing- and

monitoring #SS- !TM:- .(M- and
JavaScript code- and provides other
Web development tools"

https,44addons"mo;illa"org4en*
6S4firefox4addon4<=>?
Advanced Web Programming
7efore start working"""

Web developer toolbar,

%xtension for $irefox

adds a men' and a toolbar with

vario's web developer tools"

https,44addons"mo;illa"org4en*
6S4firefox4addon4@A
Advanced Web Programming
!ow to add to m& pages

It+s eas&- )'st incl'de the MooTools file

with the +script+ tag"
<script type=text/javascript
src=path/to/MooTools.js></script>

9o' can also incl'de &o'r own )avascript

files or even code )avascript lines inside
the web page"

The MooTools file incl'de m'st be the

first one in &o'r web page"
Advanced Web Programming
!ow to add to m& pages

!ere is an example doc'ment

<!DOCTYPE ...>
<htl ...>
<hea!>...
<script type=text/javascript
src=path/to/MooTools.js></script>
<script type=text/javascript
src=path/to/My"#$ile.js></script>
<script>My o%& "avascript co!e</script>
</hea!>
<'o!y>...</'o!y>
</htl>
Advanced Web Programming
!ello world example

$irst- write a +!ello world+ page with onl& !TM:"

After- write a second page 'sing )avascriptB.(M"

$inall&- let+s displa& a +hello world+ message from

MooTools code,
<script>
%i&!o%.a!!Eve&t()!orea!y)* +,&ctio&(-.
/(0text0-.appe&!Text()1ello 2orl!! (+ro
MooTools co!e!-.)-3
4-3
</script>

And the bod& code,

<p i!=)text)></p>
Advanced Web Programming
!ello world example

Add%vent, allows to match a handler

f'nction to an !TM: element event"

.omread&, is the event triggered when

the .(M is read& and it has loaded all
code and data"

C2+id*of*tag+3"method*or*propert&, when
we want to access to an element+s
method or propert&"

AppendText, a method allowing 's to

add some text inside an element"
Advanced Web Programming
A little bit of knowlegde
http,44mootools"net4docs4core4%lement4%lement
C2+theI.+3- select one element identified b& +theI.+"
CC2+something+3- select one or more elements
matching +something+ string"
It ret'rns an arra& or collection of elements
9o' can 'se tags names- classes- identifiers- etc"
%vent +.om8ead&+- It fires when the .(M 2and all of
its ob)ets3 is read&" So- in this moment &o' are s're
&o' can work with all ob)ects in the page"
This event is onl& available from the window
%lement"
Advanced Web Programming
A little bit more of knowlegde

C2+m&I.+3"get%lement23-

C2+m&I.+3"get%lements23

C2+m&I.+3"get%lements7&Id23

5et children elements from o'r +m&I.+

element"

C2+m&I.+3"get2+propert&+3

C2+m&I.+3"set2+attrib'te+- +val'e+3

Set a val'e into a propert& of o'r

+m&I.+ element"
Advanced Web Programming
A little bit more of knowlegde

m&%lement"erase2propert&3- deletes the

element+s propert&"

m&Parent"adopt2new#hild- """3

insert +new#hild+ as child of +m&Parent+

element"

m&%lement"in)ect2elementD- where3

Insert +m&%lement+ in +where+ position

from +elementD+"

(thers, appendText- dispose- replaces-

etc"
Advanced Web Programming
#ore f'nctions

http,44mootools"net4docs4core4#ore4#ore

CC2+aTag+3"each2new f'nction Esomething"""F3

#alls the f'nction for each element in the

collection retrieved b& CC"

Cchk- Cdefined- Ct&pe- Crandom- etc"

CA- creates an iterable arra&"

C!- creates a hash table 2G!ash233

Advanced Web Programming
#reating a console

:et+s create a +console+- that is- a la&er allowing 's to p't

some text in order to deb'g or to displa& res'lts of some
actions"

!ere is the needed code,

function toConsole(theText){
if (!$('console')) {
var element = new Element('div',
{'id':'console')!
$$("#od$")%&'(ado)t(element)!

var element = new Element('div')!
element(a))endText(theText)!
$("console")(ado)t(element)!

Advanced Web Programming

#reating a console

9o' can write this code directl& inside the !TM:

file or p't it into an extern )avascript file- and
then incl'de it from the web page 2the best
choice3"

(nce &o' have t&ped the previo's code- let+s test

it b& creating a new page with

a command b'tton 2Hinp't t&peGIb'ttonI"""3

with an +id+ attrib'te"

coding the +window"onload+ event and

attaching a handler f'nction to o'r b'tton+s
+onclick+ event"
Advanced Web Programming
#reating a console

The b'tton code,

<i&p,t type=)',tto&) val,e=)clic5 e!)
i!=)%rite) />

The handler code,

%i&!o%.o&loa! = +,&ctio&(- .
var ',tto&=/(0%rite0-3
',tto&.o&clic5=+,&ctio&(- .
toCo&sole(0Yo, have clic5e! o&
the ',tto&* so 6 a %riti&7 i& the
co&sole...0-3
ret,r& +alse3
4
4
Advanced Web Programming
Tr& to do &o'rself"""

What happens if &o' click the b'tton

several times

Modif& the code in order to p't a

co'nter co'nting the times the b'tton is
clicked"

Modif& the code in order to clean the

console each time the b'tton is clicked"
Advanced Web Programming
.efining classes
*ar m$Class= new Class({
+$,ttr: 'value',
(((
-nitialice: function((((){
(((,
+$+ethod: function(((() {
(((
)!
*ar m$.#/ = new m$Class(((()!
m$.#/(+$+ethod((()!
Advanced Web Programming
$orm data validation

(ne of the most 'sef'l things we can do with )avascript

is to validate correctness of !TM: forms"

6sing MooTools we can also validate !TM: forms"

We can b'ild a class containing methods for validate

ever& t&pe of field in o'r forms,

Mandator& fields 2text boxes- selects- radiob'ttons3

Text boxes containing specific data 2n'meric- date- an

interval of val'es- etc"3

Text boxes and text areas with a maxim'm length"

And an& other kind of validation"

Advanced Web Programming
$orm data validation

:et+s create o'r own form validation

class,

$irst- we will design a one

mandator& field form called 'ser
name- and a command b'tton to
send the form data"
Advanced Web Programming
$orm data validation

The next is to implement o'r class

var cTestO8 = &e% Class (.
error9: 0This +iel! ca&&ot 'e epty.0*
isEpty: +,&ctio&(p$iel!-.
var +iel! = /(p$iel!-3
i+ (+iel!.7et()val,e)-==))- .
alert(this.error9-3
ret,r& tr,e3
4 else .
ret,r& +alse3
4
4
4-3
This class has
* one attrib'te 2a message
error3
* and one method, a f'nction
receiving a field name to test its
empt&ness"
Advanced Web Programming
$orm data validation

$inall&- we are going to handle the onclick b'tton event to

trigger o'r class method"
%i&!o%.a!!Eve&t()!orea!y)* +,&ctio&(-.
var oTesti&7 = &e% cTestO8()y$or)-3
/()se&!i&7)-.a!!Eve&t()clic5)* +,&ctio&(-
.oTesti&7.isEpty()p;ae)-34-3
4-3

This instr'ction allows 's to link a f'nction to the onclick

b'tton event"

In this wa&- we will invoke the method +is%mpt&+ of o'r

class and we send it- as an inp't arg'ment- the name of
the field we want to test its correctness"
Advanced Web Programming
Tr& to do &o'rself"""

Add a select control with a prod'ct list"

This field is also mandator&"

Add a new text field to the form asking for the amo'nt of
prod'cts the 'ser wants to b'&"

This field will have a defa'lt val'e, <"

This field is also mandator&"

This field is a n'meric val'e starting from <"

$inall&- add a textarea field asking for an& comment

abo't the 'ser order"

This field is optional"

This field has a maxim'm lenght of DAA chars"

Advanced Web Programming
8eferences

Webs,

mootools"net

www"mootorial"com

)son"org

wikipedia"org

7ooks,

MootTools %ssentials- Aaron

0ewton" Apress 4 firstPress" DAA=
Advanced Web Programming
%xercices
Managing select options, changing
options depending on other select
val'e"
Accordion $1"
Tween $1"
Sorting lists
A game, g'ess the words I+ve tho'gh
abo't"""
Advanced Web Programming
Managing select options

:et+s make a web page with two

select fields- the content of one
of them depending on the
other+s selected option"

S'ppose we have two selects

like shown in the fig're,
Advanced Web Programming
Managing select options

$irst of all- we declare an arra& of cities for

each co'ntr& in the select"
var the2orl! = <
/1(.9: 02ars=a%a0* >: 0?ialysto50* @:
0A,'li&0* B: 08ra5o%04-*
/1(.9: 0Ma!ri!0* >: 0?arcelo&a0* @:
0Clica&te0* B: 0Dale&cia04-*
/1(.9: 0#a& $ra&cisco0* >: 02ashi&7to&0*
@: 0;e% Yor50* B: 0Aos C&7eles04-E3
Advanced Web Programming
Managing select options

0ext- we attach a handler to the

+onchange+ event of the co'ntr& select"
%i&!o%.a!!Eve&t()!orea!y)*
+,&ctio&(-.
var co,&try = /()co,&tries)-3
co,&try.a!!Eve&t()cha&7e)* +,&ctio&(-
.p,tCities(-34-3
4-3
Advanced Web Programming
Managing select options
$inall&- we implement the handler"
It will change all the options in the
cit& select loading the selected
co'ntr& cities"
Test if the selected co'ntr& is the
+non*selection+ val'e +*<+- and
decide what to do if so"
Advanced Web Programming
Accordion men'

:et+s create a dinamic men' with

expanding4contracting options- a"k"a" Accordion
men'"

$irst, t&pe the !TM: code of o'r men'"

The first level options

$or each first leve option- t&pe its second level

options"

Second, label all the first level options with a

#SS class- i"e", level<"

.o the same with each element containing the

second level options, +levelD+ #SS class"
Advanced Web Programming
Accordion men'
$inall&, create and Accordion ob)ect
in the +.omread&+ event"
%i&!o%.a!!Eve&t()!orea!y)*
+,&ctio&(-.
var yCccor!io& = &e%
Cccor!io&(//()li.level9)-* //
(),l.level>)--3
4-3
Advanced Web Programming
Tween $1

Tween $1 change a #SS propert& from one val'e to

another"

We can set the d'ration- start and end val'es- propert&

to change- etc"
%i&!o%.a!!Eve&t()!orea!y)* +,&ctio&(-.
var y$F = &e% $x.T%ee&(/(0yP0-* .property:
0le+t0* !,ratio&: @GGG4-
y$F.start(G* 9GG-3
4-3

And in the 7od&

<p i!=)yP) style=)positio&: a'sol,te3 le+t:Gpx3
top:Gpx3)>1ello %orl!!</p>
Advanced Web Programming
Sorting lists
.esign a list of items with !TM:"
Add two b'ttons to each item"
(ne of then will b& the 'p b'tton
and the other the down one"
Implement client*side code with
MooTools to add the necessar&
f'nctionalit&
Advanced Web Programming
Sorting lists

.esign a list of items with !TM:

0div id="to1ort"2
0div id="3" class="item"24irst item05div2
0div id="6" class="item"21econd -tem05div2
0div id="7" class="item"2Third item05div2
0div id="8" class="item"24ourth item05div2
05div2
Advanced Web Programming
Sorting lists

Add the 'pBdown b'ttons

%ach item will chage as follows,

<!iv i!=)9) class=)ite)>
<!iv class=)i7 HP)></!iv>
<!iv class=)i7 D2)></!iv>
$irst ite
</!iv>
Advanced Web Programming
Sorting lists

.efine some #SS st&les to ad)'st the la&o't,

"img E
float,leftJ
width, <KpxJ
height, <KpxJ
padding, DpxJ
backgro'nd*repeat, no*repeatJ
backgro'nd*position, Apx ApxJF
"6P E backgro'nd*image, 'rl2+'p"png+3J F
".W E backgro'nd*image, 'rl2+down"png+3J F
"item E clear, bothJ vertical*align, topJ F
Advanced Web Programming
Sorting lists

Program the sorting f'nctionalit&"

$or each image- add a handler to its event +onclick+"

If it is a get*'p image- add a +get 'p+ event

If not- then add a +get down+ event"

Implement both previo's events, +get 'p+ and +get

down+"

+get 'p+ event will move the list item to the next- if
exists"

+get down+ event will p't the clicked list item before
its previo's- if exists"