Code Connect Inn: Html revisited, with WRT Applications

WRT (Web RunTime) is a powerful platform for developing applications for your nokia cellphones without compromising the simplicity of programing. It takes the simplicity down to the HTML level! yes, if you know to develop a web page you can also build an application with the same skills and efforts. You can see the power of html today -> wonderful interfaces could be build using Html/Css and robust functionalities can be given using Javascript. WRT applications or widgets contain all these three components, and these applications run on nokia S60 3rd edition and above. Lets create a small WRT application, a Tic Tac Toe game using html,css and standard javascript library. If you wish to add device dependent functionalities like using the camera etc, you have to include additional javascript library provided by nokia. A WRT installation package has '.wgz' extension and includes five files. First decide a name for your application and create a folder with same name. Then open your favorite editor and create four files in that folder.

1)A html file, can be named anything (index.html in my case).

2)A css file with name of your choice (style.css in my case).

3)A Javascript file with name of your choice (jscript.js in mycase).

4)A Plist file named info.plist where you save the application information.

If you need an icon for your application create one and name it icon.png or with whatever extension

The index.html code :


<html>
<head>
<title>Tic Tac Toe</title>
<script language="javascript" type="text/javascript" src="jscript.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="row1"><button id="1" onclick="change(this)">?</button><button id="2" onclick="change(this)">?</button><button id="3" onclick="change(this)">?</button></div>
<div id="row2"><button id="4" onclick="change(this)">?</button><button id="5" onclick="change(this)">?</button><button id="6" onclick="change(this)">?</button></div>
<div id="row3"><button id="7" onclick="change(this)">?</button><button id="8" onclick="change(this)">?</button><button id="9" onclick="change(this)">?</button></div>
<div id="row4"><label id="label">Turn : Player1</label></div>
<button onclick="reset()">Reset</button>
</body>
</html>

The style.css code :


button{
height:50px;
width:50px;
}

The jscript.js code :


Array.prototype.contains = function(obj) {
  var i = this.length;
  while (i--) {
    if (this[i] === obj) {
      return true;
    }
  }
  return false;
}

var win= new Array(new Array('1','2','3'),new Array('4','5','6'),new Array('7','8','9'),new Array('1','4','7'),new Array('2','5','8'),new Array('3','6','9'),new Array('1','5','9'),new Array('3','5','7'));
var arrx = new Array();
var arro = new Array();
var count=0,xcount=0,ocount=0,won=0;
function change(button){

         if(count%2==0){
   button.innerHTML="X";
          arrx[xcount]=button.id;
          button.disabled=true;
   document.getElementById("label").innerHTML="Turn : Player 2";
          count++;
          xcount++;
          if(xcount>=3){
          for(var i=0;i<8 arro="" arrx.contains="" button.disabled="true;" button.id="" button.innerhtml="O" count="" document.getelementbyid="" else="" i="" if="" innerhtml="Turn : Player 1" label="" ocount="" stop="" win="" won="1;">=3){
              for(var i=0;i<8 array="" arro.contains="" arro="new" arrx="new" code="" count="0;" disabled="false;" document.getelementbyid="" function="" i="" if="" innerhtml="?" label="" ocount="0;" reset="" stop="" win="" won="0;" xcount="0;">

The style.css code :






  DisplayName
  TicTacToe
  Identifier
  in.co.presentsoft.tictactoe
  Version
  1.0
  MainHTML
  index.html
  MiniViewEnabled
  


-->

Note : MainHTML entry should contain the html file name as is within the 'string' tag, and DisplayName should be same as the application name and folder that you created. The Icon :

The application can be tested by opening the html file in a web browser. Creating the installation package : Just add the folder with all these files to a zip archive with same name (application name), next rename the zip file extension to '.wgz' and your package is ready. Download my package here

Search This Blog

Saturday, September 18, 2010

Html revisited, with WRT Applications

No comments:

Post a Comment