Step outside the box part ii
Download
1 / 29

Step Outside the Box - PowerPoint PPT Presentation


  • 345 Views
  • Updated On :

Step Outside the Box – Part II. ColdFusion and Ajax. Theo Rushin Jr. I am an avid snowboarder in the winter and paintball player during the other seasons. During the week I work as an independent consultant for hire.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Step Outside the Box ' - PamelaLan


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Theo rushin jr l.jpg
Theo Rushin Jr

I am an avid snowboarder in the winter and paintball player during the other seasons. During the week I work as an independent consultant for hire.

I have spent the past 6+ years establishing myself as an expert Coldfusion and Flash Rich Internet Application Developer and Trainer. During my 6 years of web application development I have created and supported many enterprise-wide web-based applications I have worked on various development efforts using technologies such as ColdFusion, Flash Actionscript, and Ajax.

I can be reached at [email protected] on the snow


Coldfusion and ajax l.jpg
ColdFusion and Ajax

What Is AJAX?

Asynchronous JavaScript and XML

AJAX itself is not a technology but a collection of existing technologies used in such a way to provide a more responsive, interactive, and Rich Internet Application-like experience.

The key technology used in AJAX is the XMLHttpRequest object. It provides the capability to transmit data to and from the server without refreshing the entire page. The page then communicates with the browser’s Document Object Model (DOM) to update the page.


Coldfusion and ajax4 l.jpg
ColdFusion and Ajax

What Is AJAX? (continued)

  • Here are the basic technologies involved in Ajax applications:

  • HTML is used to build Web forms and identify fields for use in the rest of your application.

  • JavaScript code is the core code running Ajax applications and it helps facilitate communication with server applications using the XMLHTTPRequest object.

  • DHTML, or Dynamic HTML, helps you update your forms dynamically. You'll use div, span, and other dynamic HTML elements to mark up your HTML.

  • DOM, the Document Object Model, will be used (through JavaScript code) to work with both the structure of your HTML and (in some cases) XML returned from the server.


Coldfusion and ajax5 l.jpg
ColdFusion and Ajax

Is Ajax a Web 2.0 technology?

Well … Yes and No


Coldfusion and ajax6 l.jpg
ColdFusion and Ajax

Is Ajax a Web 2.0 technology?

No because …

Ajax is nothing new and has been around for years. The XMLHttpRequest object was introduced in the Internet Explorer browser back in 1999. Companies such as Google, Netflix, and Yahoo have recently re-ignited the interest in using these technologies. Take a look at these sites:

http://maps.google.com/

http://www.netflix.com/Default


Coldfusion and ajax7 l.jpg
ColdFusion and Ajax

Is Ajax a Web 2.0 technology?

Yes because …

The technologies that makeup Ajax play an integral part in delivering sites that are very interactive, responsive, and deliver a Rich Internet Application-like experience.

Check out these sites:

http://web2.wsj2.com/the_best_web_20_software_of_2005.htm


Coldfusion and ajax9 l.jpg
ColdFusion and Ajax

Q: What are Mashups?

A:

A mashup is a website or web application that seamlessly combines content from more than one source into an integrated experience.

Content used in mashups is typically sourced from a third party via a public interface or API. Other methods of sourcing content for mashups include Web feeds (e.g. RSS or Atom) and JavaScript.

Excerpt from:

http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)


Coldfusion and ajax10 l.jpg
ColdFusion and Ajax

Q: How can I integrate AJAX into my ColdFusion apps?

A: Use CFAJAX.

CFAjax is an AJAX implementation for ColdFusion applications. It allows your ColdFusion pages to communicate with ColdFusion methods using JavaScript. CFAjax comes with easy to use JavaScript and ColdFusion API methods that help marshal the response between your CF methods and client page.

CFAjax is an open source product, you are free to use and distribute CFAjax with your applications. The home for this tools is:

http://www.indiankey.com/cfajax/


Coldfusion and ajax11 l.jpg
ColdFusion and Ajax

Q: What browsers support CFAJAX?

A: CFAJAX works on the following browsers:

CFAJAX currently works on the following browsers:

Firefox 1.0+

I.E. 5.0+

Mozilla 1.0+

Netscape 7.0+

Safari 1.2+


Coldfusion and ajax12 l.jpg
ColdFusion and Ajax

Q: So, how do I use CFAJAX?

A:

After you have downloaded, installed, and configured the tool you may begin to use the following methods to make AJAX calls.


Coldfusion and ajax13 l.jpg
ColdFusion and Ajax

resortViewer.cfm

function getStateInfo() {

var stateName = DWRUtil.getValue("state");

DWREngine._execute(_cfscriptLocation, null, ‘getStateInfo', stateName, getStateInfo_result);

}

  • JavaScript function called when user clicks on an element on the page.

  • getStateInfo() – Javascript function that is called on the onClick event.

  • DWRUtil.getValue – CFAJAX method that returns the selected value in a form element.

  • DWREngine._execute – CFAJAX method that calls the server-side function passing the state variable.

    • _cfscriptLocation: A pointer to the location of the server-side ColdFusion template page.

    • null: Default value

    • getStateInfo: CF function that will be executed

    • stateName: Parameter being passed to CF function

    • getStateInfo_result: JavaScript callback function


Coldfusion and ajax14 l.jpg
ColdFusion and Ajax

resortViewer.cfm

function getStateInfo_result(result) {

var divText = “”;

for(i = 0; I < result.length; i++) {

divText = divText + result[i].resortName + “<BR />”;

}

document.getElementById(“resortListing").innerHTML = divText;

}

JavaScript callback function called after the server-side function returns its results. You use this function to process the data that was returned from the CF function.


Coldfusion and ajax15 l.jpg
ColdFusion and Ajax

resorts.cfm

<cffunction name=“getStateInfo">

<cfargument name="stateName" required="yes" type="string">

<cfquery name=“qryResult” datasource=“skiresorts">

SELECT *

FROM Resort

WHERE state = ‘#stateName#’

</cfquery>

<cfreturn qryResult >

</cffunction>

ColdFusion function used to retrieve all records containing the passed in stateName.


Coldfusion and ajax16 l.jpg
ColdFusion and Ajax

Q: What other data types can I return?

A:

CFAJAX will allow you to return a variety of data types including;

Strings

Numerics

Booleans

Arrays

Structures

CFCs


Coldfusion and ajax17 l.jpg
ColdFusion and Ajax

StringThe return for a ColdFusion string is a JavaScript string.

CF

<return “HELLO”>

JS

alert(result + “ THEO”)


Coldfusion and ajax18 l.jpg
ColdFusion and Ajax

NumericNumerics returned from ColdFusion become JavaScript strings. If you return a numeric and then use the + operator in JavaScript to try to add something to it, JavaScript will join the two. You must first convert the returned value in JavaScript to a number first (e.g. var myCalc = +return + 23;)

CF

<return 1962>

JS

var myAge = +return + 2006;


Coldfusion and ajax19 l.jpg
ColdFusion and Ajax

BooleanBooleans are returned as a “YES” or “NO” (all CAPS) for true or false. You may then need to convert to JavaScript booleans.

CF

<return true>

JS

if(return == “YES”) {

alert(“Yes it is true”)

} else {

alert(“Completely false”)

}


Coldfusion and ajax20 l.jpg
ColdFusion and Ajax

ArrayOnly single dimension arrays are supported by CFAJAX. While ColdFusion arrays start at index 1, JavaScript arrays start at index 0.

CF

<cfset myArray = ArrayNew()>

<return myArray>

JS

for(i=0; i < result.length; i++) {

alert(result[i])

}


Coldfusion and ajax21 l.jpg
ColdFusion and Ajax

StructureA CF struct comes back as an array of objects. Each object has two properties, KEY and VALUE (note the CAPS; the key itself is also in CAPS as in the example), representing the key and value of a member in the CF struct; the array contains each of those members e.g.:

CF<cfset mystruct = StructNew()><cfset mystruct.mynumber = 1><cfset mystruct.mystring = "hello"><cfreturn mystruct>

JStheStructNumberKey = return[0].KEY // returns "MYNUMBER"theStructNumberValue = return[0].VALUE // returns "1"theStructStringKey = return[1].KEY // returns "MYSTRING"theStructStringValue = return[1].VALUE // returns "hello"


Coldfusion and ajax22 l.jpg
ColdFusion and Ajax

QueryThe JS object that represents a CF query is an array of row objects, with each column as a property of each object. E.G. a cfquery that returns columns ID, NAME, DATE, SIZE and has 10 rows would become a JS array of length 10, with each element an object with properties ID, NAME, DATE, SIZE (note the CAPS - all column names are capitalized in the JS object):

CF

<cfquery name=“qryResult” datasource=“skiresorts">

SELECT *

FROM Resort

WHERE state = ‘#stateName#’

</cfquery>

<cfreturn qryResult >

JSmyFirstRowID = result[0].ID; mySecondRowDate = result[1].DATE;

etc.


Coldfusion and ajax23 l.jpg
ColdFusion and Ajax

CFCCFC properties declared in THIS return exactly the way a struct does (including CAPS for key names)

CF<cfset THIS.MyNumber = 1><cfset THIS.MyString = "Whatever"><cfreturn THIS>

JStheCFCMyNumberKey = return[0].KEY // returns "MYNUMBER"theCFCMyNumberValue = return[0].VALUE // returns "1"theCFCMyStringKey = return[1].KEY // returns "MYSTRING"theCFCMyStringValue = return[1].VALUE // returns "whatever"


Coldfusion and ajax24 l.jpg
ColdFusion and Ajax

Q: What kind of things should I watch out for?

A:

Yes, there are a few issues you need to know when using CFAJAX.

First is the fact that CFAJAX will freeze if you attempt to return a multiline string containing line breaks. You can easily work around that by using the ReReplace function to remove line breaks.

<cfset MyReturn = ReReplace(MyReturn,"[#CHR(10)##CHR(13)#]","","ALL")>


Coldfusion and ajax25 l.jpg
ColdFusion and Ajax

Secondly should you wish to use the CFSAVECONTENT tag in your ColdFusion function, you must enclose your output in CFOUTPUT tags. This is because CFAJAX contains the following tag which disables all output except those enclosed in CFOUTPUT tags.

<cfsetting enablecfoutputonly="yes">

Another solution would be to include a CFSETTING tag before and after your block of code, setting the enablecfoutputonly attribute off and on respectively.

<cfsetting enablecfoutputonly="no">

[... Your code here ...]

<cfsetting enablecfoutputonly="yes">


Coldfusion and ajax26 l.jpg
ColdFusion and Ajax

Thirdly (if that’s a word) you may face cross-domain issues when trying to access resources on a different server from your ColdFusion function. By default, CFAJAX uses the HTTP POST method to pass and retrieve data. Doing so will cause the browser to display a “Security violation” popup. You can resolve the issue by using the HTTP GET method by using the following CFAJAX method.

DWREngine.setVerb("GET"); //default is POST


Coldfusion and ajax27 l.jpg
ColdFusion and Ajax

Lastly we can handle errors by including the following code;

Add the following code to the ColdFusion page being used by you CFAJAX code.

<cferror template="error.cfm" type="exception">

Add the following code to the error page specified above.

<cfsetting showdebugoutput="false">

<cfoutput>alert("#JSStringFormat("Error:" & Error.Diagnostics)#");</cfoutput>


Coldfusion and ajax28 l.jpg
ColdFusion and Ajax

Q: Can we look at some code?

A:

Yes!

It’s Show And Tell


Coldfusion and ajax29 l.jpg
ColdFusion and Ajax

Q: What CFAJAX resources are there?

http://www.indiankey.com/cfajax/

http://cfdj.sys-con.com/read/138966.htm

http://www.fusionauthority.com/Techniques/4593-Using-AJAX-with-ColdFusion-Part-I

http://groups.yahoo.com/group/cfajax/


ad