Jaime Rodriguez
On Windows Store apps, Windows Phone, HTML and XAML

  • Jaime Rodriguez

    Making REST calls and using state (aka cookies) from a sidebar gadget...


    This will walk you through how to make REST (GET,POST) calls from a sidebar gadget using XmlHttp.. ( 20 mins or less, if you have asp .net)

    There are plenty of samples on the web for using XmlHttp, so will go quick and we will touch in a few of the 'more intricate' scenarios people have asked about: Cookies + Session State + redirects when sidebar gadgets call a back-end...   

    The code for this sample is located here; there is a

    • client side component (sample.gadget) -- note that for this sample, login.js script points to my local webserver..  you will have to update that to point to your back-end..
    • server side component ( UsernameSite) ..  this code uses ASP .NET, you can use any backend you want.. I used the easiest one for me.

    Here is the gist of the Client-side code:
    Just  has form data... trivial HTML form prompting for username & password for form user authentication.   The "useGet" determines if making a POST or GET request, though practically they are the same code.

    generic.js has the function to get the XmlHttp object, first we check for native IE 7 object, if not possible we use MSXML..

    function GetXMLHTTP ()
    var xmlhttp = null ;
    // this should be default path... using IE 7 native XML HTTP
    if (window.XMLHttpRequest)
    xmlhttp =
    new XMLHttpRequest();
    if ( typeof xmlhttp.overrideMimeType != 'undefined')
    else if (window.ActiveXObject)
    xmlhttp =
    new ActiveXObject("Microsoft.XMLHTTP");
    throw "No XMLHTTP" ;
    return xmlhttp;

    login.js has the code to send the XmlHttp request..  Note that for this samples we used Synchronous calls... that is usually bad :( ... but it saves mein sample code and keeps it simpler so I left as an exercise for you to change ..

    function submitForm()
    var item ; var DataToSend = ""var x ;

    //parse the form to get the fields out ... and build the payload
    for ( x = 0 ; x < document.form1.elements.length ; x++ )
    DataToSend += document.form1.elements[x].id +
    "=" + document.form1.elements[x].value + "&" ;

    var xmlhttp = GetXMLHTTP() ;
    var useGET = document.getElementById('useGET').value;
    if ( useGET )
    xmlhttp.open("GET","http://jaimersvr/UsernameSite/Logon.aspx?ReturnUrl=%2fUsernamesite%2fSessionPage.aspx&" + DataToSend, false);
    // Note this is a Synchronous call.. you should not do this.. call it async.. I did it this way to keep code simple .. . 
    "POST","http://jaimersvr/UsernameSite/Logon.aspx?ReturnUrl=%2fUsernamesite%2fSessionPage.aspx", false);
    "Content-Type", "application/x-www-form-urlencoded");
    // Note this is a Synchronous call.. you should not do this.. call it async.. I did it this way to keep code simple .. .
    xmlhttp.send(DataToSend );

    // This is example for a flyout communicating with main document ...
    // check the System.Gadget.document documentation

    System.Gadget.document.getElementById ('result').innerHTML = xmlhttp.responseText;


    That is all the client side code ... :)    
    I will not explain the server side code unless I start getting requests for it..  I am guessing any one who is familiar with ASPX will know how to install it ... and those that are not familiar will be OK just knowing that REST works well from within sidebar..

    Here is what the end to end sample does:

    1. The xmlhttp call is doing is calling the login.aspx page on the server side ...  
    2. At successful login, the Loginaspx does a Redirect to SessionPage.aspx,
    3. SessionPage.aspx merely displays the status of some session variables..   Every time you call this page, the variables get increased..

    Here is how to run it: 

    1. Click the "ShowFlyout"  URL in the gadget
    2. Enter "test" (minus quotes) as Email address
    3. Enter "test" (minus quotes) as Password
    4. Click GetSession Data
    5. Repeat previous step to see the variables get incremented 
    6. Add a new instance of this same gadget to the sidebar and repeat the first 4 steps; notice that multiple instances of the gadget are sharing the same back-end session data ...  {good for some people, is it bad for any?} 

     Here are some of my observations:

    • Session Variables work fine... even the cookie is persisting fine ... [not sure who is doing the work, I am guessing xmlhttp]

     Here are the gotchas or issues I saw (which for most part might not be an issue):

    • IE in Windows Vista runs in a different trust level, called Protected Mode...  Read about it here.   
      This translates to the cookie we are persisting in our gadget and the cookie IE is reading are *not* shared..  You can have a separate cookie for each if that works for your model (e.g. the cookie just tells you my login or some thing like that)... but as far as passing state, no deal..  [ I have some ideas on how to get that to work, but might be too much]
    • I have also seldomly experienced an issue where the domain cookie that is to be persisted is not incrementing..  I have not figured this out.. it happens seldomly and goes away on its own..  If you are having problems with cookies, you can verify if things are working fine using a utility like IECV..

     Hope that was useful; if the instructions are too hard ... let me know ..

  • Jaime Rodriguez

    The basic wiring for a vista sidebar gadget..


    [This should be read as a supplement to gadget development verview ]. 

    Writing a gadget is quite easy.. It is just HTML and a little bit of wiring up notifications for docking + undocking, visibility, etc.  I am hoping this post and helps you have a gadget with flyouts, notification for docking/undocking,  saving settings, etc. in less than 20 mins..


    The sample code is here packaged in zip, with a VS solution so you can edit the files easily from Visual Studio.  
    To install, extract the zip file to
    “%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\Sample.Gadget”

    Should end up with a structure similar to this: (with only a few files highlighted)

    \Users\jaimer\AppData\Local\Microsoft\Windows Sidebar\Gadgets\Sample.Gadget  the full path to our gadget directory
    ...\Sample.Gadget\en-us\gadget.xml     The manifest file... relatively easy to understand..
    ...\Sample.Gadget\en-us\simplest.html  this will be the gadget file used for this sample  -- the gagdget knows to load this file because we told it in the gadget.xml
    ...\Sample.Gadget\en-us\settings.html     the UI for the gadget's settings..
    ...\Sample.Gadget\en-us\css\main.css     centralized place for our  style sheets ...
    \Gadgets\Sample.Gadget\en-us\js\generic.js   I have put some generic JS code here.. [stuff that I use for all my gadgets] ..

    A few of the interesting snippets in this sample gadget is:

    gadget.xml - aka gadget manifest
    Only file name that can not be changed; sidebar specifically looks for this filename
    Most relevant entry is the
    <base type="HTML" apiVersion="1.0.0" src="Simplest.html"/>
    This tells the sidebar gadget what file to load as entrypoint..

    Simplest.html -- our gadget user interface
    The HTML file loaded by sidebar; aka our UI...  interesting snippets:

    • include for the stylesheets and JS files:

    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <script src="js/generic.js" type="text/javascript" language="javascript"></script>
    <script src="js/custom.js" type="text/javascript" language="javascript"></script>

    • wired the Init () call that will do all the wiring work

    <body onload="init();" class="DockedModeDisplayArea" > 

    The wiring is done in the init function.. we do a bit of the wiring here:

    function init ( )
    System.Gadget.settingsUI =
    "settings.html"; //This tells the gadget the HTML file to launch for settings
    System.Gadget.onSettingsClosed = settingsClosed; //wire ourselves to settings closed event to save them
    System.Gadget.visibilityChanged = visibilityChanged; // stop working if we are not visible System.Gadget.onUndock = chkdockedState; //let me know if I get undocked so I can look different System.Gadget.onDock = chkdockedState;

    System.Gadget.onShowSettings = showSettings ; // let me know if settings are being shown System.Gadget.Flyout.onHide = flyoutHiding; //let me know if flyout is showing/hiding. I can pass data to it via document property
    System.Gadget.Flyout.onShow = flyoutShowing;


    that is all the code  needed to wire every thing side bar does ( drag drop is not some thing you can wire into .. Pretty easy! The rest is your business logic to populate what happens on each action.. and the code to show the Flyout 

    Notice that simplest.html has
    <a href="" onclick="showFlyout('login', 10000);">Show Flyout</a><br />

    This will be the code to show our flyout . showing it is as simple as setting:

    System.Gadget.Flyout.file =  "loginFlyout.html";  //file name to be shown..
    System.Gadget.Flyout.show = true;

    To hide the Flyout, set:
    System.Gadget.Flyout.show = true;

    The code I am showing hides the flyout after 10 seconds..
    I hide it for no reason other than to show you how to hide it..
    Note that the Flyout is only visible when the gadget has focus.. if gadget loses focus, the flyout hides automatically.  

    This file shows UI for entering settings...
    Notice that the sidebar puts the "frame" for the settings screen...
    handles the frame title, OK, Cancel button ... and you get the notification via the System.Gadget.onSettingsClosed event..  to cancel this dialog from closing [say it failed validation] you can listen for the onClosingEvent.  You can see all the sample logic, to load and save settings inside the settings.js file

    That is it! With this quick sample you should have a gadget rendering UI in no time.. Unfortunately all we can do now is render UI, maybe desktop status, a game or any thing else that works disconnected.. Next post we will wire this to some data :)

     To run the sample, 

    1. add your gadget to the vista sidebar
    2. Click on the ShowFlyout  Anchor
    3. Click any where out side of the gadget to have the flyout go away  (or wait 10 secs)
    4. Right click any where in the gadget
    5. Select Options, to show the SettingsUI
    6. Click OK -- you will see a validation error appear.... this was again added randomly as an example
    7. Click OK again
    8. Start now hacking away at the gadget and make some thing cool  :)

    The whole sample is here

  • Jaime Rodriguez

    MSDN architecture webcasts on wpf..


    Yesterday, I had the [unsual for me] pleasure of surfing the web for 'things WPF'...  A couple of useful findings (imho) were:

    How to Leverage Windows Forms and Windows Presentation Foundation in a Single Hybrid Application   Architecture Webcast tomorrow 9/3 at 1700 GMT...  I will try to attend if myself... Scott Morrison took over crossbow now that Mike changed teams.. 

    Optimizing WPF Application performance MSDN Architecture Webcast
    kiran kumar, the presenter for this one wrote a great WPF perf whitepaper , which still applies well to current WPF bits.. 
    For those reading this post after 9/13 ... These sessions are recorded and available on-demand.. so still try the link to Scott's presentation...
  • Jaime Rodriguez

    Some Vista sidebar links..


    This is an FAQ and I just shared it via email w/ someone, so sharing it for future:

    http://blogs.msdn.com/sidebar/    -- Sidebar Corner ==  the sidebar PMs’    blog


    http://microsoftgadgets.com/Sidebar/DevelopmentOverview.aspx - Sidebar development overview  

    There might have been a few API changes since beta2, but for the most part this paper is great for a sidebar newbie..


    http://gallery.microsoft.com/vista.aspx  - The sidebar repository where users are posting gadgets ..


    http://microsoftgadgets.com/forums/10/ShowForum.aspx - The sidebar forums..  


  • Jaime Rodriguez

    Cider! Cider! Cider!


    No surprise, Tim is prompt to post links to latest CTP goodies Huge surprise: I am giving Cider a fair try ....

    Since a few weeks ago, I have been using Cider August CTP (or candidates for it)..  It still has code parsing issues (aka whoops)... but it is a huge improvement of past releases and it has a few features that I really like:

    • SplitView -- think Xamlpad, but inside VS...
    • Their Grid designer is very nifty... lots of handles to move stuff around
    • The code generated is very clean...   
    • I am weird, but I like the properties window in Cider better than Sparkle's..

    The readme for Cider's release is in Tim's links..  Please check it out and give Cider a try..

    Does this mean I am stepping away from EiD? sorry can't do...  but I am going back and forth; for smaller single window prototypes with not too many users controls, I am in Cider.. playing around and most important thinking about feedback and suggestions: VS2007 has a long stabilization cycle planned on their release, the time to provide feedback and suggestions is now cause they are going to move to feature complete pretty quick ...






Page 1 of 1 (5 items)