1. 1 Frameworks Seaside Croquet

2. 2 Frameworks Interface design and functional factoring constitute the key intellectual content of software and are far more difficult to create or re-create than code. Peter Deutsch

3. 3 Framework is l the design of an application or subsystem l expressed as l a set of abstract classes and l the way objects in those classes collaborate. Usually comes with a library of reusable classes.

4. 4 Use framework to build application by: Creating new subclasses Configuring objects together Modifying working examples (editing scripts)

5. 5 Inversion of Control Subroutine library User's program calls reused code. User designs structure of program. Framework Reused code calls user's program Structure of program determined primarily by reused code.

6. 6 Parts of Framework Application Reuse Framework Reuse component library New classes for components Script that specifies classes of components by l creating components l connecting components l parameterizing components

7. 7 Parts of Framework Application Framework Component library More components Application (script)

8. 8 White-box vs. Black-box Black-box Customize by configuring Emphasize polymorphism Must know interfaces Complex, harder to design Easier to learn, requires less programming. White-box Customize by subclassing Emphasize inheritance Must know internals Simpler, easier to design Harder to learn, requires more programming.

9. 9 Seaside Web interfaces in Smalltalk Generate HTML using Smalltalk Build reusable components Natural flow of control (continuations) http://book.seaside.st/book http://onsmalltalk.com/terse-guide-to-seaside/

10. 10 Seaside is a framework WAComponent - make many subclasses! WARenderCanvas - use, might subclass WABrush - use, might subclass WASession - sometimes use, subclass

11. 11 WAComponent renderContentOn: html Argument is WARenderCanvas, a subclass of WAHtmlCanvas A page is a component. A part of a page is a component. A component can be like a subroutine.

12. 12 Making a menu of links renderContentOn: html html anchor callback: [ self admin ]; with: 'User administration'. html break. html anchor callback: [self add ]; with: 'Entry add'. html break. …

13. 13 Brushes RenderCanvas has a few methods like html: and text: that do not use brushes. Everything else is a brush. anchor checkbox dateInput fileUpload hiddenInput javascript,option passwordInput radioButton radioGroup select textArea timeInput address big blockquote break canvas citation code emphasis form: heading horizontalRule iframe image label legend listItem orderedList: paragraph table tableBody tableData tableFoot tableHead tableRow

14. 14 Brushes To find how to generate something in Seaside, look in protocol of RenderCanvas to find the brushes. Then look in class of brush. anchor ^ self brush: WAAnchorTag new

15. 15 Methods on WAAnchorTag url: aString “ URL to use ” with: aString “ label of anchor ” callback: aBlock “ use instead of URL ” document:mimetype:filename:

16. 16 html anchor callback: [ self admin ]; with: 'User administration'. admin | login | login := APSLogin new. self call: login. login isAuthenticated ifTrue: [self call: APSAdmin new] ifFalse: [^self]

17. 17 APSAdmin renderContentOn: html html text: 'Administrator Page'. html break. html anchor callback: [ self addUser ]; with: 'Add User'. html break. html anchor callback: [ self editUser ]; with: 'Edit User'. html break. html anchor callback: [ self deleteUser ]; with: 'Delete User'. html break.

18. 18 call/return One component can call: another. A component returns a result using return:

19. 19 APSLogin renderContentOn: html | formId | formId := 'myform'. (html form) id: formId; with: [(html label) for: #username; with: [html text: 'User name'; space. (html textInput) id: #username; on: #username of: self]. html break. (html label) for: #password; with: [html text: 'Password'; space; space. (html passwordInput) on: #password of: self]. html break; break. html submitButton callback: [self logon] ]

20. 20 APSLogin Defines password, password:, username, username:, isAuthenticated logon (username = 'Ralph') & (password = 'password') ifTrue: [isAuthenticated := true] ifFalse: [isAuthenticated := false. self inform: 'Try again']. self answer: isAuthenticated.

21. 21 Application To specify that a page is the root of an application, define a class method #canBeRoot to return true. Go to the Seaside configuration page and add the component class as an application, giving it a URL. Go to the URL.

22. 22 Seaside as a framework Most Seaside apps are a bunch of subclasses of WAComponent. It is rare to create new brushes and to subclass WARenderCanvas. Have to read code to use it, because documentation is not complete. Library of brushes is enough for most people.

23. 23 Croquet Framework for 3D, collaborative environments. Wikipedia: Croquet, an open source software platform, a network operating system, for developing and delivering deeply collaborative multi-user online applications. -user online applications -user online applications

24. 24 Croquet as a framework TObject TFrame - 3D object TIslandController - mediates actions from outside world Island - every Croquet object lives on one island

25. 25 Key idea Island - virtual world - a collaboration has many simultaneous users user goes from island to island replicated for each user all replicas have same behavior

26. 26 Key idea TeaTime virtual time - all actions tagged with the time incoming messages act “ at the right time ” object can wait until a particular time

27. 27 SimpleWorld>>initialize | space portal sky win p3 pic | space := TSpace new. space registerGlobal:#masterSpace. self makeLights: space. self makeFloor:space fileName:'lawn.bmp'. self makeKay: space. self makePyramid: space. win := TWindow new. win translation: 0@0@-20. space addChild: win. portal := TPortal new. portal registerGlobal:#portal1. portal extent:5@5. win contents: portal.

28. 28 sky := TSkyBox new initializeWithFileName: 'JUL'. space addChild: sky. sky step. "get going" p3 := TPortal3D new. p3 translation: 10@-1@10. space addChild: p3. p3 registerGlobal:#portal3D. TScrollBox3D new initializeWithContents: p3. pic := TRotTexture new nitializeWithFileName: 'KAY.bmp' mipmap: true shrinkFit: false. pic translation:0@0@-2. space addChild: pic.

29. 29 makeLights: space | light | "warm light in northwest corner." light := TLight new. light ambientColor: #(0.3 0.4 0.5 0.6). light diffuseColor: #(0.48 0.35 0.4 0.6). light specularColor: #(0.3 0.23 0.2 0.5). light rotationAroundY: -130. light addRotationAroundX: 120. space addChild: light. "cool light diagonally opposite." light := TLight new. light ambientColor: #(0.1 0.1 0.1 0.1). light diffuseColor: #(0.4 0.35 0.48 0.6). light specularColor: #(0.2 0.23 0.3 0.5). light rotationAroundY: 132. light addRotationAroundX: 120. space addChild: light.

30. 30 Many worlds (islands) Worlds are independent of each other, but can have portals to other worlds Worlds defined by their contents

31. 31 TFrame Responsibilities rendering graphics - uses OpenGL render: event handling boundSphere, pick:, eventMask simulation update

32. 32 Croquet as a framework Building a world - blackbox Building a new kind of component - whitebox

33. Framework Set of abstract classes that describe a reusable design A framework’s component library is a set of concrete classes that work with the framework Use a framework by: making more components connecting components to form application 33

34. Dependency injection Make components that only depend on interfaces. Add concrete dependencies at run-time, by having a layer that connects components. 34

35. 35 Next time Interpreter and Visitor