317 lines
14 KiB
HTML
317 lines
14 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<LINK rel="stylesheet" type="text/css" href="../../../rzahg/ic.css">
|
||
|
|
|
||
|
|
<title>Scenario: Create a Bean Scripting Framework application</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<BODY>
|
||
|
|
<!-- Java sync-link -->
|
||
|
|
<SCRIPT LANGUAGE="Javascript" SRC="../../../rzahg/synch.js" TYPE="text/javascript"></SCRIPT>
|
||
|
|
|
||
|
|
<h3><a name="bsfscene"></a>Scenario: Create a Bean Scripting Framework application</h3>
|
||
|
|
|
||
|
|
<p>Programming skills in JavaScript code are more prevalent than programming skills using JavaServer Pages (JSP) tags. Using the Bean Scripting Framework, JavaScript programmers can gradually introduce JSP tags in their JavaScript applications without completely rewriting the source code. The BSF method not only reduces the potential of programming errors, but also provides a painless way to learn a new technology.</p>
|
||
|
|
|
||
|
|
<p>This scenario illustrates how to implement a BSF application using JavaScript within JSP tags.</p>
|
||
|
|
|
||
|
|
<p><strong>Develop the BSF application</strong></p>
|
||
|
|
<p>At ABC elementary school, John Doe teaches third grade mathematics. He wants to help his students memorize their multiplication tables and thinks a small Web-based quiz could help meet his objective. However, John Doe only knows JavaScript.</p>
|
||
|
|
|
||
|
|
<p>Using the Bean Scripting Framework to help leverage his JavaScript skills, John Doe creates two JSP files, multiplication_test.jsp and multiplication_scoring.jsp.</p>
|
||
|
|
|
||
|
|
<p>In the multiplication_test.jsp file, John Doe uses both client-side and server-side JavaScript code to generate a test of 100 random multiplication questions, displayed using a three minute timer. He then writes the multiplication_scoring.jsp file to read the data submitted by the multiplication_test.jsp file and to generate the scoring results.</p>
|
||
|
|
|
||
|
|
<p>John Doe creates these two files:</p>
|
||
|
|
|
||
|
|
<p><strong>multiplication_test.jsp</strong></p>
|
||
|
|
<pre> <html>
|
||
|
|
<head>
|
||
|
|
<title>Multiplication Practice Test</title>
|
||
|
|
<script language="javascript">
|
||
|
|
var countMin=3;
|
||
|
|
var countSec=0;
|
||
|
|
function updateDisplay (min, sec) {
|
||
|
|
var disp;
|
||
|
|
if (min <= 9) disp = " 0";
|
||
|
|
else disp = " ";
|
||
|
|
disp += (min + ":");
|
||
|
|
if (sec <= 9) disp += ("0" + sec);
|
||
|
|
else disp += sec;
|
||
|
|
return(disp);
|
||
|
|
}
|
||
|
|
function countDown() {
|
||
|
|
countSec--;
|
||
|
|
if (countSec == -1) {
|
||
|
|
countSec = 59;
|
||
|
|
countMin--;
|
||
|
|
}
|
||
|
|
document.multtest.counter.value = updateDisplay(countMin, countSec);
|
||
|
|
if((countMin == 0) &&(countSec == 0)) document.multtest.submit();
|
||
|
|
else var down = setTimeout("countDown();", 1000);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body bgcolor="#ffffff" onLoad="countDown();">
|
||
|
|
<%@ page language="javascript" %>
|
||
|
|
<h1>Three Minute Multiplication Drill</h1>
|
||
|
|
<hr>
|
||
|
|
<h2>Remember: this is an opportunity to excel!</h2>
|
||
|
|
<p>
|
||
|
|
<form method="POST" name="multtest" action="multiplication_scoring.jsp">
|
||
|
|
<div align="center">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<h3>Time left:
|
||
|
|
<input type="text" name="counter" size="9" value="03:00" readonly>
|
||
|
|
</h3>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input type="submit" value="Submit for scoring!">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<table border="1">
|
||
|
|
<%
|
||
|
|
var newrow = 0;
|
||
|
|
var q_num = 0;
|
||
|
|
function addQuestion(num1, num2) {
|
||
|
|
if (newrow == 0) out.println("<tr>");
|
||
|
|
out.println("<td>");
|
||
|
|
out.println(num1 + " x " + num2 + " = ");
|
||
|
|
out.println("</td><td>");
|
||
|
|
out.print("<input name=\"" + q_num + "|" + num1 + ":" + num2 + "\" ");
|
||
|
|
out.println("type=\"text\" size=\"10\">");
|
||
|
|
out.println("</td>");
|
||
|
|
if (newrow == 3) {
|
||
|
|
out.println("</tr>");
|
||
|
|
newrow = 0;
|
||
|
|
}
|
||
|
|
else newrow++;
|
||
|
|
q_num++;
|
||
|
|
}
|
||
|
|
for (var i = 0; i < 100; i++) {
|
||
|
|
var rand1 = Math.ceil(Math.random() * 12);
|
||
|
|
var rand2 = Math.ceil(Math.random() * 12);
|
||
|
|
addQuestion(rand1, rand2);
|
||
|
|
}
|
||
|
|
%>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</html></pre>
|
||
|
|
|
||
|
|
<p><strong>multiplication_scoring.jsp</strong></p>
|
||
|
|
<pre> <html>
|
||
|
|
<head>
|
||
|
|
<title>Multiplication Practice Test Results</title>
|
||
|
|
</head>
|
||
|
|
<body bgcolor="#ffffff">
|
||
|
|
<%@ page language="javascript" %>
|
||
|
|
<h1>Multiplication Drill Score</h1>
|
||
|
|
<hr>
|
||
|
|
<div align="center">
|
||
|
|
<table border="1">
|
||
|
|
<tr><th>Problem</th><th>Correct Answer</th><th>Your Answer</th></tr>
|
||
|
|
<%
|
||
|
|
var total_score = 0;
|
||
|
|
function score (current, pos1, pos2) {
|
||
|
|
var multiplier = current.substring(pos1 + 1, pos2);
|
||
|
|
var multiplicand = current.substring(pos2 + 1, current.length());
|
||
|
|
var your_product = request.getParameterValues(current)[0];
|
||
|
|
var true_product = multiplier * multiplicand;
|
||
|
|
out.println("<tr>");
|
||
|
|
out.println("<td>" + multiplier + " x " + multiplicand + " = </td>");
|
||
|
|
out.println("<td>" + true_product + "</td>");
|
||
|
|
if (your_product == true_product) {
|
||
|
|
total_score++;
|
||
|
|
out.print("<td bgcolor=\"\#00ff00\">");
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
out.print("<td bgcolor=\"\#ff0000\">");
|
||
|
|
}
|
||
|
|
out.println(your_product + "</td>");
|
||
|
|
out.println("</tr>");
|
||
|
|
}
|
||
|
|
var equations = request.getParameterNames();
|
||
|
|
while(equations.hasMoreElements()) {
|
||
|
|
var currElt = equations.nextElement();
|
||
|
|
var splitPos1 = currElt.indexOf("|");
|
||
|
|
var splitPos2 = currElt.indexOf(":");
|
||
|
|
if (splitPos1 >=0 && splitPos2 >= 0) score(currElt, splitPos1, splitPos2);
|
||
|
|
}
|
||
|
|
%>
|
||
|
|
</table>
|
||
|
|
<h2>Total Score: <%= total_score %></h2>
|
||
|
|
<h3><a href="multiplication_test.jsp">Try again?</a></h3>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html></pre>
|
||
|
|
|
||
|
|
<p>Perform these steps to see how John Doe uses BSF to implement JavaScript in a JSP application:</p>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li><p><strong>Give your files a .jsp extension.</strong></p></li>
|
||
|
|
|
||
|
|
<li><p><strong>Use server-side JavaScript code in your application.</strong>
|
||
|
|
<br>The multiplication_test.jsp file incorporates both client-side and server-side JavaScript. Server-side JavaScript is similar to client-side JavaScript; the primary difference consists of using a different set of objects. Whereas client-side Javascript programmers invoke document and window objects, server-side JavaScript programmers, using the Bean Scripting Framework, invoke a set of objects provided by the JSP technology. Also, client-side scripts are enclosed in <script> tags, but server-side scripts use JSP scriptlet and expression tags. </p>
|
||
|
|
|
||
|
|
<p>Examine the following blocks of code:</p>
|
||
|
|
|
||
|
|
<pre> <script language="javascript">
|
||
|
|
var countMin=3;
|
||
|
|
var countSec=0;
|
||
|
|
function updateDisplay (min, sec) {
|
||
|
|
var disp;
|
||
|
|
if (min <= 9) disp = " 0";
|
||
|
|
else disp = " ";
|
||
|
|
disp += (min + ":");
|
||
|
|
if (sec <= 9) disp += ("0" + sec);
|
||
|
|
else disp += sec;
|
||
|
|
return(disp);
|
||
|
|
}
|
||
|
|
function countDown() {
|
||
|
|
countSec--;
|
||
|
|
if (countSec == -1) {
|
||
|
|
countSec = 59;
|
||
|
|
countMin--;
|
||
|
|
}
|
||
|
|
document.multtest.counter.value = updateDisplay(countMin, countSec);
|
||
|
|
if((countMin == 0) && (countSec == 0)) document.multtest.submit();
|
||
|
|
else var down = setTimeout("countDown();", 1000);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
...
|
||
|
|
<body bgcolor="#ffffff" onLoad="countDown();">
|
||
|
|
...
|
||
|
|
<form method="POST" name="multtest" action="multiplication_scoring.jsp">
|
||
|
|
...
|
||
|
|
<input type="text" name="counter" size="9" value="03:00" readonly>
|
||
|
|
...</pre>
|
||
|
|
|
||
|
|
<p>The JavaScript code contained in the <script> block implements a timer set within the <input> field named counter. The onLoad event handler in the <body> tag causes the browser to load and execute the code when the page is loaded.</p>
|
||
|
|
|
||
|
|
<p>The document.multtest.submit() statement causes the form named multtest to be submitted when the timer expires.</p></li>
|
||
|
|
|
||
|
|
<li><p><strong>Identify the code to the BSF function.</strong>
|
||
|
|
<br>This code example, from the multiplication_test.jsp file, displays the use of a JSP directive. This directive tells the WebSphere Express BSF function that this file is using the JavaScript language, and that the JavaScript code is enclosed by the <% ... %> scriptlet tags. The out implicit JSP object in this code example, creates the body section of a table from 100 randomly generated questions.</p>
|
||
|
|
|
||
|
|
<pre> ...
|
||
|
|
<%@ page language="javascript" %>
|
||
|
|
...
|
||
|
|
<%
|
||
|
|
var newrow = 0;
|
||
|
|
var q_num = 0;
|
||
|
|
|
||
|
|
function addQuestion(num1, num2) {
|
||
|
|
if (newrow == 0) out.println("<tr>");
|
||
|
|
|
||
|
|
out.println("<td>");
|
||
|
|
out.println(num1 + " x " + num2 + " = ");
|
||
|
|
out.println("</td><td>");
|
||
|
|
out.print("<input name=\"" + q_num + "|" + num1 + ":" + num2 + "\" ");
|
||
|
|
out.println("type=\"text\" size=\"10\">");
|
||
|
|
out.println("</td>");
|
||
|
|
|
||
|
|
if (newrow == 3) {
|
||
|
|
out.println("</tr>");
|
||
|
|
newrow = 0;
|
||
|
|
}
|
||
|
|
else newrow++;
|
||
|
|
|
||
|
|
q_num++;
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 0; i < 100; i++) {
|
||
|
|
var rand1 = Math.ceil(Math.random() * 12);
|
||
|
|
var rand2 = Math.ceil(Math.random() * 12);
|
||
|
|
|
||
|
|
addQuestion(rand1, rand2);
|
||
|
|
}
|
||
|
|
|
||
|
|
%>
|
||
|
|
...</pre></li>
|
||
|
|
|
||
|
|
<li><p><strong>Read the results.</strong>
|
||
|
|
<br>To score the results of the practice drill, John Doe uses the request implicit JSP object in the multiplication_scoring.jsp file to obtain the POST data created within the <form> tags in the multiplication_test.jsp file.</p>
|
||
|
|
|
||
|
|
<p>The multiplication_scoring.jsp file uses the POST data to build an output file containing the original question, the student's answer, and the correct answer, and then prints the text in a table format using the out implicit object.</p>
|
||
|
|
|
||
|
|
<p>The following code example from the multiplication_scoring.jsp file illustrates the use of the request and out JSP objects:</p>
|
||
|
|
|
||
|
|
<pre> ...
|
||
|
|
<%@ page language="javascript" %>
|
||
|
|
...
|
||
|
|
<%
|
||
|
|
var total_score = 0;
|
||
|
|
function score (current, pos1, pos2) {
|
||
|
|
var multiplier = current.substring(pos1 + 1, pos2);
|
||
|
|
var multiplicand = current.substring(pos2 + 1, current.length());
|
||
|
|
var your_product = request.getParameterValues(current)[0];
|
||
|
|
var true_product = multiplier * multiplicand;
|
||
|
|
out.println("<tr>");
|
||
|
|
out.println("<td>" + multiplier + " x " + multiplicand + " = </td>");
|
||
|
|
out.println("<td>" + true_product + "</td>");
|
||
|
|
if (your_product == true_product) {
|
||
|
|
total_score++;
|
||
|
|
out.print("<td bgcolor=\"\#00ff00\">");
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
out.print("<td bgcolor=\"\#ff0000\">");
|
||
|
|
}
|
||
|
|
out.println(your_product + "</td>");
|
||
|
|
out.println("</tr>");
|
||
|
|
}
|
||
|
|
var equations = request.getParameterNames();
|
||
|
|
while(equations.hasMoreElements()) {
|
||
|
|
var currElt = equations.nextElement();
|
||
|
|
var splitPos1 = currElt.indexOf("|");
|
||
|
|
var splitPos2 = currElt.indexOf(":");
|
||
|
|
if (splitPos1 >=0 && splitPos2 >= 0) score(currElt, splitPos1, splitPos2);
|
||
|
|
}
|
||
|
|
|
||
|
|
%>
|
||
|
|
...
|
||
|
|
<h2>Total Score: <%= total_score %></h2>
|
||
|
|
...</pre>
|
||
|
|
|
||
|
|
<p><strong>Note:</strong> Although using separate scriptlet blocks of code for different portions of a conditional expression is common in JSP files implemented in Java, it is invalid for JSP files implemented using JavaScript through the Bean Scripting Framework. The JavaScript code must be entirely contained within the scriptlet tags.</p>
|
||
|
|
|
||
|
|
<p>The following code example illustrates invalid usage:</p>
|
||
|
|
|
||
|
|
<pre> <% if (pass == 0) %>
|
||
|
|
<i>pass is true</i>
|
||
|
|
<% else %>
|
||
|
|
<i>pass is not true</i></pre></li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<p><strong>Deploy the BSF application</strong></p>
|
||
|
|
<p>You assemble and deploy BSF applications in the same manner as JSP applications.</p>
|
||
|
|
|
||
|
|
<p>Deploy the BSF code examples in WebSphere Express to view this applications processing and output. Use these quick steps to deploy the application.</p>
|
||
|
|
|
||
|
|
<p><strong>Note:</strong> The intent of these "quick steps" is to provide you with instant application output. However, the supported method for deployment is the same as for standard JSP files.</p>
|
||
|
|
|
||
|
|
<p>Perform these steps:</p>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
|
||
|
|
<li><p>Add your BSF files to your application using the WebSphere Development Studio Client. Copy your JSP files to your application directory.</p></li>
|
||
|
|
|
||
|
|
<li><p>Start the application server.</p></li>
|
||
|
|
|
||
|
|
<li><p>Open a browser and request your BSF application. Use the following URL to request your application:</p>
|
||
|
|
|
||
|
|
<pre>http://<em>your.server.name</em>:<em>port</em>/<em>jspFileName</em>.jsp</pre>
|
||
|
|
|
||
|
|
<p>where <em>your.server.name</em> is the host name of your server, <em>port</em> is the port number, and <em>jspFileName</em> is the name of your JSP file.</p></li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|