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

INNOV-7: Building a Richer UI for the Browser

Chris SkeldonSenior Solution Consultant

© 2007 Progress Software Corporation2 INNOV-7 Building a Richer UI for the Browser

Agenda

Why? Glossary Things to consider Code

What we are going to cover


Why?

Work within and between companies Work through firewalls Low deployment and support costs Platform independent Allow global collaborationBUT- ‘click ‘n wait’ – poor UI for business appsHowever- We can do better than this…

The browser is becoming platform of choice:


WebSpeed® Architecture

User Agent

WebSpeed Transaction Server

WebServer

WebSpeed Messenger

WebSpeed Broker

WebSpeed Agent

X/HTMLCSS

JavaScript

ABL Procedures


Glossary

XHTML• Defines document structure

Cascading style sheets (CSS)• Defines presentation of document

JavaScript• Adds dynamism

DOM• In memory model of page

Key terms to start with:


XHTML

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

Gives document its structure:


Browser modes

Quirks v. standards mode (+almost) IE & Firefox rely on ‘Doctype Sniffing’: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" …

Version 9: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" …

Rendering modes:


CSS

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

Defines a document’s appearance:


JavaScript

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

ECMAScript - makes the page dynamic:


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


Glossary (cont.)

AJAX• Asynchronous JavaScript And XML

JSON• JavaScript Object Notation

XMLHTTPRequest• Use with JavaScript to call a server

More terms:


AJAX

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

Asynchronous JavaScript And XML:


JSON

“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

JavaScript Object Notation:


XMLHTTPRequest

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

Built in object to call server:


ABL v. JavaScript

DEFINE VARIABLE iRmNo AS INTEGER NO-UNDO.

DEFINE VARIABLE cName AS CHARACTER NO-UNDO.

Variables:

var rmNo = 11;

name = “Chris”;


ABL v. JavaScript

FUNCTION bookRoom RETURNS LOGICAL (INPUT piRoom AS INTEGER, INPUT pcName AS CHARACTER):

. . . RETURN TRUE.

END FUNCTION.

Functions and parameters:

function bookRoom(room, name)

{

. . .

return true;

}


ABL v. JavaScript

DEFINE VARIABLE i AS INTEGER NO-UNDO. DEFINE VARIABLE iRooms AS INTEGER EXTENT 5 NO-UNDO. DO i = 1 TO EXTENT(iRooms): IF iRooms[i] = piRoom THEN . . . END.

Loops, arrays, if and operators:

var rooms = new Array();

for(var i = 0; i < rooms.length; i++)

{

if(rooms[i] == room)

. . .

}


ABL v. JavaScript

DEFINE BUTTON btFetch.

ON CHOOSE OF btFetch DO: END.

Events and triggers (aka event handlers):

<input type=“button” onclick=“fetch();” />

element.onclick = fetch;

element.onclick = function () { . . . };


Before you start

Which browsers & versions Accessibility Standards Internationalisation Use of JavaScript?

• No• Yes, but must work without• Yes

Things to consider:


Code…


Resources

INNOV-10 Getting Started with AJAX

www.openajax.com www.crockford.com www.prototypejs.org dojotoolkit.org developer.yahoo.com/yui

Useful places to visit:


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


Questions?


Thank you foryour time

Documents

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