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.