coldfusion 8 developer tutorial phần 2 pps

We might also consider binding other elements on a click event, such as a radio button.. In this code, we change the input in order to have a class in which we can pass the value of the

Trang 1

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

This is my edit box.<br />

</cfform>

<hr />

And this is the bound div container.<br />

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

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

•

Trang 2

@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:

Bind cfajaxproxy, cfgrid, cfselect cfsprydataset,

•

Trang 3

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>

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

Trang 4

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

Enter Two Numbers.<br />

<cfinput type="radio" value="add"

name="calcType" id="calcAdd">

Add</label><br />

<cfinput type="radio" value="subtract"

name="calcType" id="calcSubtract">

Subtract</label><br />

</cfform>

doCalc = function(thisCalc){

var myResult = 0;

var number1 = parseFloat(document.getElementById('number1') value);

switch(thisCalc){

case 'add':

myResult = number1 + number2;

break;

case 'subtract':

myResult = number1 - number2;

break;

}

alert(myResult);

}

</script>

Trang 5

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 cfc="serverMath" jsclassname="remoteMath">

Trang 6

Add</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>

jsMath = new remoteMath();

var myResult = 0;

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>

Trang 7

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

</cffunction>

</cffunction>

</cfcomponent>

Trang 8

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

Add</label><br />

<cfinput type="radio" value="multiply"

name="calcType" id="calcMultiply">

Multiply</label><br />

<cfinput type="radio" value="divide"

name="calcType" id="calcDivide">

Divide</label><br />

</cfform>

jsMath = new remoteMath();

var number1 = parseFloat(document.getElementById('number1').value); var number2 = parseFloat(document.getElementById('number2').value);

jsMath.setCallbackHandler(showResult);

jsMath.setErrorHandler(showError);

Trang 9

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

Trang 10

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

Định dạng
Số trang	11
Dung lượng	676,38 KB