Mobiledevworld.com | Mobile Developers Community » code example

innerActive mobile ads for Widgets

Rafi Ton — Fri, 07 May 2010 06:37:29 +0000

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:

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

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

Banner 1 - without text goes here

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

Sample Widget

Banner 1 - without text goes here

Hello World

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.

Javascript games on Nokia WRT – Tic Tac Toe

Rafi Ton — Thu, 27 Aug 2009 12:19:11 +0000

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.

Nokia WRT – Simple Tabs with jQuery UI

Rafi Ton — Fri, 24 Jul 2009 10:55:42 +0000

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

Go to http://jqueryui.com/download to download the jquery-ui extension
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.
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:


...



...

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


  
    Text
    Pics
    Vids
  
  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
  
    
  
  
    Top Box Office Trailers
    
      Harry Potter and the Half-Blood Prince
      Ice Age: Dawn of the Dinosaurs
      Transformers: Revenge of the Fallen
      Bruno
      The Proposal

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

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.

Saving data to the phones persistent memory – Nokia WRT Example

Rafi Ton — Wed, 22 Jul 2009 13:43:58 +0000

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:




Pseudo Cookie Code Example






Set Cookie (will expire after 30secs)
Get Cookie
PseudoCookie Text will show here.

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

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:

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

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

The data you stored in the pseudo cookie if all is valid;
‘expired’ if you tried to call the cookie after the cookie was expired;
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.