| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  
  <title>RSPA Tutorial</title>
</head>
<body>
<h1 style="font-weight: normal;"><big><big>Tutorial</big></big>  
<br>
</h1>
<table style="width: 100%; text-align: left;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
      <td style="vertical-align: top; text-align: right;"><a href="index.html">Home</a>  -   <a href="examples.html">Online
Examples</a><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
  
  </tbody>
</table>
<h1 style="font-weight: normal;"></h1>
<h3>   <big style="font-weight: bold;">Some Prerequisits</big></h3>
<br>
<ol>
  <big> </big><li><big>PHP 4 or later (on server).</big></li>
  <big> </big><li><big>Javascript enabled browser (I tested it on
Firefox1.0 + and IE
5.5+).</big></li>
  <big></big>
</ol>
<big>   I may add other prerequisits later.</big><br>
<br>
<h3><big>Simple Usage:</big></h3>
<big>    <br>
1.  In HTML file include the rspa.js <br>
<br>
<big><span style="color: rgb(204, 51, 204);">    
      <small><script </small></span><small><span style="color: rgb(51, 204, 0);">language</span>=<span style="color: rgb(51, 51, 255);">"JavaScript"</span> <span style="color: rgb(51, 204, 0);">type</span>=<span style="color: rgb(51, 51, 255);">"text/javascript"</span><span style="color: rgb(51, 204, 0);">src</span>=<span style="color: rgb(51, 51, 255);">"rspa/rspa.js"</span><span style="color: rgb(204, 51, 204);">></script></span></small> </big><br>
   <br>
2. Provide ID and name for controls like:<br>
<br>
<span style="color: rgb(204, 51, 204);">       
    <small>   <input</small></span><small> <span style="color: rgb(51, 204, 0);">name</span>=<span style="color: rgb(51, 51, 255);">"<big style="font-weight: bold;">text1</big>"</span>
<span style="color: rgb(51, 204, 0);">id</span>=<span style="color: rgb(51, 51, 255);">"<big style="font-weight: bold;">text1</big>"</span>
<span style="color: rgb(51, 204, 0);">value</span>=<span style="color: rgb(51, 51, 255);">"20"</span><span style="color: rgb(204, 51, 204);">><br>
</span><span style="color: rgb(204, 51, 204);">     
          <input</span> <span style="color: rgb(51, 204, 0);">name</span>=<span style="color: rgb(51, 51, 255);">"<big><span style="font-weight: bold;">text2</span></big>"</span>
<span style="color: rgb(51, 204, 0);">id</span>=<span style="color: rgb(51, 51, 255);">"<big style="font-weight: bold;">text2</big>"</span>
<span style="color: rgb(51, 204, 0);">value</span>=<span style="color: rgb(51, 51, 255);">"30"</span><span style="color: rgb(204, 51, 204);">><br>
</span><span style="color: rgb(204, 51, 204);"></span><span style="color: rgb(204, 51, 204);"></span>       
         Result:  <span style="color: rgb(204, 51, 204);"><input</span> <span style="color: rgb(51, 204, 0);">name</span>=<span style="color: rgb(51, 51, 255);">"text3"</span> <span style="color: rgb(51, 204, 0);">id</span>=<span style="color: rgb(51, 51, 255);">"<big style="font-weight: bold;">text3</big>"</span>
<span style="color: rgb(51, 204, 0);"></span><span style="color: rgb(204, 51, 204);">></span><br>
 </small><br>
3. Call server functions from javascript events<br>
<br>
<span style="color: rgb(204, 51, 204);">       
      <small> <input</small></span><small> <span style="color: rgb(51, 204, 0);">type</span>=<span style="color: rgb(51, 51, 255);">"button"</span> <span style="color: rgb(51, 204, 0);">id</span>=<span style="color: rgb(51, 51, 255);">"button1"</span> <span style="color: rgb(51, 204, 0);">value</span>=<span style="color: rgb(51, 51, 255);">"Calculate"</span><span style="color: rgb(204, 51, 204);">  </span></small><span style="color: rgb(51, 204, 0);">onclick</span>=<span style="color: rgb(51, 51, 255);">" new RSPA.Execute(<span style="font-weight: bold;">'MyClass.multiply()'</span>) "</span><small><span style="color: rgb(204, 51, 204);"></span><span style="color: rgb(204, 51, 204);"> ></span></small><br>
<br>
<br>
4. Create the PHP class MyClass  in MyClass.class.php<br>
<br>
<br>
<span style="color: rgb(204, 102, 204);">           
<?php</span><br>
<br>
<span style="color: rgb(153, 51, 153);">              
require_once</span>(<span style="color: rgb(51, 51, 255);">"rspa/components/Form.class.php"</span>);<br>
<br>
<span style="color: rgb(153, 51, 153);">             
class</span> <span style="font-weight: bold;">MyClass</span><small style="font-weight: bold;"> </small> <span style="color: rgb(153, 51, 153);">extends</span> <span style="font-weight: bold;">Form</span><small style="font-weight: bold;">{</small><br>
<br>
   <br>
                  
      <span style="color: rgb(153, 51, 153);">public</span>
<span style="color: rgb(153, 51, 153);">function</span> <span style="font-weight: bold;">multiply()</span><small style="font-weight: bold;"> </small>{<br>
     <br>
               
                  <span style="color: rgb(51, 153, 153);">$val</span> = <span style="color: rgb(51, 153, 153); font-weight: bold;">$this</span><span style="font-weight: bold;">->controls[</span><span style="color: rgb(51, 51, 255); font-weight: bold;">"text1"</span><span style="font-weight: bold;">]->getValue() * </span><span style="color: rgb(51, 153, 153); font-weight: bold;">$this</span><span style="font-weight: bold;">->controls[</span><span style="color: rgb(51, 51, 255); font-weight: bold;">"text2"</span><span style="font-weight: bold;">]->getValue();</span><br>
           <br>
                                
<span style="color: rgb(51, 153, 153); font-weight: bold;">$this</span><span style="font-weight: bold;">->controls["text3"]->setValue(</span><span style="color: rgb(51, 153, 153); font-weight: bold;">$val</span><span style="font-weight: bold;">);</span><br>
        <br>
                  
    }<br>
    <br>
    <br>
            
}<br>
<br>
<span style="color: rgb(204, 102, 204);">    
   ?><br>
<br>
</span>
 
5. Change the configuration value in rspaconf.inc.php<br>
<br>
        $RSPA['class_folder']  has to set to the folder containg your class files.<br>
<br>
<br>
<br>
Syntax of calling Execute:<br>
<br>
new RSPA.Execute('Class.function', {option :value,...});<br>
<br>
Applicable oprtions :<br>
    <small>   <br>
     </small></big><small><span style="font-weight: bold;">debug: </span>          //Whether to show debug window(true/false). Default is false<br>
      <span style="font-weight: bold;">loadStatus: </span>  //Status message to be displayed while waiting for execute. Default 'Loading...'<br>
      <span style="font-weight: bold;">statusPane:</span>  //Where to show status message . Default is '__RSPA__loadStatus',<br>
</small><big><small><small>     <span style="font-weight: bold;"> widget: </span>    
     //ID of the parent component whose child values to
be passed to server for execution. Default is  document. By
default it will pass all components you can restrict it by using a div
to nest components.<br>
      <span style="font-weight: bold;">parameters:</span>  //An array of parameters to be passed to server function. Default is empty array (new Array())<br>
      <span style="font-weight: bold;">controller:</span>     //Relative location of RSPA controller on server. Default:  "rspa/framework/Controller.php"</small>   <br>
     <small><span style="font-weight: bold;">oncomplete:</span>  // Client side function to execute after getting result from server. Default is null</small></small><br>
<br>
<br>
</big>
<h4 style="font-weight: bold;"><big><big>Class Diagram of components</big></big></h4>
<big><img style="width: 896px; height: 750px;" alt="Classdiagram" src="images/class_diagram.png"><br>
<br>
    </big><br>
</body>
</html>
 |