Programming CF Reference Distributed processing JavaScript Flash and ActionScript indexcfm ActionScript Exercises

Session 13: Distributed processing

JavaScript
      functions
            formatting strings, 83
            validation, 266
      passing chart parameters to, 540
      regular expressions, data validation CFML forms, 268-270
      server-to-browser WDDX, 735-739
      statements, strings for use in, 1029

Distributed processing

Processing tasks can be distributed among several computers connected by a network. In this session, we shall consider 2 technologies for distributing a task between a host and connected clients .

Client-side processing

In web applications, many possibilities exist to let the clients do part of the processing. Transmitting Java Applets were among the first client-side technologies available. Later, a large selection of more or less specialized tools for client-side processing have been developed. JavaScript is a tool for client-side processing which today can be used in connection with most popular browser software.

Macromedia's Flash has become very popular and powerful as an another tool for client-side processing. It can also be combined with ColdFusion by means of Flash Remoting , an interface between the Flash processing (See Colin Moock ) on the client-side and ColdFusion on the server-side (See Tom Muck ).

JavaScript

In this session, we shall review JavaScript (See David Flanagan ) combined with CFMX for client-side processing. JavaScript scripts can be embedded in CFML templates and sent as part of the HTML response to a requesting client. Most major browser are able to interpret and execute JavaScript code.

JavaScript is a scripting language similar to CFScript already discussed. In contrast to CFScript , which is interpreted on the server side , JavaScript is executed on the client-side . JavaScript code can be included in CFMX templates surrounded by the tags <SCRIPT  LANGUAGE ="JavaScript" TYPE="javascript"> and </SCRIPT> .

The application domain of JavaScript is wide. Most popular is probably use of the technology for validity checking of the answers to form requests before the form is submitted. Client-side checking saves the transmitting, server-side checking an possible a new request to the client because of invalid answers.

We shall consider another application. The session tests of this course have all been developed as server-side applications. However, they could as well have been developed as distributed applications where the checking of the answer is done at the client-side , and the server is only engaged when you pass the test and want the points recorded at your progress record, or when you request a new test.

The example application we shall illustrate how the test formcan be designed to be checked by the client computer by embedding a JavaScript in the .cfm file sent to the client.

As an example shortcut, we call the form template for index.cfm in the example.This template would look like this:

1. <!--- form.cfm --->
2. < cfoutput>
3. < SCRIPT language="JavaScript" type="text/javascript">
4. function evaluate(){
5. if(document.select.reply[1].checked) document.write("<center><font color=\"Blue\"><h3>Your answer was correct.<br><br>Do you want to continue?</font><br><br><a href=\"form.cfm\">Yes</a>/<a href=\"index.cfm\">No</h3>.</a></center>");
6. if(document.select.reply[0].checked) document.write("<center><h3><font color=\"Red\">Your answer was wrong.</font></h3>Correct answer is: JavaScript is a scripting language.<br><br><font color=\"blue\"><h3>Do you want to continue?</font><br><br><a href=\"form.cfm\">Yes/</a><a href=\"index.cfm\">No</h3></font></center>");
7. if(document.select.reply[2].checked) document.write("<center><h3><font color=\"Red\">Your answer was wrong.</font></h3>Correct answer is: JavaScript is a scripting language.<br><br><font color=\"blue\"><h3>Do you want to continue?</font><br><br><a href=\"form.cfm\">Yes/</a><a href=\"index.cfm\">No</h3></font></center>");
8. if(document.select.reply[3].checked) document.write("<center><h3><font color=\"Red\">Your answer was wrong.</font></h3>Correct answer is: JavaScript is a scripting language.<br><br><font color=\"blue\"><h3>Do you want to continue?</font><br><br><a href=\"form.cfm\">Yes/</a><a href=\"index.cfm\">No</h3></font></center>"); }
9. < / SCRIPT >
< /cfoutput>
11. ><FONT color="blue"><H2>Question 7 from session 13 </H2></FONT>
12. <I><B>Question:</B></I><br> < P>JavaScript is a:</P>
13. <I><B>Answers:</B></I><br>
14. <form name="select" onsubmit="return false">
15. < P><INPUT name="reply" type="radio" onClick="evaluate()" value="1"> JAVA program.</P>
16. < P><INPUT name="reply" type="radio" onClick="evaluate()" value="2"> Scripting language.</P>
17. < P><INPUT name="reply" type="radio" onClick="evaluate()" value="3"> JAVA utility.</P>
18. < P><INPUT name="reply" type="radio" onClick="evaluate()" value="4"> JAVA interpreter.</P>
19. < /form>

The form with the question and answers is contained in the Lines 11. - 19.  It differs in 2 respects from the server-side template form used in the tests. First, this form has no INPUT tag with TYPE="submit" because it should not be submitted to the server. Instead each input tag has an ONCLICK event attribute, which transfers the control to the JavaScript function evaluate() in Lines 4-8 with the VALUE attribute as a parameter . This JavaScript function is executed locally at the client's computer by means of an interpreter included in the browser.

The JavaScript function evaluate() is surrounded by the SCRIPT tags, which again is nested in the CFOUTPUT tags in order to display CFML based strings. The evaluate() function includes 4 if clauses, each of which tests if one of the 4 alternative answers was checked. The if -conditions make use of a JavaScript document object method, document.select.reply[].checked , which select the option checked (it is impossible to check more than one answer). Note that while the answers are numbered from 1 to 4, the JavaScript runs through a list of the options in which they are numbered from 0 to 3 . Another document method, document.write , is used in the script to write if the checked alternative was correct or not.

The above distribution saves some interaction between client and host and let the client share part of the processing load with the host. With modern high memory capacity on the client side, an even more efficient and realistic distribution would be to transfer all the questions with answers prepared by the host for a client requesting a test, and let a JavaScript manage the c omplete test and report back to server the final results only.

Flash and ActionScript

Flash has become known as a technology for developing animations on the net. However,   the last versions of Flash MX,   the scripting language ActionScript , the Flash Remoting and ColdFusion MX represent together a very general environment for developing advanced applications on the net.

Developing such applications requires Flash MX , installation of Flash Remoting and ColdFusion MX on the developer's computer. Running the developed and tested application, does not require more than any other ColdFusion applications.To accept and run a Flash application, the client's computer must have the Flash reader (free) installed.

The scripting language ActionScript , as JavaScript and CFScript , is developed on basis of the ECMA-262 standard. The 3 languages deviate all from the standard, and each other, but there are obvious similarities .

The final FLASH result is called a movie (saved as a .swf file) which is generated from a FLASH document (saved as a .fla file). Usually a document is created by means of the FLASH graphic authoring tool (Figure 1) and ActionScript as a sequence of graphical frames connected to scripts . As an elementary demonstration of Flash application in combination with ColdFusion , a small example is included.

The scenario is again the session tests of this course. An index.cfm page is used to call the Flash application which is loaded down to your computer. During the loading process, which starts by a .html page, the existence of a Flash reader is checkedm and if negative, also loaded before the movie:

1. <!--- index.cfm --->

2. <center>

3. <h3><font color="blue"> FLASH demonstration </font></h3>

4. <p>Do you want to take the session test?</p>

5. <p><a href="questions.html">Yes</a>/<a href="../list.cfm">No</a>

This CFML template returns the questions.html and an attached Flash movie file questions.swf , containing the Flash application, to the requesting client.

The Flash movie contains a sequence of frames which are played subject to the control of the scripts also included in the .swf file. In this example, there are 5 frames:

• init ,
• continue ,
• correct ,
• incorrect ,
• end .

Frame init ( Figure 2 ) displays a question and the multi-choice answers. When a button is clicked, an attached script directs the play through continue ( Figure 3 ) to either frame correct ( Figure 4 ) or incorrect   ( Figure 5 ) depending on the button clicked. Passing continue , to either of these 2 frames, continue 's content is activated as an overlay. The content is 2 buttons, continue Yes or No . A second script connected to both correct and incorrect , determines if the play head should be moved back to init or forward to end ( Figure 6 ) depending on whether the Yes or No button of the overlay is clicked.

The ActionScript code connected to the init frame looks like::

1. //Initialization
2. var sum;
3. stop();
4. answer1.onRelease = function(){
5. gotoAndStop("incorrect");
6. };
7. answer2.onRelease = function()
8. {
9. gotoAndStop("correct");
10. };
11. answer3.onRelease = function(){
12. gotoAndStop("incorrect");
13. };
14. answer4.onRelease = function()
15. {
16. gotoAndStop("incorrect");
17. };

Line 1 is an ActionScript comment while in Line a variable called sum is defined.Then the actions arte stopped until an event occurs. Four events with associated functions are defined in Lines 4-17. Each corresponds to the release of a mouse button over a radio button in frame init. All functions are similar and results in moving the play head to one of two named frames, correct and incorrect .

The overlay continue frame is passed and activated when the play head is moved to either of the 2 frames mentioned above. The script associated with the overlay frame is:

1. //Continue
2. stop();
3. yes_btn.onRelease = function() {
4. gotoAndStop("init");
5. };
6. no_btn.onRelease = function() {
7. gotoAndStop("end");
8. };

The continue frame, which is overlayed on both the correct and the incorrect frame, has a yes and a no button. When the mouse button is released over the yes frame button, the play head is returned to the init frame, while when the mouse button is released over the no frame button, the play head is moved to the end frame.  Neither the correct nor the incorrect frame has separate scripts associated to them.

The script connected to the end frame looks like this:

1. //End
2. if(sum<1) {sum=0};
3. this.createTextField("Result_txt",1,200,200,200,30);
4. Result_txt.text="Your number of correct answers is:" + sum;

The last script contains code which sends the results back to a ColdFusion server-side program for storing in a database or for further processing .

1. //Transmit
2. dataSender = new LoadVars();
3. button_submit.onrelease = function ()
4. dataSender.send("
5. http://nordbotten.net/courses/HSH/sessions/session13/examples/flash/feedback.cfm","_self", "GET");
} stop();

The transmit script creates an object called dataSender   with a method send . In our simple example, no data is sent. The method simply requests a CFMX page, feedback.cfm , from the server ( Figure 7 ). A more efficient technology, FLASH Remoting , exists for client-server collaboration. As FLASH itself,  FLASH Remoting is outside the scope of this course.

Exercises

a. Free manuals and guides are available on the net. You are encouraged to retrieve information necessary for taking advantage of the fact that practically all browser can interprete JavaScript scripts if you can design them.

b. A challenging task will be to work out how a more complete quiz can be developed by means of JavaScript.

Link to the session examples.

Link to the session test.

 

 

 

Other information:

cf_clustering_distributed_config.html