In the first part of this blog, we modeled the logic of game of life using a calculation view and a decision table, In this part let us expose the decision table to a front end UI using XSJS and create an interactive game as shown below.
Wrapper SQL Script :
With just a decision table , we will not be able to generate consecutive generations of cells . To do so, we have to create a wrapper SQL script over the decision table. which will get the results from the decision table and update the source table ( cellgame table ).So, As and when the SQL Script Procedure is executed , cells for next generation will be updated to the cellgame table..
CREATE PROCEDURE "HANA_GARAGE"."PLAY" () LANGUAGE SQLSCRIPT AS
BEGIN
CREATE GLOBAL TEMPORARY TABLE temp_table AS ( SELECT X,Y,S_NEW AS S FROM "_SYS_BIC"."garage.gameoflife/GAME_RULES_DT/RV" ) WITH DATA;
UPDATE "HANA_GARAGE"."CELLGAME" SET s = temp_table.S FROM "HANA_GARAGE"."CELLGAME",temp_table WHERE "HANA_GARAGE"."CELLGAME".X = temp_table.X AND "HANA_GARAGE"."CELLGAME".Y = temp_table.Y;
DROP TABLE temp_table;
END;
In the above SQL Script procedure , we store the results of the decision table in a Global temporary table and we use the temporary table to update the values in the source table ( CELLGAME table ). So, whenever the procedure is called , the source table ( CELLGAME table ) is updated with next generation cells.
XSJS
The following server side javascript calls the procedure created in the previous step and the result of the source table is returned as a JSON.
var procedureCallSql = 'CALL "HANA_GARAGE"."PLAY"',
sqlSelect = 'SELECT * FROM "HANA_GARAGE"."CELLGAME"',
init = $.request.parameters.get("initial");
function close(closables) {
var closable;
var i;
for (i = 0; i < closables.length; i++) {
closable = closables[i];
if(closable) {
closable.close();
}
}
}
function getCellValue(){
var cells = [];
var connection = $.db.getConnection();
var statement = null;
var resultSet = null;
try{
statement = connection.prepareStatement(sqlSelect);
resultSet = statement.executeQuery();
while (resultSet.next()) {
var cell = {};
cell.x = resultSet.getString(1)
cell.y = resultSet.getString(2);
cell.s = resultSet.getString(3);
cells.push(cell);
}
} finally {
close([resultSet, statement, connection]);
}
return cells;
}
function doGet() {
try{
$.response.contentType = "application/json";
$.response.setBody(JSON.stringify(getCellValue()));
}
catch(err){
$.response.contentType = "text/plain";
$.response.setBody("Error while executing query: [" + err.message + "]");
$.response.returnCode = 200;
}
}
function callProcedure(sqlQuery){
var connection = $.db.getConnection();
var statement = null;
var resultSet = null;
try{
statement = connection.prepareCall(sqlQuery);
resultSet = statement.execute();
} finally {
close([resultSet, statement, connection]);
}
doGet();
}
if(init==1){
doGet();
}else{
callProcedure(procedureCallSql);
}
UI.
To visualize the output of the xsjs , we create a HTML page as shown below,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Game Of Life</title>
<!-- <link href="style.css" rel="stylesheet">
-->
<style>
body {
background: #a0a0a0;
padding: 20px;
}
table {
margin: 0 auto;
border-collapse: collapse;
background: black;
}
td {
width: 40px; height: 40px;
background: white;
border: 1px solid black;
}
td.live{
background: black;
border: 1px solid white;
}
button{
display:block;
margin:0 auto;
margin-top:20px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<SCRIPT TYPE="text/javascript">
$( document ).ready(function() {
var result = [];
tdTag = "<td"
tdTag2 = "></td>",
tdTagBlack = '<td class="live"></td>',
htmlTag = "",
trOpen = "<tr>",
trEnd = "</tr>";
$.get("/garage/gameoflife/play.xsjs?initial=1",function(data){
result = data;
console.log(result);
for(i=3;i>=1;i--){
htmlTag+= trOpen;
for(j=1;j<=3;j++){
htmlTag+= tdTag + " id='"+j+""+i+"'"+tdTag2;
console.log(j,i);
}
htmlTag += trEnd;
}
var tableTag = $("table");
tableTag.append(htmlTag);
for(n=0;n<result.length;n++){
var x = parseInt(result[n].x),
y = parseInt(result[n].y),
s = parseInt(result[n].s);
if(s>0){
var identifier = "td#"+x+""+y;
$(identifier).addClass("live");
}
}
});
$("button").click(function(){
$.get("/garage/gameoflife/play.xsjs?initial=2",function(data){
result = data;
for(n=0;n<result.length;n++){
var x = parseInt(result[n].x),
y = parseInt(result[n].y),
s = parseInt(result[n].s);
var identifier = "td#"+x+""+y;
$(identifier).removeClass("live");
}
for(n=0;n<result.length;n++){
var x = parseInt(result[n].x),
y = parseInt(result[n].y),
s = parseInt(result[n].s);
if(s>0){
var identifier = "td#"+x+""+y;
$(identifier).addClass("live");
}
}
});
});
});
</SCRIPT>
</head>
<body>
<table>
</table>
<button type="button">Play</button>
</body>
</html>
Here we use jQuery Get function to request the JSON from play.xsjs file. The resulting JSON is displayed as cells using javascript and CSS. Whenever the play button is clicked, a request is sent to play.xsjs and procedure is called by the xsjs . then the next generation cell pattern is passed to the UI in JSON format. UI creates cells based on the JSON result from xsjs .
Result:
Whenever the Play button is clicked , next generation cells are generated and displayed in the UI as shown below.
- SAP Managed Tags:
2 Comments
