[TUTORIAL] Make your own Quick Access Widget !

Allstar12345 · June 22, 2012

Hello guys today I’m going to teach you all how to make your very own Quick Access Widget from my base template.

What is a Quick Access Widget you may wonder? Well I’ll tell you

It is a Widget that I made which is written in Symbian WRT (Web run time) basically a web app with Symbian command functions.

[img width=236 height=420] [img width=236 height=420]

I have made and publicly released two of these Daily mobile and Symbian-Developers; with this tutorial you can make your own! For Both symbian series 60 5th and Symbiaan^3, Anna, Belle, Belle FP1 and future releases; While Symbian s60 3rd edition Fp2 is supported it wouldn’t really work unless you are prepared to do some serious downscaling for there resolution.

This is the base code which is available in an attached .Zip file.

Let’s start with the main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

</style>
</td></tr>
align="center"><img title="DON’T REALLY NEED ANYTHING HERE" width=200 height=200 src="Headerlogo.png" onclick="openurl('')" Title="">
<img title=""

<head>
<title>WIDGET TITLE GOES HERE</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<meta name="navigation" content="tabbed"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{font-family:tahoma,verdana, arial;font-size:14px}
h4{font-family:tahoma,verdana, arial;font-size:18px;color:#F8F8F1}
</style>
<script>
function openurl(url){ widget.openURL(url); }
function createMenu(){
try{
var optionsMenu = window.menu; // Create a Menu Object

var m1 = new MenuItem(' OPTIONS MENU APP TITLE GOES HERE ', 1);
var m2 = new MenuItem(' OPTIONS MENU APP TITLE GOES HERE ', 2);
var m3 = new MenuItem(' OPTIONS MENU APP TITLE GOES HERE ', 3);
var m4 = new MenuItem(' OPTIONS MENU APP TITLE GOES HERE ', 4);
var m5 = new MenuItem(' OPTIONS MENU APP TITLE GOES HERE ', 5);
var m6 = new MenuItem(OPTIONS MENU APP TITLE GOES HERE, 6);

// Assign a callback function for the menu items
m1.onSelect = menuEventHandler;
m2.onSelect = menuEventHandler;
m3.onSelect = menuEventHandler;
m4.onSelect = menuEventHandler;
m5.onSelect = menuEventHandler;
m6.onSelect = menuEventHandler;

// Append two Menu items to Menu
optionsMenu.append(m1);
optionsMenu.append(m2);
optionsMenu.append(m3);
optionsMenu.append(m4);
optionsMenu.append(m5);
optionsMenu.append(m6);

// Create two more Menu items for Sub-Menu
var m11 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 101);
var m12 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 102);
var m13 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 103);

var m14 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 104);
var m15 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 105);

var m16 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 106);

var m17 = new MenuItem('OUR PARTNERS SITE TITLE GOES HERE', 107);

// Append two Sub Menu Items to Menu 'Beverages'
optionsMenu.getMenuItemById(1).append(m11);
optionsMenu.getMenuItemById(1).append(m12);

optionsMenu.getMenuItemById(1).append(m13);

optionsMenu.getMenuItemById(1).append(m14);

optionsMenu.getMenuItemById(1).append(m15);

optionsMenu.getMenuItemById(1).append(m16);

optionsMenu.getMenuItemById(1).append(m17);

//optionsMenu.getMenuItemByName('Beverages').append(m15); // get Menu Item reference by Name

// Assign a callback function for the submenu items
m11.onSelect = submenuEventHandler;
m12.onSelect = submenuEventHandler;
m13.onSelect = submenuEventHandler;
m14.onSelect = submenuEventHandler;
m15.onSelect = submenuEventHandler;
m16.onSelect = submenuEventHandler;
m17.onSelect = submenuEventHandler;

}
catch(e){
//alert(e)
}
}

function menuEventHandler(id)
{
switch (id)
{
case 1:
widget.openApplication(OPTIONS MENU APP UID HERE, ''); // APP NAME HERE
break;
case 2:
widget.openApplication(OPTIONS MENU APP UID HERE, ''); // APP NAME HERE
break;
case 3:
widget.openApplication(OPTIONS MENU APP UID HERE, ''); // APP NAME HERE
break;
case 4:
widget.openApplication(OPTIONS MENU APP UID HERE, ''); // APP NAME HERE
break;
case 5:
widget.openApplication(OPTIONS MENU APP UID HERE, ''); // APP NAME HERE
break;
case 6:
widget.openApplication( OPTIONS MENU APP UID HERE,''); //APP NAME HERE
break;
}
}

function submenuEventHandler(id)
{
switch (id)
{
case 101:
openurl(' OUR PARTNERS URL HERE ');
break;
case 102:
openurl(' OUR PARTNERS URL HERE ');
break;
case 103:
openurl(' OUR PARTNERS URL HERE ');
break;
case 104:
openurl(' OUR PARTNERS URL HERE ');
break;
case 105:
openurl(' OUR PARTNERS URL HERE ');
break;
case 106:
openurl(' OUR PARTNERS URL HERE ');
break;
case 107:
openurl('OUR PARTNERS URL HERE');
break;

}
}
window.onload = createMenu();

</script>
</head>

<body topmargin=0 leftmargin=0 bgcolor="#000000">
<table width="100%" align="center">
<tr><td align=center>bgcolor="#000000"><blockquote>
<blockquote>
<blockquote><h4>NAME OF WIDGET GOES HERE </h3>
</blockquote>
</blockquote>
</blockquote></td></tr>
<tr><td width="100%" valign=top>
<img title=" WEBSITE URL HERE " width=175 height=175 src=" IMAGE FILE NAME HERE " onclick="openurl(' WEBSITE URL HERE ')" Title=" Website title ">
<img title="dailymobile Twitter" width=175 height=175 src="IMAGE FILE NAME HERE" onclick="openurl('WEBSITE URL HERE')" Title=" Website title ">
<img title="dailymobile blog" width=175 height=175 src=" IMAGE FILE NAME HERE " onclick="openurl(' WEBSITE URL HERE ')" Title=" Website title ">
<img title="non" width=175 height=175 src=" IMAGE FILE NAME HERE " onclick="openurl(' WEBSITE URL HERE')" Title="Website title ">
</td></tr>
<tr><td height="106" align=center>bgcolor="#000000"><blockquote>
<blockquote>
<blockquote>
<h4>Useful Applications</h4>
</blockquote>
</blockquote>
</blockquote></td>
</tr>
<tr><td width="100%" valign=top>
<img width=175 height=175
src="web.png" onclick="widget.openApplication(UID GOES HERE, '');" Title=" App title r">
<img width=175 height=175 src="settings.png" onclick="widget.openApplication(UID GOES HERE, '');" Title=" App title ">
<img width=175 height=175 src="camera.png" onclick="widget.openApplication(UID GOES HERE, '');" Title=" App title ">
<img width=175 height=175 src="messaging.png" onclick="widget.openApplication(UID GOES HERE, '');" Title=" App title ">
<img width=175 height=175 src="musicplayer.png" onclick="widget.openApplication(UID GOES HERE, '');" Title=" App title ">
<img width=175 height=175 src="contacts.png" onclick="widget.openApplication(UID GOES HERE, '');" Title="App title">
</td>
</tr>
<tr><td align=center><hr/></td></tr>
<tr><td align=center valign=middle>

</object>
</td></tr>
<tr>
<td bgcolor="#000000" align=center><p><font color="#FFFFFF" size=3>Information and credits go here <font></p>
<p></p></td></tr>

</td></tr>
<tr>
<td height="62" align=center bgcolor="#000000"><font color="#FFFFFF" size=4> <B> version number here (Version sub number goes here)<b></font></td></tr>

</table>

</body>
</html>>

Yeah I know it’s long: D

Firstly you will need to give it a title just edits the bits in bold:

<head>
<title>WIDGET TITLE GOES HERE</title>

Got that ?

Next we need to add the header logo as usual edit the bits in bold ; if you don’t want one just leave this bit but remove the bold text.

</td></tr>
align="center"><img title="DON’T REALLY NEED ANYTHING HERE" width=200 height=200 src="HEADERLOGOFILENAMEHERE " onclick="openurl('')" Title="">
<img title=""

Now this is where you add the names of the app shortcuts that appear when pressing the options button as normal edit in the bold

var optionsMenu = window.menu; // Create a Menu Object

var m1 = new MenuItem(' OPTIONS MENU APP TITLE GOES HERE ', 1);
var m2 = new MenuItem(' OPTIONS MENU APP TITLE GOES HERE ', 2);
var m3 = new MenuItem(' OPTIONS MENU APP TITLE GOES HERE ', 3);
var m4 = new MenuItem(' OPTIONS MENU APP TITLE GOES HERE ', 4);
var m5 = new MenuItem(' OPTIONS MENU APP TITLE GOES HERE ', 5);
var m6 = new MenuItem(OPTIONS MENU APP TITLE GOES HERE, 6);

Now this is where you add the name of the websites in the Our partners sub menu under options; Remember to keep them in order with the urls :

// Create two more Menu items for Sub-Menu
var m11 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 101);
var m12 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 102);
var m13 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 103);

var m14 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 104);
var m15 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 105);

var m16 = new MenuItem(' OUR PARTNERS SITE TITLE GOES HERE ', 106);

var m17 = new MenuItem('OUR PARTNERS SITE TITLE GOES HERE', 107);

This is where you put the options menu apps and there UIDS and sub names They cannot have the same app names or the code will fail :

{
case 1:
widget.openApplication(OPTIONS MENU APP UID HERE, ''); // APP NAME HERE
break;
case 2:
widget.openApplication(OPTIONS MENU APP UID HERE, ''); // APP NAME HERE
break;
case 3:
widget.openApplication(OPTIONS MENU APP UID HERE, ''); // APP NAME HERE
break;
case 4:
widget.openApplication(OPTIONS MENU APP UID HERE, ''); // APP NAME HERE
break;
case 5:
widget.openApplication(OPTIONS MENU APP UID HERE, ''); // APP NAME HERE
break;
case 6:
widget.openApplication(OPTIONS MENU APP UID HERE,''); //APP NAME HERE
break;
}
}

Next is the URL for the Our partners list just replace the bold text with the URL in order of course:

1function submenuEventHandler(id)
{
switch (id)
{
case 101:
openurl(' OUR PARTNERS URL HERE ');
break;
case 102:
openurl(' OUR PARTNERS URL HERE ');
break;
case 103:
openurl(' OUR PARTNERS URL HERE ');
break;
case 104:
openurl(' OUR PARTNERS URL HERE ');
break;
case 105:
openurl(' OUR PARTNERS URL HERE ');
break;
case 106:
openurl(' OUR PARTNERS URL HERE ');
break;
case 107:
openurl('OUR PARTNERS URL HERE');
break;

The widget name goes here for the second time:

<blockquote><h4>NAME OF WIDGET GOES HERE </h3>

And now some more vital bits the file names , title, URL of your Quick Access Widget YOU NEED TO USE .PNG WITH TRANSPARENT BACKGROUND AT A 200X200 RESOLUTION FOR OPTIMAL PERFORMANCE:

</blockquote></td></tr>
<tr><td width="100%" valign=top>
<img title=" WEBSITE URL HERE " width=175 height=175 src=" IMAGE FILE NAME HERE " onclick="openurl(' WEBSITE URL HERE ')" Title=" Website title ">
<img title="website title " width=175 height=175 src="IMAGE FILE NAME HERE" onclick="openurl('WEBSITE URL HERE')" Title=" Website title ">
<img title="website title " width=175 height=175 src=" IMAGE FILE NAME HERE " onclick="openurl(' WEBSITE URL HERE ')" Title=" Website title ">
<img title="non" width=175 height=175 src=" IMAGE FILE NAME HERE " onclick="openurl(' WEBSITE URL HERE')" Title="Website title ">
</td></tr>

And next is getting a bit complicated so keep your wits these are for the application shortcuts on the main page at the bottom it includes the app UID the app image file name and app title:

</tr>
<tr><td width="100%" valign=top>
<img width=175 height=175
src="web.png" onclick="widget.openApplication(UID GOES HERE, '');" Title=" App title">
<img width=175 height=175 src="IMAGE GOES HERE " onclick="widget.openApplication(UID GOES HERE, '');" Title=" App title ">
<img width=175 height=175 src=" IMAGE GOES HERE " onclick="widget.openApplication(UID GOES HERE, '');" Title=" App title ">
<img width=175 height=175 src="IMAGE GOES HERE " onclick="widget.openApplication(UID GOES HERE, '');" Title=" App title">
<img width=175 height=175 src="IMAGE GOES HERE " onclick="widget.openApplication(UID GOES HERE, '');" Title=" App title ">
<img width=175 height=175 src=" IMAGE GOES HERE " onclick="widget.openApplication(UID GOES HERE, '');" Title="App title">
</td>
</tr>

Now this is where you can put information about the widget:

<tr>
<td bgcolor="#000000" align=center><p><font color="#FFFFFF" size=3>Information and credits go here <font></p>
<p></p></td></tr>

This is where the version numbers go:

</td></tr>
<tr>
<td height="62" align=center bgcolor="#000000"><font color="#FFFFFF" size=4> <B> version number here (Version sub number goes here) <b></font></td></tr>

</table>

</body>
</html>>

Now thats the main.html out of the way we need to edit the info.plist file this is where the widgets main info is kept and the Name which will appear on the installer.

Change the bits in bold to your own.. NOTE THE “com.Allstar12345.nokia.widget.WRT” NEEDS TO BE CHANGED AT THE END WHERE IT SAYS “WRT” OR IT WILL CONFLICT WITH ANY OTHER WIDGETS UNDER THAT NAME!

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd">
<plist version="1.0">
<dict>
<key>DisplayName</key>
<string>Application Full name </string>
<key>Identifier</key>
<string>com.Allstar12345.nokia.widget.WRT</string>
<key>MainHTML</key>
<string>main.html</string>
<key>DenyNetworkAccess</key>
<true/>
<key>Version</key>
<string>version number</string>
</dict>
</plist>

Right that’s the plist done now when you have added the appropriate data to the main.html and the info.plist and you have the icons and which needs to be named icon.png you can create a new folder call this the name of your app and inside it place all the files the main.html then info.plist all your icons and make that folder into a .zip file and rename to your filename .WGZ and transfer to phone and hope for the best

Now before people ask some questions ill answer a few

I have no plans to add Home screen support to the Quick Access project.

There will be updates to the base code in the future.

You have to give credits to me for the basepackage preferably in the credits section.

This is completely free if you see anyone selling a version of this Widget contact me via PM or on [email protected] immediately.

P.S

I wrote this tutorial in Word so if i made any cockups anywhere please PM me

Enjoy and have a good time

Visit my website: http://allstar-effects.co.nr

Edios · June 23, 2012

Awesome post! +10 for you!

Allstar12345 · June 23, 2012

Awesome post! +10 for you!

Thanks

Gl font kinda fails doesn't show the bits in bold

Edios · June 23, 2012

Thanks
Gl font kinda fails doesn't show the bits in bold

Its showing in bold for me!

Edios · June 23, 2012

Double post edited.

Allstar12345 · June 23, 2012

Its showing in bold for me!

im on smf curve theme and i can make out the bold bits now .

NiharG · June 23, 2012

Nice Guide. +1 to you

Allstar12345 · June 23, 2012

Nice Guide.
+1 to you

Thanks

:)

Xtreme.Infinity · June 23, 2012

Nice one +1 added

Allstar12345 · June 23, 2012

Nice one +1 added

thanks

Sign In

[TUTORIAL] Make your own Quick Access Widget !

Recommended Posts

Allstar12345

Edios

Allstar12345

Edios

Edios

Allstar12345

NiharG

Allstar12345

Xtreme.Infinity

Allstar12345

Join the conversation

Browse