Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Published byCora Bryant Modified over 9 years ago

Similar presentations

Presentation on theme: "INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant."— Presentation transcript:

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

2 © 2007 Progress Software Corporation 2 INNOV-7 Building a Richer UI for the Browser Agenda  Why?  Glossary  Things to consider  Code What we are going to cover

3 © 2007 Progress Software Corporation 3 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 collaboration BUT-  ‘click ‘n wait’ – poor UI for business apps However-  We can do better than this… The browser is becoming platform of choice:

4 © 2007 Progress Software Corporation 4 INNOV-7 Building a Richer UI for the Browser WebSpeed ® Architecture User Agent WebSpeed Transaction Server WebServer WebSpeed Messenger WebSpeed Broker WebSpeed Agent X/HTML CSS JavaScript ABL Procedures

5 © 2007 Progress Software Corporation 5 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:

6 © 2007 Progress Software Corporation 6 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:

7 © 2007 Progress Software Corporation 7 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: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" … Rendering modes:

8 © 2007 Progress Software Corporation 8 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:

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

10 © 2007 Progress Software Corporation 10 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” - W3CHTMLXML  Use with JavaScript to: Locate elements Create new elements

11 © 2007 Progress Software Corporation 11 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:

12 © 2007 Progress Software Corporation 12 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:

13 © 2007 Progress Software Corporation 13 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 4 th Edition of ECMA-262 Until then - http://www.json.org/json.js JavaScript Object Notation:

14 © 2007 Progress Software Corporation 14 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:

15 © 2007 Progress Software Corporation 15 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”;

16 © 2007 Progress Software Corporation 16 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; }

17 © 2007 Progress Software Corporation 17 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)... }

18 © 2007 Progress Software Corporation 18 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): element.onclick = fetch; element.onclick = function () {... };

19 © 2007 Progress Software Corporation 19 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:

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

21 © 2007 Progress Software Corporation 21 INNOV-7 Building a Richer UI for the Browser Resources  INNOV-10 Getting Started with AJAX  www.openajax.com www.openajax.com  www.crockford.com www.crockford.com  www.prototypejs.org www.prototypejs.org  dojotoolkit.org dojotoolkit.org  developer.yahoo.com/yui developer.yahoo.com/yui Useful places to visit:

22 © 2007 Progress Software Corporation 22 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

23 © 2007 Progress Software Corporation 23 INNOV-7 Building a Richer UI for the Browser Questions?

24 © 2007 Progress Software Corporation 24 INNOV-7 Building a Richer UI for the Browser Thank you for your time

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

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

Similar presentations

Dodick Zulaimi Sudirman www.unimedia.ac.id Lecture 12 Introduction to AJAX Pengantar Teknologi Internet Introduction to Internet Technology.

Dodick Zulaimi Sudirman Lecture 12 Introduction to AJAX Pengantar Teknologi Internet Introduction to Internet Technology.
DEV-04 Building OpenEdge® Reference Architecture Applications with WebSpeed® Chris Skeldon Principal Consultant.

DEV-04 Building OpenEdge® Reference Architecture Applications with WebSpeed® Chris Skeldon Principal Consultant.
Project 1 Introduction to HTML.

Project 1 Introduction to HTML.
6/3/2015eBiquity1 Tutorial on AJAX Anubhav Kale (akale1 AT cs DOT umbc DOT edu)

6/3/2015eBiquity1 Tutorial on AJAX Anubhav Kale (akale1 AT cs DOT umbc DOT edu)
© 2007 IBM Corporation IBM Emerging Technologies Enabling an Accessible Web 2.0 Becky Gibson Web Accessibility Architect.

© 2007 IBM Corporation IBM Emerging Technologies Enabling an Accessible Web 2.0 Becky Gibson Web Accessibility Architect.
AJAX Presented by: Dickson Fu Dimas Ariawan Niels Andreassen Ryan Dial Jordan Nielson CMPUT 410 University of Alberta 2006.

AJAX Presented by: Dickson Fu Dimas Ariawan Niels Andreassen Ryan Dial Jordan Nielson CMPUT 410 University of Alberta 2006.
Ajax Dr Jim Briggs WEBP Ajax1. 2 Ajax Asynchronous JavaScript And XML Method of creating more interactive web applications Moves more of the application.

Ajax Dr Jim Briggs WEBP Ajax1. 2 Ajax Asynchronous JavaScript And XML Method of creating more interactive web applications Moves more of the application.
WHAT IS AJAX? Zack Sheppard [zts2101] WHIM April 19, 2011.

WHAT IS AJAX? Zack Sheppard [zts2101] WHIM April 19, 2011.
Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.

Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.
Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Rich Internet Applications: AJAX, Server.

Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Rich Internet Applications: AJAX, Server.
The Easiest Way to Write Web Applications Jordi Sastre IT Architect, PSC May 2012.

The Easiest Way to Write Web Applications Jordi Sastre IT Architect, PSC May 2012.
Writing All Your Code In OpenEdge Architect Peter van Dam.

Writing All Your Code In OpenEdge Architect Peter van Dam.
The Document Object Model (DOM) & Asynchronous Javascript And XML (AJAX) : an introduction UFCEKG-20-2 : Data, Schemas and Applications.

The Document Object Model (DOM) & Asynchronous Javascript And XML (AJAX) : an introduction UFCEKG-20-2 : Data, Schemas and Applications.
Introduction to AJAX AJAX Keywords: JavaScript and XML

Introduction to AJAX AJAX Keywords: JavaScript and XML
JavaScript & jQuery the missing manual Chapter 11

JavaScript & jQuery the missing manual Chapter 11
1 Ajax. 2 What’s Ajax? AJAX is a combination of a few technologies that has come together in the past few years AJAX used to be an acronym for Asynchronous.

1 Ajax. 2 What’s Ajax? AJAX is a combination of a few technologies that has come together in the past few years AJAX used to be an acronym for Asynchronous.
CS 4720 RESTfulness and AJAX CS 4720 – Web & Mobile Systems.

CS 4720 RESTfulness and AJAX CS 4720 – Web & Mobile Systems.
Ruth Betcher Ruth Christie

Ruth Betcher Ruth Christie
XForms: A case study Rajiv Shivane & Pavitar Singh.

XForms: A case study Rajiv Shivane & Pavitar Singh.
ASP.NET + Ajax Jesper Tørresø ITNET2 F08. Ajax Ajax (Asynchronous JavaScript and XML) A group of interrelated web development techniques used for creating.

ASP.NET + Ajax Jesper Tørresø ITNET2 F08. Ajax Ajax (Asynchronous JavaScript and XML) A group of interrelated web development techniques used for creating.

Similar presentations

Ads by Google