Jump to content

[TUTORIAL] Make your own Quick Access Widget !


Recommended Posts

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.

Posted Image [img width=236 height=420] MXCapture-19.jpg [img width=236 height=420] MXCapture-22.jpg

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 ? :D

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 :P

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 allstar12345@ovi.com 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 ;-):P:D

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...