Shai Raiten

TFS API Part 46 (VS11) – Team Settings

shair — Wed, 23 May 2012 09:35:00 GMT

In the previous posts “TFS API Part 45 (VS11) – Modify Teams and Team Members” I talked about Teams, from getting all team to modify and creating new Team using TFS API.

Now, Teams are more than just a “Security Group”, they hold specific settings such as relevant Areas/Iteration for that Team.

The “Team” can be assigned to Backlog Iteration (Set as Team’s backlog Iteration), this takes all paths under that iteration and add them to the team backlog. You can also change the Iteration backlog to another path (not just the root), you just need at least one child below.

And from TFS 11 you can define Start Date and End Date for Iterations, and there is a cool fact – those dates are not just for beauty – TFS takes those iterations and automatically show you what is the current Iteration that you working on, what iterations you completed (past) and what iterations are next. you might have overlap iterations but for some reason you can only have one “Current” iteration.

The “Current” iteration is defined by the iteration for which the start date is less than or equal to today’s date and the end date is greater than or equal to today and than is just sorted by Name.

After you define the Iterations for the Project and for each Team you might want to define the Areas for the Team, you can also define a Default Area – Means that each work item you open under that Team.

When you define “Area\s” for Team this means that when you enter your Product Backlog (not query) you will only see work items under that “Area” (you choose if to include sub-areas)

Now, after we understand what and why let’s talk about How using TFS API.

Download Demo Project

Step 1: Create Project and Add Reference

Create an WPF application and add the following references:

First add reference for:

Microsoft.TeamFoundation.Build.Client (11.0.0.0)
Microsoft.TeamFoundation.Build.Common.dll (11.0.0.0)
System.Windows.Forms.dll

(C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ReferenceAssemblies\v2.0\)

Step 2: Connect and Get Teams Settings

In the previous posts we used TfsTeamService to get all teams under the Team Project. another way is to use the TeamSettingsConfigurationService.

The TeamSettingsConfigurationService has two methods:

GetTeamConfigurationsForUser
SetTeamSettings

We’ll use the GetTeamConfigurationsForUser passing the Project Uri, this will return all Teams under that project.

private void btnConnect_Click(object sender, RoutedEventArgs e)

{

var tpp = new TeamProjectPicker(TeamProjectPickerMode.SingleProject, false);

tpp.ShowDialog();

if (tpp.SelectedTeamProjectCollection == null) return;

tfs = tpp.SelectedTeamProjectCollection;

projectInfo = tpp.SelectedProjects[0];

teamConfig = tfs.GetService<TeamSettingsConfigurationService>();

GetTeams();

}

void GetTeams()

{

var configs = teamConfig.GetTeamConfigurationsForUser(new[] { projectInfo.Uri });

listTeams.ItemsSource = configs;

}

Step 3: Get Team Settings

Now when you select a Team from the Teams list we’ll use the TeamSettings object to pull the Areas + Iterations for that Team. You will also have the BacklogIterationPath and CurrentiterationPath properties (as we talked above).

private void listTeams_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (listTeams.SelectedItem == null) return;

var teamConfig = listTeams.SelectedItem as TeamConfiguration;

txtBacklogIteration.Text = teamConfig.TeamSettings.BacklogIterationPath;

txtCurrentIteration.Text = teamConfig.TeamSettings.CurrentIterationPath;

listIterations.ItemsSource = teamConfig.TeamSettings.IterationPaths;

listAreas.ItemsSource = teamConfig.TeamSettings.TeamFieldValues;

}

Download Demo Project

Enjoy

Windows 8 C# – Capture Media

shair — Tue, 22 May 2012 04:51:00 GMT

I left JavaScript and started to work on Windows 8 Metro using C# and XAML, in this post I’ll demonstrate how to use WinRT for Camera, File Picker and Audio Recording.

Download Demo Project

Step 1: Create Blank Metro Project and Initialize MediaCapture

Taking pictures using Camera or File Picker is pretty easy using WinRT, we going to use the MediaCapture class for Audio Recording, CameraCaptureUI for taking Picture from the built in Camera and FileOpenPicker for choosing pictures from local directories.

The MediaCapture class will allow us to capture:

Video
Media
Audio

But first we need to create our project resources and define the Application Capabilities to allow us using those features.

Open Package.appmanifest file located under the project and select the following:
Each of the below selections gives the application the needed permissions to work with those features.

MediaCapture mediaCaptureMgr;

StorageFile recordStorageFile;

bool recording;

DeviceInformationCollection devInfoCollection;

public BlankPage()

{

this.InitializeComponent();

mediaCaptureMgr = new MediaCapture();

}

/// <summary>

/// Invoked when this page is about to be displayed in a Frame.

/// </summary>

/// <param name="e">Event data that describes how this page was reached. The Parameter

/// property is typically used to configure the page.</param>

protected async override void OnNavigatedTo(NavigationEventArgs e)

{

EnumerateWebcamsAsync();

var settings = new MediaCaptureInitializationSettings();

settings.StreamingCaptureMode = StreamingCaptureMode.Audio;

await mediaCaptureMgr.InitializeAsync(settings);

}

Step 2: EnumerateWebcamsAsync

The code below using DeviceInformation.FindAllAsync method to get all media devices on your machine, you can also use this to get specific devices such as AudioCapture, AudioRender, PortableStorageDevice or VideoCapture.

Then we just add the name of each device found to a listbox.

async void EnumerateWebcamsAsync()

{

try

{

devInfoCollection = null;

EnumedDeviceList.Items.Clear();

devInfoCollection = await DeviceInformation.FindAllAsync(DeviceClass.All);

if (devInfoCollection == null || devInfoCollection.Count == 0)

{

await new Windows.UI.Popups.MessageDialog("No WebCams found.").ShowAsync();

}

else

{

for (int i = 0; i < devInfoCollection.Count; i++)

{

var devInfo = devInfoCollection.ElementAt(i);

EnumedDeviceList.Items.Add(devInfo.Name);

}

EnumedDeviceList.SelectedIndex = 0;

}

catch (Exception e)

{

new Windows.UI.Popups.MessageDialog(e.Message).ShowAsync();

}

Step 3: File Picker

File Picker is part of WinRT, allowing the user to choose files from local directories.

In the code below we define new class of FileOpenPicker and set several options:

ViewMode - Thumbnail or List
SuggestedStartLocation – Start Location
FileTypeFilter – Supported file types

Finally we call the PickMultipleFilesAsync to open the file picker and allowing the user to select multiple images. (You can also use PickSingleFileAsync for single image selection)

When the user click select the desire images and click the OK button we get a IReadOnlyList of StorageFile, in order to show them on the screen we can get the stream from each item our we can copy those file to our local storage and then use the “ms-appdata:///Local/FileName” path to display those images from our local storage folder.

private async void btnFilePicker_Click(object sender, RoutedEventArgs e)

{

FileOpenPicker openPicker = new FileOpenPicker();

openPicker.ViewMode = PickerViewMode.Thumbnail;

openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

openPicker.FileTypeFilter.Add(".jpg");

openPicker.FileTypeFilter.Add(".jpeg");

openPicker.FileTypeFilter.Add(".png");

IReadOnlyList<StorageFile> files = await openPicker.PickMultipleFilesAsync(); //PickSingleFileAsync

if (files.Count == 0)

{

await new Windows.UI.Popups.MessageDialog("No files were seleced!").ShowAsync();

return;

}

var storage = Windows.Storage.ApplicationData.Current.LocalFolder;

foreach (var file in files)

{

var copiedFile = await file.CopyAsync(storage, file.Name, NameCollisionOption.GenerateUniqueName);

listImages.Items.Add(string.Format("ms-appdata:///Local/{0}", copiedFile.Name));

}

Step 4: Camera Capture

Now it’s time to capture a image from the built in Camera, to do so we’ll use the CameraCaptureUI, simply define what type of image you want to receive by defining the Format, size etc..

After the user close the Camera dialog we check if the return file isn’t null and if it doesn't we use OpenAsyc method to get the file stream and then using that stream we’ll create a new BitmapImage from that stream and assign it to the ImgCamera.

private async void btnCamera_Click(object sender, RoutedEventArgs e)

{

try

{

CameraCaptureUI dialog = new CameraCaptureUI();

Size aspectRatio = new Size(16, 9);

dialog.PhotoSettings.CroppedAspectRatio = aspectRatio;

dialog.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Png;

StorageFile file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);

if (file != null)

{

var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

var bmpimg = new BitmapImage();

bmpimg.SetSource(stream);

ImgCamera.Source = bmpimg;

stream.Dispose();

}

catch (Exception ex)

{

new Windows.UI.Popups.MessageDialog(ex.Message).ShowAsync();

}

Step 5: Audio Recording

No for the last part of application, Recording Audio, first we’ll create a StorageFile inside the Music Library, we’ll set the recording profile to create an M4a file type and just calling the StartRecordToStorageFileAsync method of the MediaCapture class passing the storageFile and the recording profile.

After the user click the stop button we call the StopRecordAsync method, this will stop the recording and same as we did for the Camera, we open the file stream and assign the stream to the MediaPlayer source.

private async void btnAudio_Click(object sender, RoutedEventArgs e)

{

try

{

String fileName = "AudioRecording.m4a";

if (!recording)

{

recordStorageFile = await Windows.Storage.KnownFolders.MusicLibrary.CreateFileAsync(fileName);

Windows.Media.MediaProperties.MediaEncodingProfile recordProfile = null;

recordProfile = Windows.Media.MediaProperties.MediaEncodingProfile.CreateM4a(Windows.Media.MediaProperties.AudioEncodingQuality.Auto);

recording = true;

btnAudio.Content = "Stop Recording";

await mediaCaptureMgr.StartRecordToStorageFileAsync(recordProfile, recordStorageFile);

}

else

{

await mediaCaptureMgr.StopRecordAsync();

btnAudio.Content = "Start Recording";

var stream = await recordStorageFile.OpenAsync(Windows.Storage.FileAccessMode.Read);

playbackElement.AutoPlay = true;

playbackElement.SetSource(stream, recordStorageFile.FileType);

playbackElement.Play();

recording = false;

}

catch (Exception ex)

{

recording = false;

new Windows.UI.Popups.MessageDialog(ex.Message).ShowAsync();

}

Download Demo Project

TFS API Part 45 (VS11) – Modify Teams and Team Members

shair — Mon, 21 May 2012 05:42:00 GMT

In my previous post “Teams and Team Members” I talked about new Service in TFS API called – TfsTeamService. Using this service we can control Teams and Team Members under TFS.

We can create and remove Teams and Team Members using TFS API. I know this can be quite confusing but Teams in TFS are simply Group (Security Group), same as Contributors, Administrators etc.

If you open Security tab under TFS Web Management you can see that there is two separate lists of Groups – Teams and TFS Groups, I’ll show how to separate between Teams and Groups.

In order to add members or remove them from specific Team we need to use the IGroupSecurityService. You can read more here:

The application below will show you two lists: Groups and Teams.
Then you will be able to Remove the Team or Group and for each you can get the members under it.
You can also create new Team.

Download Demo Project

Step 1: Create Project and Add Reference

Create an WPF application and add the following references:

First add reference for:

Microsoft.TeamFoundation.Build.Client (11.0.0.0)
Microsoft.TeamFoundation.Build.Common.dll (11.0.0.0)
System.Windows.Forms.dll

(C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ReferenceAssemblies\v2.0\)

Step 2: Connect Team Foundation Server

Connect to TFS and obtain the TfsTeamService so we get the Team list and we need the IGroupSecurityService so we can add / remove Members and Groups.

private void btnConnect_Click(object sender, RoutedEventArgs e)

{

var tpp = new TeamProjectPicker(TeamProjectPickerMode.SingleProject, false);

tpp.ShowDialog();

if (tpp.SelectedTeamProjectCollection == null) return;

tfs = tpp.SelectedTeamProjectCollection;

teamService = tfs.GetService<TfsTeamService>();

projectInfo = tpp.SelectedProjects[0];

gss = (IGroupSecurityService)tfs.GetService(typeof(IGroupSecurityService));

GetTeams();

GetGroups();

}

To get the Teams list you only need to use the TFSTeamService and call the QueryTeams method.

For getting the Project Groups we’ll use the IGroupSecurityService calling ListApplicationGroups passing the project uri, this will return all groups under that Team Project (also the teams), in order to exclude teams from that list I did a query to verify for each item that his Sig doesn't exists in the TeamsList.

void GetTeams()

{

_teams = teamService.QueryTeams(projectInfo.Uri).ToList();

listTeams.ItemsSource = _teams;

}

void GetGroups()

{

Identity[] groups = gss.ListApplicationGroups(projectInfo.Uri);

var query = from _group in groups

where _group.Type == IdentityType.ApplicationGroup

&& !_teams.Any(t => t.Identity.Descriptor.Identifier.Equals(_group.Sid))

select _group;

listGroups.ItemsSource = query;

}

Step 3: Add And Remove

Now to the easy part, to Create new Team just use the TfsTeamService and use the CreateTeam method.

Use the IGroupSecurityService to Add members to Team or Group (The Same…) remove team/groups – you can ream more here - TFS API Part 41–Manage Groups and Members

teamService.CreateTeam(projectInfo.Uri, txtTitle.Text, txtDescription.Text, null);

gss.DeleteApplicationGroup(teamSid);

TfsTeamService

namespace Microsoft.TeamFoundation.Client

{

public class TfsTeamService

{

public TfsTeamService();

public TeamFoundationTeam CreateTeam(string projectId, string name, string description, IDictionary<string, object> properties);

public TeamFoundationTeam GetDefaultTeam(string projectUri, List<string> propertyNameFilters);

public Guid GetDefaultTeamId(string projectUri);

public void Initialize(TfsConnection tfsConnection);

public IEnumerable<TeamFoundationTeam> QueryTeams(IdentityDescriptor descriptor);

public IEnumerable<TeamFoundationTeam> QueryTeams(string projectId);

public IEnumerable<TeamFoundationTeam> QueryTeams(IdentityDescriptor descriptor, List<string> propertyNameFilters);

public TeamFoundationTeam ReadTeam(Guid teamId, List<string> propertyNameFilters);

public TeamFoundationTeam ReadTeam(IdentityDescriptor descriptor, List<string> propertyNameFilters);

public TeamFoundationTeam ReadTeam(string projectId, string teamName, List<string> propertyNameFilters);

public void SetDefaultTeam(TeamFoundationTeam team);

public void SetDefaultTeamId(string projectUri, Guid teamId);

public void UpdateTeam(TeamFoundationTeam team);

}

Download Demo Project

TFS API Part 44 (VS11) – Teams and Team Members

shair — Sun, 20 May 2012 05:31:00 GMT

TFS 11 comes with many great changes for software development, the first and super important is Teams, until TFS 11 Task work item or any other work item has to be assign to individual, means that you can’t assign a Task to a Scrum Team etc…

So many people has built customize solution to handle this but no need! because TFS 11 comes with this great Feature! In TFS Web Management site you can add as many teams as you want under One Team Project.

If your team works with Scrum then you should have a product backlog, but how you can manage two or more backlogs for each team? Working without backlog for teams will make it very difficult to keep track on what our team already completed and the progress on each other Task.

To Solve this you need to Assign Working Area and/or Iteration for Teams.

Now when you create a new Team there is a new Area created with the Team Name, this allow you to assign stuff for that Area path so the team can easily the relevant tasks for her. You can also define a different Area for Each team.

Now to the coding Part….. How to control teams from TFS API..

Download Demo Project

Step 1: Create Project and Add Reference

Create an WPF application and add the following references:

First add reference for:

Microsoft.TeamFoundation.Build.Client (11.0.0.0)
Microsoft.TeamFoundation.Build.Common.dll (11.0.0.0)
System.Windows.Forms.dll

(C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ReferenceAssemblies\v2.0\)

Step 2: Connect Team Foundation Server

Now, this part should be familiar, connecting to TFS server, there is plenty but the once I love the most if using TeamProjectPicker. After connect TFS we need to get a new service called – TfsTeamService – as you can understand from the name it has relation to Teams…

Using the Team Service we can query, add, remove and more but for now we’ll see how to get the full teams list and get team members.

After I receive the teamservice I used QueryTeams method with the Team Project Uri (the team project you picked using TeamProjectPicker)

private void btnConnect_Click(object sender, RoutedEventArgs e)

{

var tpp = new TeamProjectPicker(TeamProjectPickerMode.SingleProject, false);

tpp.ShowDialog();

if (tpp.SelectedTeamProjectCollection == null) return;

tfs = tpp.SelectedTeamProjectCollection;

teamService = tfs.GetService<TfsTeamService>();

listTeams.ItemsSource = teamService.QueryTeams(tpp.SelectedProjects[0].Uri);

}

Step 3: Get Members For Team

Now when you click on one team this will get the Team object we call GetMembers method to get all Team Members for that Team.

GetMembers method will return array of TeamFoundationIdentity, you can also change the MemberShipQuery enum to Extended in order to get Groups & Users.

private void listTeams_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (listTeams.SelectedItem == null) return;

var team = listTeams.SelectedItem as TeamFoundationTeam;

listMembers.ItemsSource = team.GetMembers(tfs, MembershipQuery.Direct);

}

Download Demo Project

Enjoy

Test Scribe for Visual Studio 11 Beta

shair — Mon, 14 May 2012 10:37:40 GMT

Test Scribe is a documentation power tool designed to construct documents directly from the TFS for test plan and test run artifacts for the purpose of discussion, reporting etc.

This is a popular extension for MTM, allowing users to export Test Documents, in previous posts I wrote about extending Test Scribe Template for MTM 10.

And of course as we getting closer to VS 11 release here is Test Scribe for VS 11 Beta, Download Page

Windows 8 JavaScript–Change Lock Screen Image

shair — Tue, 17 Apr 2012 07:53:00 GMT

In the past couple of months I’ve worked a lot with Windows 8 JavaScript and C#, I’ve also wrote plenty of posts on that subject and there is much more stuff to talk about.

In this post I’ll show two things:

Using File Picker using JavaScript
Change Windows 8 Lock Screen Image Programmatically

Download Demo Project

Step 1: Create Blank JavaScript Project

In the app.onactivated function we add the following code to listen the Choose Picture button and calling the displayCurrentImg function.
When you click the Choose Picture button we call the openFilePicker function.

app.onactivated = function (eventObject) {

if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

$("#btnBrowse").addEventListener("click", function () {

openFilePicker();

}, false);

displayCurrentLockImg();

WinJS.UI.processAll();

}

};

Step 2: Find The Current Lock Screen Image

You might notice that in the previous step I used $ char to find the button element, no I’m not using JQuery, I’ve just create a function that return the querySelector return value based on the value we pass. I said it before and I’ll say it again there is not need to add JQuery to Windows 8 Application everything you need is there!

Now for getting the current Lock Screen Image we’ll use the WinRT UserProfile.
Windows.System.UserProfile.LockScreen has couple of interesting function you can use:

getImgeStream – will return the current Lock Screen Image as Stream.
originalImageFile – the current Image file object.
setImageFileAsync – Set a new Image from File
setImageStreamAsync – Set a new Image from Stream

For now we just want to display the file path of the Lock Screen image.

function $(elementId) {

return document.querySelector(elementId);

}

function displayCurrentLockImg() {

var lockScreenFile = $("#lockScreenFile");

lockScreenFile.innerHTML = Windows.System.UserProfile.LockScreen.originalImageFile.path;

}

Step 3: Using File Picker

File Picker is also a part of WinRT, the file picker allow us to brose through the user files.
First we need to create a new instance of FileOpenPicker from Windows.Storage.Pickers.

After we have the picker object we can define the view mode – how we’ll see the files on the picker screen:

List
Thumbnail

picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

Now we can define the suggestedStartLocation object that will open our picker at a specific location.

picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

Enum Windows.Storage.Pickers.PickerLocationId:

computerFolder
desktop
documentsLibrary
downloads
homeGroup
musicLibrary
picturesLibrary
videosLibrary

We define the file filter to allow Images selection only by replacing all existing filters and adding new once.

picker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png", ".bmp"]);

Finally we call the pickSingleFileAsync to open the File Picker screen, you can also use pickMultipleFilesAsync for multiple file selection.

Full Code:

function openFilePicker() {

var picker = new Windows.Storage.Pickers.FileOpenPicker();

picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

picker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png", ".bmp"]);

picker.pickSingleFileAsync().then(function (file) {

Step 4: Set New Lock Screen Image

After we use the file picker to pick a new image the Lock Screen we just need to call setImageFileAsync function passing the file object from the picker and we’re Done!

picker.pickSingleFileAsync().then(function (file) {

if (file) {

// Application now has read/write access to the picked file, setting image to lockscreen.

Windows.System.UserProfile.LockScreen.setImageFileAsync(file).then(function (imageSet) {

$("#lockImg").src = URL.createObjectURL(file, false);

$("#lockImg").style.display = "block";

displayCurrentLockImg();

function (imageSet) {

// Set Image promise failed. Display failure message.

showErr("Setting the lock screen image failed. Make sure your copy of Windows is activated.");

});

}

function (file) {

showErr("File was not returned");

});

Download Demo Project

Enjoy.

Windows 8 – Icons

shair — Wed, 11 Apr 2012 12:05:00 GMT

Everyone who start developing for Windows 8 most heard about the AppBar control, the AppBar control is a navigation bar allowing the developer to add commands for his application.
When you define a command for AppBar you can set a Icon for it and there is already a lot of icons available for you out of the box in any Metro app.

To use those built it icons in C# and JavaScript you just need to set the font-family to - Segoe UI Symbol and write down the hexadecimal value of the icon.

Because the Icons are coming from Font they are Vectorial, this means you don’t have to add images to your project and you can modify the icon color by just changing the text color to any color you want.

Download Demo Solution – The solution contains both JavaScript and C# project.

C#

For C# there isn’t a built in Enum like in JavaScript but you can use the following code to run over all available Icons:

public SampleDataSource()

{

var startIndex = 0xE10F - 300;

var endIndex = startIndex + 1000;

var icons = new SampleDataGroup("Icons", "C# Icon List");

for (int i = startIndex; i < endIndex; i++)

{

icons.Items.Add(new SampleDataItem(i.ToString(),

(char)i,

string.Format("0x{0:X}:", i),

icons));

}

this.ItemGroups.Add(icons);

}

JavaScript

In JavaScript getting all icons is easy, you have a built it enum called – AppBarIcon, you can use this instead of the hexadecimal value, although this is AppBar icons you can use them everywhere.

The most important thing for using those Icons is setting the Font to 'Segoe UI Symbol'. (Example: Top Left Corner)

For JavaScript this is much more simple, you can just call the WinJS.UI.AppBarIcon enum to see all available icons or you can open the ui.js file and go to line – 27338 – or search for AppBarIcon: {.

This will show you the entire list of icons for JavaScript.

// Glyph Enumeration

/// <dictionary>Segoe</dictionary>

(function (WinJS) {

WinJS.Namespace.define("WinJS.UI", {

AppBarIcon: {

// Code point comments are the icon glyphs in the 'Segoe UI Symbol' font.

previous: "\uE100", // 

next: "\uE101", // 

play: "\uE102", // 

pause: "\uE103", // 

edit: "\uE104", // 

save: "\uE105", // 

clear: "\uE106", // 

delete: "\uE107", // 

Copy Source As Html-Visual Studio 11

shair — Tue, 10 Apr 2012 18:21:00 GMT

Windows 8 JavaScript – FlipView Control

shair — Sun, 08 Apr 2012 16:16:00 GMT

Windows 8 Metro App has couple of wonderful ways to display data, the more common way is Grid and Split Application Template. (You can read more about Windows 8 Project Templates - Windows 8 JavaScript Metro Application–Getting Started).

But there are several other ways to display information, in this post I’ll demonstrate a FlipView control, that represents an items control that displays one item at a time, and which enables "flip" behavior for traversing its collection of items. The items on this FlipView control will come from my Blog Rss using SyndicationClient.

We’ll create a FlipView control and also build a navigation bar for FlipView items.

Download Demo Project

Step 1: Define Progress Bar

After we create a Blank JavaScript project, we want to define the progress bar (while loading the rss feeds), for that I’ve added a progress element.

<div id="pbContainer">
    <label id="pb" class="progressRingText large">
        <progress class="win-ring win-large withText"></progress>Processing
    </label>
</div>

Step 2: Add Item Template and FlipView Control

I’ve create a Template control that has item-content with the feed html and itemTitle that display the feed title.

Now I add a new div element of type FlipView and bind his itemTemplate object to our ItemTemplate.

Step 3: Get Blog Feeds

I’ve created a new JavaScript file called – data.js, I create a namspace for items object that returns getPosts function.

getPosts is a Asynchronous function (it return the feeds), using SyndicationClient I send me blog Rss uri and for each feed I get I convert it to feedItem object (that contains the title, link and content of the feed), then I add each feed to the Array called blogData and at the end return a List from that Array.

Step 4: Bind Feeds To FlipView

On default.js in onactivated function we call the data.items() function and using then we make sure that only after we get the feeds we process the page, using querySelector we get the FlipView control and assign the itemDataSource to our list datasource.

This will display my feeds on the FlipView Control.

Step 5: Change FlipView Orientation Buttons

The next thing is to change the FlipView Orientation Buttons, this is a very simple task – Once the user click on the Horizontal button we call the changeOrientation function that checks what is the current Orientation and swipe it.

WinJS.UI.processAll().then(function () {
var f = document.querySelector("#flipview").winControl;
document.querySelector("#btnchangeOr").addEventListener("click", changeOrientation);
WinJS.UI.setOptions(f, { itemDataSource: posts.dataSource });
helper.showLoading(false);

The changeOrientation function:

Step 6: Build FlipView Navigation Bar

As I said in the beginning of this post, there are several ways to display data – when using FlipView control our user is forced to navigate the items one by one – Even if the user want to see the last item he has to go though all the items in the FlipView Control.

For that I built a simple navigation bar, you can adjust it with Feed titles and more – anything that will allow you user to quickly jump between items in FlipView control.

I’ve create another function called – buildIndex, this function received the total number or items in the FlipView control and for each control we create a RadioButton, each radio button a value telling the FlipView item Id and for click event we call radioButtonClicked function.

The radioButtonClicked function using the trigger object (The item which the user clicked on), we pull the value attribute and we change the FlipView curretPage object to that Id. this will force the FlipView Control to display that item.

Now, the user can still use the FlipView standard navigation buttons, so we need to listen to that event and based on the current page select the proper RadioButton.
We listen to “pageselected” event on the FlipView control and change the RadioButton based on the currentPage object (int).

Finally we add those RadioButtons to the DOM.

Download Demo Project

Enjoy.

TFS API Part 43–Delete Work Item Tool

shair — Fri, 06 Apr 2012 10:28:00 GMT

How to Remove Windows 8 Consumer Preview Watermark In 5 Steps

shair — Tue, 03 Apr 2012 16:37:00 GMT

I’m VS ALM Microsoft MVP For 2012!

shair — Sun, 01 Apr 2012 16:02:00 GMT

Windows 8 - DEP0600 : The following unexpected error occurred during deployment

shair — Sun, 01 Apr 2012 15:47:00 GMT

Microsoft Test Manager 11 – Exploratory Testing

shair — Wed, 14 Mar 2012 07:30:00 GMT

Window 8 JavaScript–Asynchronous Programming & App Storage

shair — Wed, 07 Mar 2012 05:33:00 GMT

In this post I’m going to talk about WinJS.xhr that makes an XMLHttpRequest as a Promise, and how to save and load images and from your local storage.

What is a Promise?

Promise is a way for Asynchronous Programming in JavaScript, Avoiding synchronous execution in single-threaded languages like JavaScript is necessary in order to create apps that are responsive and high performing. Windows Library for JavaScript provides a consistent and predictable mechanism called a Promise that simplifies asynchronous programming.

A promise implements a method for registering callbacks for state change notifications, named then.

Instead of writing a single get action that force your code to wait for response.

var result = myWebService.get(http://www.contoso.com);

Or if you think about writing more code like this:

myWebService.addEventListener('completed', function(result) 
                                              { /* do something */});
myWebService.get(http://www.contoso.com);

You should use WinJS Promise to create Asynchronous action using then method.

myWebService.get("http://www.contoso.com")
    .then(
       function (result) { /* do something */ },
       function (error) { /* handle error */ },
       function (progress) { /* report progress */ }
     );

For this post I wrote a simple JavaScript Metro App that downloads web images and saves them to local storage and a gallery that display all images under App local storage.

Download Demo Project

Step 1: Create a new Windows 8 JavaScript Metro App

First create empty JavaScript project and add new js file called - imgDownloader

We will use this file to download and locate the local images.

Step 2: Asynchronous Image Download

We need to download the image asynchronously, then save the stream we get to a local file.

The first thing is the folder location, Each application has three available folders under - Windows.Storage.ApplicationData.current - to save user data:

Local
Temp
Roaming

Now using WinJS.xhr we enter the image url and define the response type as “Blob”, again this is an Asynchronous method and we can use THEN in order to register a callback that will called when the request is finished.

Once we get the result from Xhr we use the folder object to create new file with the name the user passed, again once the new file was created we open this file for editing and get the stream.

Code Flow:

Using Ajax get the image = WinJS.xhr({ url: imgUrl, responseType: "blob" }).then
After we received the image we create a new file = folder.createFileAsync(imgName,..).then
Open our file for edit = file.openAsync(Windows.Storage.FileAccessMode.readWrite).then
Copy the image content = copyAsync(blob.msDetachStream(), stream).then
Close stream = stream.flushAsync().then

function download(imgUrl, imgName) {
return WinJS.xhr({ url: imgUrl, responseType: "blob" }).then(function 
                                                            (result) {
    var blob = result.response;
    return folder.createFileAsync(imgName, Windows.Storage.
           CreationCollisionOption.replaceExisting).then(function (file){
        // Open the returned file in order to copy the data
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite).
                                              then(function (stream) {
            return Windows.Storage.Streams.RandomAccessStream.copyAsync
                   (blob.msDetachStream(), stream).then(function () {
                // Copy the stream from the blob to the File stream
                return stream.flushAsync().then(function () {
                    stream.close();
                });
            });
        });
    });
}, function (e) {
    var msg = new Windows.UI.Popups.MessageDialog(e.message);
    msg.showAsync();
});
}

Step 3: Locate Local File

After the download has completed we want to locate the local file we just saved and return the file object, using the file object we can get the file type ,creation date and more.

Using Windows.Storage.ApplicationData.current.local.getFileAsync (or Temp, Roaming") , we can search for a specific file under that folder, if the file is found in the local folder we return the file, else return null. (File Not Found)

function fileExists(fileName) {
    return folder.getFileAsync(fileName).then(function (file) {
        return file;
    }, function (err) {
        return null;
    });
}

Step 4: Add imgDownloader Namespace

In order to call these methods from Default.js we need to add the namespace using the following methods:

WinJS.Namespace.define('imgDownloader', {
    download: download,
    fileExists: fileExists
});

Step 5: Add page functionality

Now, when the user writes the image Uri and clicks the “Get Image” button we’ll call the getImage function.

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.
                                                ActivationKind.launch) {
        // TODO: Initialize your application here.
        WinJS.UI.processAll();
 
        document.querySelector("#btnDownloadImg").addEventListener("click"
      , function () {
            getImage();
        });
    };

using querySelector we’ll take the Uri and File Name values, using the imgDownloader namespace and call Download function using the user supplied values. Because the download function has a callback value we can use the then method.

After the download operation has completed we call the fileExists function to get the local file object.

After getting the Image we demonstrate two options for displaying the image:

ms-appdata:// protocol – Path To Local Folder
URL.createObjectURL – Converting the file to blob, you can choose to create permanent blob so you can use it again.

function getImage() {
    var imgUrl = document.querySelector("#txtUrl").value;
    var fileName = document.querySelector("#txtFileName").value;
 
    imgDownloader.download(imgUrl,
    fileName).then(function () {
        imgDownloader.fileExists(fileName).then(function (file) {
            document.querySelector("#mainImg").src = 
                                     URL.createObjectURL(file, false);
            // using the ms-appdata:// protocol.
            document.querySelector("#mainImg2").src = 
                                    "ms-appdata:///Local/" + fileName;
 
 
            document.querySelector("#filePath").textContent = 
                                     "Path: " + file.path;
            document.querySelector("#fileType").textContent = 
                                     "Display Type: " + file.displayType;
            document.querySelector("#dateCreated").textContent = 
                                     "Date Created: " + file.dateCreated;
 
            drawGallery();
        }, function (err) {
            var msg = new Windows.UI.Popups.MessageDialog
                                                  ("Picture Not Found");
            msg.showAsync();
        });
    });
}

The last thing I want to do is locate all files under my local folder and display all image files.

Again we’ll use Windows.Storage.ApplicationData.current.localFolder but now let’s call “getItemsAsync” to get all files, then forEach over these items and make sure to handle only images, convert each file to a blob using createObjectURL and add the image to our gallery div.

function drawGallery() {
    Windows.Storage.ApplicationData.current.localFolder.getItemsAsync().
       then(function (items) {
        var div = document.querySelector("#existingFiles");
        div.textContent =  "";
        items.forEach(function (storageItem) {
            if (storageItem.fileType === ".png" || 
                storageItem.fileType === ".jpg" || 
                storageItem.fileType === ".jpeg") {
 
                var image = document.createElement("img");
                image.style.width = "100px";
                image.style.height = "100px";
                image.src = URL.createObjectURL(storageItem);
                image.alt = image.src;
 
                div.appendChild(image);
 
            }
        }, function (e) {
            var msg = new Windows.UI.Popups.MessageDialog(e);
            msg.showAsync();
        });
    });
}

Download Demo Project

Shai Raiten

TFS API Part 46 (VS11) – Team Settings

Windows 8 C# – Capture Media

TFS API Part 45 (VS11) – Modify Teams and Team Members

TFS API Part 44 (VS11) – Teams and Team Members

Test Scribe for Visual Studio 11 Beta

Test Scribe is a documentation power tool designed to construct documents directly from the TFS for test plan and test run artifacts for the purpose of discussion, reporting etc.

Test Scribe – Automatic Document Generating For Test Manager 2010

Test Scribe – Developer Guide

How To Change Test Scribe Template

And of course as we getting closer to VS 11 release here is Test Scribe for VS 11 Beta, Download Page

Windows 8 JavaScript–Change Lock Screen Image

Windows 8 – Icons

Copy Source As Html-Visual Studio 11

Windows 8 JavaScript – FlipView Control

TFS API Part 43–Delete Work Item Tool

How to Remove Windows 8 Consumer Preview Watermark In 5 Steps

I’m VS ALM Microsoft MVP For 2012!

Windows 8 - DEP0600 : The following unexpected error occurred during deployment

Microsoft Test Manager 11 – Exploratory Testing

Window 8 JavaScript–Asynchronous Programming & App Storage