HTSdesign.com - What is Waf

The HTS Web Application Framework is a PHP and Javascript based framework designed to make simple web applications easy to design and implement. The framework implements a custom tag engine with an automated Javascript and/or PHP Event Model and automates the transfer of data to and from the server.

It's easiest to demonstrate with a bit of sample code. Here is a simple application that looks at the selected state and presents a list of cities to choose. When the user selects a state and city the selected city's population is displayed.


<head>
    <title>City, State</title>
</head>
<body>
    <hts:control id="state" type="select"
        option = "Choose State..., choose, true"
        option = "MA, MA, 0"
        option = "NY, NY, 0"
        
        event="onchange:state"
    />
    
    <hts:control id="city" type="select"
        option="Waiting...,w,0"
        
        disabled = "true"
        
        event="onchange:state, city"
    />
    
    population: <hts:control id="population" type="text" disabled="true" value="?" />
</body>

"state" is populated with 2 state abbreviations (MA and NY). An event handler for "onchange" is assigned. The handler will be passed the current value of state when it is called.

"city" is empty and disabled and has its own "onchange" handler that will receive the values of "state" and "city".

A text field, "population" is created to receive the population of the selected city.

Our first event handler is for "state:onchange" and its handler will be implemented in Javascript. The handler will examine the value of "state" and populate the "city" list.


function cc_citystate(){ }
cc_citystate.prototype = new Control();

cc_citystate.prototype.state_onchange = function(params)
{
    var cities = new Array();
    cities["NY"] = new Array();
    cities["NY"][""]="Choose City...";
    cities["NY"]["New York"]="New York";
    cities["NY"]["Albany"]="Albany";
    
    cities["MA"] = new Array();
    cities["MA"][""]="Choose City...";
    cities["MA"]["Boston"]="Boston";
    cities["MA"]["Hyannis"]="Hyannis";
                         
    this.city.setOptions(cities[params['state'][0]]);
    document.getElementById(this.city.id).disabled = false;
}

PHP
The handler for "city:onchange" will be implemented in PHP. It examines the values of "state" and "city" and does a (simple) table lookup for the population. It then assigns the population to the "population" text field.


<?php
class cc_citystate extends Control
{
    function city_onchange($params)
    {
        $pops = array(
          "MA" => 
             array("Hyannis" => "13,251", "Boston" => "600,000"),
          "NY" => 
             array("New York" => "8 Million", "Albany" => "95,658"));

        $GLOBALS["{$this->Id}_population"]->setAttribute("Value", 
            $pops[$params['state'][0]][$params['city'][0]]);
    }
}
?>

For this simple demonstration either event handler could have been implemented in Javascript or PHP. In more complex examples careful thought must be given. Most simple things should be handled using Javascript for performance. PHP would be used when, for example, data must be pulled from a database; or when business logic or other IP must be hidden.

The three files (cc_citystate.class.php, cc_citystate.class.js and cc_citystate.html) are all that is required to run the application. The url "http://someserver.tld/app_runner.php?app=citystate" is loaded in the browser to start the application.

This project is evolving quickly. I truly believe this can be a powerful tool for creating robust and useful web applications. Since it is implemented as a tag engine pages come together quickly.

Applications can be prototyped quickly using PHP for all event handlers. Having all your event handlers coded in PHP eliminates the need for cross-browser testing in the early stages of development. Once the application is feature complete, the event handlers can be moved to Javascript for performance.