coldfusion 8 developer tutorial phần 2 pps

For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 204 ] This tel ls us that if there is no prefi x to the browse request on the bind attribute of the <cfdiv> tag, then it will only work with on-page elements. If we prefi x it, then we can pass the data through a CFC, a URL, or through a JavaScript function present on the same page. If we bind to a variable present on the same page, then whenever the bound element updates, the binding will be executed. Bind with Event One of t he features of binding that we might overlook its binding based on an event. In the previous examples, we mentioned that the normal event trigger for binding took place when the bound fi eld lost its focus. The following example shows a bind that occurs when the key is released. <cfform id="myForm" format="html"> This is my edit box.<br /> <cfinput type="text" name="myText"> </cfform> <hr /> And this is the bound div container.<br /> <cfdiv bind="{myText@keyup}"></cfdiv> This is similar to our fi rst example, with the only difference being that the contents of the div are updated as each key is pressed. This works in a manner similar to CFC, JavaScript, and URL bindings. We might also consider binding other elements on a click event, such as a radio button. The following example shows another feature. We can pass any DOM attribute by putting that as an item after the element id. It must be placed before the @ symbol, if you are using a particular event. In this code, we change the input in order to have a class in which we can pass the value of the class attribute and change the binding attribute of the cfdiv element. <cfform id="myForm" format="html"> This is my edit box.<br /> <cfinput type="text" name="myText" class="test"> </cfform> <hr /> And this is the bound div container.<br /> <cfdiv bind="{myText.class@keyup}.{myText}"></cfdiv> Here is a list of the events that we can bind. @click @keyup • • For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book Chapter 10 [ 205 ] @mousedown @none The @none event is used for grids and trees, so that changes don't trigger bind events. Extra Binding Notes If you h ave an ID on your CFForm element, then you can refer to the form element based on the container form. The following example helps us to understand this better. Bind = "url:bindsource.cfm?myEdit={myForm:myText}" The ColdFusion 8 documents give the following guides in order to specify the binding expressions. 1. cfc: componentPath.functionName (parameters) The component path cannot use a mapping. The componentPath value must be a dot-delimited path from the web root or the directory that contains the page. 2. javascript: functionName (parameters) 3. url: URL?parameters 4. ULR?parameters 5. A string containing one or more instances of {bind parmeter}, such as {fi rstna me}.{lastname}@{domain} The following table represents the supported formats based on attributes and tags: Attribute Tags Supported Formats Autosuggest cfi nput type="text" 1,2,3 Bind cfdiv, cfi nput, cftextarea 1,2,3,5 Bind cfajaxproxy, cfgrid, cfselect cfsprydataset, cftreeitem 1,2,3 onChange cfgrid 1,2,3 Source cfl ayoutarea, cfpod, cfwindow 4 • • For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 206 ] Multiple Radio Buttons or Check Boxes and Multiple Select We can also do binding of multiple radio buttons or check boxes. This is done by giving the same name attribute to the radio button collection or to the check box. We can use unique IDs to allow the use of the HTML <label></label> tags for extending the selection to the contents of for tags, based on the usage of the matching ID of the check boxes or radio buttons. In HTML, the use of a for tag would appear like the following, thus making the user interface better. <label for='firstRadio'> <input id='firstRadio' value='1' type='radio'> </label> When we have check boxes or multiple select, the results of the bind are treated like a list. If more than one item is selected, they are stored by separating them with commas similar to any other returning form data. Spry Binding Spry is an independent AJAX library that works with the browser DOM. Spry uses the same curly bracket type of parameters for binding. There are some differences in implementation though. Another thing that you can bind to your forms is the Spry data in what is called a Spry dataset. You would do that as shown in this example: {spryDataset.dataField} If we wish to bind deeper into a Spry dataset in more detail, we can use standard Spry dataset notation to refer to the data. To include a literal brace character in a bind expression, excape the character with a backslash. CFAJAXProxy This is another very popular AJAX programming feature. This tag allows us to bind AJAX component changes to CFCs, JavaScript, and URLs without the requirement of an AJAX component to pass through it. It also allows us to interact with CFCs directly from JavaScript without binding to any other AJAX component. The JavaScript interface is created for us, and we can reuse the CFC as if it was present locally inside the browser JavaScript. It is very simple and acts as a good solution. Let's take a look at how it works. For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book Chapter 10 [ 207 ] CFAJAX Proxy Binding We are going to build two text boxes that do arithmetic. The application only adds or subtracts. The fi rst line of our code binds to the radio button set with the name calcType. We will bind to the click event. When either of the buttons is clicked, the call is made to the JavaScript function doCalc() passing the value of the radio button selected. Then the JavaScript function extracts the values of the two boxes and makes sure that they are fl oating-point numbers. If we didn't convert them, it would see them as text, and append the fi rst text item to the second text item, or we would get some sort of error in subtraction. Then the results are stored and displayed with the alert function. <cfajaxproxy bind="javascript:doCalc({calcType@click})"> <cfform id="myForm" format="html"> Enter Two Numbers.<br /> <cfinput type="text" name="number1" id="number1"><br /> <cfinput type="text" name="number2" id="number2"><br /> <label for="calcAdd"> <cfinput type="radio" value="add" name="calcType" id="calcAdd"> Add</label><br /> <label for="calcSubtract"> <cfinput type="radio" value="subtract" name="calcType" id="calcSubtract"> Subtract</label><br /> </cfform> <script> doCalc = function(thisCalc){ var myResult = 0; var number1 = parseFloat(document.getElementById('number1'). value); var number2 = parseFloat(document.getElementById('number2'). value); switch(thisCalc){ case 'add': myResult = number1 + number2; break; case 'subtract': myResult = number1 - number2; break; } alert(myResult); } </script> For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 208 ] This is what we would see if we entered '23' and '11' and had selected the subtract radio button: We could have sent the results to either a CFC or URL as we did earlier. We do not need to have visible results in this example either, but it was just to show what was going on. We can see that one of the uses of CFAJAXProxy is to bind. CFC Proxy Class Objects An other use of CFAJAXProxy is to extend the remote methods of a CFC into the currently loaded AJAX page on the browser. This function is not binding, but rather an actual proxy. This means that we will extend the functionality of the remote methods right into the web page without writing extensive code. We will be converting our math webpage to support multiplication and division. We could do this easily in the browser. But we want to show the power of extending CFCs, so we will add these two functions in our CFC and work with them from there. <cfajaxproxy bind="javascript:doCalc({calcType@click})"> <cfajaxproxy cfc="serverMath" jsclassname="remoteMath"> <cfform id="myForm" format="html"> Enter Two Numbers.<br /> <cfinput type="text" name="number1" id="number1"><br /> <cfinput type="text" name="number2" id="number2"><br /> <label for="calcAdd"> <cfinput type="radio" value="add" name="calcType" id="calcAdd"> For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book Chapter 10 [ 209 ] Add</label><br /> <label for="calcSubtract"> <cfinput type="radio" value="subtract" name="calcType" id="calcSubtract"> Subtract</label><br /> <label for="calcMultiply"> <cfinput type="radio" value="multiply" name="calcType" id="calcMultiply"> Multiply</label><br /> <label for="calcDivide"> <cfinput type="radio" value="divide" name="calcType" id="calcDivide"> Divide</label><br /> </cfform> <script> jsMath = new remoteMath(); doCalc = function(thisCalc){ var myResult = 0; var number1 = parseFloat(document.getElementById('number1'). value); var number2 = parseFloat(document.getElementById('number2'). value); switch(thisCalc){ case 'add': myResult = number1 + number2; break; case 'subtract': myResult = number1 - number2; break; case 'multiply': myResult = jsMath.doMultiply(number1,number2); break; case 'divide': myResult = jsMath.doDivide(number1,number2); break; } a lert(myResult); } </script> For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 210 ] The fi rst modifi cation to our code is to use the CFAJAXProxy tag in order to generate a proxy connection to the remote CFC component. We use an alias name of remoteMath for this component. This becomes a JavaScript class that helps in creating a local object that proxies between this page and our CFC. We then add two more radio buttons so that we have an interface for doing the multiplication function and the division function in our example. The next new line is where we create an object called jsMath in this example. This is not actually JavaScript math, but a JavaScript object that uses the remoteMath class to build an object for communicating with the CFC. Lastly, we check the value of the selected radio button. Then we use our jsMath object, and communicate with the remote server. The name of the remote method is the same as we use on our object and then we pass the argument parameters to the server. The return value is put in our myResult variable just as we did from JavaScript in add and subtract. If we use the same numbers and click Divide, the following result will be obtained. Here is the screenshot of the page in action and the CFC code. <cfcomponent output="false"> <cffunction name="doDivide" access="remote"> <cfargument name="number1"> <cfargument name="number2"> <cfreturn arguments.number1 / arguments.number2> </cffunction> <cffunction name="doMultiply" access="remote"> <cfargument name="number1"> <cfargument name="number2"> <cfreturn arguments.number1 * arguments.number2> </cffunction> </cfcomponent> For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book Chapter 10 [ 211 ] Now in a real-world application, we might be looking for some data or updating a database if we were doing this type of proxy function interaction. The point is that all the coupling and AJAXing is done with little code. It is truly a remarkable work as the Adobe engineers have worked hard for this connectivity. This is how ColdFusion has become better than ever before! One thing that we have not yet dealt with is the callback functions. There are two standard types of callback object methods in remote CFC proxy classes, the setCallbackHandler() method and the setErrorHandler() method. We are going to modify our code so that the results are automatically sent to these handlers with our CFC interaction. Here is the fi nal code for our examples. <cf ajaxproxy bind="javascript:doCalc({calcType@click})"> <cfajaxproxy cfc="serverMath" jsclassname="remoteMath"> <cfform id="myForm" format="html"> Enter Two Numbers.<br /> <cfinput type="text" name="number1" id="number1"><br /> <cfinput type="text" name="number2" id="number2"><br /> <label for="calcAdd"> <cfinput type="radio" value="add" name="calcType" id="calcAdd"> Add</label><br /> <label for="calcSubtract"> <cfinput type="radio" value="subtract" name="calcType" id="calcSubtract"> Subtract</label><br /> <label for="calcMultiply"> <cfinput type="radio" value="multiply" name="calcType" id="calcMultiply"> Multiply</label><br /> <label for="calcDivide"> <cfinput type="radio" value="divide" name="calcType" id="calcDivide"> Divide</label><br /> </cfform> <script> jsMath = new remoteMath(); doCalc = function(thisCalc){ var number1 = parseFloat(document.getElementById('number1').value); var number2 = parseFloat(document.getElementById('number2').value); jsMath.setCallbackHandler(showResult); jsMath.setErrorHandler(showError); switch(thisCalc){ For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 212 ] case 'add': showResult(number1 + number2); break; case 'subtract': showResult(number1 - number2); break; case 'multiply': jsMath.doMultiply(number1,number2); break; case 'divide': jsMath.doDivide(number1,number2); break; } } showResult = function(result){ alert(result); } showError = function(statusCode,statusMsg){ alert("status: "+statusCode+"\n"+statusMsg); } </script> We set the callback handers inside our doCalc() function for the jsMath object. These methods are default names in the ColdFusion AJAX plumbing. It should be noted that we do not want to create remote methods with these names in our CFCs. We removed the variable that we were using and have now created another function called showResult() for handling the addition and subtraction. Now, let us look at the multiply case statement block and the divide case statement block for our code. There is no evidence as to how the output from these calls is being handled. This is why we have declared the setCallbackHandler() and setErrorHandler() methods. In those methods, we put the name of the callback handler functions without their parents. This is a standard way to handle the referencing of a callback handler in JavaScript. We can see that the standard parameters are passed to the error handler. Run the modifi ed code and pass in a zero for the bottom number, and this is what you will see. We could produce much more elaborate code for handling the error. We could pass structured code back to the success method, and do much more there also. We kept this example as simple as possible to help us understand the power and features of how ColdFusion AJAX programming works for both binding and proxy functions. For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book Chapter 10 [ 213 ] This handles all the data type conversions between ColdFusion and browser JavaScript variables and structure. This makes ColdFusion the easiest and fastest application for doing AJAX. Also, this platform provides a high level of power and ease to developers. Client Debugging There are a number of tools that can make AJAX programming more effective. We will look at Firebug and the built-in debugger that is a part of ColdFusion. Firebug One o f the best tools available for AJAX development is Firebug. This tool is a plug- in for Firefox with many abilities. The one we will look at specifi cally here is the ability to drill down into the DOM structure of a browser page. We are going to look at how this tool works. First, we will have a look at the previous example and take the radio button for our divide selection. Here is a screenshot of the page in which we run fi rebug. Refer to http://www.getfirebug.com/ for the features of this plug-in. [...]... that particular item as we did earlier The additional items that the ColdFusion AJAX includes are listed here We would just enter them in the prompt line as we did for the radio button ID • ColdFusion. Layout.getBorderLayout (name) • ColdFusion. Grid.getGridObject (name) [ 21 4 ] For More Information: www.packtpub.com /coldfusion- 8- developer- tutorial/ book ... our console view If we then go to the right pane of firebug and click on the DOM item, we will get the structure details of the object There are several types of objects that are explained in detail in ColdFusion and this gets loaded with AJAX pages These can be entered by clicking on the Console tab present in the left panel Then as you can see, you have an entry line at the bottom where you can enter . number1 - number2; break; } alert(myResult); } </script> For More Information: www. packtpub.com /coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 2 08 ] This is. Information: www. packtpub.com /coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 21 2 ] case 'add': showResult(number1 + number2); break; case 'subtract': . name="number2"> <cfreturn arguments.number1 * arguments.number2> </cffunction> </cfcomponent> For More Information: www. packtpub.com /coldfusion - 8 - developer - tutorial / book