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.

Developing Windows 8 Metro JavaScript Navigation Apps in VS 11 Developer Preview & Expression Blend 5 for Developer Preview


Building  Windows 8 Metro Style Apps with Javascript in VS 11 Developer Preview & Expression Blend 5 for Developer Preview is common & designing & coding support is same as in VS 11 Developer Preview & Expression Blend 5 for Developer Preview.  In this article , there is a simple demonstration of Navigation Applications of Javascript in VS 11 Developer Preview while the same could be also developed by designing in Expression Blend 5 for Developer Preview.

  • Lets start by creating a new project in VS 11 Developer Preview for Metro Style Apps in Javascript.

  • Next, Open homepage.html & modify with the following code :

<div class=”fragment homePage”>

<header role=”banner”aria-label=”Header content”>

<button disabledclass=”win-backbutton”aria-label=”Back”></button>

<div class=”titleArea”>

<h1 class=”pageTitle win-title”>Welcome to Navigation_With_JavaScript!</h1>

</div>

</header>

<section role=”main”aria-label=”Main content”>

<button>Click Me</button>

<div data-win-control=”WinJS.UI.Rating” data-win-options=”{averageRating:5,maxRating:10}”></div>

</section>

</div>

 

  • Check out that homepage.html & default.html both of files render the same view of homepage.html.
  • Now Check out the Views in Windows 8 Slates (Simulator) or local machine.

First Preview

Complete Ratings View

Ratings with 5 Preview

  • The same metro app can be designed in Expression Blend 5 for Developers Preview using Windows Library for JavaScript options.

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.

Android Screen Brightness Sample


Lets get start how to configure the Brightness settings in Android SmartPhones. In several native apps of Android it’s often required to peoperly set the brightness of the screen according to apps requirement.

So, to develop such an app , lets start in Eclipse by creating a new Android Project.

  •  Choose the Runtime environment of Android  & the package settings.

  • Lets modify the AndroidManifest.xml :

<? xmlversion=“1.0”encoding=“utf-8”?>

<manifest xmlns:android=http://schemas.android.com/apk/res/android&#8221;

package=“com.example.BrightnessSample”

android:versionCode=“1”

android:versionName=“1.0”>

<uses-sdk android:minSdkVersion=“10”/>

<application  

android:icon=“@drawable/ic_launcher”

android:label=“@string/app_name”>

<activity 

android:label=“@string/app_name”

android:name=“.BrightnessSampleActivity”>

<intent-filter>

<action android:name=“android.intent.action.MAIN”/>

<category android:name=“android.intent.category.LAUNCHER”/>

</intent-filter>

</activity>

</application>

<uses-permission android:name=“android.permission.WRITE_SETTINGS”/>

</manifest>

  • Lets Modify the Main.xml:

<? xml version=“1.0”encoding=“utf-8”?>

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android

android:layout_width=“fill_parent”

android:layout_height=“fill_parent”

android:orientation=“vertical”>

<TextView

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:text=“@string/hello”/>

<TextView

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:text=“Set BackLight of the App”/>

<SeekBar

android:id=“@+id/backlightcontrol”

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:layout_margin=“10px”

android:max=“100”

android:progress=“50”/>

<TextView

android:id=“@+id/backlightsetting”

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:text=“0.50”/>

<Button

android:id=“@+id/updatesystemsetting”

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:text=“Update Settings.System.SCREEN_BRIGHTNESS”/>

</LinearLayout>

 

  • Next, add the following Code in BrightnessSampleAcitivity.java:

package  com.example.BrightnessSample;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.WindowManager;

import android.widget.Button;

import android.widget.SeekBar;

import android.widget.TextView;

public class  BrightnessSampleActivity  extends  Activity {

/** Called when the activity is first created. */

floatBackLightValue = 0.5f;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout. main);

SeekBar BackLightControl  = (SeekBar)findViewById(R.id. backlightcontrol);

         final TextView BackLightSetting = (TextView)findViewById(R.id.backlightsetting);

Button UpdateSystemSetting = (Button)findViewById(R.id. updatesystemsetting);

UpdateSystemSetting.setOnClickListener( new Button.OnClickListener()

{

        public void   onClick(View arg0)

{

         int SysBackLightValue = (int)(BackLightValue * 255);

android.provider.Settings.System.putInt(getContentResolver(),

android.provider.Settings.System. SCREEN_BRIGHTNESS   SysBackLightValue);

        }});

        BackLightControl.setOnSeekBarChangeListener(new     SeekBar.OnSeekBarChangeListener() {

          public void o nProgressChanged(SeekBar arg0,int arg1,boolean arg2)

{

        BackLightValue = (float)arg1/100;

BackLightSetting.setText(String.valueOf(BackLightValue));

WindowManager.LayoutParams layoutParams = getWindow().getAttributes();

layoutParams. screenBrightness = BackLightValue;

  getWindow().setAttributes(layoutParams);

        }

public void onStopTrackingTouch(SeekBar seekBar) {

// TODO Auto-generated method stub

}

public void  onStartTrackingTouch(SeekBar seekBar) {

// TODO Auto-generated method stub

}});

}

}

  • Lets check the output of Screen Brightness Sample in Android  :

  • Increase the Progress Bar to check the View in Screen Brightness.

Developing Windows 8 Metro Style Apps Basics with XAML & C# Part-II


In previous articles, I have described how to develop Windows 8 Metro Style apps with GridViews with XAML & C#. Now, it’s also time to add proper ApplicationBars along with Windows 8 Settings Charm in your application to make more OS customized & slater view.

  1. Settings Charm in Windows 8 Metro Style Apps with Win RT Settings Components:
  •  Windows 8 Metro Style Apps has the capability to add Win RT settings & interoperability with Win RT (Windows RunTime Component) Shells.
  • With the help of this we can add customized Windows 8 RT Shell components with Metro app bars .

  • The integration works with the addition of Application Bars which on click produce the interoperability with Core Windows RunTime (Network, Volume, Power etc) components.

2. Snapping in Windows 8 Metro Style Apps:

Snapping in Windows 8 Metro Style apps really enable to get snapped view of your app. Just like Personalized settings panel in Windows 8 Developer Preview environment. Snapping can be also enabled in your Metro Style apps & associate with Win RT components.

  •  After implementing Snapping the app looks like this by pressing Windows + (.) key in preview mode.

  • Snapping can be implemented by adding the following pieces of code in your Windows 8 Metro Style apps in XAML based on C#  .
  • Import the following namespace :

using Windows.UI.ApplicationSettings;

  •  Write the event in MainPage Constructor:

ApplicationLayout.GetForCurrentView().LayoutChanged += new TypedEventHandler<ApplicationLayout,

 ApplicationLayoutChangedEventArgs> (MainPage_LayoutChanged);

  • Add the method body in MainPage.xaml.cs class body:

void MainPage_LayoutChanged(Windows.UI.ViewManagement.ApplicationLayout sender,

Windows.UI.ViewManagement. ApplicationLayoutChangedEventArgs args)

{

switch (args.Layout)

{

case Windows.UI.ViewManagement.ApplicationLayoutState.Filled:

this.Height = 1066;

this.Width = 768;

break;

case Windows.UI.ViewManagement.ApplicationLayoutState.FullScreen:

this.Height = 768;

this.Width = 1366;

break;

case Windows.UI.ViewManagement.ApplicationLayoutState.Snapped:

this.Height = 768;

this.Width = 320;

break;

default:

break;

}

}

Installation of SQL Server 2012 RC0(Release Candidate) in Windows 8 Developer Preview


SQL Server 2012 RC0 has published on November 2011 after the CTP3 beta Denali edition. The new edition of SQL Server 2012 RC0 contains a lot of improvements over the Database Engine, High Availability, BI tools prespective. Windows 8 Developer Preview is a next genetation Windows Slate OS version which influences developer to develop market ready  Metro Style apps.

  • Windows 8 Metro Style apps quite resemble with Windows Phone 7 Metro apps which having functionality with Windows Azure, Push Notification, Isolated Storage & Local Storage, Bing Maps integration, leveraging business data from Microsoft SharePoint 2010 etc.
  • In those respect it’s also important to integrate Metro Style apps with SQL Server databases. Tiles & notificates generation from data of SQL Server, Configuring & developing SSRS reports in tablets, Windows Slates too.
  • Lets see the installation of SQL Server 2012 RC in Windows 8 Developer Preview(Client).
  • First enable .NET Framework 3.5.1 in Windows 8 Developer Preview otherwise it will create issues in SQL Server 2012 RC installation.
  • Step by step reference of enabling .NET Framework 3.5.1 in Windows 8 Developer Preview:
  • http://techdows.com/2011/09/enable-net-framework-3-5-1-on-windows-8-developer-preview-to-run-applications.html

  • Lets start by checking the licence rules. For Express editions & Express with Advanced Editions no Product Key is required.

  • Lets check the installation rules. First installer will run Update rules if any recent updates for SQL Server 2012 RC is available or not.

  • It’s will check the instance rules & divisions.

  • Next, it will prompt to select the features needed for the installation.

  • Next prompt will update the Server Configurations for SQL Server 2012 RC .

  • Alternatively, you can check for Collation properties.

  • Then , look out for the instance selection which is one of important step in SQL Server installation.

  • You have select the authentication features for SQL Server 2012 RC in Windows 8 Developer Preview.

  • Alternately, you can enable Filestream data to obtain data from Remote SQL Servers.

 

  • Next step is to configure the SQL Server Reporting Services 2012 , you can select ‘install & configure’ or ‘install only’.

  • After that, carry out the normal installation procedure in Windows 8 Developer Preview.

  • Next, the installation got successful , you will get Complete dialog box shows the selected features already got installed.

  • Now , Open SQL Server Management Studio 2012 to check in Windows 8 Developer Preview.

  • That’s it, start working on SQL Server 2012 RC with Windows 8 Metro Style apps in Windows 8 Developer Preview.

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.

 

Installation of IIS 8 in Windows 8 Developer Preview


Working with IIS 8 in Windows 8 Developer Preview is quite important as it ‘s a pre-requites to work with Windows Azure tools in Windows 8 Developer Preview. Simply switch to Metro preview & select Control Panel & set to More Settings for Desktop -> Select Turn  Windows features On or Off & set Internet Information Services.

  • Set it default & Click OK. Check localhost in IE 10 for IIS 8.

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.

Create, Update & Delete(CUD) Operations of SQL Server / SQL Azure Data through OData WCF Services from Windows Phone 7.1 Mango


In previous posts, I discussed about the consumption of SQL Server/ SQL Azure data in Windows Phone 7.1 Mango device through the use of OData WCF services. OData Services  support not only HTTP GET operations but also supports for HTTP POST, PUT & DELETE by which we can perform CRUD (Create, Read, Update, Delete) operations from SQL Server/SQL Azure/ Oracle / SharePoint 2010 / SSRS 2008 / SAP Netweaver BI data etc.

  • In this post, Let’s discuss how to add new data by HTTP POST through XML ATOMPUB format from Windows Phone 7.1 client to the SQL Server database.
  • Created a new .XAML page called ‘Add.xaml’ which will capture data from Phone UI & save it to the SQL Server / SQL Azure database.

  • Lets check the Source Code for the Create operation:

<phone:PhoneApplicationPage

x:Class=”WP7PanoramaOData.Add”

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

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

xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”

xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”

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

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

FontFamily=”{StaticResource PhoneFontFamilyNormal}”

FontSize=”{StaticResource PhoneFontSizeNormal}”

Foreground=”{StaticResource PhoneForegroundBrush}”

SupportedOrientations=”PortraitOrLandscape” Orientation=”Portrait”

mc:Ignorable=”d” d:DesignHeight=”768″ d:DesignWidth=”480″

shell:SystemTray.IsVisible=”True”>

<!–LayoutRoot is the root grid where all page content is placed–>

<Grid x:Name=”LayoutRoot”>

<Grid.Background>

<ImageBrush ImageSource=”images/Back.png”/>

</Grid.Background>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

<!–TitlePanel contains the name of the application and page title–>

<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>

<TextBlock x:Name=”ApplicationTitle” Text=”MY APPLICATION” Style=”{StaticResource PhoneTextNormalStyle}”/>

<TextBlock x:Name=”PageTitle” Text=”Customer Data” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>

</StackPanel>

<!–ContentPanel – place additional content here–>

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,-15,12,0″>

<StackPanel Orientation=”Vertical”>

<TextBlock Text=”First Name:” FontSize=”16″ Margin=”5″/>

<TextBox Name=”txtFirstName” />

<TextBlock Text=”Last Name:” FontSize=”16″ Margin=”5″ />

<TextBox Name=”txtLastName”/>

<TextBlock Text=”Address:” FontSize=”16″ Margin=”5″/>

<TextBox Name=”txtAddress” />

<TextBlock Text=”City:” FontSize=”16″ Margin=”5″ />

<TextBox Name=”txtCity”/>

<TextBlock Text=”Zip:” FontSize=”16″ Margin=”5″/>

<TextBox Name=”txtZip” />

<TextBlock Text=”State:” FontSize=”16″ Margin=”5″ />

<TextBox Name=”txtState”/>

</StackPanel>

</Grid>

</Grid>

<!–Sample code showing usage of ApplicationBar–>

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible=”True” IsMenuEnabled=”True” Opacity=”.2″>

<shell:ApplicationBarIconButton x:Name=”btnSave” IconUri=”images/Save.png” Text=”Save” Click=”btnSave_Click”/>

<shell:ApplicationBarIconButton x:Name=”btnCancel” IconUri=”images/Cancel.png” Text=”Cancel” Click=”btnCancel_Click”/>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

  • Paste the code in Add.xaml.cs:

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 WP7PanoramaOData.CustomersModel;

using System.Data.Services.Client;

namespace WP7PanoramaOData

{

public partial class Add : PhoneApplicationPage

{

public  CustomersEntities ctx = newCustomersEntities(new Uri(http://10.12.1.223/ODataSQLWP7/CustomerService.svc/&#8221;, UriKind.Absolute));

     public Add()

{

InitializeComponent();

}

//   Load data for the ViewModel Items

 private void btnSave_Click(object sender, EventArgs e)

{

// Instantiate the Client

var newCustomer = newCustomerInfo();

newCustomer.FirstName = this.txtFirstName.Text.Trim();

newCustomer.LastName = this.txtLastName.Text.Trim();

newCustomer.Address = this.txtAddress.Text.Trim();

newCustomer.City = this.txtCity.Text.Trim();

newCustomer.Zip = this.txtZip.Text.Trim();

newCustomer.State = this.txtState.Text.Trim();

ctx.AddObject(“CustomerInfoes”, newCustomer);

ctx.BeginSaveChanges(insertUserInDB_Completed, ctx);

}

   private void insertUserInDB_Completed(IAsyncResult result)

{

ctx.EndSaveChanges(result);

}

   private  void btnCancel_Click(object sender, EventArgs e)

{

     this.NavigationService.Navigate(newUri(“/MainPage.xaml”, UriKind.Relative));

}

}

}

  • Lets check after addition of new data , the Windows Phone 7.1 UI:

  • Lets check the steps of updating the existing data :

  • Lets update the list with new data & perform HTTP PUT operation for updating data of Astoria services.

  •  After updating existing data, you can refresh the Main list to get updated data. Same update happens in database too.

  • Source code to perform Update Operation with OData WCF Services for SQL Server / SQL Azure database for Windows Phone 7.1 Mango:

<phone:PhoneApplicationPage

x:Class=”WP7PanoramaOData.Edit”

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

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

xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”

xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”

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

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

FontFamily=”{StaticResource PhoneFontFamilyNormal}”

FontSize=”{StaticResource PhoneFontSizeNormal}”

Foreground=”{StaticResource PhoneForegroundBrush}”

SupportedOrientations=”Portrait” Orientation=”Portrait”

mc:Ignorable=”d” d:DesignHeight=”768″ d:DesignWidth=”480″

shell:SystemTray.IsVisible=”True”>

<!–LayoutRoot is the root grid where all page content is placed–>

<Grid x:Name=”LayoutRoot”>

<Grid.Background>

<ImageBrush ImageSource=”images/Back.png”/>

</Grid.Background>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

<!–TitlePanel contains the name of the application and page title–>

<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>

<TextBlock x:Name=”ApplicationTitle” Text=”MY APPLICATION” Style=”{StaticResource PhoneTextNormalStyle}”/>

<TextBlock x:Name=”PageTitle” Text=”Edit Data” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>

</StackPanel>

<!–ContentPanel – place additional content here–>

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,-15,12,0″>

<StackPanel Orientation=”Vertical”>

<TextBlock Text=”First Name:” FontSize=”16″ Margin=”5″/>

<TextBox Name=”txtFirstName” />

<TextBlock Text=”Last Name:” FontSize=”16″ Margin=”5″ />

<TextBox Name=”txtLastName”/>

<TextBlock Text=”Address:” FontSize=”16″ Margin=”5″/>

<TextBox Name=”txtAddress” />

<TextBlock Text=”City:” FontSize=”16″ Margin=”5″ />

<TextBox Name=”txtCity”/>

<TextBlock Text=”Zip:” FontSize=”16″ Margin=”5″/>

<TextBox Name=”txtZip” />

<TextBlock Text=”State:” FontSize=”16″ Margin=”5″ />

<TextBox Name=”txtState”/>

</StackPanel>

</Grid>

</Grid>

<!–Sample code showing usage of ApplicationBar–>

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible=”True” IsMenuEnabled=”True” Opacity=”.2″>

<shell:ApplicationBarIconButton x:Name=”btnSave” IconUri=”images/Save.png” Text=”Save” Click=”btnSave_Click”/>

<shell:ApplicationBarIconButton x:Name=”btnCancel” IconUri=”images/Cancel.png” Text=”Cancel” Click=”btnCancel_Click”/>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

  • Edit.xaml.cs :

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 WP7PanoramaOData.CustomersModel;

using System.Data.Services.Client;

namespace WP7PanoramaOData

{

public partialclassEdit : PhoneApplicationPage

{

public CustomersEntities ctx = newCustomersEntities(newUri(http://10.12.1.223/ODataSQLWP7/CustomerService.svc/&#8221;, UriKind.Absolute));

public Edit()

{

InitializeComponent();

}

privatevoid btnSave_Click(object sender, EventArgs e)

{

var qry = ctx.CreateQuery<CustomerInfo>(“CustomerInfoes”).AddQueryOption(“$filter”, “FirstName eq” + “\'” + “Maria” + “\'”);

qry.BeginExecute(r =>

{

var query = r.AsyncState asDataServiceQuery<CustomerInfo>;

               try

{

            Deployment.Current.Dispatcher.BeginInvoke(() =>

{

                var result = query.EndExecute(r).First();

result.FirstName = this.txtFirstName.Text;

result.LastName = this.txtLastName.Text.Trim();

result.Address =  this.txtAddress.Text.Trim();

result.City = this.txtCity.Text.Trim();

result.Zip = this.txtZip.Text.Trim();

result.State = this.txtState.Text.Trim();

ctx.UpdateObject(result);

ctx.BeginSaveChanges(changeUserInDB_Completed, ctx);

});

}

      catch (Exception ex)

{

MessageBox.Show(ex.ToString());

}

}, qry);

}

private void changeUserInDB_Completed(IAsyncResult result)

{

ctx.EndSaveChanges(result);

}

private void btnCancel_Click(object sender, EventArgs e)

{

this.NavigationService.Navigate(newUri(“/MainPage.xaml”, UriKind.Relative));

}

}

}