innov-7: building a richer ui for the browser chris skeldon senior solution consultant
TRANSCRIPT
![Page 1: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/1.jpg)
INNOV-7: Building a Richer UI for the Browser
Chris SkeldonSenior Solution Consultant
![Page 2: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/2.jpg)
© 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
![Page 3: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/3.jpg)
© 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:
![Page 4: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/4.jpg)
© 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
![Page 5: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/5.jpg)
© 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:
![Page 6: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/6.jpg)
© 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:
![Page 7: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/7.jpg)
© 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:
![Page 8: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/8.jpg)
© 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:
![Page 9: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/9.jpg)
© 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:
![Page 10: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/10.jpg)
© 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
![Page 11: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/11.jpg)
© 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:
![Page 12: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/12.jpg)
© 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:
![Page 13: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/13.jpg)
© 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:
![Page 14: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/14.jpg)
© 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:
![Page 15: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/15.jpg)
© 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”;
![Page 16: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/16.jpg)
© 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;
}
![Page 17: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/17.jpg)
© 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)
. . .
}
![Page 18: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/18.jpg)
© 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 () { . . . };
![Page 19: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/19.jpg)
© 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:
![Page 20: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/20.jpg)
© 2007 Progress Software Corporation20 INNOV-7 Building a Richer UI for the Browser
Code…
![Page 21: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/21.jpg)
© 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:
![Page 22: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/22.jpg)
© 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
![Page 23: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/23.jpg)
© 2007 Progress Software Corporation23 INNOV-7 Building a Richer UI for the Browser
Questions?
![Page 24: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/24.jpg)
© 2007 Progress Software Corporation24 INNOV-7 Building a Richer UI for the Browser
Thank you foryour time
![Page 25: INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant](https://reader035.vdocuments.mx/reader035/viewer/2022070415/5697bf771a28abf838c815aa/html5/thumbnails/25.jpg)
© 2007 Progress Software Corporation25 INNOV-7 Building a Richer UI for the Browser