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.