View
217
Download
5
Category
Preview:
Citation preview
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
© 2007 Progress Software Corporation3 INNOV-7 Building a Richer UI for the Browser
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:
© 2007 Progress Software Corporation4 INNOV-7 Building a Richer UI for the Browser
WebSpeed® Architecture
User Agent
WebSpeed Transaction Server
WebServer
WebSpeed Messenger
WebSpeed Broker
WebSpeed Agent
X/HTMLCSS
JavaScript
ABL Procedures
© 2007 Progress Software Corporation5 INNOV-7 Building a Richer UI for the Browser
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:
© 2007 Progress Software Corporation6 INNOV-7 Building a Richer UI for the Browser
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:
© 2007 Progress Software Corporation7 INNOV-7 Building a Richer UI for the Browser
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: <!-- Generated by Webspeed: http://www.webspeed.com/
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" …
Rendering modes:
© 2007 Progress Software Corporation8 INNOV-7 Building a Richer UI for the Browser
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:
© 2007 Progress Software Corporation9 INNOV-7 Building a Richer UI for the Browser
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:
© 2007 Progress Software Corporation10 INNOV-7 Building a Richer UI for the Browser
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
© 2007 Progress Software Corporation11 INNOV-7 Building a Richer UI for the Browser
Glossary (cont.)
AJAX• Asynchronous JavaScript And XML
JSON• JavaScript Object Notation
XMLHTTPRequest• Use with JavaScript to call a server
More terms:
© 2007 Progress Software Corporation12 INNOV-7 Building a Richer UI for the Browser
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:
© 2007 Progress Software Corporation13 INNOV-7 Building a Richer UI for the Browser
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:
© 2007 Progress Software Corporation14 INNOV-7 Building a Richer UI for the Browser
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:
© 2007 Progress Software Corporation15 INNOV-7 Building a Richer UI for the Browser
ABL v. JavaScript
DEFINE VARIABLE iRmNo AS INTEGER NO-UNDO.
DEFINE VARIABLE cName AS CHARACTER NO-UNDO.
Variables:
var rmNo = 11;
name = “Chris”;
© 2007 Progress Software Corporation16 INNOV-7 Building a Richer UI for the Browser
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;
}
© 2007 Progress Software Corporation17 INNOV-7 Building a Richer UI for the Browser
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)
. . .
}
© 2007 Progress Software Corporation18 INNOV-7 Building a Richer UI for the Browser
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 () { . . . };
© 2007 Progress Software Corporation19 INNOV-7 Building a Richer UI for the Browser
Before you start
Which browsers & versions Accessibility Standards Internationalisation Use of JavaScript?
• No• Yes, but must work without• Yes
Things to consider:
© 2007 Progress Software Corporation20 INNOV-7 Building a Richer UI for the Browser
Code…
© 2007 Progress Software Corporation21 INNOV-7 Building a Richer UI for the Browser
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:
© 2007 Progress Software Corporation22 INNOV-7 Building a Richer UI for the Browser
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
© 2007 Progress Software Corporation23 INNOV-7 Building a Richer UI for the Browser
Questions?
© 2007 Progress Software Corporation24 INNOV-7 Building a Richer UI for the Browser
Thank you foryour time
© 2007 Progress Software Corporation25 INNOV-7 Building a Richer UI for the Browser
Recommended