Blog

Archive for the ‘Code examples’ Category

innerActive mobile ads for Widgets

May 7, 2010

I’ve been developing widgets for mobile phones for quite a while now. One the most pressing issues I always face is how to make money from my widgets.

I tested many services that seemed to be promising only to be frustrated from the revenue they generate, the amount of control I had over the ad or the complexity of integration (if at all available for widgest).

Finally I found a solution that I like, simple to integrate and offers me some control over the ad life cycle from innerActive. I moved all my mobile apps to innerActive and this solution works like a charm (and NO – I don’t work there).

Just follow these few simple steps and start making money from your app:

1. get an Application ID for you widget/app from innerActive (contact Aviv Fishler from innerActive: aviv@inner-active.com)

2. load jQuery in your all (I hear that they have a pure JS version coming soon) using something like:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

3. load the innerActive js file in your widget header from: http://cd1.inner-active.com/innerActive.js

<script src="http://cd1.inner-active.com/innerActive.js"></script>

4. add a div for you ad in every place you want to put your add.

<div id="banner1">Banner 1 - without text goes here</div>

please remember to name your divs. This way you can control the ad afterwards

5. set your application id as a global variable:

var innerActive_aid = 'your_app_id_goes_here';

6. set your mode (test or real ads) in your js file:

var innerActive_test = 'true'; // or false to get production ads

7. Load the ad in your div by using the following js code:

getSmallBannerAd("#banner1","");

Calling this function with the div id reloads the ad. So if you want to load a new ad from your add on a certain event just call this function. This is very useful is I need to refresh an ad after it appears on the screen for too long.

See a full implementation below:

index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Sample Widget</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
 <script src="http://cd1.inner-active.com/innerActive.js"></script>
 <script language="javascript" type="text/javascript" src="basic.js"></script>
 <link rel="stylesheet" href="basic.css" type="text/css">
 <META NAME="Generator" CONTENT="Nokia WRT plug-in for Aptana Studio 2.3.0" />
 </head>
 <body onLoad="javascript:init();">
 <div id="banner1">Banner 1 - without text goes here</div>
 <br/><br/>
 <div id="banner2">Banner 1 - without text goes here</div>
 <p>Hello World</p>
 </body>
</html>

basic.js


/*
 * JavaScript file
 */

var innerActive_aid = 'CasualMobile_TicTacToe';
var innerActive_test = 'true';

function init()
{
 getSmallBannerAd("#banner1","");
 getSmallBannerAd("#banner2","showAdText");
}

Download these example widget:
http://mowiwo.com/wp-content/plugins/download-monitor/download.php?id=1
http://mowiwo.com/wp-content/plugins/download-monitor/download.php?id=2

1 people like this post.

Posted in Articles, Code examples | No Comments »

Nokia WRT (Widget) Sudoku Game

September 1, 2009
For Nokia N97, 5800 etc

For Nokia N97, 5800 etc

Here is the second of my Javascript to Nokia WRT (Widgets) game release.

This time – a nice Sudoku game.

For the (few) who don’t know – the goal of Sudoku is to fill each nine-square row, each nine-square column and each nine-square box with the numbers 1 through 9, with each number used once and only once in each section.

As before, the game is absolutely free to play, test, explore (game and code) etc.

You can download the game directly using this link: http://casual-mobile.com/dl/Sudoku.wgz

Like it? Don’t like it? Have any suggestions? Drop a comment below.

9 people like this post.

Posted in Code examples, Downloads | 7 Comments »

Javascript games on Nokia WRT – Tic Tac Toe

August 27, 2009

Picture 23

I started a new initiative to adapt simple Javascript games to Nokia WRT enabled phones. I focus on WRT 1.1 touch devices (currently Nokia N97 and 5800).

The first game I implemented is a classic Tic Tac Toe game where you can play against the phone. My friend Alex Rutgaizer designed the board.

After I have gathered some  more insight, I promise to post my findings, best practices and suggestions in a separated post.

You can download the game and install it to any Nokia N97 and Nokia 5800 phone. Just copy the link to the file in your phone then download and install the wgt file.

Download link: http://mobiledevworld.com/files/2009/08/tic-tac-toe.wgz

The code is absolutely free to modify, play, rewrite etc.

If you have ideas for more games leave me a message.

7 people like this post.

Posted in Code examples, Downloads | 2 Comments »

Nokia WRT – Simple Tabs with jQuery UI

July 24, 2009

Many times we see fancy tab being used to display different content in mobile apps. Since WRT 1.1 supports jQuery, we can use the jQuery UI extension to add nice UI components to our Nokia Runtime widget. Adding tabs is a really (really – trust me) simple task.

Downloading the jQuery UI extension

  1. Go to http://jqueryui.com/download to download the jquery-ui extension
  2. Highly Recommended: unselect all the components that you do not need for your project. Since jQuery and jQuery UI are fairly large select only the components that you need. For this example, we only need the core components and the Tabs widget, so un-check all the rest and click on download. This will download a package called jquery-ui-x.x.x.custom.zip.
  3. Unzip the package into your project directory. Please note that the package includes also the jQuery distribution also so make sure that you don’t have it twice if you downloaded jQuery earlier.

Next, we need to reference jQuery and jQuery UI in our project by adding references to jquery-ui javascript and css in the html header:

<head>
...
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
...
</head>

Creating the Tabs
Next, we need to create a container for our tabs and tabs content:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Text</a></li>
    <li><a href="#tabs-2">Pics</a></li>
    <li><a href="#tabs-3">Vids</a></li>
  </ul>
  <div id="tabs-1">Lorem ipsum viris commune suavitate ne eum, harum nominati ut pri. Congue altera sensibus quo ei, et qui aliquyam democritum eloquentiam, tale quodsi rationibus duo te. Eam munere regione prompta et, eos partem quidam vulputate ea</div>
  <div id="tabs-2">
    <img src="images/jaguar-xfr.jpg" />
  </div>
  <div id="tabs-3">
    <h3>Top Box Office Trailers</h3>
    <ol>
      <li>Harry Potter and the Half-Blood Prince</li>
      <li>Ice Age: Dawn of the Dinosaurs</li>
      <li>Transformers: Revenge of the Fallen</li>
      <li>Bruno</li>
      <li>The Proposal</li>
    </ol>
  </div>
</div>

There are two main parts to this div:

  • An unordered list with the tab names
  • corresponding divs which hold the content which will be displayed when you press the tabs

Converting into Tabs
As final step we need to convert the container div into tabs by referencing it to the jQuery tabs widget. Since I want to create the tabs immediately when I launch the widget I will add the reference in the init() function which is executed when the body element is loaded:

function init() {
  $(function() {
    $("#tabs").tabs();
  });
}
jquery ui tabs in Nokia WRT

jquery ui tabs in Nokia WRT

That’s basically it – it doesn’t get any simpler. The result is great looking tabs as in the simplest way possible.
You can download a fully working widget with the example above: tabNavidation.wgz.
 

4 people like this post.

Posted in Articles, Code examples | No Comments »

Saving data to the phones persistent memory – Nokia WRT Example

July 22, 2009

In many cases one needs to authenticate user. When developing web applications, one would use cookies to do that. However, Nokia Web Runtime (WRT) does not fully support cookies so you can’t use them. Alternatively, Nokia WRT has two widget methods that store data in the phone’s persistent memory which can be used to simulate cookies:

setPreferenceForKey() which stores data on the phones persistent memory, and

preferenceForKey() which retrieves that data from the storage.

The setPreferenceForKey method allows a key to be stored along with its associated preference. The arguments are like name and value pairs. The preference value for the key is stored persistently, so if the widget or device is restarted, the value is retained. However, the values stored by a widget are removed when a widget is uninstalled from the device. This includes the case when a widget is reinstalled; where the old widget is uninstalled, the new widget is installed.

In this example I will demonstrate how to use these functions to create a pseudo cookie.

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pseudo Cookie Code Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<link rel="stylesheet" href="basic.css" type="text/css">
<META NAME="Generator" CONTENT="Nokia WRT plug-in for Aptana Studio 2.0.0" />
</head>
<body onLoad="javascript:init();">
<div id="setCookie" class="bigText"><a href="#" onclick="pseudoCookieSet('this is a test string for the psudoCookie', 'testCookie', 30)">Set Cookie (will expire after 30secs)</a></div>
<div id="getCookie" class="bigText"><a href="#" onclick="printCookie('testCookie')">Get Cookie</a></div>
<div id="txt" class="bigText">PseudoCookie Text will show here.</div>
</body>
</html>

The html code above, basically generates 2 links and a div where I can print the data from the pseudo cookie:

Pseudo Cookie index.html screen shot

Pseudo Cookie index.html screen shot

basic.js:

function pseudoCookieSet (cookieContent, cookieName, duration) {
var cookieStart = Math.round(new Date().getTime() / 1000);
var cookieEnd = cookieStart + parseInt(duration);
var cookieString = cookieContent + '|+|' + cookieEnd;
widget.setPreferenceForKey(cookieString, cookieName);
}

function pseudoCookieGet (cookieName) {
var returnText = '';
var cookieString = widget.preferenceForKey(cookieName);
var cookieElements = cookieString.split("|+|");
var cookieEnd = parseInt(cookieElements[1]);
var timeNow = Math.round(new Date().getTime() / 1000);

if (timeNow > cookieEnd) {
returnText = 'cookie expired';
} else if (cookieString != null) {
returnText = cookieElements[0];
} else {
returnText = 'cookie is empty or not set';
}

return returnText;
}

function printCookie(cookieName) {
var cookieText = pseudoCookieGet(cookieName);
document.getElementById("txt").innerHTML = cookieText;
}

The function pseudoCookieSet (cookieContent, cookieName, duration) sets the pseudo cookie and receives 3 parameters:

  1. cookieContent – the data you would like to store in the pseudo cookie;
  2. cookieName – the name of the pseudo cookie (obviously); and
  3. duration – how long would you like the pseudo cookie to exist before it is expired (seconds)

The function pseudoCookieGet (cookieName) – returns the following values:

  1. The data you stored in the pseudo cookie if all is valid;
  2. ‘expired’ if you tried to call the cookie after the cookie was expired;
  3. An error ‘cookie is empty or not set’ – if the cookie is empty or not set.

you can use delimiters but don’t use the following sequence ‘|+|’ since the function uses it to separate between the stored data and other administrative data. You can also download a fully working widget that demonstrates the above code: pseudoCookie.wgz

7 people like this post.

Posted in Code examples | No Comments »