...
Table of Contents minLevel 3 outline true style none
Background
Greenhouse Monitoring System will be taken as an example to illustrate creating User Interface applications using TQL Queries.
TQL Queries Vs REST Services
REST is an architecture style for designing networked applications and in virtually all cases, the HTTP protocol is used. In many ways, the World Wide Web itself, based on HTTP, can be viewed as a REST-based architecture. By this definition of REST coupled with the fact that TQL Queries are executed over an HTTP endpoint that is automatically generated when models are deployed to TQLEngine, make TQL Queries Restful in nature.
...
| TQL Queries | Restful Services |
|---|---|
XML Oriented (Request & Response) (Note that TQLEngine supports both JSON & XML; the recommended guideline is XML for TQL Queries readability) | Restful Services are JSON oriented |
TQL Queries are sent as payload, therefore the HTTP Method to be used always POST. | Method can be: GET/PUT/POST/DELETE |
UI Technologies
Most commonly used UI technologies are:
- HTML,CSS and JavaScript
- JavaScript Frameworks (Angular JS, Backbone JS, etc.)
- HTML5, CSS/CSS3 and JavaScript/jQuery
Design Patterns
Model-View-Controller (MVC) is popular design pattern to develop HTML/JS app that consumes TQL Queries.
| Component Name | Technology | In this tutorial |
|---|---|---|
| View | HTML, CSS | index.html and style.css |
| Model | JS - Services & Factories independent of underlying framework (OR) Angular JS provided Model | Angular Model Service (services/queryService.js) |
| Controller | JS - Can be independent of underlying framework (Write your own using JS) or Angular provided model | Angular Controller and bind with HTML using Angular directive ng-controller. (controllers/mainController.js) |
| Configuration | Static Configuration File | config/url_config.js |
Implementation Steps
All the implementation steps can be tried out using any of the HTML/JS IDE of your choice.
Let's start out by creating a folder in y
Creating View
a) Main View - Single Page HTML file
...
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
body{
background: url(images/greenhouse.jpg);
background-size: cover;
padding: 0; margin: 0;
}
.header{
background: #000; color: #fff; margin-bottom:
20px;
}
.greenhouseDetails{
background: #39404a;
color: #fff;
}
.statusBlock{
background: #39404a;
color: #fff;
padding: 30px; margin: 30px 0;
} |
Creating Model
- Model is where we wrap all the TQL Queries that are part of the application.
- In the example below we have JS Methods that
- Discover App URL
- Find Greenhouse
- Find Lane
- Find Zone
- Copy the content of this model in services/queryService.js file.
...
Gather App related queries: In this example we will wrap only one single query to get Greenhouse information.
Code Block language xml theme Midnight title App Queries - Greenhouse Monitoring App linenumbers true <Query> <Find> <Greenhouse> <GreenhouseID ne=''/> </Greenhouse> </Find> </Query>
Creating Controller
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
angular.module('GreenhouseUIApp', [])
.controller('mainController', function($scope, QueryService) {
$scope.greenhouses = [];
$scope.httpEndpoint = "";
$scope.wsEndpoint = "";
$scope.getGreenhouses = function(){
QueryService.getGreenhouses($scope.httpEndpoint).then(function(response){
if(angular.isArray(response.Find.Result.Greenhouse)){
$scope.greenhouses = response.Find.Result.Greenhouse;
} else if(angular.isObject(response.Find.Result.Greenhouse)){
$scope.greenhouses.push(response.Find.Result.Greenhouse);
}
$scope.selectedGreenhouse = $scope.greenhouses[0];
console.log($scope.greenhouses);
});
};
$scope.replaceIPWithHostName = function(){
$scope.wsEndpoint = $scope.wsEndpoint.replace( /:.*?\:/, '://'+greenhouseHostName+':' );
$scope.httpEndpoint = $scope.httpEndpoint.replace( /:.*?\:/, '://'+greenhouseHostName+':' );
};
QueryService.discoverGreenhouseEndpoint().then(function(data){
angular.forEach(data.Find.projectEndpointMap.DataMap, function(obj){
if(obj.Value.indexOf("ws:") > -1){
$scope.wsEndpoint = obj.Value;
} else if(obj.Value.indexOf("http:") > -1 || obj.Value.indexOf("https:") > -1){
$scope.httpEndpoint = obj.Value;
}
});
$scope.replaceIPWithHostName();
$scope.getGreenhouses();
});
} |
Deploy & Test
It is recommended to serve your applications (html,css,js) files directly from the running TQLEngine.
Download & Install TQLEngine
Please refer to download section to download and install TQLEngine.
Attach applications to the project
Now you can point your browser to URL and load the UI
...