Create a new widget from scratch

To build a new widget from scratch you need to do the following steps:

1. Create a new Windows Phone Application in Visual Studio

Capture1.PNG

2. Add WidgetLibrary project or dll as reference and modify the default MainPage.xaml to add a Web Browser Control with the following configuration

Capture2.PNG

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1">
            <!--Widget container-->
            <phone:WebBrowser x:Name="widget" IsScriptEnabled="True" 
                              ScriptNotify="webBrowser_ScriptNotify" />
        </Grid>
    </Grid>


3. Edit the code-behind of MainPage.xaml

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using WidgetLibrary;

namespace Widget_Library_Example
{
    public partial class MainPage : PhoneApplicationPage
    {
        // A control to know if the execution of the command is OK
        // 0 = No Manage
        // 1 = Manage OK
        // 2 = Manage OK & HistoryBackEnd = true
        int manageWidget = 0;

        // Constructor
        public MainPage()
        {
            InitializeComponent();

            //We need to prepare the Widget when the app loads
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }


        /// <summary>
        /// Handles the Loaded event of the MainPage control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            //Set the start folder of the widget and navigate to the start page
            widget.Base = "Widget";
            widget.Navigate(new Uri("index.html", UriKind.Relative));
        }

        /// <summary>
        /// Handles the ScriptNotify event of the webBrowser control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="Microsoft.Phone.Controls.NotifyEventArgs"/> instance containing the event data.</param>
        void webBrowser_ScriptNotify(object sender, NotifyEventArgs e)
        {
            manageWidget = ManageWidget.Manage(e.Value, widget);
        }

        /// <summary>
        /// Called when a page becomes the active page in a frame.
        /// </summary>
        /// <param name="e">An object that contains the event data.</param>
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            //Copy the data to IsolatedStorage
            Loader.LoadResources();
            base.OnNavigatedTo(e);
        }

        /// <summary>
        /// This method is called when the hardware back key is pressed.
        /// </summary>
        /// <param name="e">Set e.Cancel to true to indicate that the request was handled by the application.</param>
        protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
        {
                base.OnBackKeyPress(e);
        }

    }
}

4. We need to create a new folder called Widget, inside the folder we can put all stuff related with our widget. In the basic example we are going to use some HTML and CSS. For the CSS file we are going to create a directory called Css inside the Widget folder.

Widget/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=480, user-scalable=no, initial-scale=2.0, minimum-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="Css/style.css" />
    <title>My first Widget</title>                
</head>
<body>
    <h1> My first Widget!</h1>
</body>
</html>


Widget/Css/style.css
body {
    background-color: Black;
    color:White;
}


5. We need to create a xml file with the information about the files that take part of our Widget. You can use the XMLWriter.exe application available. You need to copy the app inside your Widget folder and execute it. After that, a Widget.xml file appears with the info.

<?xml version="1.0" encoding="utf-8"?>
<Widget>
  <File>index.html</File>
  <Css>
    <File>style.css</File>
  </Css>
</Widget>

6. Run your project in the emulator and you have to see the html file rendered in the screen :)

Last edited Jun 29, 2011 at 2:34 PM by onir, version 7

Comments

tab7 Jun 22, 2012 at 6:47 PM 
Hello,
when I try to emulate the widget, I have this error:
"Loader.LoadResources(); NullReferenceException".
Why?

lseidman Aug 24, 2011 at 9:27 PM 
I seem to always get an error at: System.Diagnostics.Debugger.Break();

onir Jun 28, 2011 at 4:24 PM 
You can download it from http://widgetlibrary.codeplex.com/wikipage?title=XML%20Writer or modify the Widget.xml file

nemo5252 Jun 22, 2011 at 9:05 PM 
Where can I download XMLWriter.exe?

kathweaver Jun 18, 2011 at 3:55 PM 
I did figure out that if you want to add additional pages to your Widget's directory, you have to add them to the widgets.xml file. I edited my Widget.xml file directly in Visual Studio.