1
00:00:00,560 --> 00:00:01,360
Hello.
2
00:00:01,600 --> 00:00:04,880
This sequence covers
the Seaside web framework,
3
00:00:05,160 --> 00:00:08,240
an innovative way
of building web apps in Pharo.
4
00:00:08,480 --> 00:00:12,200
Seaside is powerful and flexible.
5
00:00:12,480 --> 00:00:17,240
It is based on the concept
of reusable, stateful components,
6
00:00:17,600 --> 00:00:21,520
on top of a stateless protocol,
HTTP, in Web applications.
7
00:00:22,600 --> 00:00:26,040
Seaside is secure by default,
of course.
8
00:00:26,200 --> 00:00:29,200
It integrates
all the latest Web 2.0 techniques,
9
00:00:29,360 --> 00:00:31,760
like Ajax, etc.,
and REST architectures.
10
00:00:33,040 --> 00:00:36,200
This is the Seaside URL.
11
00:00:36,920 --> 00:00:42,120
You can refer to it for documentation
like the free online Seaside book.
12
00:00:42,400 --> 00:00:45,560
It also offers a set
of Seaside tutorials.
13
00:00:45,880 --> 00:00:49,520
Lastly, you can ask questions
on the Seaside mailing list.
14
00:00:49,800 --> 00:00:54,800
An active community will reply
to any questions you may have.
15
00:00:56,320 --> 00:00:59,920
A little history: Seaside
has been in production since 2002.
16
00:01:00,080 --> 00:01:01,640
It is actively maintained.
17
00:01:01,920 --> 00:01:04,520
The Seaside framework is the basis
18
00:01:05,080 --> 00:01:07,800
for many Pharo success stories.
19
00:01:07,960 --> 00:01:11,200
Those stories are online
on the Pharo site, pharo.org.
20
00:01:11,640 --> 00:01:15,640
As you'll see,
there are many web projects,
21
00:01:16,040 --> 00:01:18,520
and most use the Seaside framework.
22
00:01:18,960 --> 00:01:23,960
As I was saying,
Seaside is a web framework
23
00:01:24,200 --> 00:01:26,680
centered on the component concept.
24
00:01:26,840 --> 00:01:30,400
These components
are reusable and stateful.
25
00:01:30,640 --> 00:01:35,880
It has a domain-specific language
to render the components in HTML.
26
00:01:36,560 --> 00:01:39,160
The rules for composing
these components
27
00:01:39,440 --> 00:01:43,160
will be covered in a later sequence.
28
00:01:43,800 --> 00:01:46,760
A web application
is just a root component.
29
00:01:46,920 --> 00:01:51,160
Seaside makes it possible
to debug applications on the fly,
30
00:01:51,640 --> 00:01:53,360
in the Pharo debugger.
31
00:01:53,720 --> 00:01:56,840
In a later sequence of this course,
you will learn
32
00:01:57,120 --> 00:02:01,080
how to use metadata
to generate forms automatically.
33
00:02:02,680 --> 00:02:05,280
These are some of the examples
34
00:02:05,440 --> 00:02:10,080
of web applications built with Seaside,
in production since 2002.
35
00:02:10,640 --> 00:02:12,560
I'll zoom in on a few of them.
36
00:02:12,720 --> 00:02:16,200
This application makes extensive use
of graphs,
37
00:02:16,360 --> 00:02:20,320
and other interlocking components
that make a complex application.
38
00:02:20,920 --> 00:02:25,680
Here's another example of an application
you can find on Pharo's website.
39
00:02:26,040 --> 00:02:28,840
It features reporting tables
40
00:02:29,000 --> 00:02:32,440
that are quite complex,
interlocking with each other.
41
00:02:32,880 --> 00:02:36,440
That can be built very simply
with the Seaside framework.
42
00:02:38,120 --> 00:02:41,360
The main concept in Seaside
is the component.
43
00:02:41,680 --> 00:02:44,800
A component is a subclass
of WAComponent
44
00:02:44,960 --> 00:02:47,120
supplied by the Seaside framework.
45
00:02:47,720 --> 00:02:50,520
A component is reusable
and stateful.
46
00:02:50,680 --> 00:02:55,040
It can be rendered in HTML
in the form of
, etc.
47
00:02:55,960 --> 00:03:00,440
In Seaside, a web application
has a root component -
48
00:03:00,760 --> 00:03:02,720
in this case, WACounter,
49
00:03:02,920 --> 00:03:06,080
saved in the system
as a web application.
50
00:03:06,240 --> 00:03:10,400
It will be named "Counter," and
accessible as such, from the URL.
51
00:03:11,040 --> 00:03:14,560
Here's an example of
my Counter application, in the URL.
52
00:03:14,760 --> 00:03:17,840
It's a component
rendered in HTML, here.
53
00:03:18,200 --> 00:03:21,840
The value of the counter is zero.
We have two links, here.
54
00:03:22,160 --> 00:03:25,240
You click on ++
to increase the counter value,
55
00:03:25,480 --> 00:03:28,200
and on --
to decrease the value.
56
00:03:29,160 --> 00:03:32,720
The code for implementing
this application is very simple.
57
00:03:33,000 --> 00:03:36,520
I create a subclass
of WAComponent: WACounter.
58
00:03:36,680 --> 00:03:39,160
It has an instance variable
named count.
59
00:03:39,760 --> 00:03:43,480
The initialization method
sets the counter to 0.
60
00:03:44,040 --> 00:03:47,800
One method increases the value,
the other decreases it.
61
00:03:48,640 --> 00:03:51,720
Now we need the HTML part,
62
00:03:52,000 --> 00:03:54,520
so the counter is rendered in HTML.
63
00:03:54,680 --> 00:03:57,520
All we have to do
is endow it with a method,
64
00:03:57,680 --> 00:03:59,800
renderContentOn,
a parameter.
65
00:04:00,360 --> 00:04:03,160
The parameter will help us
generate the HTML code.
66
00:04:04,520 --> 00:04:08,280
Here's the example, with the addition
of "renderContentOn"
67
00:04:08,520 --> 00:04:09,880
to the counter class.
68
00:04:10,040 --> 00:04:14,280
I use this parameter,
a conventional Pharo object.
69
00:04:15,360 --> 00:04:19,080
It's an instance of the class
WAHtmlCanvas, supplied by Seaside.
70
00:04:19,400 --> 00:04:23,520
I send messages to this object
to generate the HTML code,
71
00:04:23,680 --> 00:04:25,920
and a heading
and an anchor, or link.
72
00:04:26,360 --> 00:04:29,160
The "callback" message
enables me to specify
73
00:04:29,320 --> 00:04:32,560
a block of code to execute
when I click on the link.
74
00:04:32,720 --> 00:04:35,520
Here, when I click on the link
called ++,
75
00:04:35,680 --> 00:04:38,320
the "self increase" method
is executed.
76
00:04:38,560 --> 00:04:43,920
Clicking on -- prompts the execution
of the "self decrease" method.
77
00:04:44,440 --> 00:04:45,400
It's so simple.
78
00:04:46,880 --> 00:04:51,840
If an error occurs when I click
on a link; i.e., in a callback,
79
00:04:52,000 --> 00:04:56,600
I knowingly have inserted
a "halt" point. It could be an error.
80
00:04:57,040 --> 00:05:00,240
I've inserted a halt point
in the decrease method.
81
00:05:00,600 --> 00:05:05,120
"Self" will halt if the counter
is decreased below zero.
82
00:05:05,520 --> 00:05:08,240
That will bring up the debugger.
83
00:05:09,040 --> 00:05:12,440
As you see,
if I do this in my web application,
84
00:05:12,600 --> 00:05:14,480
the debugger is displayed here.
85
00:05:14,640 --> 00:05:19,440
Here's the program's application stack,
with the method "RenderContentOn"
86
00:05:20,120 --> 00:05:22,720
and the decrease, here.
87
00:05:23,600 --> 00:05:25,480
We did stop on haltIf.
88
00:05:25,800 --> 00:05:28,680
I can modify the code right here,
89
00:05:29,000 --> 00:05:30,560
press "Proceed,"
90
00:05:30,960 --> 00:05:34,040
and my application
will receive the HTML response
91
00:05:34,200 --> 00:05:36,080
as if nothing had happened.
92
00:05:39,080 --> 00:05:42,800
Another problem in Web applications
is the "back" button.
93
00:05:43,240 --> 00:05:45,480
When the user clicks on "back,"
94
00:05:45,640 --> 00:05:48,600
it desynchronizes
the server and client.
95
00:05:48,960 --> 00:05:53,640
Imagine I increase the counter 5 times.
Now it reads "5" on my screen.
96
00:05:53,880 --> 00:05:57,600
Then I click on the back button
in my browser.
97
00:05:57,920 --> 00:05:59,840
The counter now reads 4.
98
00:06:00,000 --> 00:06:03,520
But the server isn't updated
about my back-button click.
99
00:06:03,680 --> 00:06:08,640
So if I click again on ++,
the screen will display a 6.
100
00:06:09,280 --> 00:06:13,320
The problem is, the server side
thought we were still on 5.
101
00:06:13,640 --> 00:06:14,800
5+1 = 6.
102
00:06:15,320 --> 00:06:18,520
Seaside makes it very easy
to handle the back button.
103
00:06:18,680 --> 00:06:22,160
We define a new method
on the counter class: "states."
104
00:06:22,600 --> 00:06:26,560
It will return the array
for which the state is to be preserved
105
00:06:26,720 --> 00:06:28,520
when the back button is hit.
106
00:06:28,680 --> 00:06:32,360
In this case, it is only
the object self: the counter.
107
00:06:33,200 --> 00:06:36,640
Now, if I press "back,"
and then click on ++,
108
00:06:36,880 --> 00:06:38,680
I should see 5 again.
109
00:06:41,640 --> 00:06:46,280
Callbacks are actually
blocks of code
110
00:06:46,520 --> 00:06:49,040
that contain all of Pharo's power.
111
00:06:49,360 --> 00:06:53,440
I can write any Pharo code
in this callback.
112
00:06:54,040 --> 00:06:56,960
I took a more complex example
here.
113
00:06:57,240 --> 00:07:01,160
I can use an alternative "if"
to say if I increase the counter + 1
114
00:07:01,320 --> 00:07:05,200
or + 2, depending on whether
the count is odd or even.
115
00:07:05,760 --> 00:07:11,720
For even numbers, the counter
will increase faster than for odd.
116
00:07:12,560 --> 00:07:17,000
As you see, Pharo
is really a powerful language
117
00:07:17,160 --> 00:07:18,920
in these callback blocks.
118
00:07:21,560 --> 00:07:25,840
To return to the preceding example,
if I click on ++ here,
119
00:07:26,240 --> 00:07:30,720
it brings me to a new window,
120
00:07:31,920 --> 00:07:35,600
telling me it is an even number.
121
00:07:36,800 --> 00:07:40,560
Next, I'll show you
how to write a greeter application.
122
00:07:40,720 --> 00:07:43,160
The user enters his first name.
123
00:07:43,400 --> 00:07:47,720
He types it in here,
and when he clicks on "Say Hello,"
124
00:07:48,640 --> 00:07:52,680
we want to display a string
of characters: "Hi" and the user name
125
00:07:53,040 --> 00:07:55,160
he entered in the beginning, here.
126
00:07:56,760 --> 00:08:01,600
It's very easy to code for that
in Seaside.
127
00:08:01,960 --> 00:08:05,160
I create a subclass Component
of the class Greeter.
128
00:08:05,360 --> 00:08:07,240
The instance variable
is Username.
129
00:08:07,400 --> 00:08:10,240
The method renderContentOn
I'm showing you here
130
00:08:10,880 --> 00:08:14,080
displays the field "Username."
131
00:08:14,240 --> 00:08:15,920
The next line is textinput.
132
00:08:16,120 --> 00:08:20,680
That's the text field you saw before,
where the user writes "Bob."
133
00:08:20,840 --> 00:08:22,520
I will have one callback.
134
00:08:22,760 --> 00:08:26,240
This time, it is a block
with a parameter, "value."
135
00:08:26,760 --> 00:08:30,840
The value parameter of this block
will be the string of characters
136
00:08:31,360 --> 00:08:33,480
the user entered.
137
00:08:33,800 --> 00:08:36,280
We can store it
in the instance variable
138
00:08:36,440 --> 00:08:39,000
of the Greeter component
UserName.
139
00:08:39,520 --> 00:08:42,960
Next, when the "submit" button
is clicked,
140
00:08:43,320 --> 00:08:48,040
I'm going to call a new component,
using the command selfinform.
141
00:08:48,200 --> 00:08:51,520
I tell it to display the string
"Hi, Bob."
142
00:08:51,920 --> 00:08:56,480
I concatenate the character string "Hi"
with the text entered as UserName.
143
00:09:00,040 --> 00:09:03,760
I hope those of you who are used
to coding web applications
144
00:09:03,920 --> 00:09:06,320
noticed that Seaside
does not require
145
00:09:06,760 --> 00:09:11,800
manual request parsing to find
parameters in requests or URLs.
146
00:09:11,960 --> 00:09:16,520
It does not require XML configuration
files, or indeed, files or pages.
147
00:09:16,920 --> 00:09:20,240
I did not say anything
about links to the next page.
148
00:09:20,640 --> 00:09:23,480
The only thing I talked about
was components:
149
00:09:23,640 --> 00:09:25,320
objects and messages.
150
00:09:25,640 --> 00:09:27,160
I talked about callbacks
151
00:09:27,320 --> 00:09:32,160
and the ability to debug live,
using the Pharo debugger.
152
00:09:33,360 --> 00:09:36,960
In sum, it's easy to build
web applications in Seaside.
153
00:09:37,200 --> 00:09:41,960
There is one root component.
Components can be combined
154
00:09:42,240 --> 00:09:44,400
to build more complex applications.
155
00:09:44,600 --> 00:09:48,000
A component renders itself
in HTML with renderContentOn.
156
00:09:48,680 --> 00:09:51,960
We have an extensible
domain-specific language
157
00:09:52,240 --> 00:09:55,240
that generates HTML code
for each component.
158
00:09:55,400 --> 00:09:58,680
We'll cover that in greater detail
in the next video.