Mobiledevworld.com | Mobile Developers Community » beginner guides http://mobiledevworld.com Mobile Developers and Professionlas Community Sun, 09 May 2010 18:20:10 +0000 http://wordpress.org/?v=2.8.1 en hourly 1 innerActive mobile ads for Widgets http://mobiledevworld.com/2010/05/07/inneractive-mobile-ads-for-widgets/ http://mobiledevworld.com/2010/05/07/inneractive-mobile-ads-for-widgets/#comments Fri, 07 May 2010 06:37:29 +0000 Rafi Ton http://mobiledevworld.com/?p=709 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.
]]> http://mobiledevworld.com/2010/05/07/inneractive-mobile-ads-for-widgets/feed/ 0 Beginners’ guide to Mobile App development with Nokia WRT – Designing the widget http://mobiledevworld.com/2009/07/18/beginners%e2%80%99-guide-to-mobile-app-development-with-nokia-wrt-designing-the-widget/ http://mobiledevworld.com/2009/07/18/beginners%e2%80%99-guide-to-mobile-app-development-with-nokia-wrt-designing-the-widget/#comments Sat, 18 Jul 2009 08:19:19 +0000 Rafi Ton http://mobiledevworld.com/?p=21 In this part we will start building a simple Nokia WRT widget for the mobile mini blogging site – woofim.com. First, I would like to have the following functionality:

  1. Have a simple menu to navigate
  2. Be able to see the latest photos woof, video woofs and text posts on the site;
  3. See a larger image of the photos
  4. Use the soft keys to navigate and have a simple about screen

As I previously noted, Nokia WRT widgets are basically html, css and javascript pages but unlike standard web pages where you use multiple pages, Nokia WRT uses a single html page where you turn on and off various sections of the page to show different content.

Lets see a practical example:

<!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> Woofim WRT Widget - tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
                <script type="text/javascript" src="WRTKit/WRTKit.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.0.0" />
</head>
  <body onload="init()">
<!-- woofim.com logo -->
<div id="logo">
<img src="images/woofim_logo_356px.png" width="220"/>
</div>

<span style="color: #008000;"><!-- main menu section -->	</span>
<div id="mainMenuDiv">
<div id="menuLatestPhotos">
<h2><a href="#">Latest Photos</a></h2>
</div>

<div id="menuLatestVideos">
<h2><a href="#">Latest videos</a></h2>
</div>

<div id="menuLatestTexts">
<h2><a href="#">Latest Text Woofs</a></h2>
</div>
</div>
<!-- content sections -->
<div id="latestPhotos"></div>
<div id="latestVideos"></div>
<div id="latestTexts"></div>

<center>
<div id="woofItemMedia"></div>
</center>

  </body>
</html>

Which creates the following main screen:

WRT woofim.com main screen
WRT woofim.com main screen

As you can see things are a bit messy here – all the divs are shown as a long single list. This is where the css file kicks in. We need basically to hide all the elements except for the logo and main menu. As you can see in the html above, I assigned to all the main sections the same class “mainSections” – so I just need to hide all the items which are assigned the same class:
basic.css:

.mainSections {
   display:none;
}

The result is better:

main screen with css implemented
main screen with css implemented

As you can see I divided the html body into main 3 parts:

  1. upper logo area;
  2. main menu section – where I display the menu;
  3. the content section at the bottom where I will load the actual content to when I press the menu items (which are now hidden).

Next, I want to show the content of the different main sections when I click the relevant link. When I click the link “latest photos” I want to show the content of the div with the id “latestPhotos” and so on. Since the entire widget is built as a single page I cant just link to another page but I need to un-hide the relevant div. To do that I will use jquery (you can also use plain javascript but why should you when you can do this with jquery in a much simpler way?).

As we said before, we place all javascript code in basic.js – so open the file and and just delete its entire content (the existing code is just Nokia’s hello sample widget which we don’t need) and add the following jquery code just below the existing code:

$(function() {
$("#menuLatestPhotos").click(function () {
$("#mainMenuDiv").hide();
$("#latestPhotos").show();
});

$("#menuLatestVideos").click(function () {
$("#mainMenuDiv").hide();
$("#latestVideos").show();
});

$("#menuLatestTexts").click(function () {
$("#mainMenuDiv").hide();
$("#latestTexts").show();
});

});

As you can see (and I’m assuming that you are at least familiar with jquery), the code is basically has 3 similar parts. Each part tells the WRT engine to listen to “click” event on the object with the id specified in the quotes and execute the code between the brackets when the object is clicked. Taking a closer look at the first of the three you can see that when the div with the id “menuLatestPhotos” is clicked, the WRT engine will hide the div with the id “mainMenuDiv” which will hide the main menu, and will show the div with the id “latestPhotos”. A similar process happens when clicking “menuLatestVideos” and “menuLatestTexts”.

When clicking the “show latest photos” link you should be the following screen:

empty latest photos view
empty latest photos view

Problem – how I return back to the main menu? One option is to click “Exit” and restart the widget – but this is not a great solution for a real-life application. OK – then we need to create a “Main menu” option under the “Options” menu (assigned to the left soft key).

What we need to do is to tell the app to create a menu item under “Options” immediately when the app is started. To do that we will use the javascript init() function which is called immediately when the body is loaded.

So, lets consider the following javascript code:

basic.js:

 function init() {
 var mainMenuItem = new MenuItem("Main Menu", 1000);
 mainMenuItem.onSelect = menuItemSelected;
 menu.append(mainMenuItem);

// set tab-navigation mode and show softkeys
 // (only if we are in the WRT environment)
 if (window.widget) {
 widget.setNavigationEnabled(false);
 menu.showSoftkeys();
 }
 }

function menuItemSelected(id) {
 switch (id) {
 case 1000:
 $(".mainSections").hide();
 $("#mainMenuDiv").show();
 break;
 }
 }

As you can see these are two functions – the first is called init() which is executed when the page is loaded and the second one menuITemSelected() is called within init() when a menu item is selected.

var mainMenuItem = new MenuItem(”Main Menu”, 1000); – this line defines a new menu item with the label “Main Menu” and a relative position of 1000. This means that menu items with lower relative position will appear before this item in the menu and items with a higher relative position will appear after this item. The number 1000 is arbitrary and you can use any other number so long as you remember that these are relative positioning numbers.

mainMenuItem.onSelect = menuItemSelected; – this line says that when the mainMenuItem is selected execute the function menuItemSelected;

menu.append(mainMenuItem); – tells the WRT engine to append the menu item to the menu of the app.

The rest of the init() function tells the WRT engine to allow menu navigation and show the soft keys.

The function menuItemSelected(id) receives a parameter (id) from the onSelect property and performs the following task in case the value of id is 1000 (which means that we selected the “Main menu” option) – again, I’m using the jquery syntax to simplify the code:

$(”.mainSections”).hide(); – this line hides all divs which are assigned with the class “mainSections”.
$(”#mainMenuDiv”).show(); – this line shows the div with the id “mainMenuDiv” which is our main menu.

Now we have a menu navigation which brings back the main menu when I need it.

WRT tutorial - main screen with soft key menu
WRT tutorial – main screen with soft key menu

Right now, we have the scaffold of the widget working. We have a simple main menu which shows different content when the user presses menu items and we have a soft key menu item which returns us back to the main menu.

In the next section, we will load “real” data into the different sections from woofim.com using jquery ajax capabilities.

]]> http://mobiledevworld.com/2009/07/18/beginners%e2%80%99-guide-to-mobile-app-development-with-nokia-wrt-designing-the-widget/feed/ 1 Beginners’ guide to Mobile App development with Nokia WRT – Creating a project and Adding Componenets http://mobiledevworld.com/2009/07/18/beginners-guide-to-mobile-app-development-with-nokia-wrt-creating-a-project-and-adding-componenets/ http://mobiledevworld.com/2009/07/18/beginners-guide-to-mobile-app-development-with-nokia-wrt-creating-a-project-and-adding-componenets/#comments Sat, 18 Jul 2009 08:16:55 +0000 Rafi Ton http://mobiledevworld.com/?p=19 Ok, we have the development environment all set up – what’s next? Now, we need to understand how WRT widgets are structured. In general, a widget is designed from few sections in a single html page that we can activate or deactivate in accordance with that we want to do (I know that I’m oversimplifying this, but nonetheless, for most cases it encompasses the general idea).

As I said in the first part of the tutorial, I’m writing a WRT widget for my mini-blogging service called woofim.com. As such, lets start with creating a simple widget that will display the latest photos, videos and text posts on the site.

Creating a new WRT project in Aptana Studio

First we need to create a new project to work with. Open Aptana Studio and select File -> New -> Project. This will open the following window:

Aptana Studio - Project SelectionSelect “New Nokia Web Runtime Widget” – which will show the next screen:

Aptana Studio - Creating a Nokia WRT ProjectClick NEXT and enter the project name (e.g. woofim) -> NEXT -> NEXT -> Finish. This will create a basic WRT project with the framework for css, javascript and html files.

Next, lets go over the basic structure of the index.html file – open it and it should look like this:

<!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 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();">
    </body>
</html>

Let’s focus on 3 important statements marked in red:

  1. the html imports basic.js which holds the javascript for our widget;
  2. the html uses basic.css as stylesheet;
  3. when the body is loaded it will automatically launch the javascript function init() which we will use later on.

As I explained before, Nokia WRT 1.1 supports jQuery which simplifies many Javascript tasks. Therefore, we need also to load the jquery library in our project. You can download the latest version of jquery here or simply visit the jquery site and click download.

After you have downloaded jquery, just copy the file to your project folder (usually under “My Documents/Aptana/ProjectName”). Now we need to tell the html file to load the library when the index.html loads. This is what the following line does:

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

Just add it right before the </head>. Now we have also jquery to our disposal – good.

Now we can start designing the basic widget.

11 people like this post.
]]> http://mobiledevworld.com/2009/07/18/beginners-guide-to-mobile-app-development-with-nokia-wrt-creating-a-project-and-adding-componenets/feed/ 2 Beginners’ guide to Mobile App development with Nokia WRT – Selecting the IDE http://mobiledevworld.com/2009/07/18/beginners-guide-to-mobile-app-development-with-nokia-wrt-selecting-the-ide/ http://mobiledevworld.com/2009/07/18/beginners-guide-to-mobile-app-development-with-nokia-wrt-selecting-the-ide/#comments Sat, 18 Jul 2009 08:12:57 +0000 Rafi Ton http://mobiledevworld.com/?p=16 Selecting the development environment (IDE)

As we discussed before in part 1 of this tutorial, WRT is basically a browser app without the browser, therefore, we should be able to use our preferred web development tools to develop our widget.

Luckily, quite a few development environments already implemented plug-ins to simplify the development of the widgets.

Nokia WRT Plug-in 2.0 for Aptana Studio

Aptana Studio is a complete web development environment that combines powerful authoring tools with a collection of online hosting and collaboration services that help you and your team do more.

I actually was using Aptana for my day-to-day php development so for me it was a nice to learn that I can still use Aptana also for WRT development.

Aptana supports all the latest Nokia Javascript Service APIs for accessing device contacts, geo-location, accelerometers, cameras, and other device capabilities.

It supports also development of home-screen widgets (which we will address later in this series) which are small, live views of Nokia WRT widgets. The home screen widget can be developed by coding it inline with the main widget that it will link to, then preview the home screen widget by exiting the main widget preview.

Best of all, Aptana Studio is based on Eclipse hence, the standard version is free. You can download Aptana either as standalone app or as a plugin for Eclipse in the Aptana Studio download page.

Since I’m using Aptana, my examples and screen shots will be based on Aptana Studio with the WRT plug-in.

Nokia WRT Extension for Adobe Dreamweaver

The popular Adobe Dreamweaver has also a plugin which simplifies the development of WRT widgets which can be downloaded from Adobe’s extension exchange page.

Not sure if this is a mistake but according to Adobe’s pages they support only Web Runtime 1.0 API and not 1.1…In any event, if you are using Dreamweaver as web development environment you should check this out.

Nokia WRT Plug-in for Visual Studio

Web developers who have chosen Microsoft Visual Studio 2008 as their development platform, can now plug-in features that dramatically simplify the process of creating WRT widgets. The Nokia WRT Plug-in adds tools to create or import, edit, preview, debug, validate, package, and deploy WRT widgets. To simplify coding Web Runtime 1.0 API is supported in Visual Studio’s code completion feature.

You can download the plugin here.

Next, Designing the widget.

  • Introduction
  • Selecting the IDE
  • Designing the widget
  • Our first Basic Nokia WRT Widget
  • Deploying our Widget
1 people like this post.
]]> http://mobiledevworld.com/2009/07/18/beginners-guide-to-mobile-app-development-with-nokia-wrt-selecting-the-ide/feed/ 0 Beginners’ guide to Mobile App development with Nokia WRT – Introduction http://mobiledevworld.com/2009/07/18/beginners-guide-to-mobile-app-development-with-nokia-wrt-introduction/ http://mobiledevworld.com/2009/07/18/beginners-guide-to-mobile-app-development-with-nokia-wrt-introduction/#comments Sat, 18 Jul 2009 08:01:07 +0000 Rafi Ton http://mobiledevworld.com/?p=12 How it all began

I would like to start with few facts about myself:

  1. I have never developed an application for mobile phones.
  2. I always argued that development for mobile phones is a total pain and is years behind web development.
  3. I do some web development mainly using PHP, MySQL and jQuery.
  4. I’m an entrepreneur – (founder and CEO of NewACT, Cellibre and developer and admin of several web sites including this one and woofim.com which is a mobile mini blogging service)

The last point is important since I’m mostly interested in fast to very fast development of prototypes which some of them will turn to “real” products and some of them will be abandoned.

As I said above, I was arguing time after time to anyone who is willing to listen that development of applications and services for mobile phones is years behind web development. Just compare the development on J2ME or Symbian to Web…Things that take just a few days in the web world take months when trying to implement as a mobile application.

Web technologies find their way to mobile phone apps

And no, I’m not taking about mobile web or WAP sites. I’m talking about developing a full blown app using html, css, javascript or jQuery – which behaves as a “traditional” app and looks like an app and not as a web page.

There are few examples for these technologies – one is Nokia WRT (Web Runtime widgets) which allows development of mobile apps using Javascript, html and CSS (and yes, even jQuery !!!), another one is PhoneGap which allows similar development methodology for the iPhone, Android and BlackBerry storm.

But first, what is WRT?

WRT or S60 Web Runtime “Widgets” is a portable and lightweight application framework that makes mobile web apps easy. It is an extension to the Webkit based browser engine on the S60 Platform – that allows instances of the browser to be run as if they are applications.

One the most immediate advantages offered by WRT is the ease with which they can be created – using HTML, CSS and JavaScript (did someone say jQuery??). Web Runtime Technology allows these applications to be easily distributed and installed.

Getting started with WRT

In this tutorial I will try to share with you the process of developing a WRT widget for woofim.com from scratch. From selecting the IDE to submitting the app to OVI. I promise that I will do many mistakes (which I will share with you as well) but eventually we will have a WRT for my hobby mobile mini blogging service – woofim.com.

Next, selecting the IDE

  • Introduction
  • Selecting the IDE
  • Designing the widget
  • Our first Basic Nokia WRT Widget
  • Deploying our Widget
]]> http://mobiledevworld.com/2009/07/18/beginners-guide-to-mobile-app-development-with-nokia-wrt-introduction/feed/ 0