Advanced Cold Fusion 9 Development Replace with a

Advanced Cold. Fusion 9 Development Replace with a graphic White Master 5. 5” Tall & 4. 3” Wide Unit 5: Developing Advanced GUI’s Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Topics § Introducing Cold. Fusion AJAX functionality § Debugging Cold. Fusion AJAX Applications § Making Background Data Requests § Developing the User Interface § Working with Bind Expressions § Submitting Form Data Asynchronously § Using Special Text Input Fields § Working with <cfgrid> § Visualizing Data with Google Maps § Working with Video ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 2

Introducing Cold. Fusion AJAX Functionality § Cold. Fusion 9 supports a number of tags and functions to help you quickly build powerful AJAX applications. § Direct hooks for integrating with Adobe Spry and making data requests to components § Data binding, with only minimal knowledge of Java. Script § Some of the technology was licensed from third-parties § EXT-JS 3. 0 (http: //www. extjs. com) § Yahoo Interface Library (http: //developer. yahoo. com/yui) § FCK Editor (http: //www. fckeditor. net) § Google Maps (http: //code. google. com) ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 3

Cold. Fusion 9 AJAX Features § A CFML-based tag abstration layer for creating AJAX applications § AJAX Debugger displaying background server communications and field binding activities. § Container tags that lay out or display content § Form elements that support data binding § A menu tag that creates hierarchical DHTML menus § User assistance features that provide tool tips, validation messages, and form completion § Facilities for styling AJAX compoents § Integration with Adobe Spry § Integration with Google Maps § A Flash-based media player, controllable from Java. Script, that plays multiple file formats § Background server requests through Cold. Fusion’s AJAX framework are made to CFC methods with an access type of REMOTE § Data returned from remote methods can be automatically converted into Java. Script Object Notation (JSON), XML (WDDX) or Plain text ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4

Debugging Cold. Fusion AJAX Applications § Cold. Fusion 9 includes a built-in debugger that monitors background server requests, reporting any errors that are encountered and enabling you to easily view the data returned from the server. § Use Firebug or the Microsoft IE developer toolbar to view similar information, inspect the document object model, and dump the contents of complex javascript data structures. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5

Using the Cold. Fusion AJAX Logger § Since AJAX applications send data requests to the server that are by definition, invisible, Cold. Fusion 9 includes a built-in debugger that monitors background server requests, reporting any errors that are encountered. § Enable the AJAX Debug log window in the Cold. Fusion Administrator § Pass the URL variable CFDEBUG to the page running AJAX components § The Cold. Fusion AJAX Logger will appear right-justified on your page ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6

The Cold. Fusion Logging API § Cold. Fusion. Log. debug() § Cold. Fusion. Log. dump() § Cold. Fusion. Log. error() § Cold. Fusion. Log. info() <script language=”Javascript”> var a. Data = [{lastname: ”drucker”, firstname: ”steve”}]; Cold. Fusion. Log. dump(a. Data); </script> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 7

Using Firebug § Firebug is a free, open source plug-in for Firefox § Available from http: //getfirebug. com § Very powerful and intuitive § Inspect and edit HTML § Tweak CSS § Visualize CSS metrics § Monitor network activity § DOM inspection § Logging ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8

Using console. log() § You can output content to the Firebug console using the following syntax: console. log (“Hello World”); § You can pass as many arguments as you want to console. log and they will be concatenated into a row as indicated here: console. log(2, 4, 6, 8, ”foo”, bar); § You can pass any kind of object to console. log() § Complex data types will be displayed as hyperlinked elements, functions, arrays, and objects § Clicking on a link inspects the data type using whichever Firebug tab is appropriate ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9

Inspecting Java. Script Objects § When you return data from the server as part of an AJAX call, its often helpful to inspect the data. § Use console. dir() to inspect complex data types § console. dir() logs an interactive listing of an object’s properties § Calling console. dirxml(element) on any HTML or XML element displays an interactive tree-based XML outline ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10

Walkthrough 1: Debugging AJAX Applications § Enable the Cold. Fusion AJAX Logger. § Use Firebug to inspect the contents of a Java. Script variable that contains data returned from an AJAX request. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 11

Making Background Data Requests § Use <cfsprydataset> to bind a cfc method result to a Java. Script variable § Use controls that natively support binding to a CFC method such as <cftree> and <cfgrid> § Use <cfajaxproxy> to create a client-side Java. Script proxy for a CFC and its methods § Use the <cfajaxproxy> tag to bind fields of Cold. Fusion AJAX form controls as parameters to a specific CFC function, Java. Script function, or HTTP request, and specify Java. Script functions to handle successful or error results § This course will not cover <cfsprydataset> or the Adobe Spry SDK ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 12

Returning Data from Remote CFC Methods § Return data as either XML or in Java. Script Object Notation (JSON) § Use a Cold. Fusion function to convert your abstract data-type into either XML or JSON inside your function and return the result as a string § serialize. JSON() § deserialize. JSON() § is. JSON() § Use the RETURNFORMAT attribute of <cffunction> to specify the encoding standard as Plain, WDDX, or JSON § Invoke the remote method by passing a url variable named RETURNFORMAT with a value of Plain, WDDX, or JSON § Passing a url variable named RETURNFORMAT is preferred as it enables the user of your service to choose whichever format is the easiest for them to work with ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 13

Returning JSON Data § JSON deserializes into native Java. Script data types, making it easier to parse than XML § JSON is less verbose than XML, and therefore takes less time to download resulting in marginally faster execution, depending on the size of the dataset being transferred § JSON is well-supported by all the popular AJAX libraries including EXTJS, j. Query, and Spry § <cfajaxproxy>, <cfgrid>, and <cftree> automatically instruct your remote methods to encode Cold. Fusion data types as JSON ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14

Example: Returning JSON Data (test. cfc) <cfcomponent> <cffunction name="test" access="remote" returntype="array"> <cfreturn ["A", "B", "C"]> </cffunction> </cfcomponent> (test. cfm) <a href=”test. cfc? method=test&returnformat=json”> Click here to download the results as JSON </a> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15

Securing your AJAX Requests § Use the verifyclient=”yes” attribute of <cffunction> so that the service can only be invoked via AJAX by other Cold. Fusion tags in your application. § Enable a JSON Prefix ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 16

Using Verify. Client § Requires remote invocations of the page or calls to functions on the page to include an encrypted security token. § Helps prevent security attacks where an unauthorized party attempts to perform an action on the server § You must enable client management or session management in your application for this feature to operate properly § Using this feature restricts the invocation of your CFC method to pages that respond to client-side Cold. Fusion AJAX features § Client-side CF AJAX features automatically send the proper security token § Using this feature prevents a remote function from being invoked as a web service ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17

Example: Using Verify. Client <cfcomponent> <cffunction name="test" access="remote" returntype="array" verifyclient="true"> <cfreturn ["A", "B", "C"]> </cffunction> </cfcomponent> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 18

Using a JSON Prefix § Helps prevent JSON hijacking whereby a rogue site attempts to access JSON content during the period from which you have left the site, but your login credentials have not expired. § Prefixing your JSON with invalid JSON syntax prevents the rogue site’s script from properly interpreting the JSON § Cold. Fusion’s AJAX tags automatically strips the JSON prefix before evaluating your JSON data § If you are writing custom Java. Script that invokes a remote CFC method using the returnformat=JSON URL parameter, you will need to add code to strip the prefix before evaluating the JSON response § There are several ways to enable the JSON prefix: § In the Cold. Fusion Administrator (Server Settings > Settings) § In the Application. cfc <cfset this. secure. JSON = true> <cfset this. secure. JSONPrefix = “//”> § In the <cffunction> declaration: <cffunction secure. JSON=”true” name=”r 1” access=”remote”> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 19

Using <cfajaxproxy> § Allows you to register and invoke CFC methods in the background from Java. Script. § Define a success handler that will receive a native Javascript data type returned from your component methods § Define an error handler that executes if the specified component method fails for any reason § Basic Syntax: <cfajaxproxy cfc = "CFC name" jsclassname = "Java. Script proxy class name"> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20

Example: Using <cfajaxproxy> (test. cfm) <cfajaxproxy cfc="test" jsclassname="cfc. Test"> <script language="Java. Script"> error. Handler = function(status. Code, status. Msg) { alert(status. Code + ': ' + status. Msg) } success. Handler = function(result){ alert(result); } getdata = function() { /* instantiate CFC */ var remote. Request. Obj = new cfc. Test(); /* configure responders */ remote. Request. Obj. set. Error. Handler(error. Handler); remote. Request. Obj. set. Callback. Handler(success. Handler); /* invoke method */ remote. Request. Obj. echo("this is a test"); } </script> <cfform> <cfinput type="button" name="btn" value="Click Me" on. Click="getdata()"> </cfform> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 21

Walkthough 2: Making Background Requests with <cfajaxproxy> § Secure a web service so that it may only be invoked by Cold. Fusion code located on the same server § Use <cfajaxproxy> to build an AJAX proxy for the spell-check service that you created in unit 3 ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 22

Developing the User Interface § Container tags, such as dialog boxes and draggable windows § Form / Input tags that allow for data binding and a rich set of interactivity § Menu tags that create a x-browser DHTML hierarchical menu § User Assistance tags that support features like autosuggest. tooltips, and progress bars ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 23

Using Container Tags § § § <cfdiv> § Defines an area of a page that can have its contents dynamically updated without the need for a page reload § By default, it outputs a <div> tag § Can be used to output any HTML tag that supports a closing component <cfpod> § Creates an area, wrapped as a box, that includes an optional title bar § Has independent scroll bars <cflayout> § Used to control the appearance of content nested in <cflayoutarea> tags § Content can be arranged into different formats § tabs / accordion § expanding/collapsing grid § horizontal / vertical scrolling regions § Use the fittowindow attribute to have the layout control automatically adjust to the window size § A Javascript API exists that enables you to programatically modify a layout - Cold. Fusion. Layout. methodname <cflayoutarea> § Denotes virtual “pages” of information inside of a <cflayout> § Attribute usage varies depending on the type of <cflayout> <cfwindow> § Creates a virtual “pop-up” window within the browser § A draggable, scrolling window that cannot be blocked by popup-blockers § API enables client-side creation - Cold. Fusion. Window. create. Window() ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 24

Using <cfdiv> to create a redraw region § The <cfdiv> tag creates an independent re-drawable area of the screen § By default, generates an HTML <div> tag along with Javascript functions to dynamically replace its content § Content can be generated from a variety of sources § A Javascript function § A URL on the same server § A CFC method § Data typed into form fields on the same page ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 25

Example: Using <cfdiv> <cfform> Complete the sentence below: <cfinput type="text" name="modifier"> <cfinput type="submit" name="btnsubmit"> </cfform> My instructor is a <cfdiv bind="{modifier@keyup}" tag. Name="span"> person § Note: You will learn about bind expressions later in this unit ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 26

Using <cfpod> to display web content in a dialog box § The <cfpod> tag allows you to wrap content in a box containing a title bar § Unlike <cfwindow>, the boxes drawn by <cfpod> cannot be dragged at runtime by the end-user § Pod content can be defined by either specifying a URL through it's SOURCE attribute, or, alternatively by placing HTML/CFML between its starting and ending tags § While <cfpod> does allow you to change its header and body styles, it can only be positioned on screen through the use of the <cflayout> tag ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 27

Working with <cfpod> syntax <cfpod source = "path" body. Style = "CSS style specification" header. Style = "CSS style specification" height = "number of pixels” name = "string" on. Bind. Error = "Java. Script function name" title = "string" width = "number of pixels"/> or <cfpod body. Style = "CSS style specification" header. Style = "CSS style specification" height = "number of pixels" name = "string" on. Bind. Error = "Java. Script function name" title = "string" width = "number of pixels"> pod contents </cfpod> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 28

Using <cfajaximport> § If the SOURCE attribute of <cfpod> or any other container tag points to a Cold. Fusion file that itself contains other Cold. Fusion AJAX-aware tags, you must place a <cfajaximport> tag on the calling page § Use <cfajaximport> to specify the path to Cold. Fusion’s CFFORM script. Src directory, if it is located somewhere other than /CFIDE/scripts § <cfajaximport> also enables you to specify an alternative location for the CSS files used in Cold. Fusion’s AJAX controls § The params attribute enables you to specify a Google Maps key § If you use a Cold. Fusion AJAX Java. Script function on a page that does not otherwise import any AJAX Java. Script functions, use the <cfajaximport> tag without any attributes import the base Java. Script functions ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 29

<cfajaximport> syntax <cfajaximport css. Src = "local URL path" params = "parameters" script. Src = "local URL path" tags = "comma-delimited list"> § Example: <html> <head><title></head> <body> <cfajaximport tags="cflayout-tab, cfform" > <cfpod title="Edit Article" source="cflayout. cfm" /> </body> </html> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 30

Using <cflayout> to define tabs and collapsible sections § § The <cflayout> tag creates a region on screen that can be configured as one of several different types of layouts § Border A box with a border and up to five layout areas. Layout areas can be set to be collapsible and closeable § HBox A horizontal box where all child components are stacked horizontally § VBox A vertical box where all child components are arranged vertically § Tab A tabbed display where each child component occupies the full width/height of the defined layout area and the user can toggle the display of each § Accordion Similar in functionality to a tabbed panel, it enables you to compress many fields into a compact space. The immediate children of a <cflayout> tag must be <cflayoutarea> tags or nondisplay tags whose bodies contain one or more <cflayoutarea> tags at the top level ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 31

Using <cflayout> <cflayout type="border|hbox|tab|vbox|accordion" active. On. Top=”true|false” align="center|justify|left|right” fill. Height=”true|false” fill. Width=”true|false” fit. To. Window=”true|false” name="string" padding="integer" style="CSS style specification" tab. Height="measurement" tab. Position="top|bottom" tab. Strip=”true|false” title. Collapse=”true|false” width=”integer” height=”integer”> cflayoutarea tags </cflayout> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 32

Using <cflayoutarea> to define virtual pages of a layout § A child tag of <cflayout> § Sets properties of semi-autonomous regions within the overall layout § Properties vary depending on layout type § § Border § HBOX/VBOX § Tab § Accordion See pages 5 -19, 5 -20 for attribute list ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 33

<cflayout> example <cfform style="padding-top: 0 px; margin-top: 0 px; "> <cflayout type="tab“ name="Crime. Record" tabheight="300"> <cflayoutarea name="Crime. Details" title="Crime Details"> Details of crime go here </cflayoutarea> <cflayoutarea title="Narrative" name="Narrative"> Wysiwyg area for Narrative goes here </cflayoutarea> </cflayout> <div align="center"> <cfinput type="submit“ name="btn. Submit" value="Save"> </div> </cfform> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 34

Working with the <cflayout> Java. Script API § <cflayout> has a series of Java. Script functions that can be used to programatically control layout areas through client-side scripting § The function names are case-sensitive ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 35

<cflayout> Java. Script API Functions § Cold. Fusion. Layout. collapse. Area() § Cold. Fusion. Layout. select. Tab() § Cold. Fusion. Layout. create. Tab() § Cold. Fusion. Layout. hide. Tab() § Cold. Fusion. Layout. disable. Tab() § Cold. Fusion. Layout. show. Tab() § Cold. Fusion. Layout. enable. Tab() § Cold. Fusion. Layout. hide. Accordion() § Cold. Fusion. Layout. get. Border. Layout() § Cold. Fusion. Layout. show. Accordion() § Cold. Fusion. Layout. get. Tab. Layout() § Cold. Fusion. Layout. select. Accordion() § Cold. Fusion. Layout. expand. Area() § Cold. Fusion. Layout. collapse. Accordion() § Cold. Fusion. Layout. show. Area() § Cold. Fusion. Layout. expand. Accordion() § Cold. Fusion. Layout. hide. Area() ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 36

Example: <cflayout> Java. Script API <script language="Java. Script"> function fn. Help() { Cold. Fusion. Layout. create. Tab( 'Crime. Record', 'help', 'Help', 'tabhelp. cfm', { inithide: false, selected: true, closable: true } ) } </script> <cfform style="padding-top: 0 px; margin-top: 0 px; "> <cflayout type="tab“ name="Crime. Record” tabheight="300"> <cflayoutarea name="Crime. Details” title="Crime Details"> Details of crime go here </cflayoutarea> <cflayoutarea title="Narrative" name="Narrative"> Wysiwyg area for Narrative goes here </cflayoutarea> </cflayout> <div align="center"> <cfinput type="submit“ name="btn. Submit" value="Save"> <cfinput type="button" on. Click="fn. Help()" name="btn. Help" value="Help"> </div> </cfform> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 37

Using <cfwindow> § The <cfwindow> tag allows you to embed a draggable window into your web page § Similar to <cfpod>, but supports additional features § § Automatic centering on a page § Draggable § Modal § Closable § Resizable § You can specify initial position § Full Java. Script API Impervious to popup blockers ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 38

Deploying <cfwindow> <cfwindow body. Style = "CSS style specification" center="true|false" closable="true|false" draggable="true|false" header. Style = "CSS style specification" height="number of pixels" init. Show="false|true" min. Height="number of pixels" min. Width="number of pixels" modal="true|false" name="string" on. Bind. Error = "Java. Script function name" refresh. On. Show = "false|true" resizable="true|false" source="path" title="string" width="number of pixels" x="numeric pixel coordinate" y="numeric pixel coordinate"> window contents </cfwindow> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 39

Using the <cfwindow> Java. Script API § Cold. Fusion. Window. show(‘name’); § Cold. Fusion. Window. on. Show(); § Cold. Fusion. Window. hide(‘name’); § Cold. Fusion. Window. on. Hide(); § Cold. Fusion. Window. create(); § Cold. Fusion. Window. get. Window. Object(); ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 40

Using <cfwindow> <cfwindow center="yes" width="200" height="150" name="mywindow" title="My First Window" closable="true" draggable="true" resizable="true" initshow="true"/> <cfform> <cfinput type="button" name=”btn. Show” value="Show" on. Click="Cold. Fusion. Window. show('mywindow')"> <cfinput type="button" name=”btn. Hide” value="Hide" on. Click="Cold. Fusion. Window. hide('mywindow')"> </cfform> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 41

Walkthrough 3: Using Layout Controls § Define a tabbed-based layout § Use the Cold. Fusion <cflayout> API ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 42

Working with Bind Expressions § Enables you to create dependencies between form elements, client-side recordsets, Cold. Fusion AJAX container elements, and information fetched from background data requests § Bindings minimize the need to develop custom Java. Script § You cannot use a bind expression to bind to controls in a dynamically loaded region (i. e. a <cflayoutarea> tag that specifies a SOURCE attribute or a <cfselect> that specifies a QUERY attribute) ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 43

Working with Bind Expression Syntax § You can bind data to all AJAX-aware Cold. Fusion tags § The syntax varies, depending on the source of the data and the tag that is using the expression Type Bind Expression Syntax CFC Method CFC: componentpath. function. Name(params) Java. Script function javascript: function. Name(params) URL url: URL? params String / Field Concatenation A string containing one or more instances of a bind parameter such as: {firstname}. {lastname}@{domain} ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 44

Example: Bind Expressions (test. cfc) <cfcomponent> <cffunction name="echo" access="remote" returntype="string" securejson="true" > <cfargument name="myinput" type="string"> <cfreturn myinput> </cffunction> </cfcomponent> (test. cfm) <cfdiv bind="cfc: test. echo('This is a test')" /> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 45

Binding Text Fields with the @modifier § Input field bindings are specified by placing the name of the field in curly braces, i. e. a text field named myfield is represented in a bind expression as {formname: myfield}, or simply {myfield} § Use the @keyup modifier to cause a binding to update as a user types data into a dependent field § Use @click to cause a binding to update when a user clicks in a field § Without using the modifier, the binding updates when the cursor focus changes to a different field § In the following example, the email field is updated as a user types into either the firstname, lastname, or email fields: § Do not use @keyup with CFC bind expressions as it would trigger a CFC request every time the user types a character into a bound field. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 46

Example: Binding Textfields with the @modifier <cfform> First Name: <br /> <cfinput type="text" name="firstname"><br /> Last Name: <br > <cfinput type="text" name="lastname"><br /> Domain: <cfinput type="text" name="domain"><br /> E-Mail: <br /> <cfinput type="text" name="email“ bind="{firstname@keyup}. {lastname@keyup}@{domain@keyup}"> <br /> <cfinput name="btn. Submit" type="submit"> </cfform> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 47

Example: Binding to a Java. Script Function <html> <head> <script language="javascript"> email. Address = function(firstname, lastname, domain) { return (firstname. substring(0, 1) + lastname + '@' + domain); } </script> </head> <body> <cfform> First Name: <br /> <cfinput type="text" name="firstname"><br /> Last Name: <br /> <cfinput type="text" name="lastname"><br /> Domain: <br /> <cfinput type="text" name="domain"><br /> E-Mail: <br /> <cfinput type="text" name="email" bind="javascript: email. Address({firstname@keyup}, {lastname@keyup}, {domain@keyup})"> <br/> <cfinput name="btn. Submit" type="submit"> </cfform> </body> </html> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 48

Binding to <cfselect> § Binding to text fields requires that your bind expression return a string § By default, bind expressions in a <cfselect> are used to populate its OPTIONS array § To populate the select box options your bind expression must return a two-dimensional array § The first element represents the VALUE attribute of the <option> tag § The second element represents the TEXT attribute of the <option> tag § There is no built-in support for specifying the SELECTED attribute of a bound option § One strategy for specifying the SELECTED option of a select-one box is to arrange your array so that the selected item is at array position zero ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 49

Example: Binding to <cfselect> <script language=”Java. Script”> get. Offenses = function(offense) { a. Data = new Array(); a. Data[0] = new Array(); /* set default option if necessary*/ if (offense == null || offense == '') { offense = "Please Select"; } /* set first option in array to selected item*/ a. Data[0][0] = offense; a. Data[0][1] = offense; /* Use <cfoutput> to cache options in browser */ <cfoutput query="q. Crime. Types"> a. Data[#currentrow#]=new Array(); a. Data[#currentrow#][0] = '#js. String. Format(q. Crime. Types. offense)#'; a. Data[#currentrow#][1] = '#js. String. Format(q. Crime. Types. offense)#'; </cfoutput> /* remove selected item */ for (var i=1; i<a. Data. length; i++) { if (a. Data[i][0] == offense) a. Data. splice(i, 1); } } return a. Data; } </script>. . . <cfselect name="offense" bind="javascript: get. Offenses({mydataset. OFFENSE@click})“ bindonload="true" /> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 50

Using a Bind Expression with <cfajaxproxy> § You can configure <cfajaxproxy> to execute based on a change of form data § This approach requires that you code less Javascript for event-driven structures than the <cfajaxproxy> examples presented earlier in this unit § <cfajaxproxy> syntax using a bind expression uses the following syntax: <cfajaxproxy bind = "bind expression" on. Error = "Java. Script function name" on. Success = "Java. Script function name"> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 51

Example: <cfajaxproxy> with bind expression <cfajaxproxy bind="cfc: employee. getlastnamebyid({userid})" onerror="error. Handler" onsuccess="success. Handler"> <script language="Java. Script"> error. Handler = function(status. Code, status. Msg) { alert(status. Code + ': ' + status. Msg) } success. Handler = function(result) { document. forms[0]. lastname. value = result; } </script> <cfform> Enter a user id: <cfinput type="text" name="userid" value=""><br /> Last Name: <cfinput type="text" name="lastname" value=""><br /> </cfform> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 52

Walkthrough 4: Using Bind Expressions § Modify the data entry form from the prior walkthrough to make background data requests and populate form fields § Use <cfajaxproxy> to connect to a remote CFC method § Use bind expressions to populate different types of form fields ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 53

Submitting Form Data Asynchronously § By default when a form is submitted the layout container that holds the form will be overwritten by the result from the form's ACTION page § You can override this default behavior by using the Cold. Fusion 9 javascript method Cold. Fusion. Ajax. submit. Form() § The method sends your form data through the XMLHttp. Request() object, posting it to whatever URL you wish § Note that you could also submit form data directly to Cold. Fusion CFC methods through the <cfajaxproxy> technique discussed previously. § Use Cold. Fusion. Ajax. submit. Form() to quickly AJAX-enable pre-existing forms § Due to a limitation in the underlying XMLHttp. Request() object, you are not be able to post <input type="file"> fields § The content generated by the action page is returned to the callback handler function -- so be sure to trim extraneous whitespace from your output § You will need to explicitly invoke CFFORM validation and/or code your own clientside validation routines ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 54

Using Cold. Fusion. Ajax. submit. Form() <script language="Java. Script"> Cold. Fusion. Ajax. submit. Form( form. Id, URL [ , callbackhandler , errorhandler , http. Method , asynch] ); </script> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 55

Explicitly invoking CFFORM Validation § CFFORM validation is invoked by applying REQUIRED and VALIDATE attributes to your <CFINPUT> tags. § Cold. Fusion. Ajax. submit. Form() does not invoke the generated client-side javascript validation functions § The name of the controller function is _CF_checkformname where formname is the value of the name attribute assigned to your form § The validation function returns true if all fields comply with their validation rules § You should pass the entire form as a Javascript object to the generated form validation function as indicated here: if (_CF_checkmyform(document. myform)) { /* your form data passed! Now submit it! */ } ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 56

Retrieving Object/Attribute Values § Use the Cold. Fusion Java. Script API method Cold. Fusion. get. Element. Value() in order to get the value of an attribute of a bindable Cold. Fusion control § Supports most CF input widgets § cfgrid § cfinput (checkbox, datefield, file, hidden, radio, text) § cfselect § cftextarea § cftree if (Cold. Fusion. get. Element. Value('offense') == 'Please Select') { alert("You must select an offense"); return; } ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 57

Building the Action Page § Whatevever content is output on the action page is returned to the Cold. Fusion. Ajax. submit. Form() success method § Submit your form variables for processing to a CFC method § Disable CF debugging output on the action page using <cfsetting showdebugoutput=”false”> § Tightly control whitespace generation using <cfsetting enablecfoutputonly=”true”> § The following example illustrates a typical action page which pases form data to a CFC method and tightly controls the text output that is transmitted to the Cold. Fusion. Ajax. submit. Form() success handler: ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 58

Example: AJAX Action Page <cfsetting showdebugoutput="no"> <cfsetting enablecfoutputonly="true"> <!--- write to db ---> <cfset cfc. Crime. Service = create. Object("#application. settings. cfcpath#crime"). init( application. google. Map. Key, form. id, form. blocksiteaddress, "Washington", "DC", 0. 1)> <cfset cfc. Crime. Service. update( form. offense, '', form. narrative, form. reportdatetime )> <cfoutput>Record #form. id# Saved</cfoutput> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 59

Deploying Cold. Fusion. Ajax. submit. Form() § See example, pages 5 -41, 5 -42 ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 60

Walkthrough 5: Asynchronously Submitting Forms § Programatically trigger Cold. Fusion’s client-side form validation routines § Inspect the value of a <cfselect> box § Submit form data to an action page asynchrously using Cold. Fusion. Ajax. submit. Form() ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 61

Using Special Text Input Fields § § Cold. Fusion 9 has a series of rich form controls that extend the native functionality of a standard text field and textarea. These include the following: § Autosuggest § Graphical Date Chooser § WYSIWYG Editor The AJAX form controls are derived from the EXT-JS 3. 0 framework ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 62

Using Autosuggest Text Fields § A variant on the standard <cfinput type="text"> field § The goal is to limit the number of characters a user must type in order to select an item § As a user types into the field, a box with suggestions appears beneath it § The data that populates the selection list can be either statically declared, or can be read dynamically from a Cold. Fusion component method § Use the AUTOSUGGESTMINLENGTH attribute to reduce the number of requests to the server and the amount of data that will be returned § The basic syntax for implementing an autosuggest box is the following: <cfinput name="user. Name" type="text" autosuggest="Dave, Steve, Sue"> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 63

Using Autosuggest with a limited data set § You can hardcode values into the AUTOSUGGEST attribute of <cfinput type="text"> as indicated below § This method is best used when the data set is limited to fewer than one hundred entries <cfquery name="qs” cachedwithin="#createtimespan(365, 0, 0, 0)#"> select statename from state order by statename </cfquery> <cfform> <div style="float: left“>Enter the State: </div> <cfinput name="statename" type="text" autosuggest="#valuelist(qs. statename)#"> <br /> </cfform> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 64

Using Autosuggest with large data sets § There may be scenarios where, due to data volume, it is not practical to specify the autosuggest data set as a comma delimited string § Use a bind expression whereby a user's input is passed in the background to a Cold. Fusion component method § The CFC method must be defined with ACCESS="REMOTE" § The CFC method must return an array of strings § The typed text can be passed into the CFC method using the {cfautosuggestvalue} bind parameter ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 65

Example: Using Autosuggest with large data sets <!--- (cfc method) ---> <cffunction name="get. Crime. IDs” access="remote“ returntype="array“ output="false"> <cfargument name="searchstring" type="String"> <cfset local. q = ""> <cfquery name="q" > select id from crime where convert(id, char(10)) like <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments. searchstring#%"> limit 0, 10 </cfquery> <cfreturn list. To. Array(valuelist(q. id))> </cffunction> <!--- front-end GUI ---> <cfinput type="text” name="id" validate="numeric" autosuggest="cfc: #application. settings. cfcpath#crimeservice. get. Crime. IDs( {cfautosuggestvalue})"> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 66

Customizing Autosuggest Behavior § autosuggest. Bind. Delay § autosuggest. Min. Length § delimiter § match. Contains § max. Results. Displayed § on. Bind. Error § show. Autosuggest. Loading. Icon § typeahead ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 67

Working with the Date. Field Selector § Like the autosuggest feature, the graphical date chooser is implemented through the <cfinput> tag § Gives the user a date entry field with an expanding calendar from which users select the date or dates § The user has the option to type in a date instead of using the gui selector § You can customize the appearance of the calendar § Use the day. Names attribute to specify acomma-delimited list that sets the names of the weekdays displayed in the calendar § The month. Names attribute controls the names of the months that appear in the calendar. Specify as a comma delimited list. § The first. Day. Of. Week attribute is an integer in the range 0 -6 that specifies the first day of the week in the calendar: 0 indicates Sunday; 6 indicates Saturday. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 68

Example: Using the Date. Field Selector <label for="reportdatetime"> Report Date: </label> <cfinput type="datefield" name="reportdatetime" bind="{mydataset. REPORTDATETIME@click}" required="yes" validate="date" /> <br /> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 69

Using the WYSIWYG Editor § Implemented through the <cftextarea richtext=”yes”> tag § An abstraction layer for the CK Editor (www. ckeditor. com) § Highly configurable allowing you to potentially restrict functionality to specific groups of users § § Develop custom toolbars § Specify allowable styles § Enable its built-in spell checker You cannot use the WYSIWYG editor if your Cold. Fusion server is configured to process htm files ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 70

<cftextarea> attributes § Width § Height § font. Formats § font. Sizes § Max. Length § Base. Path § Skin § source. For. Tooltip § Toolbar ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 71

Customizing the Editor Toolbar § You can define custom toolbars for the editor by modifying the FCKConfig. Toolbarsets variable located in /CFIDE/scripts/ajax/FCKEditor/fckconfig. js file as indicated below § Adding to the variable makes additional options available via the TOOLBAR attribute of <cftextarea> § You will need to customize the editor in order to support uploading media, including images and Flash § Additional developer documentation is available at http: //docs. cksource. com ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 72

Example: Customizing the Editor Toolbar FCKConfig. Toolbar. Sets["My. Custom. Toolbar"] = [ ['Bold', 'Italic', '-', 'Ordered. List', 'Unordered. List', '-', 'Link', 'Unlink', '-' ], [ 'Cut', 'Copy', 'Paste', '-', 'Image', 'Flash', 'About' ] ]; ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 73

Specifying Allowed WYSIWYG Styles § You can configure specific styles to be supported by the editor § Styles are defined using XML § Default styles are defined in /CFIDE/scripts/ajax/FCKEditor/fckstyles. xml § Create additional style definitions using the following syntax and link them to <cftextarea> using the STYLESXML attribute ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 74

Example: Adding WYSIWYG Styles <Styles> <Style name="Image on Left" element="img"> <Attribute name="style" value="padding: 5 px; margin-right: 5 px" /> <Attribute name="border" value="2" /> <Attribute name="align" value="left" /> </Style> <Style name="Image on Right" element="img"> <Attribute name="style" value="padding: 5 px; margin-left: 5 px" /> <Attribute name="border" value="2" /> <Attribute name="align" value="right" /> </Style> <Style name="Custom Bold" element="span"> <Attribute name="style" value="font-weight: bold; " /> </Style> <Style name="Custom Italic" element="em" /> <Style name="Title" element="span"> <Attribute name="class" value="Title" /> </Style> <Style name="Code" element="span"> <Attribute name="class" value="Code" /> </Style> <Style name="Title H 3" element="h 3" /> <Style name="Custom Ruler" element="hr"> <Attribute name="size" value="1" /> <Attribute name="color" value="#ff 0000" /> </Styles> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 75

Using the <cftextarea richtext=”yes”> javascript API § You can programatically get and set the data in a <cftextarea> using the following Java. Script methods: § Cold. Fusion. Rich. Text. get. Editor. Object(editor. ID). Get. HTML() Retrieves the html contained by the WYSIWYG editor § Cold. Fusion. Rich. Text. set. Value(editor. ID, replacement. HTML) Replaces the contents of the WYSIWYG editor with the specified html function fn. Replace(form. ID, WYSWYGID, search. For, replace. Term) { var msgbox = document. forms['myform'][WYSIWYGID]. id; var html = Cold. Fusion. Rich. Text. get. Editor. Object(msgbox). Get. HTML(); Cold. Fusion. Rich. Text. set. Value(msgbox, html. replace(search. For, replace. Term)); } ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 76

Extending the WYSIWYG editor § Review the following lins that detail how to unlock hidden features of <cftextarea> § Implementing Spell Checking and File Uploads in the WYSIWYG editor http: //www. rakshith. net/blog/? p=58 § The CKEditor Documentation http: //docs. cksource. com/ ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 77

Walkthrough 6: Implementing Rich Text Controls § Define and configure an autosuggest field as well as its associated bindings § Define and configure a datefield control § Use <cftextarea> to invoke a CKEditor control ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 78

Working with <cfgrid> § <cfgrid type=”html”> is AJAX-enabled and can load data incrementally from the server § Allows for client-side sorting of rows § Supports boolean column values (rendered as checkboxes) § Supports drop-down lists in columns (combobox) § Allows the user to choose from a datepicker from within date columns § Allows for row grouping § Supports a grid title § Expand/collapse functionality § Text fields can bind to grid data using bind=”{gridname. columnname}” ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 79

Deploying <cfgrid type=”html”> for use with large datasets § Working with <cfgrid> and large datasets involves incrementally fetching “pages” of records from a Cold. Fusion component through a bind expression. § Pagination Attributes: § bind § Bind. On. Load § Page. Size § Preserve. Page. On. Sort § Stripe. Row. Color § Stripe. Rows ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 80

Defining the Bind Expression § § Pass four variables to the CFC method responsible for returning dynamic data § {cfgridpage} § {cfgridpagesize} § {cfgridsortcolumn} § {cfgridsortdirection} Example: <cfgrid format="html" name="incident. Grid" collapsible="yes" title="Crime Incidents" bind="cfc: crimeservice. get. For. Grid({cfgridpage}, {cfgridpagesize}, {cfgridsortcolumn}, {cfgridsortdirection})" striperows="yes” striperowcolor="cccccc" width="450" height="200" pagesize="5" autowidth="true" colheaderbold="true"> <cfgridcolumn name="reportdatetime" type="date" width="50" header="Date"> <cfgridcolumn name="offense" type="combobox" header="Offense" width="50"> <cfgridcolumn name="blocksiteaddress" type="string_no. Case" header="Address" width="220"> </cfgrid> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 81

Returning Query Data for a Grid § The CFC method access must equal REMOTE § The CFC method must return a STRUCT § The query data returned from the CFC must be returned through the Cold. Fusion function Query. Convert. For. Grid() § Query. Convert. For. Grid() accepts the following arguments: § The query to be converted § The grid page number § The number of rows per page ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 82

Example: Returning Data for a Grid <cffunction name="getforgrid" access="remote" returntype="struct" output="false"> <cfargument name="page. Size"> <cfargument name="gridsortcolumn"> <cfargument name="gridsortdirection"> <cfset local. q = ""> <cfif arguments. gridsortcolumn is ""> <cfset arguments. gridsortcolumn = "reportdatetime"> </cfif> <cfif arguments. gridsortdirection is ""> <cfset arguments. gridsortdirection = "asc"> </cfif> <cfquery name="q"> select blocksiteaddress, id, offense, narrative, DATE_FORMAT(reportdatetime, '%m/%d/%Y') as reportdatetime from crime order by <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments. gridsortcolumn#”> <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments. gridsortdirection#"> </cfquery> <cfreturn query. Convert. For. Grid (q, arguments. pagesize)> </cffunction> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 83

Making a Grid Editable § <cfgrid> attributes: § Use the selectmode=”edit” attribute to render a grid editable § Use the delete=”yes” attribute to allow the users to delete rows § Use insert=”yes” to allow users to insert rows § Pass data from the grid to a Cold. Fusion component method by specifying a bind expression in the onchange attribute of the grid § Date values must be in a supported format (i. e. mm/dd/yyyy) § Specify <cfgridcolumn> types § Boolean § Date § Combobox § Numeric § String_nocase ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 84

Example: Making a Grid Editable <cfgrid selectmode=”edit” name=”crimegrid”. . . > <cfgridcolumn type="date" name="reportdatetime" width="50" header="Date"> <cfgridcolumn type="combobox" values="#valuelist(qoffenses. offense)#" name="offense" header="Offense" width="50" > <cfgridcolumn type="string_no. Case" name="blocksiteaddress" header="Address“ width="220“> </cfgrid> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 85

Example: Making a Grid Editable ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 86

Using <cfgrid selectmode=”edit”> Bind Parameters § The onchange bind expression should pass the following information to the CFC method § {cfgridaction} § {cfgridrow} § {cfgridchanged} <cfgrid selectmode=”edit” on. Change="cfc: #application. settings. cfcpath#. crimeservice. set. From. Grid( {cfgridaction}, {cfgridrow}, {cfgridchanged})" . . </cfgrid> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 87

Saving Data from a Grid <cffunction name="set. From. Grid" access="remote" returntype="boolean" verifyclient="yes"> <cfargument name="cfgridaction" required="yes" type="string" Hint="I, U or D"> <cfargument name="cfgridrow" required="yes" type="struct"> <cfargument name="cfgridchanged" required="yes" type="struct"> <cfswitch expression="#arguments. cfgridaction#"> <cfcase value="D"> <cfquery> delete from crime where id = <cfqueryparam cfsqltype="cf_sql_numeric" value="#arguments. cfgridrow. id#"> </cfquery> </cfcase> . . </cfswitch> <cfreturn true> </cffunction> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 88

Controlling a Grid using the Java. Script API § Use Cold. Fusion. Grid. get. Grid. Object() to access the underlying Ext JS library methods § Cold. Fusion. Grid. refresh() forces the grid to reload and redisplay data § Cold. Fusion. Grid. sort() programmatically sorts the grid § There is not a native method for updating a grid’s contents § The following method allows you to programmatically change the contents of a grid control: function grid. Set. Element. Value(gridname, row, column, thevalue) { var obj. Grid = Cold. Fusion. Grid. get. Grid. Object(gridname); obj. Row = obj. Grid. store. data. items[row]; obj. Row. set(column, thevalue); obj. Grid. view. refresh. Row(row); } ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 89

Determining the active row § The function must be declared within the <head> section of the page § You must use Cold. Fusion’s ajax. On. Load() function to invoke the event listener definition <script language="Javascript"> var selected. Row = 0; init. Grid = function() { var grid = Cold. Fusion. Grid. get. Grid. Object("incident. Grid"); grid. add. Listener("rowclick", function(obj. Grid, row. Number, e){ selected. Row = row. Number; }); } </script> <cfset ajax. Onload("init. Grid")> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 90

Walkthrough 7: Using <cfgrid> § Define an editable <cfgrid> control § Bind a grid to a Cold. Fusion remote method § Bind form fields to grid data § Transmit grid updates to Cold. Fusion for processing § Push data from form fields into a grid ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 91

Visualizing Data with Google Maps § Currently, Cold. Fusion supports only embedding of Google maps § To generate a map, you must provide a valid Google map API key § You must specify a map center position as either a latitude/longitude or a valid street address § End-users must be able to access subdomains of google. com from their web browsers and Javascript must be enabled § You can attach custom events to map markers ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 92

Acquiring a Google Maps Key § You must create a Google account in order to work with most of Google's API's § If you already have a GMail account, then you're ready to proceed § Sign up for a Google account at www. google. com/accounts/New. Account § License keys are tied to both your Google account and the domain name where your application will be hosted § Get a free license key at http: //code. google. com/apis/maps/signup. html § Google Maps has specific licensing terms § There is no limit on the number of page views you may generate per day using the Maps API § There is a limit on the number of geocode requests per day § The Maps API does not include advertising § Your service must be freely accessible to end users § You may not alter or obscure the logos or attribution on the map § Maps should not be used to display illegal activity (such as locations to procure illicit drugs) or reveal personal information § If your service is not freely accessible, you will need to contact Google to discuss paid-license terms ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 93

Acquiring a Google Maps Key ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 94

Registering your Google Maps Key with Cold. Fusion § In the Cold. Fusion Administrator (Server Settings > Settings) § Set this. googlemapkey in the Application. cfc file § Use the <cfajaximport> tag <cfajaximport params="#{googlemapkey='Map API Key'}#"> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 95

Using <cfmap> and <cfmapitem> § <cfmap> dictactes the overall look and feel of the map § <cfmapitem> places map markers on the map § You can the center position by using either the centeraddress attribute or the centerlatitude and centerlongitude attributes. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 96

<cfmap> syntax <cfmap centeraddress="address" centerlatitude="latitude in degrees" centerlongitude="longitude in degrees" collapsible="true|false" continuouszoom="true|false" doubleclickzoom="true|false" height="integer" hideborder="" markerbind="bind expression" markercolor="marker color" markericon="icon path " markerwindowcontent="content" name="name" onerror="Java. Script function name" onload="Java. Script function name" overview="true|false" scrollwheelzoom="true|false" showallmarkers="true|false" showcentermarker="true|false" showmarkerwinodw=""true|false" showscale="true|false" tip="center property marker tips" title="string" type="map|satellite|hybrid|earth|terrain" typecontrol="none|basic|advanced" width="integer" zoomcontrol="none|small|large|small 3 d|large 3 d" zoomlevel="integer" <!--- zero or more <cfmapitem> tags ---> <cfmapitem address="address" latitude="latitude in degrees" longitude="longitude in degrees" markercolor="marker color" markericon="icon path " markerwindowcontent="content" name="name of the map" showmarkerwinodw=""true|false" tip="marker tip" /> </cfmap> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 97

Example: Using <cfmap> <cfmap centeraddress="#form. address# Washington, DC" type="map" width="400" height="200" typecontrol="basic" zoomcontrol="small 3 d" showcentermarker="true" showmarkerwindow="true" zoomlevel="17" name="crimemap" onload="resize. Map"> <cfloop query="qincidents"> <cfmapitem latitude = "#qincidents. lat#" longitude= "#qincidents. lng#" markercolor="FF 3030" markerwindowcontent="<span class='map'>#qincidents. offense#<br />#qincidents. narrative#<br />#qincidents. reportdatetime#</span>"> </cfloop> </cfmap> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 98

Controlling a <cfmap> with Java. Script § Cold. Fusion. Map. add. Event() § Cold. Fusion. Map. add. Marker() § Cold. Fusion. Map. get. Latitude. Longitude() § Cold. Fusion. Map. get. Map. Object() § Cold. Fusion. Map. set. Center() § Cold. Fusion. Map. set. Zoom. Level() ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 99

Example: Adding a Map Event Listener Cold. Fusion. Map. add. Event("crimemap", "click", function(overlay) { if (overlay != null) { var my. Pano = new GStreetview. Panorama(document. get. Element. By. Id("streetview"), {latlng: overlay. get. Lat. Lng()}); } }); ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 100

Walkthrough 8: Using <cfmap> § Use <cfmap> to instantiate a map § Plot data points on a map § Link the map to Google Street View ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 101

Working with Video § <cfmediaplayer> § Supports multiple formats § § FLV § MP 3 § MP 4 Progressive downloads and streamed content from a Flash Media Server via RTMP ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 102

<cfmediaplayer> syntax <cfmediaplayer align="alignment option" autoplay="true|false" bgcolor="hexadecimal value" hideborder="true|false" hidetitle="true|false" controlbar="true|false" full. Screen. Control="yes|no" name="name" on. Complete="Java. Script function name" on. Load="Java. Script function name" on. Start="Java. Script function name" quality="low|high|medium" source="source name" style=="style specification" height="integer" width="integer" wmode="window|opaque|transparent"> </cfmediaplayer> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 103

Styling the Media Player § Use the style attribute <cfmediaplayer name="myplayer" style="bgcolor: EDC 393; titletextcolor: C 0 C 0 C 0; titlebgcolor: EDC 393; controlbarbgcolor: EDC 393; controlscolor: FFFFFF; progressbgcolor: DDDDDD; progresscolor: A 0 B 1 D 5; borderleft: 20; borderright: 20; bordertop: 10; borderbottom: 13" hideborder="false" hide. Title=false controlbar="true" source="myfile. flv"> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 104

Using the <cfmediaplayer> Java. Script API § Cold. Fusion. Mediaplayer. resize() § Cold. Fusion. Mediaplayer. set. Mute() § Cold. Fusion. Mediaplayer. set. Source() § Cold. Fusion. Mediaplayer. set. Volume() § Cold. Fusion. Mediaplayer. start. Play() § Cold. Fusion. Mediaplayer. stop. Play() ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 105

Example: Using the <cfmediaplayer> Java. Script API <script language=”Java. Script”> function play. Video(url) { Cold. Fusion. Mediaplayer. set. Source(‘mediaplayer’, url); Cold. Fusion. Mediaplayer. start. Play(‘mediaplayer’); } </script> <select name="videourl“ on. Change="play. Video(this. options[this. selected. Index]. value)”> <option value="/acfd 9/assets/video/sample 1. flv">Camera 1</option> <option value="/acfd 9/assets/video/sample 2. flv">Camera 2</option> </select> ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 106

Walkthrough 9: Using <cfmediaplayer> § Use the <cfmediaplayer> tag to instantiate a media player § Use the <cfmediaplayer> Java. Script API to play selected videos ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 107

Summary § Use the ? debug url variable to help you troubleshoot Cold. Fusion-AJAX applications § Cold. Fusion supports four layout tags - <cfwindow>, <cfpod>, <cflayout>, and <cfdiv> § Cold. Fusion has a Java. Script API to programmatically manipulate layout controls on the client § Use the BIND attribute to link form fields with data from CFC methods, URL's, and Java. Script § Use the Cold. Fusion. Ajax. submit. Form() method to post form data asynchronously § Cold. Fusion 9 supports several "rich form" controls § Message Box § Progress Bar § Auto. Suggest § WYSIWYG § Grid § Tree § Datefield § Use <cfmap> to plot locations on a Google Map § You can extend the built-in functionality of AJAX controls by getting access to their underlying Java. Script objects § Use <cfmediaplayer> to progressively download a video or stream one from a Flash Media Server ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 108

Unit Review § How do you enable debugging of a CF-AJAX application? § Describe the differences between <cfpod> and <cfwindow> § What kind of data structure must be returned from a cfc method bound to an autosuggest element? . § How can you create custom toolbars for the WYSIWYG editor? § How do you incrementally populate an HTML grid with data from a CFC method? § What information is required in order to plot a point on a Google Map? § You cannot attach special click handlers to a Google Map (true/false)? § Which video formats are supported by <cfmediaplayer>? ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 109

® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1 110