American Auto-Matrix: AAM Products

Objective: This article shows you how to use code deployed to your web server as a way to query and display a value such as we are doing on our website. We are using the enhanced servlet capabilities of our Aspect FT Facility Server to grab the value and display it in real time on our web page which is hosted on our web server. No code is deployed to the AspectFT Facility server!

Skill Level: An understanding of web technologies including HTML, JavaScript, Ajax, ASP and/or PHP is required.

There are multiple types of requests that can be made of the servlet, such as a directory listing to obtain a list of all objects that can be read/written, a read, a write, a multiple read, and a multiple write. For the purpose of this article we will be displaying a single value, the outside air temperature, and will make use of the ValueReadServlet.

Requests are made via a simple URL and the default response is JSON encoded in the body of the HTML response. JSON is a lightweight standard for data transmission used widely by the web community, with libraries available for all major languages. Additional information about JSON can be found at www.json.org.

This task can be broken down into two areas of code. The first is the backend code which is server side code such as ASP, PHP, Java, etc. This will be used to query the servlet, pass along the user credentials, and obtain the value. The second is the HTML and Javascript/jQuery which allows us to dynamically update the value on the page in a specified interval without the need to refresh the web page.

The Backend Code

Below we are demonstrating the backend code in ASP or PHP. The backend code is used to query the enhanced servlet for the outside air temperature. In the ASP code below, we create a Microsoft.XMLHTTP object and use it to send a request to receive the result from our AspectFT Facility server. In the PHP code, we use libcurl a free and easy to use client-side URL transfer libarary.


                                  
                                    Dim oHttp
                                    Dim strHTML
                                    Dim strUser
                                    Dim strPass
                                    Dim strUrl
                                     
 

                                    strUser = "username"
                                   strPass = "password"
                                    strUrl = "http://www.yourdomainhere.com:7226/servlet/ValueReadServlet? _ 

                                    objectPath=/Engineering/oatemp"
                                    
 

                                    
                                    
                                   Set oHttp = Server.CreateObject("Microsoft.XMLHTTP")
                                    
                                    oHttp.Open "GET", strUrl, false , strUser, strPass
                                    
                                    oHttp.Send
                                    strHTML = oHttp.ResponseText
                                    
                                    Set oHttp = Nothing
                                    Response.Write(strHTML)


                                  
                                    $username = "aamuser";
                                    $password = "default";
                                    $serlvetHost = "http://www.yourdomainhere.com:7226/servlet/ValueReadServlet? _ 

                                    objectPath=/Engineering/oatemp";
                                    
 

                                    
                                    
                                   $curl;
                                   $curl = curl_init();
                                    curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 2);
                                    curl_setopt($curl, CURLOPT_HEADER, false);
                                    curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
                                    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
                                    curl_setopt($curl, CURLOPT_USERPWD, "$username:$password");
                                    curl_setopt($curl, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
                                    curl_setopt($curl, CURLOPT_URL, $serlvetHost);
                                    
                                    $result = curl_exec($curl);
                                    curl_close($curl);
                                    echo $_GET['callback'] . '(' . $result . ');';

Let’s examine the code further. Lines 1 through 5 are variables being defined for later use.

Lines 6 through 8 are the username, password, and path (url) used to query the servlet. You will need to enter your username and password within the quotations. The path is in a familiar url format. It includes the domain name and port along with the path to the ValueReadServlet. The last part of the url string is the objectPath parameter. In our instance, “/Engineering/oatemp” is our outside air object that is in our project. “Engineering” is the application within our project and “oatemp” is a component.

The rest of the code creates the Microsoft.XMLHTTP object and obtains the response value.

Let’s examine the code further.

Lines 1 through 3 are the username, password, and path (url) used to query the servlet. You will need to enter your username and password within the quotations. The path is in a familiar url format. It includes the domain name and port along with the path to the ValueReadServlet. The last part of the url string is the objectPath parameter. In our instance, “/Engineering/oatemp” is our outside air object that is in our project. “Engineering” is the application within our project and “oatemp” is a component.

The rest of the code creates the cURL object and obtains the response value. Please note that cURL must be enabled in your php web server.

Client Side Code

A combination of Javascript, jQuery, Ajax and HTML are used to take the value from the backend code and update the value on the screen.

First the value has to have a place to live. We create a DIV as a place holder and put it into our HTML page.

The DIV has an “id” parameter. This is required in order for our code to know where to put the value. This is placed into your web page at the location where you want the value to be displayed.

While jQuery can be used for multiple reasons, here it is used to handle the JSON object passed from the servlet and to manipulate our DIV to update the value. jQuery is a fast and concise JavaScript library. For more information and to download the jQuery library, go to www.jquery.com.

Below we demonstrate how the jQuery library is included into our page. This will be in the head section of your HTML page along with any other includes.

The following JavaScript is placed into a script tag in the head section of your HTML page.


                                	
                                    //Path to the code which queries the application for the value (This needs to be modified)
                                    var path = "/script/getValueReadServlet.asp"
                                    //The name of the HTML DIV tag where the value is to be updated.  (This needs to be modified)
                                    var divName = "outside_air";
                                    //Interval to refresh the value (in miliseconds)
                                    var interval = 30000
                                	 
 

								
                                     $('document').ready(function()
                                     {
                                          getReadValue();
                                          setInterval( "getReadValue()", interval );
                                     });
	                                 
 

                                  $.ajaxSetup ({
                                             cache: false
                                    });
                                 
 

                                  function getReadValue(){
                                             $.getJSON(path,
                                                            function(data){
                                                                   var divTag = "#" + divName;
                                                                   //variable to hold the returned value
                                                                   var value = "";
                                                                   value = data['value'];
                                                                   $(divTag).empty();
                                                                   $(divTag).append(value + "°");
                                                            });
                                
                                    }

Lines 1 through 6 are comments and variables. Line 2 defines location and name of the backend code we wrote in the "Backend Code" section of this article. Our ASP backend code has been saved to a file called “getValueReadServlet.asp” and is located on our web server within a “script” directory off of the root of the web server. In the event that you are using PHP instead, this would be the name of the php file which was created.

Line 4 is the id of the DIV tag we created above. This tells our JavaScript where to put the live value.

The interval on line 6 is the amount in milliseconds in which to refresh the div with the latest live value from the servlet.

Lines 7 through 11 is a jQuery function. The $(document).ready() function calls the function we created which will do most of the work. In addition, it specifies how often that function should be called, which was defined on line 6.

The jQuery function on line 12 is used to define global settings for AJAX requests.

For more information on jQuery functions please refer to jQuery documentation on their website.

The function getReadValue() is created to obtain the value and update the DIV. This function uses Ajax with jQuery to obtain the value by taking the path specified on line 2. The value is returned to the function through the data variable which is then used to update the outside_air DIV.

Summary

This article provides a technical person a glimpse of what it takes to perform a read transaction with AspectFT using enhanced servlet capabilities. After finishing this article, the user has the knowledge to begin exploring the further use of enhanced servlets.

Enhanced Servlet Capabilities

The Backend Code

Client Side Code

Summary