1

Frameworks

Seaside

Croquet

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

Framework is

the design of an application or subsystem expressed as

a set of abstract classes and the way objects in those classes

collaborate.

Usually comes with a library of reusable classes.

4

Use framework to build application by:

• Creating new subclasses

• Configuring objects together

• Modifying working examples

(editing scripts)

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

Parts of Framework Application

Reuse Framework

Reuse component library

New classes for components

Script that specifies classes of components by creating components connecting components parameterizing components

7

Parts of Framework Application

FrameworkFramework

Component libraryComponent library More componentsMore components

Application (script)Application (script)

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

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

Seaside is a framework

WAComponent - make many subclasses!

WARenderCanvas - use, might subclass

WABrush - use, might subclass

WASession - sometimes use, subclass

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

Making a menu of links

renderContentOn: htmlhtml anchor

callback: [ self admin ];with: 'User administration'.

html break.html anchor

callback: [self add ];with: 'Entry add'.

html break.…

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

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

Methods on WAAnchorTag

url: aString “URL to use”

with: aString “label of anchor”

callback: aBlock “use instead of URL”

document:mimetype:filename:

16

html anchorcallback: [ self admin ];with: 'User administration'.

admin| login |login := APSLogin new.self call: login.login isAuthenticated ifTrue: [self call: APSAdmin new] ifFalse: [^self]

17

APSAdminrenderContentOn: html

html text: 'Administrator Page'.html break.html break.html anchorcallback: [ self addUser ];with: 'Add User'.html break.html anchorcallback: [ self editUser ];with: 'Edit User'.html break.html anchorcallback: [ self deleteUser ];with: 'Delete User'.html break.

18

call/return

One component can call: another.

A component returns a result using return:

19

APSLoginrenderContentOn: 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

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

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

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

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

24

Croquet as a framework

TObject

TFrame - 3D object

TIslandController - mediates actions from outside world

Island - every Croquet object lives on one island

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

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

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

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: trueshrinkFit: false.

pic translation:0@0@-2.space addChild: pic.

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

Many worlds (islands)

Worlds are independent of each other, but can have portals to other worlds

Worlds defined by their contents

31

TFrame

Responsibilities

rendering graphics - uses OpenGL

render:

event handling

boundSphere, pick:, eventMask

simulation

update

32

Croquet as a framework

Building a world - blackbox

Building a new kind of component - whitebox

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 application33

Dependency injection

Make components that only depend on interfaces.

Add concrete dependencies at run-time, by having a layer that connects components.

34

35

Next time

Interpreter and Visitor