Using Fiddler 2 in debugging of Windows 8 Metro Style Apps (HTML5/JavaScript & XAML)


Fiddler 2 is a freeware Web Debugging tool used primarily for debugging & capturing of sessions, Headers, Cache-modules , JSON, XML view of Web apps. No only for Windows Client/Server/Phone enviornment , it’s highly recommended for capturing web sessions in iPhone/iPad devices also.  You can download the tool freely from the web & go through its tutorials at http://www.fiddler2.com/fiddler2/ .

  • In this article, we will see how Fiddler 2 helps us to capture traffic in debugging Windows 8 Metro Style Apps in Windows  Developer Preview environment.
  • First of in Fiddler 2 tools you need to check the Tools -> Options -> Connections -> Check Allow Remote Computers to Connect .

  • Next , set the decryption of HTTPS traffic for Fiddler & allows Fiddlers certificates to install on your Windows 8 developer preview certification manager.
  • Click on Tools -> Fiddler Options -> HTTPS -> Check Decrypt HTTPS traffic . It will prompt for the popup for certificate installation.

  • Click Yes to follow the installation of Fiddler 2 certificate.

  • Click Yes to install the certificate in Trusted Root Certificate Applications.

  • Now check the Certificate manager by typing Windows + R   & type certmgr.exe & open Trusted Root Certificate Application & under the root , Click Certificate. Open the Fiddler 2 Certificate.

  • Now , Fiddler 2 can capture traffic sessions for Windows 8 Metro Style Apps debugging too. So , lets open a Metro Style apps in VS 11 Developer Preview & capture traffic sessions in fiddler 2.

  • Open the Inspector section to preview the debugging overview & session details of Windows 8 Metro Style apps in Fiddler 2.

Consuming Bing API 2.2(XML+JSON),REST Services in Windows 8 Metro Style Apps with XAML


In Windows 8 Metro Style Apps , we have previewed some great apps like Weather/Stocks consuming Live Streaming data with XAML/HTML5,JavaScript. These Metro Style Apps are based on Live XML/JSON API & formatted data in XAML to preview the corresponding output.

  • Just like the Weather Sample in Windows 8 Metro Style Apps:

  • With Consumption of Live Data the apps preview the UI according to XAML designing format like GridView,ListView,FlipView with streaming videos.

  • Along with that, they have nice app bars which helps to add application functionalities making Metro Style apps for User-Interactive.

  • In this example , We will develop a Metro Style Apps which helps to preview Live Stream Images from Bing API in XML/JSON with REST Services. The same can be also consumed by building a simple WCF Services with OData Feed in AtomPub/XML Format.
  • Lets start by creating a Metro Style Apps project in VS 11 Developer Preview.

  •  Add a few XAML in MainPage.xaml:

<UserControl x:Class=”BingMapsIntegration.MainPage”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

mc:Ignorable=”d”

d:DesignHeight=”768″ d:DesignWidth=”1366″>

<Grid x:Name=”LayoutRoot” Background=”#FF0C0C0C”>

<StackPanel Orientation=”Vertical”>

<StackPanel Orientation=”Horizontal” Height=”48″>

<TextBlock Text=”Enter Keyword:” FontSize=”14″ VerticalAlignment=”Center”

Height=”32″></TextBlock>

<TextBox x:Name=”txtKeyword” Width=”300″ Height=”32″></TextBox>

<Button x:Name=”btnSearch” Width=”40″ Content=”Search” Height=”32″></Button>

</StackPanel>

<StackPanel Orientation=”Horizontal”>

<ListBox x:Name=”PhotoList” HorizontalAlignment=”Left” Width=”250″

ScrollViewer.VerticalScrollBarVisibility=”Visible”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation=”Vertical”>

<Image Source=”{Binding MediaUrl}” Width=”200″ Height=”200″

Stretch=”UniformToFill” Grid.Column=”0″ />

<TextBlock Text=”{Binding Title}” Width=”200″

Height=”14″ FontSize=”12″ />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</UserControl>

  • Add a new Class in your app called BingMaps & add the following codes:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace BingMapsIntegration

{

class BingMaps

{

public string Title { get; set; }

public string MediaUrl { get; set; }

}

}

  • You need to also Sign-Up for the Developer API Key in Bing . To Sign up visit: http://www.bing.com/developers
  • Modify the MainPage.xaml.cs with the code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using  Windows.Foundation;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Data;

using System.Net.Http;

using System.Xml.Linq;

namespace BingMapsIntegration

{

partial class MainPage

{

public MainPage()

{

InitializeComponent();

  Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void btnSearch_Click(object sender, RoutedEventArgs e)

{

string strSearch = txtKeyword.Text;

FetchBingPics( strSearch, PhotoList);

}

public async void FetchBingPics(string strKeyWord, object control)

{

String strBingAppID = “[51D201080D27C665353AFD9AB807416147559F43]”;

XNamespace xmlns = http://schemas.microsoft.com/LiveSearch/2008/04/XML/multimedia;

HttpClient client = newHttpClient();

HttpResponseMessage response = await   client.GetAsync( http://api.bing.net/xml.aspx?AppId=51D201080D27C665353AFD9AB807416147559F43&Version=2.2&Market=en-US&Image.Count=50&Sources=Image&Query=&#8221;+strKeyWord);

string xml = response.Content.ReadAsString();

XDocument doc = XDocument.Parse(xml);

IEnumerable<BingMaps> images = from img in doc.Descendants(

xmlns + “ImageResult”)

where !img.Element(xmlns + “MediaUrl”).Value.EndsWith(“.bmp”)

selectnewBingMaps

{

Title = img.Element(xmlns + “Title”).Value,

MediaUrl = img.Element(xmlns + “MediaUrl”).Value

};

if (control isListBox)

(control  asListBox).ItemsSource = images;

else

(control  asGridView).ItemsSource = images;

}

}

  • Check out the Output of the App:

  • Lets modify the Sample by adding some GridView functionality to have more rich UI experience in XAML for Metro Style Apps:
  • Add the following code in MainPage.xaml after the ListBox:

<GridView x:Name=”PhotoGrid” Width=”1100″

ScrollViewer.HorizontalScrollBarVisibility=”Visible” Canvas.Left=”240″>

<GridView.ItemsPanel>

<ItemsPanelTemplate>

<WrapGrid MaximumRowsOrColumns=”3″ VerticalChildrenAlignment=”Top”

HorizontalChildrenAlignment=”Left” Margin=”0,0,0,0″ />

</ItemsPanelTemplate>

</GridView.ItemsPanel>

<GridView.ItemTemplate>

<DataTemplate>

<StackPanel Orientation=”Vertical”>

<Image Source=”{Binding MediaUrl}” Width=”200″ Height=”200″

Stretch=”UniformToFill” Grid.Column=”0″ />

<TextBlock Text=”{Binding Title}” Width=”200″ Height=”14″  FontSize=”12″ />

</StackPanel>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

  • Along with that Add the Following code in MainPage.xaml.cs :
  • Add the EventHandlers in MainPage’s Constructor:

public MainPage()

{

InitializeComponent();

btnSearch.Click += newRoutedEventHandler(btnSearch_Click);

PhotoList.SelectionChanged += new SelectionChangedEventHandler(PhotoList_SelectionChanged);

PhotoGrid.SelectionChanged += new  SelectionChangedEventHandler(PhotoGrid_SelectionChanged);

}

  • Add the following methods in MainPage’s Code-behind:

void btnSearch_Click(object sender, RoutedEventArgs e)

{

string strSearch = txtKeyword.Text;

FetchBingPics( strSearch, PhotoList);

}

void PhotoList_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (!(PhotoList.SelectedItem == null))

{

string strTitle = (PhotoList.SelectedItem asBingMaps).Title;

FetchBingPics(strTitle, PhotoGrid);

}

}

void PhotoGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (!(PhotoGrid.SelectedItem == null))

{

string strTitle = (PhotoGrid.SelectedItem asBingMaps).Title;

FetchBingPics(strTitle, PhotoList);

}

}

  • Format the output as follows:

  • The complete Metro Style Apps with GridView in XAML  consumed Live Bing API Feed in XML/JSON REST Services.

  • Formatted GridView in XAML 4.5 for Windows 8 Metro Style Apps.

Developing Windows 8 Metro Style Apps with GridView in XAML – Part I


  • Development of Windows 8 Metro Style apps in Windows 8 Developer Preview is quite easy with the help of Visual Studio 11 Developer Preview or Visual Studio 11 Express Developer Preview(Available only with Windows 8 Developer Preview x64 with Windows SDK Tools). In Metro Style apps creation you will get option to create five types of applications in VS 11 developer preview templates.
  • Application
  • Grid Application
  • Split Application
  • Class Library
  • Unit Test Library

  • Next, we will create a Grid Application for Windows 8 Metro Style applications in XAML 4.5 to develop an PhotoViewer app.
  • So, after creation of Grid application in VS 11 Developer Preview you can find the following files:
  • App.xaml: The Configuration file responsible for launch, Application Event Handling, Splash Screen handling.
  • CollectionSummaryPage.xaml: This page is responsible for summing up ListView along with FlipViews with User Control Styles & Templates binding.
  • DetailPage.xaml: The Page controls the basic UI binding of the Items retrieved from Service URL or local database.
  • GroupCollectionPage.xaml: Responsible for UI layout & formatting.
  • Package.appxmanifest: The overall configuration file of the app, responsible for logo designing & selection of Splash Screen, Logo of the Application, Device access capability, Code signing, Certificates & credentials control etc.
  • Lets , I have added some Image files in the existing Images folder of the project & created a new file called PhotoDataSource.cs.
  • PhotoDataSource.cs :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

using System.Xml.Linq;

using System.Net.Http;

namespace PhotoViewer

{

classPhotoItem : INotifyPropertyChanged

{

public event PropertyChangedEventHandler PropertyChanged;

protectedvoid OnPropertyChanged(string propertyName)

{

if (this.PropertyChanged != null)

{

this.PropertyChanged(this,

new PropertyChangedEventArgs(propertyName));

}

}

private PhotoCollection _collection;

public PhotoCollection Collection

{

get

{

returnthis._collection;

}

set

{

if (this._collection != value)

{

this._collection = value;

this.OnPropertyChanged(“Collection”);

}

}

}

private String _category = String.Empty;

public String Category

{

get

{

returnthis._category;

}

set

{

if (this._category != value)

{

this._category = value;

this.OnPropertyChanged(“Category”);

}

}

}

privateString _title = String.Empty;

publicString Title

{

get

{

returnthis._title;

}

set

{

if (this._title != value)

{

this._title = value;

this.OnPropertyChanged(“Title”);

}

}

}

privateString _description = String.Empty;

publicString Description

{

get

{

returnthis._description;

}

set

{

if (this._description != value)

{

this._description = value;

this.OnPropertyChanged(“Description”);

}

}

}

privateString _owner = String.Empty;

publicString Owner

{

get

{

returnthis._owner;

}

set

{

if (this._owner != value)

{

this._owner = value;

this.OnPropertyChanged(“Owner”);

}

}

}

privateString _dateTaken;

publicString DateTaken

{

get

{

returnthis._dateTaken;

}

set

{

if (this._dateTaken != value)

{

this._dateTaken = value;

this.OnPropertyChanged(“DateTaken”);

}

}

}

privateImageSource _image = null;

privateUri _imageBaseUri = null;

privateString _imagePath = null;

publicImageSource Image

{

get

{

if (_image == null && _imageBaseUri != null &&

_imagePath !=

null)

{

_image =

newBitmapImage(newUri(_imageBaseUri, _imagePath));

}

returnthis._image;

}

set

{

if (this._image != value)

{

this._image = value;

this._imageBaseUri = null;

this._imagePath = null;

this.OnPropertyChanged(“Image”);

}

}

}

publicvoid SetImage(Uri baseUri, String path)

{

_image =

null;

_imageBaseUri = baseUri;

_imagePath = path;

this.OnPropertyChanged(“Image”);

}

privatestring _url = string.Empty;

publicstring Url

{

get

{

returnthis._url;

}

set

{

if (this._url != value)

{

this._url = value;

this.OnPropertyChanged(“Url”);

}

}

}

}

classPhotoCollection : PhotoItem, IGroupInfo

{

publicObject Key

{

get { return Title; }

}

privateList<PhotoItem> _itemCollection = newList<PhotoItem>();

publicvoid Add(PhotoItem item)

{

_itemCollection.Add(item);

}

publicIEnumerator<Object> GetEnumerator()

{

return _itemCollection.GetEnumerator();

}

System.Collections.

IEnumerator

System.Collections.

IEnumerable.GetEnumerator()

{

return GetEnumerator();

}

}

classPhotoDataSource

{

publicList<PhotoCollection> GroupedCollections { get; privateset; }

privatevoid AddCollection(String category, String title,

String description, Uri baseUri, String imagePath)

{

var collection = newPhotoCollection();

collection.Category = category;

collection.Title = title;

collection.Description = description;

collection.SetImage(baseUri, imagePath);

GroupedCollections.Add(collection);

}

privatevoid AddItem(String category, String title, String description,

String owner, String dateTaken, Uri baseUri, String imagePath)

{

PhotoCollection lastCollection = GroupedCollections.LastOrDefault() as

PhotoCollection;

var item = newPhotoItem();

item.Category = category;

item.Title = title;

item.Description = description;

item.Owner = owner;

item.DateTaken = dateTaken;

item.SetImage(baseUri, imagePath);

item.Collection = lastCollection;

if (lastCollection != null)

{

lastCollection.Add(item);

}

}

public PhotoDataSource(Uri baseUri)

{

GroupedCollections = newList<PhotoCollection>();

AddCollection( “Pike Place Market”, ” Pike Place Market “,

“Pike Place Market is a public market overlooking the Elliott Bay waterfront in Seattle, Washington, United States. The Market opened August 17, 1907, and is one of the oldest continually operated public farmers’ markets in the United States. It is a place of business for many small farmers, craftspeople and merchants. Named after the central street, Pike Place runs northwest from Pike Street to Virginia Street, and remains one of Seattle’s most popular tourist destinations.”,

baseUri, “Images/PikePlaceMarket.jpg”);

AddItem(“Pike Place Market”, “Picture 1”,

“A picture of Pike Place Market”,

string.Empty, string.Empty,

baseUri, “Images/PikePlaceMarket.jpg”);

AddItem(“Pike Place Market”, “Picture 2”,

“A picture of Pike Place Market”,

string.Empty, string.Empty,

baseUri, “Images/PikePlaceMarket.jpg”);

AddItem( “Pike Place Market”, “Picture 3”,

“A picture of Pike Place Market”,

string.Empty, string.Empty,

baseUri, “Images/PikePlaceMarket.jpg”);

//AddPhotos(“Pike Place Market”, 1);

//AddPhotos(“Pike Place Market”, 2);

AddCollection( “Space Needle”, ” Space Needle “,

“The Space Needle is a tower in Seattle, Washington and is a major landmark of the Pacific Northwest region of the United States and a symbol of Seattle. Located at the Seattle Center, it was built for the 1962 World’s Fair. The Space Needle features an observation deck at 520 feet (160 m), and a gift shop with the rotating SkyCity restaurant at 500 feet (150 m).[5] From the top of the Needle, one can see not only the Downtown Seattle skyline, but also the Olympic and Cascade Mountains, Mount Rainier, Mount Baker, Elliott Bay and surrounding islands.”,

baseUri, “Images/SpaceNeedle.jpg”);

//AddPhotos(“Space Needle”, 1);

//AddPhotos(“Space Needle”, 2);

AddItem( “Space Needle”, “Picture 1”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddItem( “Space Needle”, “Picture 2”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddItem(“Space Needle”, “Picture 3”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddItem( “Space Needle”, “Picture 4”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddCollection( “Pioneer Square”, ” Pioneer Square “,

“Pioneer Square was once the heart of the city: Seattle’s founders settled there in 1852, following a brief six-month settlement at Alki Point on the far side of Elliott Bay. The early structures in the neighborhood were mostly wooden, and nearly all burned in the Great Seattle Fire of 1889. By the end of 1890, dozens of brick and stone buildings had been erected in their stead; to this day, the architectural character of the neighborhood derives from these late 19th century buildings, mostly examples of Richardsonian Romanesque.”,

baseUri,“Images/PioneerSquare.jpg”);

//AddPhotos(“Pioneer Square”, 1);

//AddPhotos(“Pioneer Square”, 2);

AddItem(“Pioneer Square”, “Picture 1”,

“A picture of Pioneer Square”,

string.Empty, string.Empty,

baseUri, “Images/PioneerSquare.jpg”);

AddCollection(“Snoqualmie Falls”, ” Snoqualmie Falls “,

“Snoqualmie Falls is a 268 ft (82 m) waterfall on the Snoqualmie River between Snoqualmie and Fall City, Washington, USA. It is one of Washington’s most popular scenic attractions, but is perhaps best known internationally for its appearance in the cult television series Twin Peaks. More than 1.5 million visitors come to the Falls every year, where there is a two acre (8,000 m²) park, an observation deck, and a gift shop.”,

baseUri, “Images/SnoqualmieFalls.jpg”);

//AddPhotos(“Snoqualmie Falls”, 1);

//AddPhotos(“Snoqualmie Falls”, 2);

AddItem(“Snoqualmie Falls”, “Picture 1”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddItem(“Snoqualmie Falls”, “Picture 2”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddItem( “Snoqualmie Falls”, “Picture 3”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddItem(“Snoqualmie Falls”, “Picture 4”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddCollection(“About Me”, ” About Me ““Hi,Myself Anindita Basak.Senior Software Engineer by role.”,

baseUri, “Images/me.jpg”);

AddItem(“About Me”, “About Me”,

“Hi,Myself Anindita Basak.Senior Software Engineer by profession.”,

string.Empty, string.Empty,

baseUri, “Images/me.jpg”);

AddItem(“About Me”, “About Me”,

“Hi,Myself Anindita Basak.Senior Software Engineer by profession.”,

string.Empty, string.Empty,

baseUri, “Images/me.jpg”);

}

}

}

  • Add the following code in DetailPage.xaml by commenting out the ContentPanel1,ContentPanel2,ContentPanel3:

<StackPanel x:Name=”ContentPanel1″ Style=”{StaticResource

PrimaryContentPanelStyle}”>

<TextBlock x:Name=”DetailTitle” Height=”74″ Style=”{StaticResource

LargeContentFontStyle}” Text=”{Binding Title}” />

<Grid x:Name=”ImageGrid” Width=”Auto” Margin=”0,8,0,0″

Background=”#FF3B3B3B” HorizontalAlignment=”Stretch” VerticalAlignment=”Top”>

<Image x:Name=”Image” Height=”300″ Margin=”0″ Stretch=”UniformToFill”

Source=”{Binding Image}” />

</Grid>

 

  • Lets check the PhotoViewer screen in Windows 8 Metro Style apps.

  • Next, Run the Metro Style Apps in Windows 8  Slate Simulator . Select it from VS 2011 developer Preview Debugging option pane.

 

Developing Windows 8 Metro Style applications in Windows 8 Developer Preview with VMware Player


Development of Windows 8 Metro Style applications with HTML5,Javascript(Chakra) or XAML is quite easy but important is the installation of Windows 8 in VM (Hyper-V or VMware Workstation). For most of peoples like Oracle VirtualBox but I never experienced so much superior support in it. Freeware VMware player or VMware workstation is quite charming in that case otherwise Windows Hyper-V with a bootable vhd is best way for installation of Windows 8 Developer Preview.

  • Start with selection of the installation media & be careful about the selection of the guest operating system. VMware still does not support Windows 8 so keep the name of guest os as Windows 7 (for 32 bit Windows 8) & Windows 7 x64 for 64 bit Windows 8 developer preview.

  • Next, select the  harddisk space requirements in VMware player & save the VHD as backup in your drive.
  • Start booting with Windows 8 developer preview once you finished the customization of VM settings.

  • Next, setup the Windows 8 botting screen & populate with your Windows Live ID account.

  • Check the final preparation screen of Windows 8 developer preview.

  • Install the Visual Studio 11 developer preview & start with Windows 8 Metro Style apps development.

  • Lets check the VS 11 developer preview in Windows 8 Developer Preview.