CPAINT :: Cross-Platform Asynchronous INterface Toolkit

Please note: CPAINT nor this website is under active development.

Developer's Guide : Frontend

Frontend Guide: Pages

introduction
integrating CPAINT
working with CPAINT
using the proxy
non-CPAINT data-sources
browser compatibility tests

Working With CPAINT

Continuing from our sales tax example in the backend usage guide, here is our sample HTML file, with two fields (one for user input and one for outputting the result we get from the backend) and a button to fire the CPAINT call.

<html>
  <head>
    <title>Sales tax calculator example</title>
    <script src="cpaint2.inc.js" type="text/javascript"></script>
    <script type="text/javascript">
      <!--
      var cp = new cpaint();
      //-->
    </script>
  </head>
  <body>
    <form>
      Sales Amount:
      <input type="text" size="10" maxlength="10" name="sales_amount" id="sales_amount" />
      <br /><br />
      Sales Tax (7.5%):
      <input type="text" size="10" name="sales_tax" id="sales_tax" />
      <input type="button" name="Calculate" value="Calculate Tax" />
    </form>
  </body>
</html>

Now that we've got our form, next we need to code two functions - one fire the cpaint object and one to handle the results from the backend. These functions will be named calc_tax and tax_results, respectively. These functions can go in the second JavaScript block (directly under the cpaint object constructor).

function calc_tax() {
  cp.call('calc_tax.php', 'calculate_tax', tax_results,
    document.getElementById('sales_amount').value);
}

function tax_results(result) {
  document.getElementById('sales_tax').values =
    result.getElementsByTagName('ajaxResponse').item(0).firstChild.data
}

In the calc_tax function, we execute cpaint.call(), which reads the value of the input box with the id of sales_amount, create the XMLHTTP object to communicate with the backend, retrieve the data from the backend, parse the XML into an object array, and pass that object array to the tax_results function. The tax_results function simply updates the input box with the id attribute of sales_tax.

That's all there is to it! So our final HTML page looks like this:

<html>
  <head>
    <title>Sales tax calculator example</title>
    <script src="cpaint2.inc.js" type="text/javascript"></script>
    <script type="text/javascript">
      <!--
      var cp = new cpaint();

      function calc_tax() {
        cp.call('calc_tax.php', 'calculate_tax', tax_results, document.getElementById('sales_amount').value);
      }

      function tax_results(result) {
        document.getElementById('sales_tax').value = result.getElementsByTagName('ajaxResponse').item(0).firstChild.data
      }
      //-->
    </script>
  </head>
  <body>
    <form>
      Sales Amount:
      <input type="text" size="10" name="sales_amount" id="sales_amount" />
      <br /><br />
      Sales Tax (7.5%):
      <input type="text" size="10" maxlength="10" name="sales_tax" id="sales_tax" />
      <input type="button" name="Calculate" value="Calculate Tax" />
    </form>
  </body>
</html>