INNOV7 Building a Richer UI for the Browser

INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant

Agenda What we are going to cover § Why? § Glossary § Things to

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… 3 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

Web. Speed® Architecture User Agent X/HTML CSS Java. Script Web. Speed Transaction Server Web. Speed Broker Web. Server Web. Speed Messenger Web. Speed Agent ABL Procedures 4 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

Glossary Key terms to start with: § XHTML • Defines document structure § Cascading style sheets (CSS) • Defines presentation of document § Java. Script • Adds dynamism § DOM • In memory model of page 5 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

XHTML Gives document its structure: § § § Standards body – W 3 C (www. w 3. 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 6 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

Browser modes Rendering modes: § Quirks v. standards mode (+almost) § IE & Firefox rely on ‘Doctype Sniffing’: <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" … § Version 9:  <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" … 7 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

CSS Defines a document’s appearance: § Standards body – W 3 C (www. w 3. org) § Current recommendation: CSS 2 § Defines ‘what it looks like’ – § 8 • colours & fonts • backgrounds • layout – size and position • . . . Can be manipulated with Java. Script INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

Java. Script ECMAScript - makes the page dynamic: § Standards body – ECMA (www. ecmainternational. org) § Current edition: ECMA-262 3 rd Edition § Based on Java. Script and JScript § Beware of extensions § The J of AJAX 9 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

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” - W 3 C § Use with Java. Script to: • Locate elements • Create new elements 10 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

Glossary (cont. ) More terms: § AJAX • Asynchronous Java. Script And XML § JSON • Java. Script Object Notation § XMLHTTPRequest • Use with Java. Script to call a server 11 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

AJAX Asynchronous Java. Script 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 Java. Script § Does not need XML, may not be asynchronous 12 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

JSON Java. Script Object Notation: § “lightweight data-interchange format” - www. json. org § Subset of Java. Script § JSON v. XML: each has pros and cons § Expected to be in 4 th Edition of ECMA-262 • Until then - http: //www. json. org/json. js 13 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

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 Java. Script 14 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

ABL v. Java. Script Variables: DEFINE VARIABLE i. Rm. No AS INTEGER NO-UNDO. DEFINE VARIABLE c. Name AS CHARACTER NO-UNDO. var rm. No = 11; name = “Chris”; 15 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

ABL v. Java. Script Functions and parameters: FUNCTION book. Room RETURNS LOGICAL (INPUT pi. Room AS INTEGER, INPUT pc. Name AS CHARACTER): . . . RETURN TRUE. END FUNCTION. function book. Room(room, name) {. . . return true; } 16 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

ABL v. Java. Script Loops, arrays, if and operators: DEFINE VARIABLE i AS INTEGER NO-UNDO. DEFINE VARIABLE i. Rooms AS INTEGER EXTENT 5 NO-UNDO. DO i = 1 TO EXTENT(i. Rooms): IF i. Rooms[i] = pi. Room THEN. . . END. var rooms = new Array(); for(var i = 0; i < rooms. length; i++) { if(rooms[i] == room). . . } 17 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

ABL v. Java. Script Events and triggers (aka event handlers): DEFINE BUTTON bt. Fetch. ON CHOOSE OF bt. Fetch DO: END. <input type=“button” onclick=“fetch(); ” /> element. onclick = fetch; element. onclick = function () {. . . }; 18 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

Before you start Things to consider: § Which browsers & versions § Accessibility § Standards § Internationalisation § Use of Java. Script? • No • Yes, but must work without • Yes 19 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

Code… 20 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software

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 21 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation

Summary What we have seen: § Base technologies: • XHTML, CSS, DOM, Java. Script § Role of Java. Script in your application? § Use of Java. Script enables rich UIs in web apps • AJAX techniques • XML, JSON 22 INNOV-7 Building a Richer UI for the Browser © 2007 Progress Software Corporation