• May 01, 2024, 05:23:39 am

Author Topic: [TUTORIAL] Make your own Quick Access Widget !  (Read 4767 times)

0 Members and 1 Guest are viewing this topic.

Offline Allstar12345

  • Allstar Software Founder
  • Administrator
  • Forum Genius
  • ******
  • Posts: 5,235
  • Reputation: 812
    • Allstar Software
  • Current Phone: : OnePlus 8 Pro, Xperia 10, Nexus 6p, Jolla Phone, Nokia N8, Nokia 808 PureView, BlackBerry Z30
[TUTORIAL] Make your own Quick Access Widget !
« on: June 23, 2012, 04:01:44 am »
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.



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

Quote
<!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">

       

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

     

</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">

     

       

          <h4>Useful Applications</h4>
       

     

   
</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>
</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)</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:
Quote
<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.

Quote
</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 [/b]


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

Quote
// 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 :


Quote
    {
      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:

Quote


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:

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

Quote
</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:


Quote

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

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

Quote
</td></tr>
      <tr>
        <td height="62" align=center bgcolor="#000000"><font color="#FFFFFF" size=4>  <B> version number here  (Version sub number goes here) </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!

Quote
<?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





[attachment deleted by admin]
« Last Edit: December 17, 2014, 04:48:40 pm by Allstar12345 »

Offline selvasathyam

  • Retired moderator
  • Forum Ghost
  • ***
  • Posts: 2,459
  • Reputation: 1548
  • "Great To Be A NOKIA User"
    • Ssyams
  • Current Phone: : SG-S4 MIUI ROM
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #1 on: June 23, 2012, 09:19:48 am »
Thanx verymuch for this Tutorial..:) Soon iam going to try one 8) +1 bro

Offline sachinvermarip

  • Retired moderator
  • Mass Poster
  • ***
  • Posts: 1,432
  • Reputation: 192
  • Symbian FTW
    • Photo-Roll Forum
  • Current Phone: : Nokia Lumia 920
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #2 on: June 23, 2012, 11:37:15 am »
+1 :D
I will make one today

Offline Allstar12345

  • Allstar Software Founder
  • Administrator
  • Forum Genius
  • ******
  • Posts: 5,235
  • Reputation: 812
    • Allstar Software
  • Current Phone: : OnePlus 8 Pro, Xperia 10, Nexus 6p, Jolla Phone, Nokia N8, Nokia 808 PureView, BlackBerry Z30
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #3 on: June 23, 2012, 03:18:48 pm »
Thanx verymuch for this Tutorial..:) Soon iam going to try one 8) +1 bro
Cheers mate  ;)

Offline Allstar12345

  • Allstar Software Founder
  • Administrator
  • Forum Genius
  • ******
  • Posts: 5,235
  • Reputation: 812
    • Allstar Software
  • Current Phone: : OnePlus 8 Pro, Xperia 10, Nexus 6p, Jolla Phone, Nokia N8, Nokia 808 PureView, BlackBerry Z30
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #4 on: June 23, 2012, 03:20:06 pm »
+1 :D
I will make one today
Hope you succeed with it ;)

Offline Ranjitotski

  • Forum User
  • **
  • Posts: 53
  • Reputation: 2
  • You Must Described Me The Way I Am!
  • Current Phone: : NOKIA 808 PUREVIEW /// Modded Alien N8
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #5 on: June 24, 2012, 10:01:30 am »
tnx for this nice thread!!!

Offline electronic_punk.mc

  • Forum User
  • **
  • Posts: 73
  • Reputation: 8
  • Nothing comes close with the power of Symbian!
  • Current Phone: : N8-00; 5800; 6233; N-Gage QD; N-Gage; 3310 :)
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #6 on: June 25, 2012, 09:13:10 pm »
nice mate. Thanks for making this tutorial! :)

Offline Allstar12345

  • Allstar Software Founder
  • Administrator
  • Forum Genius
  • ******
  • Posts: 5,235
  • Reputation: 812
    • Allstar Software
  • Current Phone: : OnePlus 8 Pro, Xperia 10, Nexus 6p, Jolla Phone, Nokia N8, Nokia 808 PureView, BlackBerry Z30
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #7 on: June 25, 2012, 10:07:00 pm »
tnx for this nice thread!!!

nice mate. Thanks for making this tutorial! :)

Thanks :)

Offline Refflisia

  • New Member
  • **
  • Posts: 35
  • Reputation: 4
  • Symbian Power User
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #8 on: July 05, 2012, 10:59:55 am »
really useful tutorial, 5+ for dude... N i will try to make own...

Offline Allstar12345

  • Allstar Software Founder
  • Administrator
  • Forum Genius
  • ******
  • Posts: 5,235
  • Reputation: 812
    • Allstar Software
  • Current Phone: : OnePlus 8 Pro, Xperia 10, Nexus 6p, Jolla Phone, Nokia N8, Nokia 808 PureView, BlackBerry Z30
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #9 on: July 05, 2012, 03:07:07 pm »
really useful tutorial, 5+ for dude... N i will try to make own...
No worries hope you succeed ;)

Offline prarun2030

  • Retired moderator
  • Forum Ghost
  • ***
  • Posts: 2,396
  • Reputation: 280
  • Living a life between Good and Bad..
  • Current Phone: : N8|Mi3|Jolla
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #10 on: July 05, 2012, 11:40:40 pm »
wish i had a pc to do this :( btw +1 for the tutorial. ;)

Offline Allstar12345

  • Allstar Software Founder
  • Administrator
  • Forum Genius
  • ******
  • Posts: 5,235
  • Reputation: 812
    • Allstar Software
  • Current Phone: : OnePlus 8 Pro, Xperia 10, Nexus 6p, Jolla Phone, Nokia N8, Nokia 808 PureView, BlackBerry Z30
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #11 on: July 06, 2012, 01:00:24 am »
wish i had a pc to do this :( btw +1 for the tutorial. ;)
Try on your mobile with xplore ;)

Offline prarun2030

  • Retired moderator
  • Forum Ghost
  • ***
  • Posts: 2,396
  • Reputation: 280
  • Living a life between Good and Bad..
  • Current Phone: : N8|Mi3|Jolla
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #12 on: July 06, 2012, 09:10:53 pm »
Try on your mobile with xplore ;)
nah. wil get a lap soon and will try ;)

Offline Allstar12345

  • Allstar Software Founder
  • Administrator
  • Forum Genius
  • ******
  • Posts: 5,235
  • Reputation: 812
    • Allstar Software
  • Current Phone: : OnePlus 8 Pro, Xperia 10, Nexus 6p, Jolla Phone, Nokia N8, Nokia 808 PureView, BlackBerry Z30
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #13 on: July 06, 2012, 09:15:24 pm »
nah. wil get a lap soon and will try ;)
Nice ;)

Offline Allstar12345

  • Allstar Software Founder
  • Administrator
  • Forum Genius
  • ******
  • Posts: 5,235
  • Reputation: 812
    • Allstar Software
  • Current Phone: : OnePlus 8 Pro, Xperia 10, Nexus 6p, Jolla Phone, Nokia N8, Nokia 808 PureView, BlackBerry Z30
Re: [TUTORIAL] Make your own Quick Access Widget !
« Reply #14 on: July 06, 2012, 09:16:08 pm »
Topic moved to symbian webruntime