Client side programming model

In Web 2.0 programming model, the client side focuses on two tasks:
  1. Collecting the user input and posting it to the server.

    In web programming, the most common way to post data is using HTML form. For example, in common JSP programming model, the login.jsp is as follows:

    the Login window

    <form action="login.jsp">
    		UserName:<input type="text" name="username"><br>
    		Password:<input type="password" name="password"><br>
    		<input type="submit" value="Login">
    </form>

    In BTT Web 2.0 programming model, it uses XML or JSON as the data format to send the request, so the form data needs to be transferred to XML or JSON format. On the client side, you can use JavaScript utility class to transfer a form to BTT XML request data.

    /**
     * @param action server side operation name
     * @param formNode the form that is used to submit the data
     * @param contextName  the name of the context that is used to collect the user input data
     * @param requestFormatter (optional)
     * the name of the formatter that is used to format the request data to context
     * if no request formatter provided, using default naming rule
     * @param responseFormatter (optional)
     * the name of the formatter that is used to unformat the context to response
     * if no response formatter provided, using default naming rule
     */
    function generateXml(action, formNode, contextName, requestFormatter, responseFormatter)

    The input data element name of the form is the same to the field name defined in the context definition file. For example, after you input the UserName and Password, the generateXml function will generate the following XML data:

    <?xml version="1.0"?>
    <xml_request>
    		<action>login</action>
    		<data_formatter>loginRequestFmt</data_formatter>
    		<response_formatter>loginResponseFmt</response_formatter>
    		<data>
    			<loginCtx>
    				<username>admin</username>
    				<password>pwd</password>
    			</loginCtx>
    		</data>
    </xml_request>

    After generating the XML data, you can send the data to the server asynchronously. A JavaScript function asynSend is provided to implement this. The parameter callBack is a JavaScript function which will be invoked after receiving the data.

    /**
     * This function will be used to asynchronously send the xml data to the server side
     * @param xmlData the request data(xml formatted)
     * @param callBack the javascript function will be called after receiving the response
     */
    function asynSend(xmlData, callBack)
  2. Parsing the response from the server and refreshing the view by JavaScript callback method.

In BTT Web 2.0 programming model, the code of login on the client side is as follows:

<script> 
		function login() {
        var formNode = document.getElementById("loginForm");
        var xmlData = generateXml("login", formNode);
        asynSend(xmlData, loginCallBack);
    }

    function loginCallBack(responseData) {
        //parse responseData
        //refresh page
    }
</script>

<form id="loginForm">
		UserName:<input type="text" name="username"><br>
		Password:<input type="password" name="password"><br>
		Locale:<select name="locale">
		<option value="en">English</option>
		<option value="ch">Chinese</option>
		</select><br>
		<input type="submit" title="Login" onclick="login();return false;">
</form>