Copyright 2007 Adobe Systems Incorporated. 1 ColdFusion 8 : Advanced AJAX Development Rakshith N Computer Scientist Jan 02, 2008.

Slides:



Advertisements
Similar presentations
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 16 Introduction to Ajax.
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
ColdFusion 8 Ajax Features Overview Scott Bennett
Dodick Zulaimi Sudirman Lecture 12 Introduction to AJAX Pengantar Teknologi Internet Introduction to Internet Technology.
Introducing Mapbuilder Michael Adair Natural Resources Canada.
6/3/2015eBiquity1 Tutorial on AJAX Anubhav Kale (akale1 AT cs DOT umbc DOT edu)
Cloud Computing Lecture #7 Introduction to Ajax Jimmy Lin The iSchool University of Maryland Wednesday, October 15, 2008 This work is licensed under a.
Dynamic Web Pages Bert Wachsmuth. Review  Internet, IP addresses, ports, client-server, http, smtp  HTML, XHTML, XML  Style Sheets, external, internal,
Does Ajax suck? CS575 Spring 2007 Chanwit Suebsureekul.
Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.
Chapter 14 Introduction to HTML
Chapter 6 DOJO TOOLKITS. Objectives Discuss XML DOM Discuss JSON Discuss Ajax Response in XML, HTML, JSON, and Other Data Type.
JQuery CS 268. What is jQuery? From their web site:
Portal and AQAS-Philadelphia University 21-22/6/2011 AVCI Platform in PU Dr. Abdel-Rahman Al-Qawasmi Philadelphia University Director of Computer Center.
NextGen Technology upgrade – Synerizip - Sandeep Kamble.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
Pittsburgh Java User Group– Dec Java PureFaces: A JSF Framework Extension.
A Scalable Application Architecture for composing News Portals on the Internet Serpil TOK, Zeki BAYRAM. Eastern MediterraneanUniversity Famagusta Famagusta.
JavaScript & jQuery the missing manual Chapter 11
Databases.  Multi-table queries  Join ▪ An SQL JOIN clause is used to combine rows from two or more tables, based on a common field between them. 
May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Build Great Web Application 'Fast and Easy'
Step Outside the Box – Part II ColdFusion and Ajax.
ASP.NET + Ajax Jesper Tørresø ITNET2 F08. Ajax Ajax (Asynchronous JavaScript and XML) A group of interrelated web development techniques used for creating.
Building a UI with Zen Pat McGibbon –Sales Engineer.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
Tutorial 10 Adding Spry Elements and Database Functionality Dreamweaver CS3 Tutorial 101.
Data File Access API : Under the Hood Simon Horwith CTO Etrilogy Ltd.
Integrating JavaScript and HTML5 HTML5 & CSS 7 th Edition.
Google Web Toolkit An Overview By Shauvik Roy Choudhary.
Cross Site Integration “mashups” cross site scripting.
1 Geospatial and Business Intelligence Jean-Sébastien Turcotte Executive VP San Francisco - April 2007 Streamlining web mapping applications.
AJAX Compiled from “AJAX Programming” [Sang Shin] (Asynchronous JavaScript and XML)
JSF Framework Java Server Faces Presented by Songkran Totiya (6/10/2014)
.  A multi layer architecture powered by Spring Framework, ExtJS, Spring Security and Hibernate.  Taken advantage of Spring’s multi layer injection.
HTML Form Widgets. Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back.
CF101: Welcome to ColdFusion Simon Horwith CTO, Etrilogy Ltd.
Ajax. –Asynchronous JavaScript and XML –Umbrella term for technologies that often: Use client-side scripting for layout and formatting Use less than full.
INNOV-7: Building a Richer UI for the Browser Chris Skeldon Senior Solution Consultant.
RIA and Web2.0 Development with no Coding Juan Camilo Ruiz Senior Product Manager Development Tools.
Web Design and Development. World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files 
Theo Rushin, Jr. Senior Web Application Developer World Singles and DoubleBlack Technologies 12/26/
ICM – API Server & Forms Gary Ratcliffe.
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
Preface IIntroduction Objectives I-2 Course Overview I-3 1Oracle Application Development Framework Objectives 1-2 J2EE Platform 1-3 Benefits of the J2EE.
JQuery and AJAX WEB Technologies : PHP Programming Language.
Presentation.
CHAPTER 8 AJAX & JSON WHAT IS AJAX? Ajax lets you…
AJAX and REST. Slide 2 What is AJAX? It’s an acronym for Asynchronous JavaScript and XML Although requests need not be asynchronous It’s not really a.
AJAX Use Cases for WSRP Subbu Allamaraju BEA Systems Inc WSRP F2F Meeting, May 2006.
Java Programming: Advanced Topics 1 Building Web Applications Chapter 13.
AJAX – Asynchronous JavaScript And XML By Kranthi Kiran Nuthi CIS 764 Kansas State University.
JQUERY AND AJAX
CFUNITED – The premier ColdFusion conference Flex 2.0 and ColdFusion Integration – 101 Nahuel Foronda Laura Arguello.
Ajax 101 for CF Programmers Randy Brown – Michigan State University
11 jQuery Web Service Client. 22 Objectives You will be able to Use JSON (JavaScript Object Notation) for communcations between browser and server methods.
Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key.
National College of Science & Information Technology.
INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Ken Wilner VP of Technology Progress Software.
AJAX and REST.
Subbu Allamaraju BEA Systems Inc
AJAX.
AJAX.
Pentaho and Yahoo User Interface (YUI)
Prepared for Md. Zakir Hossain Lecturer, CSE, DUET Prepared by Miton Chandra Datta
Session V HTML5 APIs - AJAX & JSON
CSE 154 Lecture 22: AJAX.
HTML Level II (CyberAdvantage)
HTML5 AJAX & JSON APIs
Presentation transcript:

Copyright 2007 Adobe Systems Incorporated. 1 ColdFusion 8 : Advanced AJAX Development Rakshith N Computer Scientist Jan 02, 2008

Copyright 2007 Adobe Systems Incorporated. 2 Agenda  AJAX overview  JSON support  AJAX plumbing  AJAX Widgets  Q & A

Copyright 2007 Adobe Systems Incorporated. 3 Traditional Web Application Model CF Server HTTP HTML, Images, CSS, JavaScript  Browser makes HTTP call  Complete HTML updated

Copyright 2007 Adobe Systems Incorporated. 4 AJAX Web Application Model CF Server HTTP Data JavaScript User Interface  JavaScript executes in browser & makes HTTP call  User Interface (part-HTML) updated

Copyright 2007 Adobe Systems Incorporated. 5 ColdFusion AJAX Architecture AJAX Plumbing UI Widgets JSON Support BINDBIND CF data types available in JSON format Fetch data/markup and invoke logic on server easily Quick & easy way to create AJAX UI, cfwindow, cftree, cfgrid etc

Copyright 2007 Adobe Systems Incorporated. 6 AJAX Plumbing UI Widgets JSON Support BINDBIND AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 7 What is JSON?  JavaScript Object Notation  Representation of data in JavaScript  JavaScript can understand JSON, it’s a native data format  Based on array and object literals of JavaScript Array: [“Benjamin”, “Michael”, “Scott”] Object: {“color” : “red”, “doors” : 4} CF Server HTTP JSO N Data JavaScript JavaScript Call User Interface AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 8  XML  JSON - Fat free XML! { books: [ {isbn:’000230’, title:’xyz’},{isbn:’000231’, title:’abc’} ] } XML Vs. JSON AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 9 JSON Support in ColdFusion 8  SerializeJSON ()  Converts ColdFusion objects into their JSON data format  DeserializeJSON ()  Converts JSON data into ColdFusion objects  IsJSON()  Checks if the data passed to the function is in the JSON format AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 10 CFML  JSON type mapping  Simple types String: "Adobe" Number:  Array Array: ["Adobe","ColdFusion8"]  Struct Struct: {"PRODUCT":"ColdFusion8","NAME":"Adobe"}  Query  Column format Query: {"ROWCOUNT":2,"COLUMNS":["NAME"],"DATA":{"name":["Adobe","ColdFusion8"]}}  Row format Query: Query: {"COLUMNS":["NAME"],"DATA":[["Adobe"],["ColdFusion8"]]} AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 11 AJAX Plumbing UI Widgets JSON Support BINDBIND AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 12 AJAX Plumbing  What you expect from AJAX application  Some area of the page gets refreshed, no full page refresh  For that to happen, you need  New HTML markup for that area  To invoke logic on the server to fetch the data AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 13 AJAX region & data fetch Define AJAX region using CF Server cfm/CFC bind=“url:foo.cfm ” Fetch data for the region using BIND expressions AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 14 CFDIV – Form submission  CFFORM inside CFDIV is submitted asynchronously AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 15 BIND  React to UI control events  Retrieves UI control values  Invoke logic and retrieve markup or data cfc:bookData.getBookDetails({…  Four types  CFC  Javascript –  url –  Plain – bind=“The ISBN AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 16 Get your CFC functions in JavaScript  CFAJAXPROXY  Creates a JavaScript proxy for a ColdFusion component  Generates a proxy function for every remote function on the cfc var b = new jsbooks(); var details = b.getBookDetails(); CF Server Proxy CF C AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 17 cfajaxproxy – built-in functions  setHTTPMethod  setAsyncMode, setSyncMode  setCallBackHandler  setErrorHandler  setrQueryFormat  setReturnFormat  setForm AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 18 Fetch Markup – ColdFusion.navigate()  “Navigates” the contents of a tag  Specify HTTP method, custom callback and error handler JS functions  Submit a form ColdFusion.navigate(url, id, callback, errorHandler, httpMethod, formId) <a href=“ javascript:ColdFusion.navigate( ‘getBookDetails.cfm’,’bookdetails’)” >Navigate AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 19 Fetch Markup – Server Functions  AjaxLink(url) Reloads the link’s container with the url First Page Next Page  AjaxOnLoad(functionName) Calls a JS function when markup is loaded, after all CF components are initialized AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 20 Basic AJAX Functions  ColdFusion.Ajax.submitForm(formId, url, callbackHandler, errorHandler, httpMethod, async)  ColdFusion.getElementValue(elementname, formname, attribute)  Logger functions  ColdFusion.Log.debug(message, component)  ColdFusion.Log.info(message, component)  ColdFusion.Log.error(message, component)  ColdFusion.Log.dump(object, component)  ?cfdebug  CF Administrator Settings for Logger  Globally enable/disable  Restrict by IP address AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 21 Feed Reader Application

Copyright 2007 Adobe Systems Incorporated. 22 AJAX Plumbing UI Widgets JSON Support BINDBIND AJAX Widgets AJAX Plumbing UI Widgets JSON Support BINDBIND

Copyright 2007 Adobe Systems Incorporated. 23 The Mail Application

Copyright 2007 Adobe Systems Incorporated. 24 Stage 1 Layout for the Application…

Copyright 2007 Adobe Systems Incorporated. 25 Stage 2 The folder tree on the app…

Copyright 2007 Adobe Systems Incorporated. 26 Stage 3 A dynamic grid to list the mails…

Copyright 2007 Adobe Systems Incorporated. 27 Stage 4 The compose tab… function sav () { var m = new exchangeCFC(); var to = ColdFusion.getElementValue('To'); var subject = ColdFusion.getElementValue('Subject'); var content = ColdFusion.getElementValue('mailcontent'); m.sendMail(to,subject,content,false); }

Copyright 2007 Adobe Systems Incorporated. 28 Slide 5 The contacts Autosuggest…

Copyright 2007 Adobe Systems Incorporated. 29 Summary  Ajax in ColdFusion is available at three different levels: JSON Support, Ajax Plumbing, Ajax Widgets  Can use JSON support and the Ajax Plumbing without using the Ajax Widgets: Allows other Ajax Frameworks to integrate nicely.  Integration with Spry: CFSPRYDATASET  Presentation and sample applications :

Copyright 2007 Adobe Systems Incorporated. 30 Q & A

Copyright 2007 Adobe Systems Incorporated. 31