INNOV7: Building a Richer UI for the Browser

1
INNOV-7 Building a Richer UI for the Browser
Chris Skeldon
Senior Solution Consultant
2
Agenda
What we are going to cover

• Why?
• Glossary
• Things to consider
• Code

3
Why?
The browser is becoming platform of choice

• Work within and between companies
• Work through firewalls
• Low deployment and support costs
• Platform independent
• Allow global collaboration
• BUT-
• click n wait poor UI for business apps
• However-
• We can do better than this

4
WebSpeed Architecture
X/HTML CSS JavaScript
User Agent
WebSpeed Transaction Server
WebSpeed Broker
WebServer
WebSpeed Messenger
WebSpeed Agent
ABL Procedures
5
Glossary
Key terms to start with

• XHTML
• Defines document structure
• Cascading style sheets (CSS)
• Defines presentation of document
• JavaScript
• Adds dynamism
• DOM
• In memory model of page

6
XHTML
Gives document its structure

• Standards body W3C (www.w3.org)
• Current recommendation XHTML 1.1
• Valid XML
• can be validated
• can be transformed
• Controls browser mode - quirks v. standards
• Standards mode recommended
• more consistent
• quicker

7
Browser modes
Rendering modes

• Quirks v. standards mode (almost)
• IE Firefox rely on Doctype Sniffing
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"
• Version 9
• lt!-- Generated by Webspeed http//www.webspeed.
  com/ --gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"

8
CSS
Defines a documents appearance

• Standards body W3C (www.w3.org)
• Current recommendation CSS 2
• Defines what it looks like
• colours fonts
• backgrounds
• layout size and position
• . . .
• Can be manipulated with JavaScript

9
JavaScript
ECMAScript - makes the page dynamic

• Standards body ECMA (www.ecma-international.org)
  
• Current edition ECMA-262 3rd Edition
• Based on JavaScript and JScript
• Beware of extensions
• The J of AJAX

10
DOM
Document Object Model

• Models the document as a tree of software objects
  i.e. have data and behaviour
• application programming interface (API) for
  valid HTML and well-formed XML documents -
  W3C
• Use with JavaScript to
• Locate elements
• Create new elements

11
Glossary (cont.)
More terms

• AJAX
• Asynchronous JavaScript And XML
• JSON
• JavaScript Object Notation
• XMLHTTPRequest
• Use with JavaScript to call a server

12
AJAX
Asynchronous JavaScript And XML

• A new approach, not new technology
• Coined by Jesse James Garrett, February 2005
• Enables server call without full page reload
• Goal provide rich UI in a browser
• Needs JavaScript
• Does not need XML, may not be asynchronous

13
JSON
JavaScript Object Notation

• lightweight data-interchange format
• - www.json.org
• Subset of JavaScript
• JSON v. XML each has pros and cons
• Expected to be in 4th Edition of ECMA-262
• Until then - http//www.json.org/json.js

14
XMLHTTPRequest
Built in object to call server

• Built into most modern browsers
• Enables request to a URL using HTTP
• Asynchronous or synchronous
• Response format up to developer
• Usually XML or JSON
• Needs JavaScript

15
ABL v. JavaScript
Variables

• DEFINE VARIABLE iRmNo AS INTEGER NO-UNDO.
• DEFINE VARIABLE cName AS CHARACTER NO-UNDO.

• var rmNo 11
• name Chris

16
ABL v. JavaScript
Functions and parameters

• FUNCTION bookRoom RETURNS LOGICAL
• (INPUT piRoom AS INTEGER, INPUT pcName AS
  CHARACTER)
• . . .
• RETURN TRUE.
• END FUNCTION.

• function bookRoom(room, name)
• . . .
• return true

17
ABL v. JavaScript
Loops, arrays, if and operators

• DEFINE VARIABLE i AS INTEGER NO-UNDO.
• DEFINE VARIABLE iRooms AS INTEGER EXTENT 5
  NO-UNDO.
• DO i 1 TO EXTENT(iRooms)
• IF iRoomsi piRoom THEN
• . . .
• END.

• var rooms new Array()
• for(var i 0 i lt rooms.length i)
• if(roomsi room)
• . . .

18
ABL v. JavaScript
Events and triggers (aka event handlers)

• DEFINE BUTTON btFetch.
• ON CHOOSE OF btFetch
• DO
• END.

• ltinput typebutton onclickfetch() /gt
• element.onclick fetch
• element.onclick function () . . .

19
Before you start
Things to consider

• Which browsers versions
• Accessibility
• Standards
• Internationalisation
• Use of JavaScript?
• No
• Yes, but must work without
• Yes

20
Code
21
Resources
Useful places to visit

• INNOV-10 Getting Started with AJAX
• www.openajax.com
• www.crockford.com
• www.prototypejs.org
• dojotoolkit.org
• developer.yahoo.com/yui

22
Summary
What we have seen

• Base technologies
• XHTML, CSS, DOM, JavaScript
• Role of JavaScript in your application?
• Use of JavaScript enables rich UIs in web apps
• AJAX techniques
• XML, JSON

23
Questions?
24
Thank you foryour time
25
(No Transcript)