IBloggable - implemented

Visual Studio Productivity Tips

Tue, 04 Nov 2014 02:09:36 GMT

These are some tips in Visual Studio that will help you be more productive. Below are the details of the session:

Find Feature	01:30
Copy text in message box to notepad	09:14
Cycle Clipboard	11:00
Do not cut/copy empty line	13:45
Immediate / Watch window ($user)	15:15
Browse with multiple browsers	20:30
Page Inspector	24:00
Web Essentials (http://vswebessentials.com)	38:45
TFS shortcuts (http://tinyurl.com/quickTFS)	49:50
Team Foundation Service (http://tfs.visualstudio.com)	54:50

Visual Studio Tips

Setting up Karma to run unit tests in PhantomJS and Chrome

Mon, 28 Apr 2014 08:35:00 GMT

This session talks about setting up Karma to run the unit tests in PhantomJS and Chrome. The unit tests are written using Jasmine. The tests are written for an AngularJS application, however you can write unit tests for just about any JavaScript code.

If you are new to AngularJS, you might first want to watch my Getting to know AngularJS video.

Setting up Karma to run unit tests in PhantomJS and Chrome

Node packages to install:

npm install -g karma-cli
npm install -g karma --save-dev
npm install -g phantomjs
npm install -g karma-jasmine --save-dev
npm install -g karma-phantomjs-launcher --save-dev
npm install -g karma-chrome-launcher --save-dev

Install the last one only if you plan to run your unit tests using Chrome; you don’t need it if you prefer running them only in PhantomJS. Now, create the karma configuration file.

karma init karma2.conf.js

To run karma: karma start karma2.conf.js

For code coverage:

npm install -g karma-coverage

Make the changes as shown in the video and run karma as shown above.

Code sample here.

Writing E-2-E tests for AngularJS using Protractor

Mon, 17 Feb 2014 07:42:35 GMT

This is a continuation of my post on Some advanced AngularJS concepts. This video focuses on writing and debugging end-to-end tests on AngularJS using Protractor.

Writing E-2-E tests for AngularJS using Protractor

Setting up Protractor – 00:13
Running e-2-e tests – 03:20
How to write tests for Protractor – 04:55
Debugging e-2-e tests – 17:30
Writing e-2-e tests in C# – 21:56

Code sample used in the session.

Some advanced AngularJS concepts

Mon, 17 Feb 2014 07:41:32 GMT

Some advanced AngularJS concepts

DI with $injector.annotate() – 00:35
Directives
- Transclusion: give me an extreme makeover and please ensure my children still love me!! – 13:10
- Setting Priority to your directives – 25: 43
- compile, preLink and postLink functions – 30:20
Using $provide.decorator() function – 38:15
Deep-watching objects and arrays – 44:45
Debugging AngularJS – 55:55

Code sample used in the session.

Used AngularJS v1.2.2 for this session

New Features of Visual Studio 2013

Fri, 20 Dec 2013 09:08:20 GMT

New features of Visual Studio 2013

I have categorized the new features into four general sections:

IDE Enhancements (00:40)

Can keep your settings in sync through Login, type synchronized in the Quick Launch window
Scaffolding New Project selection window
Tools->Options is searchable (+ resizable)
Notifications Center
Track active item or Sync active document
Edit and Continue on IIS x64
Voice Commands (http ://tinyurl.com/pzv2yzy)

General Code Improvements (12:30)

Code Lens (http://tinyurl.com/codelens)
Suspending your work - TFS
Navigate To (Ctrl+,)
Peek Window (Alt+F12)
Enhanced scrollbar is now in VS
Same class – two views
See the return value of a method
Alt + up/down arrows to move line of code/text up or down

“betterized” HTML (29:30)

BrowserLink
Intellisense for HTML Entities and data- attributes
What’s with Alt+1, 1, 1 and Alt+2?
Image tag metadata
VS 2013 knows AngularJS

“coolified” JavaScript and CSS (46:00)

Script References (http ://tinyurl.com/kg3j7jg)
Intellisense for vendor specifics, media queries, pseudo classes
Color picker in CSS gets boost

JavaScript / jQuery some advanced topics

Mon, 09 Dec 2013 01:29:07 GMT

In this session, we will talk about some of the advanced topics of JavaScript and jQuery.

Agenda:

How CSS selectors work?

Function declaration and function operators

Profile function

data method

Linting / Hinting

JavaScript / jQuery advanced topics

PS: Not sure why my face is pixelated.. I don’t look like that in real life!!

Testing JavaScript with QUnit

Mon, 02 Dec 2013 13:59:00 GMT

In this session, we will take a look at how to use QUnit to write unit tests for your JavaScript code.

High-level agenda:

Introduction to QUnit

Code Coverage using BlanketJS

Mocking AJAX using MockJax

Automating unit tests using GruntJS

JavaScript Unit testing with QUnit

Edit: You can download the code snippet used in this session here

3 of my apps on BestWindows8Apps.net

Sat, 30 Nov 2013 02:21:14 GMT

Yesterday I received this email:

“Congratulations!
Your apps (Knights Tour, Howzzat Book, Cows N Bulls) has been tested and rated by the BestWindows8Apps.net. Feel free to use Editor's pick award on your web page to show your visitors how highly we value your apps.
Award:

http://bestwindows8apps.net/wp-content/uploads/2013/11/editors_pick.png

Your apps:
http://bestwindows8apps.net/knights-tour/
http://bestwindows8apps.net/howzzat-book/
http://bestwindows8apps.net/cows-n-bulls/

Best Regards,
Eric
BestWindows8Apps.net”

And that’s what the award looks like… Wuhoo!

Getting to know AngularJS

Fri, 29 Nov 2013 05:27:47 GMT

I did a session to my colleagues and wanted to share with all of you. Some parts have been edited out as per company policy.

Getting to know AngularJS

Hope this helps.

Using QUnit for JavaScript unit test and BlanketJS for code coverage

Sat, 29 Jun 2013 03:42:51 GMT

I recently started using QUnit for unit testing JS code and I’m really impressed with it. I’m sure Jasmine framework is equally good, but I picked up QUnit because none of the languages/frameworks I have learned so far have the letter ‘Q’ in them!!

So I have a simple page which is used to add two numbers and show the sum as a text.

   1:  <!DOCTYPE html>

2:

   3:  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

   4:  <head>

   5:      <meta charset="utf-8" />

   6:      <title>qUnit and Blanketjs</title>

   7:  </head>

   8:  <body>

   9:      <input type="text" id="arg1" />&nbsp;

  10:      <input type="text" id="arg2" /> <br />

  11:      <div id="output1">&nbsp;</div>

  12:      <input type="button" id="button1" value="Show sum" /><p />

  13:  </body>

  14:      <script src="Scripts/jquery-2.0.0.min.js"></script>

  15:      <script src="Scripts/main.js" type="text/javascript"></script>

  16:  </html>

I’m using jQuery 2.0 for this as it is the current version. My javascript to get the ‘complex’ summation feature looks as below.

   1:  var getSum = function (arg1, arg2) {

   2:      var intArg1 = parseInt(arg1);

   3:      var intArg2 = parseInt(arg2);

   4:      return intArg1 + intArg2;

   5:  };

6:

   7:  var getSumText = function (arg1, arg2) {

   8:      var sum = getSum(arg1, arg2);

   9:      return 'The sum of ' + arg1 + ' and ' + arg2 + ' is ' + sum + '.';

  10:  };

11:

  12:  $("#button1").click(function (e) {

  13:      var sumText = getSumText($("#arg1").val(), $("#arg2").val());

  14:      $("#output1").text(sumText);

  15:      e.stopPropagation();

  16:  });

I’m using the ‘function operator’ methodology to create my functions. See a very good article by Helen Emerson on this here. Declaring your functions before they are called will also help you get a ‘green’ from jsLint and jsHint.

A sample output looks like below.

Now let’s start writing unit test for these. QUnit requires three things to get started – the html, QUnit javascript framework and QUnit CSS file. All of these are detailed in the site itself. My qUnit.html contains a reference of main.js (containing the .js code for the feature) and the mainTests.js where I’m going to write my JavaScript unit test cases in.

   1:  <!DOCTYPE html>

   2:  <html>

   3:  <head>

   4:      <meta charset="UTF-8" />

   5:      <title>Test Suite</title>

   6:      <link href="Content/qunit-1.12.0.css" rel="stylesheet" />

   7:      <script src="Scripts/jquery-2.0.0.min.js"></script>

   8:      <script src="Scripts/main.js"></script>

   9:      <script src="Scripts/qunit-1.12.0.js"></script>

  10:      <script src="Scripts/mainTests.js"></script>

  11:  </head>

  12:  <body>

  13:      <h1 id="qunit-header">Test Suite</h1>

  14:      <h2 id="qunit-banner"></h2>

  15:      <div id="qunit-testrunner-toolbar"></div>

  16:      <h2 id="qunit-userAgent"></h2>

  17:      <ol id="qunit-tests"></ol>

  18:      <div id="qunit-fixture"></div>

  19:  </body>

  20:  </html>

Let’s start with writing a unit test for the getSum method.

   1:  module('Sum tests');

   2:  test('should add correctly', 1, function() {

   3:      var sum = getSum('2', '1');

   4:      deepEqual(sum, 3, 'sum is correct');

   5:  });

The first line declares a module which somewhat equates to a test class under which you can add all related tests. This is not required for unit testing per say, but is a good practice to segregate your tests. Also, as you will see later, QUnit gives a way to run all tests under a specific module.

The second line declares your unit test with a title – ‘should add correctly’. The second parameter tells the number of assertions expecting in this test case. The third one the function itself. We call the getSum() function passing two arguments and get the return.

The assertion ‘deepEqual’ compares the output with an expected value along with the type of the result, hence the name ‘deepEqual’. The complete details on using QUnit is provided on their cookbook page.

If I run the qUnit.html in the browser, I’ll see the below.

There’s one test method under the module ‘Sum tests’ and it has passed. Wuhoo!

Now, let’s switch gears and go to BlanketJS to implement the code coverage part.

There are three changes we’ll make to get BlanketJS to do it’s job to the qUnit.html page.

   1:  <!DOCTYPE html>

   2:  <html>

   3:  <head>

   4:      <meta charset="UTF-8" />

   5:      <title>Test Suite</title>

   6:      <link href="Content/qunit-1.12.0.css" rel="stylesheet" />

   7:      <script src="Scripts/jquery-2.0.0.min.js"></script>

   8:      <script src="Scripts/main.js" data-cover></script>

   9:      <script src="Scripts/qunit-1.12.0.js"></script>

  10:      <script src="Scripts/blanket.min.js"></script>

  11:      <script src="Scripts/mainTests.js"></script>

  12:  </head>

  13:  <body>

  14:      <h1 id="qunit-header">Test Suite</h1>

  15:      <h2 id="qunit-banner"></h2>

  16:      <div id="qunit-testrunner-toolbar"></div>

  17:      <h2 id="qunit-userAgent"></h2>

  18:      <ol id="qunit-tests"></ol>

  19:      <div id="qunit-fixture"></div>

  20:          <script type="text/javascript">function blanket_toggleSource(e) {

  21:      var t = document.getElementById(e);

  22:      t.style.display === "block" ? t.style.display = "none" : t.style.display = "block";

  23:  }</script>

  24:  </body>

  25:  </html>

The first is the inclusion of the blanket js file as shown in line 10. The second one is the addition of ‘data-cover’ attribute to the reference of main.js on line 8. This is the attribute that BlanketJS looks for to provide code coverage on. The third and the last change is the addition of the script tag as seen in lines 20-23.

Now if you refresh the qUnit.html page, you’ll see a new option – the Enable coverage checkbox. Click on it and the page refreshes with the coverage details.

There you go. Now you have coverage for your main.js file. Clicking on the main.js link gives you even more details.

Brilliant right? So now we know the getSumText is not covered, let’s write another test for that and see the results.

   1:  test('should display text correctly', 1, function() {

   2:      var sumText = getSumText(3, 5);

   3:      equal(sumText, 'The sum of 3 and 5 is 8.', 'sum text is correct');

   4:  });

The latest results are:

So there you go – JavaScript unit testing and code coverage in real simple steps.

Seeing the events attached to a DOM element

Fri, 28 Jun 2013 14:05:41 GMT

There is a difference among jQuery versions when it comes to reading the events attached to a DOM element. Let’s start with the pre-1.8 version.

   1:  <!DOCTYPE html>

   2:  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

   3:  <head>

   4:      <meta charset="utf-8" />

   5:      <title>Pre 1.8</title>

   6:  </head>

   7:  <body>

   8:      <input type='button' id='output' value='click to see the events attached' />

   9:      <div id='caller'>Pre 1.8 version</div>

  10:      <div id='display'></div>

  11:  </body>

  12:  <!--pre 1.8 jquery-->

  13:  <script src="jquery-1.7.min.js"></script>

  14:  <script>

  15:      // register some events on an element

  16:      $('#caller').click(function () { $('#display').append('clicked on caller'); });

17:

  18:      $("#caller").hover(function () { $(this).css('color', 'red'); },

                              function () { $(this).css('color', 'black'); });

19:

  20:      $('#output').click(function (e) {

  21:          // read all the events registered

  22:          $.each($('#caller').data('events'), function (i, event) {

  23:              $("#display").append('<br/>Event=' + i);

  24:              $.each(event, function (j, h) {

  25:                  $("#display").append('<br/>');

  26:                  // the below executes the actual function attached

  27:                  //$('#display').append(h.handler);

  28:                  // the below gives the entire function

  29:                  $("#display").append(h.handler.toString());

  30:              });

  31:          });

  32:          e.preventDefault();

  33:      });

  34:  </script>

  35:  </html>

I have two divs and a button. Version 1.7 of jQuery is used in this snippet and I’m registering the click and the hover events on the ‘caller’ div. As per jquery documentation, hover binds handlers for both mouseenter and mouseleave events.

When I click on the button, the $(‘#caller’).data(‘events’) code returns the events for the given DOM element. The remainder of the script is just plumbing code to loop through and see the event details. I think I have added enough comments in the click event to make it self-explanatory. Make special note of the line 27. With this, you can actually execute the event by just calling the handler.

As you can see in the below output, the events (click, mouseover and mouseout) are shown.

This got changed in version 1.8 (see here and here). So in the newer versions (I’ve used 2.0.0 for this exercise), if you want to do the same, use the snippet below.

   1:  <!DOCTYPE html>

2:

   3:  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

   4:  <head>

   5:      <meta charset="utf-8" />

   6:      <title>Post 1.8</title>

   7:  </head>

   8:  <body>

   9:      <input type='button' id='output' value='click to see the events attached' />

  10:      <div id='caller'>Post 1.8 version</div>

  11:      <div id='display'></div>

  12:  </body>

  13:  <script src="jquery-2.0.0.min.js"></script>

  14:  <script>

  15:      // register some events on an element

  16:      $('#caller').click(function () { $('#display').append('clicked on caller'); });

17:

  18:      $("#caller").hover(function () { $(this).css('color', 'red'); },

                              function () { $(this).css('color', 'black'); });

19:

  20:      $('#output').click(function () {

  21:          console.log($('#caller')[0]); // returns <div id='caller'>, for FYI only

  22:          // read all the events registered

  23:          $.each($._data($('#caller')[0], 'events'), function (i, event) {

  24:              $('#display').append('<br/>Event=' + i);

  25:              $.each(event, function (j, h) {

  26:                  $('#display').append('<br/>');

  27:                  // the below executes the actual function attached

  28:                  //$('#display').append(h.handler);

  29:                  // the below gives the entire function

  30:                  $('#display').append(h.handler.toString());

  31:              });

32:

  33:          });

  34:      });

  35:  </script>

  36:  </html>

Most of the page is the same as the pre-1.8 example, except for the way in which you read the events registered on an element (line 23).

The output is again the same as the previous one.

So in short, use $('#caller').data('events') for pre 1.8 and $._data($('#caller')[0], 'events') for 1.8 and later versions.

Find feature in Standard Toolbar Visual Studio 2010, 2012

Thu, 28 Mar 2013 03:42:23 GMT

There is a button ‘Find’ in the Standard toolbar which remains hidden (absolutely no clue why), but adding it can help do some wonders.

In my machine the shortcut for this is Ctrl+D, but I have also seen Ctrl+/ on other machines.

As the name suggests, it helps you to find text in the current file. But did you know you can open files, insert breakpoints and use it as a Command window using this button?

Opening files:

By default, Ctrl+O is the shortcut to pull up the Open Files dialog window.

To use this feature to open files, type a file name in current solution and press Ctrl+O while the focus is still in the Find textbox and the file will be opened for u.

It’s that simple. This is not just limited to the files in the solution, you can open any file on your machine if provide the full path.

Here’s a question you might ask. What if there are multiple files with the same name in my solution? For example, in my test MVC4 solution, there are multiple Index.cshtml files in the Views folder. So what happens if I just search for Index.cshtml? Based on my testing so far, it opens the first file with that name, with the path sorted alphabetically.

If I type Index.cshtml Ctrl+O, it opens the Index.cshtml file in the Gamma folder as it is the first file with that name. If you want to open some other file, you can provide the parent folder name.

And just as usual, if you type in a file name that does not exist, it gives the default 'operation could not be completed’ message.

Inserting breakpoints:

To add a breakpoint, you place the cursor on a line and press the F9 function key. So type in the [ClassName].[MethodName] and press F9 key in the Find textbox and a breakpoint will be inserted at the method declaration.

Just a few points to note here:

1. This is case-sensitive, so if you had typed in homeController.index and pressed the F9 key, the breakpoint will not be inserted.

2. You can only insert breakpoints with this and cannot remove existing ones or the ones you just added.

3. The breakpoint gets added to the method declaration and once debugging begins, the breakpoint is automatically moved to the actual method block.

4. Best of all, you don’t have to have the file open to have the breakpoint inserted.

Command Window:

If you’re not sure what Command window is used for, have a look at the below articles that give a pretty good overview of it’s usage.

http://blogs.msdn.com/b/seealso/archive/2011/01/25/using-the-command-window-in-visual-studio-2010.aspx
http://msdn.microsoft.com/en-us/library/vstudio/c785s0kz.aspx

So, I can just start typing in the Command window and I’ll get intellisense.

In order to convert the Find text box to a Command window, all you have to do is to just type the ‘>’ and then start typing as it is were the Command window itself.

Viola!

Just as an example, you an use the shortcut ‘of’ for open file and you will see the magic happen.

As I started typing the file name, it gave me intellisense options of the possible file names. Just select the one you need and hit Enter and the file opens. Note that this is the Command window now, so you don’t have to do Ctrl+O to open the file.

Go ahead, fiddle around with this great feature, you’ll never know what else you’ll find.

THIS FEATURE IS AVAILABLE IN VISUAL STUDIO 2010 AS WELL.

I also found something with message boxes and although this is completely unrelated to the Find feature, just wanted to share it in this blog itself.

When you get a message box, like the one shown above for ‘operation could not be completed’, press Ctrl+C with the message box as the active window, open any text editor and press Ctrl+V, you’ll see the entire text of the message box.

That’s it for now.

A Thank you from Microsoft

Mon, 21 Jan 2013 03:41:37 GMT

Sometime back, I received an email from MIcrosoft that said:

Subject: Thank you for your help with Visual Studio 2012!‏

“The release of Visual Studio 2012 & .NET Framework 4.5 is upon us! Your input during the development cycle has greatly contributed to this being a successful release for Microsoft® and we would like to send you a thank you gift to show our appreciation.

…

On behalf of the entire Microsoft Developer Division, thank you again for your involvement in making Visual Studio 2012 and the .NET Framework 4.5 great!”

Over the weekend, I received a crystal award that looks really cool.

Here’s what the text says:

“On behalf of the entire Visual Studio and .NET team, I would like to extend our heartfelt thanks for all the hard work you put into helping us ship Visual Studio 2012 and the .NET Framework 4.5. Given the shorter beta time lines for VS 2012 and .NET 4.5, we had to streamline the process for collecting and analyzing customer feedback. That required you to give us feedback on a faster cadence and you delivered on that.

Your contributions were critical to our ability to deliver a better product. This release contains new features in virtually every area of the product, and improvements for all major Microsoft platforms including Windows 8, Windows Server, Windows Azure, Windows Phone and Office 365. The amount of passion you poured into giving us feedback across all the feature sets has helped us learn more about real world use and deliver something truly exciting and impactful for our customers.

We realize that you have invested significant time to help us and we deeply appreciate your commitment to help us build a better product. As a token of appreciation, please accept this thank you gift. And again, thank you so much for helping us build a better Microsoft Visual Studio 2012 and .NET Framework 4.5.

All the best,

S. Somasegar
Corporate Vice President,
Microsoft Developer Division”

Thank you Microsoft for the recognition.

2012–year in review

Thu, 03 Jan 2013 14:58:51 GMT

Below are some of the highlights of 2012 for me.

> Published 4 apps to the Windows 8 Store

> Been part of a Guinness World Record

> Became a Microsoft Rockstar. Eventually I started showing up on the Microsoft India Rockstar site

> My game Knight’s Tour bagged the third prize in the apptivate.ms contest

> Read 18 books (although not related to technology, just wanted to toot my horn)

> Year’s top blog articles:

Obtaining screen resolution scale details in Windows 8 Metro Style App

Accessing files on local machine in Windows 8 Metro Style Apps using JavaScript and HTML5

Saving user details on OnSuspending event for Metro Style Apps

Running Windows App Certification Kit (WACK) tool from Command Prompt

Grouping GridView on Windows 8

Analytics for Windows 8 apps using Markedup

Sat, 15 Dec 2012 07:51:11 GMT

The Windows 8 store does provide some analytics information to you in terms of downloads by market or by age group, ratings, in-app purchases.

I find that a little too limiting. What if I want to know what page my users are spending most of their time or what events are being raised more frequently or are my users calling my app through the search contract I implemented or how many times was the share contract called. To answer questions like this, you need a more mature analytics framework. Markedup is one such solution.

Once you register an account (free at the time of writing this blog), click on Track a new app link.

Enter the details in the fields

Notice that MarkedUp is available for all types of Win8 development platform – C#/ XAML, JavaScript and C++. This article will concentrate on how to implement MarkedUp for a C# / XAML app. Please refer to the documentation on the site to implement the same if you are using other languages to develop your app.

Once you click on the Create app button, MarkedUp gives you a unique API Key. This is the key that you will need to register in your app and all the events that you track will be associated to this API Key. Installing the MarkedUp package through NuGet seems to be the easiest way out.

One of the requirements to use MarkedUp is that you enable the Internet capability in your app, to enable the transfer of analytics information to MarkedUp servers. Add a Privacy policy to your app once you have enabled Internet capability. See point 5 in this article for details.

You now need to call the Initialize method of the SDK and pass the API key that was created before. You can get the API key by clicking on the Install MarkedUp link in the site as well. You do this in the, say the OnLaunched event, in your XAML app. Now you are all set to utilize the SDK to the fullest.

Let’s go directly to implementing the logging of session events. There are five types of session events that you can utilize based on your scenario.

Navigation Events – track a user’s movement through your app. Use the EnterPage and ExitPage events of the SDK in the OnNavigatedTo and OnNavigatedFrom methods.

For XAML apps, you can track navigation events by calling the RegisterNavigationFrame method.

Commerce Events – tracks commerce activity which includes trial conversion and in-app purchases. Use the InAppPurchaseShown method of the SDK.

Form Events – tracks the forms that a user has filled while using your app. The InputFormSubmitted method would be the main one to be used, however if you want more granular detail, you can also implement the InputFieldSelected, InputFieldTextEntered and InputFieldUnselected methods as well.

Contract Events – tracks the contracts in your like Search and Share contract.

Life Cycle Events – tracks app life cycle events like suspend and resume. AppStart, AppResume, AppSuspend and AppExit methods are available.

Custom Events – tracks any custom action that you want. This is one of my favorite features available in the SDK.

I use custom events to track how my users are faring in the Knight’s Tour game.

Apart from these, the SDK also gives you diagnostic logging where you can log Debug, Errors and Fatal scenarios that your app encounters.

MarkedUp also provides daily app stats like session and active users.

You can see daily app installs.

Another really cool feature provided is the app version usage. You can see what percentage of your user-base has upgraded.

Time spent in the app is also shown.

These are some of the main features that I wanted to bring to attention. There are others that are useful as well.

MarkedUp is in beta (at the time of writing), but they also have a pricing model once they come out of beta. You can choose which one fits for you.

I have implemented these analytics on three of my Windows 8 apps and here are some pointers based on my experience.

Start analytics right from the first version: You can track your app from the very beginning.
Implement the events even if the website is not currently supporting them: In their own words – “our reporting dashboard is currently playing catch up with our SDK”, so log those events, they’ll show up on the site soon.
Events that are captured during app development are counted as well: MarkedUp said “Yes - MarkedUp will count those calls and measure them; they're usually a drop in the bucket compared to what your live users in the marketplace will accrue though”. So my suggestion is that you develop you app to almost completion and then add these events just before creating a package for the Win 8 store. The other way would be to comment out the Initialize method call and continue your development.

Are you MarkedUp yet?

Implementing Ads on any page in your Windows 8 XAML app–part 2

Sun, 25 Nov 2012 08:41:43 GMT

In my previous article, you saw how you can start implementing ads on some of the page templates. In this one, we’ll see how we can add something called ‘interstitial ads’ – ads that appear as part of the content in your app.

I have added a Grouped Items page to my project. My data model is set to show a few appliances. I have a BaseModel class and the ApplianceModel that inherits the BaseModel class has two properties to represent an appliance. The ProductHolder acts as a container for a list of base models.

   1:  public class BaseModel

   2:  { }

3:

   4:  public class ApplianceModel : BaseModel

   5:  {

   6:      public string Title { get; set; }

   7:      public string ImagePath { get; set; }

   8:  }

9:

  10:  public class ProductHolder

  11:  {

  12:      public string Category { get; set; }

  13:      public List<BaseModel> Models { get; set; }

  14:  }

For the purpose of demonstration, I’m populating a static list of items to be shown on the page.

   1:  protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)

   2:  {

   3:      List<ProductHolder> products = GetProducts();

   4:      this.DefaultViewModel["Groups"] = products;

   5:  }

6:

   7:  private List<ProductHolder> GetProducts()

   8:  {

   9:      ProductHolder productHolder = new ProductHolder();

  10:      productHolder.Category = "Appliances";

  11:      productHolder.Models = new List<BaseModel>();

  12:      productHolder.Models.Add(new ApplianceModel

  13:      {

  14:          Title = "Refrigerator", ImagePath = "Assets/Refrigerator.jpg",

  15:      });

16:

  17:      productHolder.Models.Add(new ApplianceModel

  18:      {

  19:          Title = "Heaters", ImagePath = "Assets/Heaters.jpg",

  20:      });

21:

  22:     // a few more appliances likewise...

23:

  24:      List<ProductHolder> products = new List<ProductHolder>();

  25:      products.Add(productHolder);

26:

  27:      return products;

  28:  }

I have created a custom (simpler) template – NormalTemplate to display the details of the model in question.

   1:  <GridView

   2:      x:Name="itemGridView"

   3:      AutomationProperties.AutomationId="ItemGridView"

   4:      AutomationProperties.Name="Grouped Items"

   5:      Grid.RowSpan="2"

   6:      Padding="116,137,40,46"

   7:      ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"

   8:      ItemTemplate="{StaticResource NormalTemplate}"

   9:      SelectionMode="None"

  10:      IsSwipeEnabled="false">

  11:  <!-- rest of the code is removed for brevity-->

When the app is run, I see the below rendering for my screen resolution. If you want more details on how to get to this stage, see here.

Let’s go ahead and introduce ads now. I create a class called AdModel inheriting our good ol’ BaseModel. There is no need for any properties, so I’ll leave this class empty.

   1:  public class AdModel : BaseModel

   2:  { }

In the GetProducts method, I’m going to add a couple these AdModel instances in the collection.

   1:  productHolder.Models.Add(new ApplianceModel

   2:  {

   3:      Title = "Refrigerator", ImagePath = "Assets/Refrigerator.jpg",

   4:  });

5:

   6:  productHolder.Models.Add(new AdModel());

7:

   8:  productHolder.Models.Add(new ApplianceModel

   9:  {

  10:      Title = "Heaters", ImagePath = "Assets/Heaters.jpg",

  11:  });

12:

  13:  productHolder.Models.Add(new ApplianceModel

  14:  {

  15:      Title = "Dishwasher", ImagePath = "Assets/Dishwasher.jpg",

  16:  });

17:

  18:  productHolder.Models.Add(new AdModel());

19:

  20:  productHolder.Models.Add(new ApplianceModel

  21:  {

  22:      Title = "Vacuum", ImagePath = "Assets/vacuum.jpg",

  23:  });

24:

  25:  productHolder.Models.Add(new ApplianceModel

  26:  {

  27:      Title = "Washer", ImagePath = "Assets/Washer.jpg",

  28:  });

You can see lines 6 and 18 where I’m adding a couple of the AdModel instances. I’ll also create the template that should be used to render ads. Make sure you add a reference of Microsoft Ad library to the ResourceDictionary something like xmlns:UI="using:Microsoft.Advertising.WinRT.UI".

   1:  <DataTemplate x:Key="AdTemplate">

   2:      <Grid Width="250" Height="250">

   3:          <UI:AdControl

   4:              ApplicationId="d25517cb-12d4-4699-8bdc-52040c712cab"

   5:              AdUnitId="10043107"

   6:              Width="250" Height="250" />

   7:      </Grid>

   8:  </DataTemplate>

We now need some kind of a template selector that decides, at runtime, what data template should be used to render a particular type of data. The DataTemplateSelector is used specifically for this purpose. I will add a class named CustomTemplateSelector.

   1:  using Windows.UI.Xaml;

2:

   3:  public class CustomTemplateSelector : DataTemplateSelector

   4:  {

   5:      public DataTemplate NormalTemplate { get; set; }

   6:      public DataTemplate AdvertTemplate { get; set; }

7:

   8:      protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)

   9:      {

  10:          if (item is AdModel)

  11:          {

  12:              return AdvertTemplate;

  13:          }

  14:          return NormalTemplate;

  15:      }

  16:  }

There are two properties that represent the two data templates that we have created. The SelectTemplateCore method takes in the item that needs to be rendered and all I’m doing here is to say, if the item is of type AdModel, render using the value in the AdvertTemplate property.

Now for the last step, where you set the CustomTemplateSelector as the item template selector in the GridView.

   1:  <GridView

   2:      x:Name="itemGridView"

   3:      AutomationProperties.AutomationId="ItemGridView"

   4:      AutomationProperties.Name="Grouped Items"

   5:      Grid.RowSpan="2"

   6:      Padding="116,137,40,46"

   7:      ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"

   8:      SelectionMode="None"

   9:      IsSwipeEnabled="false">

  10:      <GridView.ItemTemplateSelector>

  11:          <local:CustomTemplateSelector

  12:              AdvertTemplate="{StaticResource AdTemplate}"

  13:              NormalTemplate="{StaticResource NormalTemplate}"/>

  14:      </GridView.ItemTemplateSelector>

Here are the changes from the previous version. The ItemTemplate property is removed and GridView.ItemTemplateSelector is added. I am referencing the CustomTemplateSelector and populating the AdvertTemplate and the NormalTemplate with the data template keys. So the AdvertTemplate property is set to AdTemplate and the NormalTemplate property is set to the NormalTemplate data template.

The app gets rendered as below now.

So there you go, the 2nd and the 5th position are showing ads on the page. You can use the same technique to add interstitial ads in other pages like Split page, Items page and Group details page.

Implementing Ads on any page in your Windows 8 XAML app–part 1

Sat, 24 Nov 2012 09:21:00 GMT

Let’s look at how you can implements ads on any page in your win 8 app. Before you get to your application, you need to create Ad Units in the MS Pubcenter site. Once you have set up your account with payout and tax details, go to the Setup tab and you’ll see something like below.

There are a few options for the sizes of the ad units as shown on the Pubcenter site.

Remember that these screenshots are just to give you some reference. The actual positioning of the ads in your apps is decided by you.

Plan ahead and decide what size you want to ‘donate’ for ads in your app. Use the test values in this article before you create the ad units for your app. There is a lag of few minutes before you can start using them in your apps after creating the ad units.

When it comes to a blank/basic page template, which are usually used for game applications, you are at freedom to place the ads anywhere in your app. For example, ads appear at bottom left in the Knight’s Tour app. Make sure you get the Windows 8 Ads SDK and add a reference to your project.

   1:  <UI:AdControl x:Name="AdHolder"

   2:                ApplicationId="d25517cb-12d4-4699-8bdc-52040c712cab"

   3:                AdUnitId="10043107"

   4:                Width="250"

   5:                Height="250"

   6:                HorizontalAlignment="Left"

   7:                VerticalAlignment="Bottom"

   8:                Margin="0, 0, 0, 30"

   9:                Grid.Row="1"/>

I’ll jump to the ItemDetailsPage template where you show complete details of a particular item. In this page you can create an InlineUIContainer and place the ad unit in there. This way your ad looks to be a part of the content itself.

   1:  <Paragraph LineStackingStrategy="MaxHeight">

   2:      <InlineUIContainer>

   3:          <Grid Width="560" Height="125" MaxHeight="125">

   4:              <UI:AdControl

   5:                 ApplicationId="d25517cb-12d4-4699-8bdc-52040c712cab"

   6:                 AdUnitId="10043124"

   7:                 Width="250" Height="125"

   8:                 HorizontalAlignment="Center"/>

   9:          </Grid>

  10:      </InlineUIContainer>

  11:  </Paragraph>

In the Howzzat Book app, you can see this working.

In the next article, we’ll see how to include ads in pages like Split page, Items page, Grouped items page and Group details page.

My apps in the Windows 8 Store

Fri, 16 Nov 2012 01:54:13 GMT

I have four apps in the Windows 8 store now.

Logo	Name	Available since	Description
	Knight’s Tour	Nov 7 2012	Game – How many moves you can make with your Knight on a board
	alternatives To	Oct 9 2012	App – Alternatives to a specified software on various platforms with different licenses
	Cows N Bulls	Sept 7 2012	Game – Guess the four-letter word chosen by the computer
	Howzzat Book	Aug 27 2012	App – Get ratings for a book from various sites all in one place

Team Foundation Service–now for everyone

Thu, 01 Nov 2012 04:52:00 GMT

I heard an announcement regarding TFS being opened for all. I’ve been wanting to have a source control for my personal projects.

The set up was an unbelievably simple 3 step process.

Signup at http://tfs.visualstudio.com/en-us/ using an account name of your preference

Your source control server is something like https://[account name].visualstudio.com.

Create your team project choosing a process template of your preference

You now have a source control for all your projects. You can connect to this server from VS as well.

Check-in your projects

Best of all, it’s FREE!

PS: I know GIT is an alternative for this purpose, but as a MS developer, TFS is like home-ground for me.

Resources:

http://tfs.visualstudio.com/en-us/

http://tfs.visualstudio.com/en-us/learn/code/connect-vs/

Reusing elements in StandardStyles.xaml

Tue, 23 Oct 2012 14:26:12 GMT

In one of my previous blogs (second point), I mentioned not to modify the StandardStyles.xaml, but instead to create your own resource dictionary. I also mentioned how to declare your custom styles dictionary in the App.xaml file.

If you want to reference or build upon from an existing style in the StandardStyles.xaml file, do the following:

1. Remove the entry for StandardStyles.xaml in the App.xaml file

2. Add your custom resource dictionary in the App.xaml file

   1:  <!-- App.xaml -->

   2:  <Application.Resources>

   3:    <ResourceDictionary>

   4:      <ResourceDictionary.MergedDictionaries>

   5:        <ResourceDictionary Source="Common/CustomStyles.xaml"/>

   6:      </ResourceDictionary.MergedDictionaries>

   7:    </ResourceDictionary>

   8:  </Application.Resources>

3. List the StandardStyles.xaml as a merged dictionary in your custom resource file.

   1:  <!-- Common/CustomStyles.xaml -->

   2:  <ResourceDictionary>

   3:    <ResourceDictionary.MergedDictionaries>

   4:      <ResourceDictionary Source="StandardStyles.xaml"/>

   5:    </ResourceDictionary.MergedDictionaries>

6:

   7:    <!-- TitleTextStyle is declared in StandardStyles.xaml -->

   8:    <Style x:Key="MaxMoveCountStyle" TargetType="TextBlock" BasedOn="{StaticResource TitleTextStyle}">

   9:      <Setter Property="FontSize" Value="15"/>

  10:    </Style>

  11:  </ResourceDictionary>