Windows Store app Development Snack: File Type Association Icons

Submitted by Robert MacLean on Thu, 11/29/2012 - 08:58

For more posts in this series, see the series index.

image

One of the declarations you can have with a Windows Store app is the file type association, which lets file types become associated with your application. This means you can customise the icon for the file type & if the user double clicks an associated file, it will launch the application.

One of the properties of declaration is the logo property which is the icon to use for the file type. Logo is optional and if you do not specify it, or you specify it incorrectly, it uses the applications small icon (i.e. the 30x30) one – which doesn’t look great.

image

The solution to this is to correctly specify the logo, but that isn’t as straight forward as it seems. Firstly you don’t just have a single image you need FOUR icons with different resolutions

  • 16x16
  • 32x32
  • 48x48
  • 256x256

Next you need to name them correctly, the format is <name>.targetsize-<resolution>.<extension>, so for example if we wanted to use MyLogo.png as the file name we would have:

  • MyLogo.targetsize-16.png
  • MyLogo.targetsize-32.png
  • MyLogo.targetsize-48.png
  • MyLogo.targetsize-256.png

Lastly is putting in the correct logo name in the manifest, since you have four icons what do you use? You use the name + extension components. Using the example about we would have MyLogo.png as the name & Windows 8 is smart enough to figure out the resolution, insert the target bit and get the right image for the right resolution!

Windows Store app Development Snack: Background Colour

Submitted by Robert MacLean on Wed, 11/28/2012 - 11:47

For more posts in this series, see the series index.

When you are configuring the appxmanifest for your Windows Store app, one of the options is the background colour for the tile – YOU SHOULD ALWAYS SET THIS!

image

It is used for two things, firstly if your image is transparent this is the colour that will show through for example for Notepad Classic that is what I do – the actual image is just plain white & transparent.

image

The second one, which is not always the most obvious is when a small icon is needed, for example you do a pinch gesture on the start screen (semantic zoom is the technical term for it), the background colour is what is used as a border around the image. Below you can see a screen shot from my machine, and note two of them have this ugly black border – that is because they do not have a matching background colour set!

image

It is not always possible, especially for games with rich tile icons (note Angry Birds in the screen shot below) but I would suggest trying to find a similar colour anyway for example the top two below have a similar colour & Jetpack Joyride (the last one) chose white (which is at least better than ugly grey).

image

Another location for the small icon is the search charm

image

How rich are you?

Submitted by Robert MacLean on Thu, 11/15/2012 - 23:57

How rich are you? Did you ever wonder that? I did, so I built this little tool to tell me exactly how rich I am! The tool uses data from the South Africa 2011 Census1 and nothing is sent or stored when you use this tool.

The tool

Enter your current MONTHLY income:

My thoughts

What really hit home to me is just how much better off I am than many people in South Africa. It is very sobering.

Footnotes

The numbers may seem off from the 51 million people that StatsSA reported, that is because I have removed people who answered "not applicable" or "not specified" which lowered the amount of the population to 46 867 063 - still enough of a data set to play with.

If you want to understand how this works, you can see the code (in a very messy state) at BitBucket.

English to Afrikaans to English

Submitted by Robert MacLean on Thu, 11/15/2012 - 08:12

image

South Africa, the amazing country I live in, has 11 official languages including the language of Afrikaans which I can muddle my way through speaking. However often I struggle and that inspired me to create an app to help with a phrase book that helps you translate English to Afrikaans & back again!

I see some real value in this on a tablet, when people come to South Africa on holiday as they will be able to quickly find out what “jou ma se…” means and take the required action (ducking is generally the required action at that point).

While I did some planning for this app before hand (finding content, prototyping UI’s etc…) the app was mostly built at the recent WowzApp event, which is an event aimed at students (although we had professionals & even a 13 year old).

This app is also in the Apptivate competition so please go there and vote for it by clicking the image below:

apptivate

Video

Screen shots

screenshot_11112012_221229screenshot_11112012_221241screenshot_11112012_221250screenshot_11112012_221321screenshot_11112012_221636

Windows Store app Development Snack: The vastness of CPU time

Submitted by Robert MacLean on Thu, 11/08/2012 - 19:20

For more posts in this series, see the series index.

I have written in a previous post (What do you get from being a lock screen app?) about how your background processing has a limited amount of time to do it’s processing in, what the odd unit of measurement used (the CPU second) and the overflow bucket. Even with the thinking it is hard to understand what you can accomplish in the time available, so help let’s look at what an app I built (Bing my lockscreen) does in it’s time.

In short what I hope you take away from this, is that you do get a decent amount of time and that with careful planning you can do a lot!

The Process

First off, Bing my lockscreen since it uses a timer requires lock screen permissions which means it gets at least 2 CPU seconds every fifteen minutes, plus overflow from the bucket.

First thing that happens is we get a deferral object (similar to what was explained in Async & Sharing) since we need to use async in the background task. Now we go to the RoamingSettings values to get a boolean (which needs to be cast, since RoamingSettings is a Dictionary of string & object) to see if the user has disabled automatic updates. Now assuming the user hasn’t disabled automatic updates, we connect to a web site using the HttpClient & HttpClientHandler classes and pull down some JSON as a string and convert it to an object using Windows.Data.Json.JsonObject.

Aside: if I felt too tight on CPU, I may swop to the AWESOME Json.NET, which has a better parsing performance.

If all that worked (and there is minimal logging and status checks happening in here too), I use a touch of Linq to get the first image from the IEnumerable collection that it is stored in internally. I then check the URL of the image against a value stored in LocalSettings, as I do not wish to update the lock screen with the same image multiple times. If the image is different, I download the image from Bing to the TemporaryFolder, check the file size is greater than 0. If it is, then I call the SetImageFileAsync method to change the lock screen, else I delete the damage file. Downloading is far more complex than it first appears as I need to handle proxies, handle scenarios where I can’t get the 1920x1200 resolution and need to fall back to the 1366x766 resolution image, ensure everything is written to disk BEFORE the lockscreen is set (I had some issues with I/O buffers in earlier versions that caused a minor corruption on images because they were not flushed to disk!).

Aside: Important to remember that CPU seconds, is time the CPU works – when the CPU is idle say because you are doing something I/O bound like a download, it doesn’t count!

Next I store the result of this to the log, which is just a container in LocalSettings (so that means the first time this is run we create the container too!) and store the URL of the newly changed image too. Now the process continues in a similar way for the live tile! We check if the last live tile update is the same based on the URL for the image (again comparing to a value stored in LocalSettings). I then use the TileNotification and the TileUpdateManager to send the tile update. I do not need to download the tile image in this case, as tiles do support remote URL’s for the images. Lastly I update the LocalSettings for the updated tile!

Line count

If you count the lines of code executed for this, and I am excluding blank lines, namespace declarations, comments – really just the code that actually runs it is approx. 190 lines of C# code! Far more than you may think.

More stats!

I used the always amazing NDepend to generate some more stats on the assembly which does all the background processing:

  • IL instructions: 2 092
  • lines of code (LOC): 80
  • lines of comment: 9
  • Percentage Comment: 10%
  • Methods: 99
  • Fields: 75
  • Types: 18
  • Namespaces: 2
  • Assembly Level: 1
  • Abstractness: 0.11111
  • Instability: 1
  • Dist from main seq: 0.078567
  • Normalized dist from main seq: 0.11111
  • Relational cohesion: 2.3333
  • Afferent coupling (AsmCa): 0
  • Efferent coupling (AsmCe): 17

LOC is different here since NDepend uses the compiled assembly and works back, while I counted lines in Visual Studio. Same is true for methods, which NDepend works out from the compiled assembly and thus includes all anonymous methods - where if I counted that in VS, it would be 8 or 9 methods.

Up skill from VS/TFS 2010 to VS/TFS 2012

Submitted by Robert MacLean on Mon, 11/05/2012 - 22:22

I got some great news today that Colin from Imaginet will be running a fantastic two day course at Bytes in Midrand soon (19th & 20th November). 

Attached is the pamphlet for the event – which I highly urge you to have a look at and attend!

Image Grabber

Submitted by Robert MacLean on Fri, 10/26/2012 - 16:02

svg2raster - pink-190x190This is really a simple app, find images on a website and pull them down to your machine so you can browse them, save them or share them. There is some special logic for some websites – such as Tumblr blogs where it will pull down using the API rather than raw scraping of the pages.

This was the very first app I built and tried to publish – it took numerous attempts to get through certification and in the process I learnt a lot.

You can get the app from the store using the download link below!

Download

This app is also in the Apptivate competition so please go there and vote for it by clicking the image below:

apptivate

Video

Screen shots

Windows Store app Development Snack: Side loading apps for development purposes!

Submitted by Robert MacLean on Mon, 10/22/2012 - 09:52

For more posts in this series, see the series index.

One of the things you need to think of when you are going through your development cycle is how the decision makers are going to test your app? 

Likely the best solution is to get it to their hands via a device, but how do you load your application onto that other device? Well there are TWO options!

Building the app

Before you do that however you need open your project in Visual Studio, right click on the project and go to the Store option, then client the Create App Packages option.

image

Since you are creating them for side loading you do not need to associate them with the store.

image

Once done you will have a folder (called the output location) with both a .appxupload & another folder in it – we will call this the deployment folder.

image

PowerShell

imageRegardless of the machine, if it has Windows 8 on it – it has PowerShell too so this option works FANTASTICALLY for everyone.  Step one is to load a developer license onto the machine, you can do this by typing: Show-WindowsDeveloperLicenseRegistration

You will now get the prompt for your Live ID to register the device unlocked for three months.

Next you need to ensure you can run PowerShell scripts, this is done using: Set-ExecutionPolicy unrestricted

Now copy the deployment folder to the device and using PowerShell run the Add-AppDevPackage.ps1 – This will prompt you about installing it and installing the required certificates. Say yes to those and the app will install on the device!

Visual Studio Debuggable Package Manager

If the device has has Visual Studio on it there is another option you can use which just requires the .appx package. That is the Debuggable Package Manager

image

When you launch that you can use the Add-AppxPackage command to install any appx you have. You can find the .appx file in the deployment folder.

AppXUpload

if you only have an .appxupload file – you can still use that too! Just remain it to a zip file, open it up in your favourite compression tool and extract the appx file from there!

TechDays 2012 - wrap up post

Submitted by Robert MacLean on Fri, 10/19/2012 - 20:13

Thank you so much for those people who came to my talks in Johannesburg & Cape Town – from all accounts we broke some size records for the event which is very awesome. Not just for my ego, but also it shows Microsoft that while we are excited about the new awesome stuff – we NEED to hear about the more normal things, you know cause we get paid to work with that and all.

With that said on to the usual post event blog post where I share my slides. In addition my demo script (those masses of paper I used to remind myself what to type) is up, and finally are completed builds of the demo apps for you to look through. About the demos, two things need to be remembered:

  • These are demos – they are not meant to best practise. They are as close to that as I can get in 5min, so disclaimer on using them.
  • These demos are not the same as on stage, and have no help – so if you did not attend the session the script maybe a better starting point.

btw download the slide deck, there is hidden slides with more info!!

Completed Demos

Large (file size) demos

Small (file size) demos - below

Windows Store app Development Snack: Dealing with Async warnings

Submitted by Robert MacLean on Thu, 10/18/2012 - 09:50

For more posts in this series, see the series index.

In this post I am going to look at a side effect you find a lot with when using the new async modifiers: compiler warnings. While this post is in my Windows Store app dev series, it applies equally well to development on .NET 4.5 with ASP.NET, WCF, WPF etc… really anywhere you use Async.

CS1998

warning CS1998: This async method lacks 'await' operators and will run synchronously. Consider using the 'await' operator to await non-blocking API calls, or 'await Task.Run(...)' to do CPU-bound work on a background thread.

Cause: You have specified the async modifier on a method, but you are not using the await keyword anywhere in the method.

This is a warning you should be investigating because it is there for one of two reasons:

  • You have async on the method, but do not need it – so remove it.
  • You have async on the method, because you need it & you forgot to use the await keyword! So time to fix up the code.

CS4014

warning CS4014: Because this call is not awaited, execution of the current method continues before the call is completed. Consider applying the 'await' operator to the result of the call.

Cause: You are calling a method which has the async modifier & returns a task – yet you are not awaiting on that method call.

This maybe be showing you a place where you forgot the await keyword so very important to check these out too. However these can come up when you intentionally do not use the await keyword. For example, you have decided to call a method and you know it will run async and none of the code following it needs to work with the result.

Microsoft has a great page on this compiler warning which goes into far more detail, especially regarding Exceptions that is worth reading.

You may think the solution here is to suppress this warning:

#pragma warning disable 4014
            AwesomeAsync();
#pragma warning restore 4014

Which I think is not a bad solution, as it does show clear intent by the author of the code that they are aware of the issue and are intentionally ignoring it. However it is not a good solution either, forget to restore it or get the warning number wrong in the restore and you have unintentionally suppressed large parts of your code base.

The better solution is just to assign the result (a task) of the method to a variable:

var ᛘ = AwesomeAsync();

You may not like these extra variables lying around – but remember the compiler is pretty smart, it will remove them for you at compile time if they are not needed. The following images are firstly the code I used in one of my apps, and then the code as it was compiled to (I used the awesome Reflector to see the compiled code) and note the t variable is gone!

Clipboard01=3Clipboard01=2

Lastly you maybe wondering why I am using ᛘ as my variable name – because it is hard to type. I want to ensure that no one starts using that variable unless they have a good reason and so this odd character means that the moment you need that variable you will likely give it a good name and use it properly with thought. It also is one character so takes up minimal code space. Lastly because it is so unique it does make it easy to identify the purpose when reading code (meta data in the letters) so no comment is needed. If you have feedback on this usage, I would love to hear it in the comments below!