GUI and Web Programming CSE 403 (based on a lecture by James Fogarty)

Slides:



Advertisements
Similar presentations
Lecture 11 Server Side Interaction
Advertisements

Web Applications Development Using Coldbox Platform Eddie Johnston.
Introduction to Model-View-Controller (MVC) Web Programming with TurboGears Leif Oppermann,
Cloud Computing Lecture #7 Introduction to Ajax Jimmy Lin The iSchool University of Maryland Wednesday, October 15, 2008 This work is licensed under a.
0 CS 160: Design Process: Implement Event-based UI Programming, Model-View-Controller, and the Web Jeffrey Nichols IBM Almaden Research Center
ITM352 Javascript and Dynamic Web Pages: Client Side Processing.
WEB DESIGN SOME FOUNDATIONS. SO WHAT IS THIS INTERNET.
Web Services & Widgets Godmar Back. Mash-Ups Applications that combine information from different sources in one web page Different architectural choices.
Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Rich Internet Applications: AJAX, Server.
Client/Server Architectures
Agenda What is AJAX? What is jQuery? Demonstration/Tutorial Resources Q&A.
Architecture Of ASP.NET. What is ASP?  Server-side scripting technology.  Files containing HTML and scripting code.  Access via HTTP requests.  Scripting.
JavaScript & jQuery the missing manual Chapter 11
CS 4720 RESTfulness and AJAX CS 4720 – Web & Mobile Systems.
Joel Bapaga on Web Design Strategies Technologies Commercial Value.
Ruth Betcher Ruth Christie
CSS/Photoshop Layouts – Quiz #7 Lecture Code:
Agoracast: Design and Tools Review David Wallace Croft Senior Java Architect CroftSoft Inc Talk-Java/Drink-Java Las Colinas, Texas.
Lecture 19 Web Application Frameworks Boriana Koleva Room: C54
The Web Architecture and ASP.NET. Slide 2 Review of the Web (1) It began with HTTP and HTML, which delivers static Web pages to browsers which would render.
WEB BASED DATA TRANSFORMATION USING XML, JAVA Group members: Darius Balarashti & Matt Smith.
Session I Chapter 1 - Introduction to Web Development
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
Model View Controller MVC Web Software Architecture.
Session 1 Chapter 1 - Introduction to Web Development ITI 133: HTML5 Desktop and Mobile Level I
IS-907 Java EE World Wide Web - Overview. World Wide Web - History Tim Berners-Lee, CERN, 1990 Enable researchers to share information: Remote Access.
Event Handling & AJAX IT210 Web Systems. Question How do we enable users to dynamically interact with a website? Answer: Use mouse and keyboard to trigger.
AJAX and REST. Slide 2 What is AJAX? It’s an acronym for Asynchronous JavaScript and XML Although requests need not be asynchronous It’s not really a.
Fundamentals of Web DevelopmentRandy Connolly and Ricardo HoarFundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
Overview Web Technologies Computing Science Thompson Rivers University.
Flux & React Web Application Development Mark Repka, Rich McNeary, Steve Mueller.
12-Jun-16 Event loops. 2 Programming in prehistoric times Earliest programs were all “batch” processing There was no interaction with the user Input Output.
Doktorant ė : Egl ė Mickevi č i ū t ė Software development technologies KAUNO TECHNOLOGIJOS UNIVERSITETAS INFORMACIJOS SISTEM Ų KATEDA Kaunas, 2013.
National College of Science & Information Technology.
INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Ken Wilner VP of Technology Progress Software.
Web Development. Agenda Web History Network Architecture Types of Server The languages of the web Protocols API 2.
DHTML.
Web Technologies Computing Science Thompson Rivers University
Objective % Select and utilize tools to design and develop websites.
Javascript and Dynamic Web Pages: Client Side Processing
Support for the Development of Interactive Systems
WWW and HTTP King Fahd University of Petroleum & Minerals
How does it work ?.
CS 371 Web Application Programming
Event loops 16-Jun-18.
AJAX and REST.
MVC and other n-tier Architectures
AJAX.
PHP / MySQL Introduction
User Interface / User Experience Demo
Introduction to Internet Programming
Introduction to JavaScript
Design and Maintenance of Web Applications in J2EE
A second look at JavaScript
HTML5 Level I Session I Chapter 1 - Introduction to Web Development
Event loops.
Lecture 1: Multi-tier Architecture Overview
Event loops 17-Jan-19.
Event loops 17-Jan-19.
WPS - your story so far Seems incredible complicated, already
Event loops 8-Apr-19.
Introduction to World Wide Web
Introduction to JavaScript
An Introduction to JavaScript
DR. JOHN ABRAHAM PROFESSOR UTPA
Web Technologies Computing Science Thompson Rivers University
Ajax and JSON Jeremy Shafer Department of MIS Fox School of Business
Event loops.
Event loops 19-Aug-19.
Presentation transcript:

GUI and Web Programming CSE 403 (based on a lecture by James Fogarty)

Event-based programming

Sequential Programs

Interacting with the user 1. Program takes control 2. Program does something 3. Program asks for user input 4. User provides input

The user as a file 1. Program takes control 2. Program does something 3. Program asks for file input 4. File provides input The user is abstracted as a file (named STDIN )

Event-driven Programming User can provide input at any time User actions generate events mouse click/scroll/move, hover, key press, resize Event = type + button/position + target

Event Queues

How many event queues are there in modern desktop GUI environments? How can we tell without knowing the implementation details? What are the implications?

Interactive Software Loop

dispatch_event(e) Keyboard, mouse, touchpad, accelerometer

dispatch_event(e) Handlers (callbacks) are installed to register interest in some event type Dispatch notifies all handlers Also known as Publish/Subscribe, Observer

Model-View-Controller (MVC) (See CSE 510 slides; p22-31)

GUI Toolkits Reduce time necessary to create a UI Ready-made UI elements, events Windows Forms, GTK, QT, Cocoa, Swing, … Web pages! (more on this later)

Typically, in a GUI Toolkit… Model backed by database, objects in memory, files View/Controller is merged Visual output based on tree of UI elements and their properties

Simple UI

Less-simple UI

Painting UI elements Each UI element (component) is responsible for drawing itself and its children Typically event-based void OnPaint(GraphicsContext g) //paint myself for (child in this.children) { child.paint(g); }

When to paint? The application does not decide! UI toolkits keep track of screen damage Toolkit will call paint() as necessary to fix “damage” to the bitmap Delegation of this greatly simplifies GUIs

How does damage happen? By external (transparent) events – Mouse cursor, hidden window, overlap By dirtying part of the UI component tree – Component.invalidate() will damage the area occupied by the component, causing later repaint.

Routing user input/damage For mouse input, known as hit testing – Maps from an active pixel to a UI element For keyboard input, focus management – The element in “focus” receives keyboard events Delegation strategies vary per framework

Web (client) Programming

HTML / CSS HTML = hypertext markup language A language for structuring and marking up documents in a semantic way Similar to LaTeX, PostScript

JavaScript Dynamically-typed scripting language Prototype-based object system Highly flexible and dynamic Transmitted only in source form

DOM / CSS DOM = document object model The abstract syntax tree of HTML Large API interacting with document tree CSS = cascading style sheets – Properties for DOM nodes based on pattern matching

HTML + JavaScript + DOM A GUI toolkit, with some catches DOM serves as model, view, and controller Event handlers written in JavaScript Visual output derived from DOM node props – No paint method!

Demo: Web page DOM as HTML AST Tree structure DOM node -> visual output CSS matches on DOM nodes Assembled from many pieces Damage => recompute styles, layout

Demo: Web application User input generates events Event handlers installed per DOM node Incremental repaint of “damaged” area Assembled from many pieces dynamically

AJAX? Asynchronous JavaScript and XML Supports loading JavaScript asynchronously – As opposed to forcing load – Event/callback based

JavaScript Libraries? jQuery, Prototype, Scriptaculous Advantages: – Remove a lot of boilerplate DOM code – Alternate, browser-consistent API Disadvantages: – Difficult to debug a large library – Difficult to reuse code that uses one library

Pros and cons of web applications Pros: – Nothing to install, just need conformant browser – Easier to configure dynamically – Effortless “software update” Cons: – HTML/JS/DOM not intended for stateful apps – Usually requires internet connection – Less control over user experience

Web (server) Programming Can be implemented in any language – Popular: PHP, Ruby, Java, Python, Perl Web application does not care who speaks – Load balancing, proxies, firewalls All communication via HTTP requests – GET, POST, (PUT, DELETE) – Static resources and application requests

Web (server) Programming Each request is handled in isolation – But application itself must be highly concurrent, parallel to serve many users Step 1: Decode user request Step 2: Do something Step 3: Send response to user

Web (server) programming Architecture and protocols still fluid As always, many frameworks exist to ease application development Deserves its own lecture but.. – Probably best to go read the web!

Bonus: Research Research at all points touching the web: – Debugging – Domain-specific languages – Application architecture – Testing – Performance – Security – HCI