locked
Windows Gadget (Discontinued I know) - Fairly new to Jscript, and cannot get read and write strings working. RRS feed

  • Question

  • Hi All,

    Hopefully I have posted in the correct place.

    I am writing a windows gadget to help with workflow and work related performance.

    In my gadget I have a textarea where I can type in any additional tasks for the week, and I need it to save this state upon windows shutting down/starting.

    I believe I have the correct code, but i think I may be calling it in the wrong area. Apologies if it's a bit messy!

    Here is my main HTML code:

                                                           

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">



    <head>
    <Title>Success Routines</Title>

        <link href="css/Success.css" rel="stylesheet" type="text/css">
        <link href="js/Success.js" type="text/javascript">

        <script type="text/javascript">
    System.Gadget.settingsUI = "settings.html";
    </script>

    </head>

    <body>    

    <div class="background">
    <div class="header">
    <div class="logo">
                <img src="images/phlogoS.png" height="25" width="100">
    </div>

    <div class="heading">
    Training Team Success Routines
    </div>
    </div>
        <div class="table">
     <table width="240" cellspacing="0" cellpadding="0" border="0">

      <tr>
        <td width="82%" height=15><SPACER height="1" type="block">
        <div class="contenthead">Weekly</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">1/2 hour check in before HR Huddles</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">Project Planner Admin</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">Thinking Time / Mental Detox</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19"><div>
        <textarea style="width:185px;height:12px; background-color:#333; font-family:'Segoe UI'; font-size:11px; color:#FFF"></textarea></div>

    </td>

        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="30"><div class="contenthead">Periodically</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">Team Meeting</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">Team Meeting Prep</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">1:1 with Line Manager</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">Learning Log Completion</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">HR Metrics / TR Review</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">Buddy Hut Coaching</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="30"><div class="contenthead">Quarterly</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">Review Outliers / Issues</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">DC Course Visit</div></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div class="content">L & D Team Working Day</div></td>
        <td>&nbsp;</td>
      </tr>
    </table>


        </div>

    <script type="text/javascript">

    function onLoad()
    {
    // global variables
    settings=System.Gadget.Settings;
    textArea=document.getElementsByTagName("textarea")[0];

    var text=settings.readString("textSave");
    if(text) textArea.value=text;
    }
    function onChange()
    {
    var text=textArea.value;
    if(text) settings.writeString("textSave",text);
    }
    </script>

    </body>

    </html>

    Tuesday, November 26, 2013 10:54 AM

Answers

  • 1. Your html file is called from an xml file. Theoretically things work better if the html file is also xml (read xhtml).

    2. The doctype declaration seems to be ignored by sidebar.exe.

    3. You have two opening head tags.

    4. You have a script in a link tag. (success.js) Instead, try using
    <script src="js/Success.js" type="text/javascript"/>

    5. The scripts in your html are not javascript - they are jscript - use type="text/jscript"

    6. Why have one head script and one end script ? Consolidate them in the head.

    7. Declare global variables outside of any function, preferably at the beginning of your script, and initialize them even if only with a null value.

    8. Where possible, when elements will be referred to in script, give them an id. To change their color, for example, in javascript, you should use

    document.getElementById("elID").style.color="#f00";

    but in jscript you can simply use

    elID.style.color="#f00";

    9. Get into the habit of enclosing all conditional statements in curly braces eg instead of :
    if(text) settings.writeString("textSave",text);

    use

    if(text){settings.writeString("textSave",text);}

    10. The first div (class = "background") does not have a closing tag. Use an editor with syntax highlighting so that you can quickly check for these types of things.

    11. Why place divs in tds? Why not just assign classes to the tds and style them instead ?

    12. Try not to create variables or functions  with names identical to keywords eg "onChange", "onLoad", "settings" etc

    13. But the crux of your problem is why aren't your jscript functions making things happen dynamically. It is because you have not assigned your handler functions to any event. The easiest way to do this is declare the event handlers in the html eg
    <body onload="init();">
    and
    <textarea onchange="txtChange();">

    **Note - in the example below, besides other changes, the non-existant success.js and the stylesheet have been removed and the body has had an inline style applied.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Success Routines</title>
    <script type="text/jscript">
    var gSettings=System.Gadget.Settings;
    System.Gadget.settingsUI = "settings.html";
    
    function txtChange(){
     var txt=tArea.value;
     if(txt!==""){gSettings.write("textSave",txt);}
    }
    
    function init(){
     var txt=gSettings.readString("textSave");
     if(txt!==""){tArea.value=txt;}
    }
    </script>
    </head>
    <body onload="init();" style="width:200px;height:400px;">
     <div class="background">
      <div class="header">
       <div class="logo"><img src="images/phlogoS.png" height="25" width="100"></div>
       <div class="heading">Training Team Success Routines</div>
      </div>
      <div class="table">
       <table width="240" cellspacing="0" cellpadding="0" border="0">
        <tr><td width="82%" height=15><SPACER height="1" type="block"><div class="contenthead">Weekly</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">1/2 hour check in before HR Huddles</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Project Planner Admin</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Thinking Time / Mental Detox</div></td><td>&nbsp;</td></tr>
        <tr><td><div><textarea id="tArea" onchange="txtChange()" style="width:185px;height:25px; background-color:#333; font-family:'Segoe UI'; font-size:11px; color:#FFF"></textarea></div></td><td>&nbsp;</td></tr>
        <tr><td height="30"><div class="contenthead">Periodically</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Team Meeting</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Team Meeting Prep</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">1:1 with Line Manager</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Learning Log Completion</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">HR Metrics / TR Review</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Buddy Hut Coaching</div></td><td>&nbsp;</td></tr>
        <tr><td height="30"><div class="contenthead">Quarterly</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Review Outliers / Issues</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">DC Course Visit</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">L & D Team Working Day</div></td><td>&nbsp;</td></tr>
       </table>
      </div>
     </div>
    </body>
    </html>


    • Edited by mystifeid Wednesday, November 27, 2013 8:47 AM
    • Marked as answer by andyslingsby Thursday, November 28, 2013 2:49 PM
    Wednesday, November 27, 2013 8:41 AM

All replies

  • 1. Your html file is called from an xml file. Theoretically things work better if the html file is also xml (read xhtml).

    2. The doctype declaration seems to be ignored by sidebar.exe.

    3. You have two opening head tags.

    4. You have a script in a link tag. (success.js) Instead, try using
    <script src="js/Success.js" type="text/javascript"/>

    5. The scripts in your html are not javascript - they are jscript - use type="text/jscript"

    6. Why have one head script and one end script ? Consolidate them in the head.

    7. Declare global variables outside of any function, preferably at the beginning of your script, and initialize them even if only with a null value.

    8. Where possible, when elements will be referred to in script, give them an id. To change their color, for example, in javascript, you should use

    document.getElementById("elID").style.color="#f00";

    but in jscript you can simply use

    elID.style.color="#f00";

    9. Get into the habit of enclosing all conditional statements in curly braces eg instead of :
    if(text) settings.writeString("textSave",text);

    use

    if(text){settings.writeString("textSave",text);}

    10. The first div (class = "background") does not have a closing tag. Use an editor with syntax highlighting so that you can quickly check for these types of things.

    11. Why place divs in tds? Why not just assign classes to the tds and style them instead ?

    12. Try not to create variables or functions  with names identical to keywords eg "onChange", "onLoad", "settings" etc

    13. But the crux of your problem is why aren't your jscript functions making things happen dynamically. It is because you have not assigned your handler functions to any event. The easiest way to do this is declare the event handlers in the html eg
    <body onload="init();">
    and
    <textarea onchange="txtChange();">

    **Note - in the example below, besides other changes, the non-existant success.js and the stylesheet have been removed and the body has had an inline style applied.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Success Routines</title>
    <script type="text/jscript">
    var gSettings=System.Gadget.Settings;
    System.Gadget.settingsUI = "settings.html";
    
    function txtChange(){
     var txt=tArea.value;
     if(txt!==""){gSettings.write("textSave",txt);}
    }
    
    function init(){
     var txt=gSettings.readString("textSave");
     if(txt!==""){tArea.value=txt;}
    }
    </script>
    </head>
    <body onload="init();" style="width:200px;height:400px;">
     <div class="background">
      <div class="header">
       <div class="logo"><img src="images/phlogoS.png" height="25" width="100"></div>
       <div class="heading">Training Team Success Routines</div>
      </div>
      <div class="table">
       <table width="240" cellspacing="0" cellpadding="0" border="0">
        <tr><td width="82%" height=15><SPACER height="1" type="block"><div class="contenthead">Weekly</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">1/2 hour check in before HR Huddles</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Project Planner Admin</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Thinking Time / Mental Detox</div></td><td>&nbsp;</td></tr>
        <tr><td><div><textarea id="tArea" onchange="txtChange()" style="width:185px;height:25px; background-color:#333; font-family:'Segoe UI'; font-size:11px; color:#FFF"></textarea></div></td><td>&nbsp;</td></tr>
        <tr><td height="30"><div class="contenthead">Periodically</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Team Meeting</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Team Meeting Prep</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">1:1 with Line Manager</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Learning Log Completion</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">HR Metrics / TR Review</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Buddy Hut Coaching</div></td><td>&nbsp;</td></tr>
        <tr><td height="30"><div class="contenthead">Quarterly</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">Review Outliers / Issues</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">DC Course Visit</div></td><td>&nbsp;</td></tr>
        <tr><td><div class="content">L & D Team Working Day</div></td><td>&nbsp;</td></tr>
       </table>
      </div>
     </div>
    </body>
    </html>


    • Edited by mystifeid Wednesday, November 27, 2013 8:47 AM
    • Marked as answer by andyslingsby Thursday, November 28, 2013 2:49 PM
    Wednesday, November 27, 2013 8:41 AM
  • Thanks a lot from this, I'm quite new to HTML and even never to JavaScript.

    Your explanations have been really useful.

    Thursday, November 28, 2013 2:49 PM