1
00:00:00,680 --> 00:00:03,920
Hello! In this sequence,
we'll learn more about Seaside,

2
00:00:04,080 --> 00:00:06,400
especially the part
that generates HTML.

3
00:00:07,560 --> 00:00:10,680
You recall that all Seaside components

4
00:00:10,840 --> 00:00:13,640
respond
to "renderContentOn" messages.

5
00:00:14,120 --> 00:00:18,640
This message is what enables us
to generate the appropriate HTML code.

6
00:00:19,000 --> 00:00:22,360
This method has a parameter
named HTML.

7
00:00:23,120 --> 00:00:27,000
It is an object instance
of the WAHtmlCanvas class or subclass.

8
00:00:27,240 --> 00:00:31,760
It is dedicated, offering the programmer
an API to generate valid HTML.

9
00:00:32,120 --> 00:00:34,720
Our counter code is here.

10
00:00:34,880 --> 00:00:39,880
The html object here is used to generate
headings, anchors, spaces, etc.

11
00:00:40,920 --> 00:00:44,400
Today's sequence
goes further into this language.

12
00:00:46,160 --> 00:00:50,400
The dedicated language
is made up of "brushes."

13
00:00:50,880 --> 00:00:55,720
Each brush is dedicated to generating
a particular HTML tag.

14
00:00:56,120 --> 00:00:59,280
The API is object-oriented.

15
00:01:01,240 --> 00:01:05,080
Its very construction,
using message-sending to objects,

16
00:01:05,400 --> 00:01:09,080
guarantees the validity
of the HTML code,

17
00:01:09,320 --> 00:01:12,600
unless we have made
a messaging error.

18
00:01:15,000 --> 00:01:18,520
Here's an example,
using the dedicated language.

19
00:01:19,160 --> 00:01:22,120
I send the html object
the message "div"

20
00:01:22,360 --> 00:01:24,160
which will render one object.

21
00:01:24,880 --> 00:01:28,280
This object is a brush
dedicated to generating

22
00:01:29,520 --> 00:01:31,480
html div codes.

23
00:01:31,640 --> 00:01:34,120
It includes the "id" message,

24
00:01:34,640 --> 00:01:36,520
and the message "with."

25
00:01:37,040 --> 00:01:41,720
This generates a div with the attribute
id = title.

26
00:01:41,920 --> 00:01:47,720
The character string identified
as Title will be part of the div.

27
00:01:49,320 --> 00:01:53,240
I can generate
more complex things.

28
00:01:54,200 --> 00:01:56,800
The beginning is the same:
html div id list.

29
00:01:57,080 --> 00:01:59,040
This is my div line.

30
00:01:59,760 --> 00:02:02,560
But I can put lots of other tags
inside the div.

31
00:02:02,880 --> 00:02:07,400
Instead of sending a character string
to "with," I send a script.

32
00:02:07,920 --> 00:02:11,080
Within that script,
I can reuse my html object

33
00:02:11,320 --> 00:02:13,800
and other brushes
to generate other tags.

34
00:02:13,960 --> 00:02:16,360
With "html span class item"

35
00:02:16,520 --> 00:02:21,080
I generate a span
with a class attribute and content.

36
00:02:24,360 --> 00:02:26,600
Now I can use loops.

37
00:02:26,960 --> 00:02:29,800
This DSL is as powerful as Pharo.

38
00:02:29,960 --> 00:02:34,120
Here, I generate an unorderedList.

39
00:02:35,240 --> 00:02:37,160
It's abbreviated "ul."

40
00:02:38,040 --> 00:02:40,360
It has an id list attribute.

41
00:02:40,520 --> 00:02:43,880
I have list items
inside the unordered list.

42
00:02:44,120 --> 00:02:45,720
They are here.

43
00:02:46,080 --> 00:02:49,000
Only I generated them
using a loop.

44
00:02:49,480 --> 00:02:52,360
I have a "to do 1 to 5" loop.

45
00:02:53,200 --> 00:02:56,600
A classic Pharo loop.
I generate 5 list items

46
00:02:57,000 --> 00:03:00,640
with an attribute
class... item...

47
00:03:00,800 --> 00:03:03,640
followed by the name
of each list item.

48
00:03:03,920 --> 00:03:06,680
I have concatenated the loop cursor.

49
00:03:08,040 --> 00:03:10,080
Item 1, Item 2, Item 3, etc.

50
00:03:12,600 --> 00:03:14,680
We can go one notch farther,

51
00:03:14,840 --> 00:03:17,760
and code
for a different class selector CSS

52
00:03:18,480 --> 00:03:20,440
for each list item,

53
00:03:20,880 --> 00:03:23,600
depending on an odd or even loop cursor.

54
00:03:24,400 --> 00:03:28,480
Typically, here, for example,
I use the message .class: if:

55
00:03:28,960 --> 00:03:33,120
That means "add this class
if the following condition is true."

56
00:03:33,320 --> 00:03:36,960
Here's the one for "even."

57
00:03:37,320 --> 00:03:41,040
You can see that in the generated code,
the first list item

58
00:03:41,480 --> 00:03:43,400
has this particular class CSS.

59
00:03:43,800 --> 00:03:44,880
"itemodd."

60
00:03:45,040 --> 00:03:48,720
The second item has this CSS class:
even.

61
00:03:49,040 --> 00:03:52,080
This one is even, this one is odd,
etc., etc.

62
00:03:52,800 --> 00:03:54,880
The syntax is concise.

63
00:03:55,200 --> 00:03:59,200
It packs all the power of Pharo
to generate HTML using a DSL.

64
00:04:00,720 --> 00:04:03,360
Another feature
of this dedicated language

65
00:04:03,520 --> 00:04:04,640
is extensibility.

66
00:04:04,800 --> 00:04:07,720
It is easy to make it support
modern CSS frameworks

67
00:04:07,880 --> 00:04:10,240
like Bootstrap, for example.

68
00:04:10,760 --> 00:04:12,920
This CSS framework
uses CSS classes

69
00:04:13,160 --> 00:04:16,680
to generate attractive HTML elements,

70
00:04:16,840 --> 00:04:19,440
like green or blue backgrounds, etc.

71
00:04:20,080 --> 00:04:23,200
How do we go about
extending the dedicated language?

72
00:04:23,360 --> 00:04:26,680
We have special brushes
like the one here.

73
00:04:27,000 --> 00:04:30,880
They all have a "tbs" prefix,
meaning "twitter bootstrap."

74
00:04:31,160 --> 00:04:34,560
I send the message "tbsAlert"
to my HTML object.

75
00:04:34,880 --> 00:04:38,440
That means "generate an HTML div
or element

76
00:04:38,600 --> 00:04:41,680
"compliant with
the Twitter Bootstrap framework."

77
00:04:43,440 --> 00:04:48,840
Many brushes will refer
to the TBS framework.

78
00:04:49,000 --> 00:04:52,720
I can render Twitter buttons
with "tbsButton."

79
00:04:52,880 --> 00:04:55,320
And TBS button groups, this way.

80
00:04:55,480 --> 00:05:00,960
You can see that these three buttons
all belong to one group.

81
00:05:02,480 --> 00:05:06,840
To return to the example
of the counter, from last session:

82
00:05:07,200 --> 00:05:08,960
We defined a simple counter.

83
00:05:09,240 --> 00:05:12,400
Now I'll make
a Twitter Bootstrap version of it.

84
00:05:12,600 --> 00:05:16,760
It's very easy. I make a subclass
of my earlier counter,

85
00:05:16,920 --> 00:05:18,840
called "WATwitterCounter."

86
00:05:19,560 --> 00:05:22,320
I go to the "class" side

87
00:05:24,400 --> 00:05:25,760
of this class

88
00:05:26,120 --> 00:05:29,520
and define the method
"initialize," which specifies:

89
00:05:29,680 --> 00:05:34,280
"this component will be using
the TBS development library."

90
00:05:34,600 --> 00:05:39,320
Here is TBSDevelopmentLibrary
and JQDevelopmentLibrary.

91
00:05:39,800 --> 00:05:42,600
Those are Javascript
and CSS frameworks.

92
00:05:45,960 --> 00:05:49,880
Next, I'll return to the instance side
of this class.

93
00:05:50,040 --> 00:05:52,600
I'll define a new
renderContentOn method,

94
00:05:52,760 --> 00:05:54,960
redefining the preceding one.

95
00:05:55,240 --> 00:05:58,040
All my brushes will begin with tbs.

96
00:05:58,680 --> 00:06:02,080
"tbsButtonGroup," "tbsButton,"
etc., etc.

97
00:06:02,440 --> 00:06:05,000
But this doesn't change
my regular code,

98
00:06:05,160 --> 00:06:08,560
still consisting of callbacks
with "self increase"

99
00:06:09,320 --> 00:06:11,080
and "self decrease."

100
00:06:11,360 --> 00:06:13,000
It doesn't change a thing.

101
00:06:14,080 --> 00:06:18,280
The only parts that use TBS
are the HTML rendering brushes.

102
00:06:19,640 --> 00:06:22,440
Now we'll see
what my new counter looks like.

103
00:06:22,600 --> 00:06:26,520
The plus and minus buttons
are together in my Button Group.

104
00:06:26,680 --> 00:06:29,160
And counter value is displayed
on a badge,

105
00:06:29,400 --> 00:06:31,440
in this Bootstrap version.

106
00:06:34,560 --> 00:06:37,680
You can go even farther,
beyond Bootstrap.

107
00:06:37,840 --> 00:06:40,920
You can define your own style rules.

108
00:06:41,080 --> 00:06:44,240
For example, here, I decided to say

109
00:06:44,840 --> 00:06:48,200
that I want all "odd" elements

110
00:06:48,720 --> 00:06:50,800
to be in the "odd" class.

111
00:06:51,640 --> 00:06:56,400
Every time I render the counter value
here, as a TBS badge...

112
00:06:56,880 --> 00:07:00,920
That is, the counter value
will be displayed...

113
00:07:01,480 --> 00:07:05,120
But I'm adding the CSS class "odd"

114
00:07:05,640 --> 00:07:07,840
only if the value is odd.

115
00:07:10,760 --> 00:07:14,600
The CSS class is added
only if this condition is true.

116
00:07:16,200 --> 00:07:18,600
I defined the CSS class "odd"

117
00:07:18,760 --> 00:07:21,800
by defining the method "style"
on my counter.

118
00:07:21,960 --> 00:07:25,800
It will render a character string
according to CSS style rules.

119
00:07:25,960 --> 00:07:29,080
".odd color: red"
will make the counter red

120
00:07:29,440 --> 00:07:30,480
for odd numbers.

121
00:07:31,360 --> 00:07:32,360
To sum up:

122
00:07:32,920 --> 00:07:37,200
A web application is a root component.
Seaside is a root component.

123
00:07:37,760 --> 00:07:42,200
All components can be rendered
in HTML using renderContentOn.

124
00:07:42,440 --> 00:07:47,280
And we have a dedicated language
that is powerful and extensible.

125
00:07:47,800 --> 00:07:52,120
It enables us to generate HTML
easily, using brushes,

126
00:07:52,680 --> 00:07:57,280
and an extensibility that supports
existing CSS frameworks

127
00:07:57,440 --> 00:07:59,520
like Bootstrap, JQuery, UI, etc.

128
00:08:00,800 --> 00:08:04,720
You can take advantage
of Pharo's scripting powers like loops,

129
00:08:05,200 --> 00:08:07,840
to generate arrays of elements
easily.