Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member
0 Kudos
1,096

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.

2 Comments
Labels in this area