Your SlideShare is downloading. ×
0
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Web terminal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web terminal

631

Published on

Web Terminal …

Web Terminal
Wouter Gazendam & Dick Heijink. ESUG 2008, Amsterdam

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
631
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web Terminal Wouter Gazendam & Dick Heijink
  • 2. Small company (only 6 employees) Founded by Wouter and Mathieu van Echtelt Amsterdam Groningen 2005 Competence management for Fire Departments Automate administrative tasks Web application Visit us at http://cosmocows.com
  • 3. Agenda Brief history Architecture Client side Server side Demo
  • 4. Agenda Brief history Architecture Client side Server side Demo
  • 5. In the beginning… Mainframe era Client is text terminal Pros: ◦ Centralized application management Cons: ◦ Client is powerless without server
  • 6. The computer gets personal PC era Computing power for the masses Pros: ◦ Application ‘freedom’ Cons: ◦ Decentralized application management
  • 7. The rise of the GUI Window Icon Menu Pointer Rich desktop applications Pros: ◦ Adoption of Model-View-Controller Cons: ◦ Increased complexity Multidisciplinary development teams
  • 8. Web applications mature Rich Internet Applications Client/server architecture is back Pros: ◦ Centralized application management Cons: ◦ Even more complexity to deal with…
  • 9. Agenda Brief history Architecture Client side Server side Demo
  • 10. Client/server architecture Modern browser IE6+, Firefox2+, … Javascript support No Flash or other plugins Behind firewall Simple request/response No Comet for server push Only for dynamic content Apache for static resources Use MVC Separate presentation from domain objects Reuse existing domain logic Rebuild presentation logic Browser Web application HTTP(S)
  • 11. Web Terminal Render rich user-interface Input field, image, button, … Record user-interactions Selections, text entry, … Report changes to server XMLHttpRequest Server responds with user- interface updates. Compute user-interface Maintain MVC objects Replay user-interactions Talk to controller objects Update user-interface Record view updates Report updates to terminal Terminal Web application delta protocol
  • 12. Delta protocol Synchronize user-interface Rich user-interface on client side Virtual user-interface on server side Communicate significant changes Ignore mouse/keyboard events Use high-level UI components Not bitmaps like X Window System Terminal Web application delta protocol
  • 13. Common GUI widgets Non-interactive: Label, image, ruler, … Buttons: Pushbutton, link button, image button Input: Text input, date input, checkbox, … Selection: Listbox, radio list, tab list, tree list, … Group: Panel, grid layout, widget table, … Holder: Groupbox, widget holder, page Special: Hyperlink, HTML container Sufficient for administrative applications…
  • 14. Agenda Brief history Architecture Client side Server side Demo
  • 15. Browser technologies Javascript is only available option Prototype library ◦ Classes and inheritance ($super) ◦ Added our own mixin implementation jQuery ◦ Date picker and other jQuery plugins Xinha ◦ Rich text editor
  • 16. 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
  • 17. Agenda Brief history Architecture Client side Server side Demo
  • 18. Smalltalk applications windowSpec Widget Application Model UI Builder listen to model changes
  • 19. Web Terminal applications pageSpec WebWidget Application WebWidget Builder listen to model changes
  • 20. Software stacks Domain Presentation Synchronization Presentation Synchronization delta protocol Server side Client side Application is boundary between presentation and domain objects
  • 21. Agenda Brief history Architecture Client side Server side Demo
  • 22. 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 area Pushbutton Label Label Label Grid layout Panel (vertical)Panel (vertical)
  • 23. 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);
  • 24. 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
  • 25. Agenda Brief history Architecture Client side Server side Demo

×