web terminal
DESCRIPTION
Web Terminal Wouter Gazendam & Dick Heijink. ESUG 2008, AmsterdamTRANSCRIPT
![Page 1: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/1.jpg)
Web Terminal
Wouter Gazendam & Dick Heijink
![Page 2: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/2.jpg)
Small company (only 6 employees)Founded by Wouter and Mathieu van Echtelt
Amsterdam Groningen 2005Competence management for Fire DepartmentsAutomate administrative tasksWeb application
Visit us at http://cosmocows.com
![Page 3: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/3.jpg)
Agenda
Brief historyArchitectureClient sideServer sideDemo
![Page 4: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/4.jpg)
Agenda
Brief historyArchitectureClient sideServer sideDemo
![Page 5: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/5.jpg)
In the beginning…
Mainframe eraClient is text terminalPros:◦ Centralized application management
Cons:◦ Client is powerless without server
![Page 6: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/6.jpg)
The computer gets personal
PC eraComputing power for the massesPros:◦ Application ‘freedom’
Cons:◦ Decentralized application management
![Page 7: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/7.jpg)
The rise of the GUI
Window Icon Menu PointerRich desktop applicationsPros:◦ Adoption of Model-View-Controller
Cons:◦ Increased complexity
Multidisciplinary development teams
![Page 8: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/8.jpg)
Web applications mature
Rich Internet ApplicationsClient/server architecture is backPros:◦ Centralized application management
Cons:◦ Even more complexity to deal with…
![Page 9: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/9.jpg)
Agenda
Brief historyArchitectureClient sideServer sideDemo
![Page 10: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/10.jpg)
Client/server architecture
Modern browserIE6+, Firefox2+, …
Javascript supportNo Flash or other plugins
Behind firewallSimple request/response
No Comet for server push
Only for dynamic contentApache for static resources
Use MVCSeparate presentation from domain objects
Reuse existing domain logic
Rebuild presentation logic
Browser Web application
HTTP(S)
![Page 11: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/11.jpg)
Web Terminal
Render rich user-interfaceInput field, image, button, …
Record user-interactionsSelections, text entry, …
Report changes to serverXMLHttpRequest
Server responds with user-interface updates.
Compute user-interfaceMaintain MVC objects
Replay user-interactionsTalk to controller objects
Update user-interface Record view updates
Report updates to terminal
Terminal Web application
delta protocol
![Page 12: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/12.jpg)
Delta protocol
Synchronize user-interfaceRich user-interface on client side
Virtual user-interface on server side
Communicate significant changesIgnore mouse/keyboard events
Use high-level UI componentsNot bitmaps like X Window System
Terminal Web application
delta protocol
![Page 13: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/13.jpg)
Common GUI widgetsNon-interactive: Label, image, ruler, …Buttons: Pushbutton, link button, image buttonInput: Text input, date input, checkbox, …Selection: Listbox, radio list, tab list, tree list, …Group: Panel, grid layout, widget table, …Holder: Groupbox, widget holder, pageSpecial: Hyperlink, HTML container
Sufficient for administrative applications…
![Page 14: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/14.jpg)
Agenda
Brief historyArchitectureClient sideServer sideDemo
![Page 15: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/15.jpg)
Browser technologies
Javascript is only available optionPrototype library◦ Classes and inheritance ($super)◦ Added our own mixin implementation
jQuery◦ Date picker and other jQuery plugins
Xinha◦ Rich text editor
![Page 16: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/16.jpg)
Browser issues
DOM manipulation can be very slow◦ Only Internet Explorer, but …◦ Rewrote rendering mechanism to avoid DOM
Annoying browser differences◦ Poor CSS support in IE6◦ Event handling
Missing or poor debugging support
![Page 17: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/17.jpg)
Agenda
Brief historyArchitectureClient sideServer sideDemo
![Page 18: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/18.jpg)
Smalltalk applications
windowSpec
Widget
ApplicationModel
UIBuilder
listen to model changes
![Page 19: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/19.jpg)
Web Terminal applications
pageSpec
Web Widget
Application
Web WidgetBuilder
listen to model changes
![Page 20: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/20.jpg)
Software stacks
Domain
Presentation
Synchronization
Presentation
Synchronizationdelta protocol
Server side Client side
Application is boundary between presentation and
domain objects
![Page 21: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/21.jpg)
Agenda
Brief historyArchitectureClient sideServer sideDemo
![Page 22: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/22.jpg)
Chat application: UI design
Name: Simon
I am fine, thank you.Submit
anonymous says: Is there anybody chatting?Simon says: Yes, I am online.anonymous says: Hello Simon, how are you?Simon says: I am fine, thank you.
Text input
Text areaPushbutton
Label
Label
Label
Grid layout
Panel (vertical)Panel (vertical)
![Page 23: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/23.jpg)
Chat application: pageSpec (1/2)
(PanelSpec new)beVertical;addSpec:((GridLayoutSpec new)
columnWidths: (Array with: 100 px with: 'auto');rowHeights: #(#auto #auto);specAt: 1 @ 1 put: (LabelSpec label: 'Name:');specAt: 2 @ 1 put: (TextInputSpec new aspect: #name);specAt: 1 @ 2 put: ((PushButtonSpec new)
label: 'Submit';aspect: #submit;acceleration: 'enter';yourself);
![Page 24: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/24.jpg)
Chat application: pageSpec (2/2)
specAt: 2 @ 2 put: ((TextAreaSpec new)aspect: #text;rows: 5;yourself));
addSpec:((RepeaterSpec new)
collectionAspect: #messages;spec: ((FX.WebTerminal.LabelSpec new)
labelAspect: #yourself;yourself);
yourself);yourself
![Page 25: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/25.jpg)
Agenda
Brief historyArchitectureClient sideServer sideDemo
![Page 26: Web terminal](https://reader034.vdocuments.us/reader034/viewer/2022052316/557c05cdd8b42ad1658b4671/html5/thumbnails/26.jpg)