Using Nokia Music, your users can find music from

• over 200 countries
• over 3 million global and local artists
• over 20 million tracks
• over a century of recordings

REST APIs are also available, so you can use Nokia Music on pretty much any platform.

Nokia Music basic how-to

Start a new Windows 8 project or use your existing one. The Nokia Music SDK is available over NuGet, but there is an issue in this version and I couldn’t install it this way. When you try installing it, it fails, so the solution is EDIT: The Nuget package has been fixed, you can now add it to your project this way. The whole project can be found on GitHub along with some demos for both Windows 8 and Windows Phone 8 platforms. Open it in Visual Studio and build it after which you’ll have a .dll that you can add to references, called Nokia.Music.Win8.

After you add Nokia Music to your project references, the next step is to register your app on Nokia developer portal.

This gives you App ID and AppCode, your app credentials, which is needed by the APIs for each call to the Music services. Launchers don’t require application credentials.

You’ll only need AppID for the constructor of the MusicClient object which is the object you need to make the calls. All the methods are asynchronous, so you can use the familiar async/await pattern. You’ll be needing the following references:

using Nokia.Music;
using Nokia.Music.Types;
using Nokia.Music.Tasks;

Let’s start by getting all the available genres:

protected async override void OnNavigatedTo(NavigationEventArgs e)
        {
            MusicClient musicClient = new MusicClient("YOUR APP ID");
            var genres = await musicClient.GetGenresAsync();
        }

The result is the list of genres like this:

Blues
Christian
Classical
Comedy
Country
Dance
...
...
World

The ‘Result‘ is not the only thing returned to you. You can also access info such as

•     Error — an Exception if the API call failed.
•     TotalResults — the total results returned (when appropriate).
•     ItemsPerPage — the items per page the API call was asked for (when appropriate).
•     StartIndex — the start index the API call was asked for (when appropriate).

Now we can, for example, use one of these genres to get the top artists in that genre

var topArtists = await musicClient.GetTopArtistsForGenreAsync(genres.Result[12]);

which gives us:

Rudimental
Daft Punk feat. Pharrell Williams
will.i.am
Adele
P!nk
P!nk featuring Nate Ruess
Katy Perry
Justin Timberlake
....

Next we can take one of those artists and find all of their products

var adeleProducts = await musicClient.GetArtistProductsAsync(topArtists.Result[3]);

Or we can find artists similar to Adele

var adeleSimilar = await musicClient.GetSimilarArtistsAsync(topArtists.Result[3]);

which gives us

Coldplay
Duffy
Bruno Mars
Aloe Blacc
Amy Winehouse
Alicia Keys
Maroon 5
Avril Lavigne
Cee-Lo Green
Jessie J

That’s cool, I like Coldplay. I can get the picture from one of their products:

img.Source = new BitmapImage(adeleSimilar.Result[0].Thumb320Uri);

where img is defined in XAML

<Grid Name="content" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Image Name="img"
               Width="300"
               Height="300" />
</Grid>

But I won’t use them any more for now. I’ll rather search for one artist from Croatia.

var someArtist = await musicClient.SearchArtistsAsync("Gibonni");

Which returns this artist as an individual, but also records of him with other artists:

Gibonni
The Obala & Gibonni
Stipisic Zlatan - Gibonni
Dragojevic Oliver I Gibonni
Gibonni I Vanna
Jasna Zlokic & Gibonni
Urban feat. Gibonni
Stipisic Z. - Gibonni I Josipa Lisac
Stipisic Z. Gibonni I Mladen Bodalec
Stipisic Z.- Gibonni,g.bare I M.azucena

That’s great, but I want his individual performances and get the sample track url which can then be played

var giboProducts = await musicClient.GetArtistProductsAsync(someArtist.Result[0]);
var trackUri = musicClient.GetTrackSampleUri(giboProducts.Result[0].Id);
MediaElement mysound = new MediaElement();

mysound.AudioCategory = AudioCategory.GameEffects;
mysound.Source = new Uri(trackUri.AbsoluteUri);
content.Children.Add(mysound);
mysound.Play();

“content” is the name of the Grid defined in XAML.

That’s even more cool. All the other methods can be found in the MusicClient metadata with their explanations.

It feels very natural and easy to work with these methods! The result is one of the basic model objects: Product, Artist, MusicItem, Mix, MixGroup, Genre etc. You can find all these types explained in the documentation.

Nokia Music launchers

Launchers make it possible to call the official Nokia Music app on Windows 8 from your own app. Available tasks are

• LaunchTask – starts the Nokia Music application
• MusicSearchTask – search for music within Nokia Music app
• ShowArtistTask – shows details of an artist within Nokia Music app
• ShowMixesTask – starts Nokia Music and shows the free Mixes
• PlayMixTask – starts playback of a Mix within Nokia Music

Usage is really simple. To start Nokia Music app, do this:

var tsk = new LaunchTask();
tsk.Show();

If you wish to search for John, do this:

var tsk = new MusicSearchTask();
tsk.SearchTerms = "john";
tsk.Show();

Show me more of Coldplay:

var tsk = new ShowArtistTask();
tsk.ArtistName = "Coldplay";
tsk.Show();

Or show me the free Mixes:

var tsk = new ShowMixesTask();
tsk.Show();

And finally, play a Mix:

var tsk = new PlayMixTask();
tsk.ArtistName = "Coldplay";
tsk.Show();

Launchers are sometimes available the other way, too. Remember when we fetched the top artists in Pop genre? We can then use one of those artists and call the PlayMix method which is the same to creating the PlayMixTask and showing it:

topArtists.Result[5].PlayMix();

Possibilities are great, and so is the Nokia Music service. See if you can use it in your apps. :)

The post Nokia Music API for Windows 8 appeared first on Igor on Mobile.

WinDays 13

For those of you who are not familiar with this conference, it is the largest Microsoft IT and business conference in this part of Europe. If you are working with Microsoft technologies in Croatia and region, you probably want to be there. It’s more than just a lot of high quality sessions (130+) – it’s about networking with people who share your passion and interests, it’s about meeting a lot of professionals in different areas of expertise, MVPs, and of course people who work in Redmond. There were 1500+ attendees there this year!

I was there, too – third year in a row. The first year (WinDays 11) I was in charge of one of the halls where sessions had taken place. Pretty much just making sure that everything was going smoothly – I was the first one there in the morning and the last one there in the evening. :) The second year (WinDays 12) I wrote for the WinDays blog/website and had my first session there. I mentioned it here. This year I had the same opportunity (and some more), so I had a session about Live services and wrote for the official blog. I had a great time. Here are some of the pictures

Live services – my session at WinDays 13

I talked about live services and their integration with mobile apps. I focused on letting devs know what’s out there for them to use for free because of Microsoft Account being integrated in pretty much and Microsoft device today. The PowerPoint session can be found here: (this is a copy of it in English)

and the code for the demo can be downloaded from here.

If you want more demos, check out the Live SDK GitHub page

WinDays, see you next year! ;)

The post This is not another WinDays 13 goodbye post appeared first on Igor on Mobile.

Transferring blog to Azure Web Sites

This blog was running on wordpress.com ever since I’ve created it. When I started blogging back in the summer of 2011. I didn’t want to be bothered with my own hosting, with customized themes etc. I wanted to make sure that I am able to create great and helpful content and get a decent amount of page visits. The more I blogged, the more I wanted to customize the look and feel of my blog and get more insight into who my audience is. So I decided that transferring blog to Azure Web Sites will be the next step.

Azure Web Sites make it really simple to create WordPress blog from scratch. But the WordPress itself makes it easy to transfer from one instance to another, so I simply exported and imported all of my content to Azure Web Sites WordPress installation, also taking care of all the needed plugins. Then I made sure that my old domain works – igrali.com – so that everything, including the permalinks stayed the same. Then I went through every single post I’ve written to make sure that all the pictures and all the source code looked great. It took me more than day to do all that, but now I’m extremely happy with the result. The theme is beautiful and responsive.

Where were we?

Unfortunately, there is one thing you can’t transfer from the old blog – the WordPress stats.  My stats have been merged with the new self hosted WordPress blog thanks to the very helpful WordPress.com staff, along with my blog subcribers. Thanks guys! :)

After realizing that I was convinced even more that I wanted to host the blog myself – I want to have my stats uninterrupted, always, and forever. I made a screenshot of my old stats, so that it doesn’t get lost completely. Here it is:

The blog’s been showing steady and decent growth over months, and I hope the new content I write will keep it that way. I know that this is far from a lot, but as long as the growth is obvious, I am happy with it because it shows that I am doing something right. 100 000 views is approaching – I’ll have to think of something cool when that happens. :)

How do you like the new theme?

Small adjustments to the theme itself may happen over the next few days. If you’re seeing the old theme, try again in a few hours, it will certainly refresh over the next 12 hours. If you notice that something is broken in one of the older posts, please let me know.

As Scott Hanselman explained it, Every developer should have a blog.

The post Transferring blog to Azure Web Sites – fresh start appeared first on Igor on Mobile.

There are two types of trimming. One is called word ellipsis, in which the string is trimmed by cutting of all the words that don’t fit completely. So, it’s basically using a space char to identify words and then just cuts of the whole words which don’t fit adding ellipsis to the end of the string. (implementation probably differs from my description).  I put a border around a TextBlock to demonstrate how much space is left unused.

Most of the times this is good enough, but sometimes when you have longer words and less space (snapped view for example), you want to use a different type of trimming.

That other type is called character ellipsis, which means it cuts of only the characters which don’t fit, using the whole available width. It’s different from not using the trimming at all because it puts ellipsis to the end of the string.

So, how to accomplish this, considering it’s not available for Windows Store apps? Simply, trying to find a similar thing for Silverlight did the trick (a colleague of mine said that Silverlight may be dead, but it lives in others :) ) . And I found it, after a lot of time wasted, so I am sharing it with you today.

EDIT: Seems like it is already available in Callisto, and I didn’t notice. Thanks to @xyzzer for letting me know in the comments!

On this nicely designed blog, there’s a Silverlight implementation by Robby Ingebretsen. It’s under MIT license.

http://nerdplusart.com/texttrimming-textblock-for-silverlight

I had to change it only a bit to be able to use it in WinRT. First, the namespaces:

using System;
using System.Net;
using System.Windows;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

And then added one null check for reducedText in MeasureOverride which caused a NullReferenceException in some cases:

protected override Size MeasureOverride(Size availableSize)
        {
            // just to make the code easier to read
            bool wrapping = this.TextWrapping == TextWrapping.Wrap;

            Size unboundSize = wrapping ? new Size(availableSize.Width, double.PositiveInfinity) : new Size(double.PositiveInfinity, availableSize.Height);
            string reducedText = this.Text;

            // set the text and measure it to see if it fits without alteration
            <strong>if (reducedText == null)
                return base.MeasureOverride(availableSize);</strong>

            this.textBlock.Text = reducedText;
.........
....
..
.

And it works beautifully! It might hit the performance a bit if you have a lot of those on the same page, but nothing easily noticeable.

Here’s how to use it:

<Page x:Class="App.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:App"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:px="using:PixelLab"
      mc:Ignorable="d">

    <Grid Name="st" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Border Width="380"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                BorderBrush="White"
                BorderThickness="1">
            <px:DynamicTextBlock Width="380"
                                 FontSize="26"
                                 Text="The quick brown fox jumps over the lazy dog"
                                 TextWrapping="NoWrap" />
        </Border>
    </Grid>
</Page>

The post Character ellipsis trimming in Windows Store apps appeared first on Igor on Mobile.

The class we’ll be using today is called DataLoader, and it can be found in Q42.WinRT.Data namespace. It has three important bool properties which are easily bindable to your UI:

• IsError
• IsBusy
• IsFinished

This way the class handles the loading states for you, exposing the bool properties that you can bind. The class also implements a method called LoadAsync, with the following signature:

public Task LoadAsync(Func<Task> loadingMethod, Action resultCallback = null, Action errorCallback = null);

It has three important parameters, the loading method, callback method and the error (exception) method. Here’s how to implement it. Add a DataLoader object to the GroupedItemsPage code behind from the last blog post.

DataLoader _dataL = new DataLoader();

        public DataLoader DataL
        {
            get
            {
                return _dataL;
            }
            set
            {
                _dataL = value;
            }
        }

Exposing it as public to bind it to the UI in the LoadState method.

this.DefaultViewModel["DataLoader"] = DataL;

Then call the LoadAsync method, like this:

var x = DataL.LoadAsync(
                async () =>
                {
                    var client = new HttpClient();
                    string someUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=YOUR_API_KEY&format=json";
                    var tempResult = await client.GetStringAsync(new Uri(someUrl, UriKind.Absolute));
                    var resultSubstring = tempResult.Substring(14, tempResult.Length - 15);
                    var photosResult = await JsonConvert.DeserializeObjectAsync(resultSubstring);
                    return photosResult;
                }, (result) =>
                    {
                        this.DefaultViewModel["Groups"] = result.photos.photo;
                    }, async (exc) =>
                        {
                            var msg = new MessageDialog(exc.Message, "Error");
                            await msg.ShowAsync();
                        });

The first method is asynchronous – you create a HttpClient, get string asynchronously and return the result. In the result callback method you bind it to the UI. Third part is also asynchronous because we await message dialog. When you think about it, this call is nothing more than a simple try – catch block in which you try to get a string using a HttpClient, bind it to the UI and fail gracefully if something ugly happens in the process. The only obvious benefit of using this is the fact that by using the DataLoader you can easily bind the loading state to the UI, not worrying about setting the bool properties yourself. So, if you add this to the GroupedItemsPage.xaml

<ProgressRing Grid.RowSpan="2"
                      Width="40"
                      Height="40"
                      Margin="0,32,32,0"
                      HorizontalAlignment="Right"
                      VerticalAlignment="Top"
                      Foreground="White"
                      IsActive="True"
                      Visibility="{Binding DataLoader.IsBusy,
                                           Converter={StaticResource BoolToVisConverter}}" />

Where BoolToVisConverter is a standard bool to visibility converter, you’ll get a nice progress ring displayed while the data is being fetched. The same process can be used for binding the IsError and IsFinished bools.

This is not really caching, but serves as an introduction to the next method, called LoadCacheThenRefreshAsync

public Task LoadCacheThenRefreshAsync(Func<Task> cacheLoadingMethod, Func<Task> refreshLoadingMethod, Action resultCallback = null, Action errorCallback = null);

Other than fetching the data from the Internet and the callback methods, this method first takes the cached data (if there is any), making it possible to load the app (actually, the data) much much faster, and after that take the fresh data online if possible. This is one of the two strategies you can take when working with cached data:

1. Load cache –> load data from the Internet –> add the new data to the UI (refresh UI)
2. Try loading from the Internet –> fall back to cache if not possible –> fail gracefully if none is possible

Load from cache and then try refresh

In order to accomplish this, call the LoadCacheThenRefreshAsync method (for example in the LoadState method)

this.DefaultViewModel["DataLoader"] = DataL;
            string someUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=YOUR_API_KEY&format=json";

            var x = DataL.LoadCacheThenRefreshAsync(
                async () => // TRY GETTING FROM CACHE
                    {
                        var result = await JsonCache.GetFromCache(CalculateMD5Hash(someUrl));
                        return result;
                    },
                    async () => // GET THE NEW DATA ONLINE
                        {
                            HttpClient client = new HttpClient();
                            var tempResult = await client.GetStringAsync(new Uri(someUrl, UriKind.Absolute));
                            var resultSubstring = tempResult.Substring(14, tempResult.Length - 15);
                            var photosResult = await JsonConvert.DeserializeObjectAsync(resultSubstring);
                            if (photosResult != null)
                                await JsonCache.Set(CalculateMD5Hash(someUrl), photosResult);
                            return photosResult;
                        }, (result) => // CALLBACK DO SOMETHING WITH THE RESULT
                            {
                                //check the difference here, refresh the UI
                                if (result != null && result.photos!=null)
                                this.DefaultViewModel["Groups"] = result.photos.photo;
                            }, async (exc) => // IF EXCEPTION
                                {
                                    var msg = new MessageDialog(exc.Message, "Error");
                                    await msg.ShowAsync();
                                });

The comments in the code explain what each method does. The ways in which you compare results and refresh the UI depend on the use case, and by handling the exception callback, you can fail gracefully if something happens. This is the strategy I prefer to use in my Windows Phone apps because phones are more often used over slower networks and getting the data as soon as possible is crucial for the user experience

Load from the Internet, fallback to cache

In order to do this, I extended the Q42.WinRT library (available on GitHub under MIT license), actually the DataLoader class with a new method called LoadRefreshFallbacktoCacheAsync (obsolete – the method has now become a part of Q42.WinRT framework – name of the method is LoadFallbackToCacheAsync)

public async Task LoadRefreshFallbackToCacheAsync(Func<Task> refreshLoadingMethod, Func<Task> cacheLoadingMethod, Action resultCallback = null, Action errorCallback = null)
        {
            LoadingState = Data.LoadingState.Loading;
            T refreshResult = default(T);
            T cacheResult = default(T);

            try
            {
                refreshResult = await refreshLoadingMethod();
                if (resultCallback != null)
                    resultCallback(refreshResult);

                LoadingState = Data.LoadingState.Finished;
            }
            catch (Exception e)
            {
                LoadingState = Data.LoadingState.Error;
                if (errorCallback != null)
                    errorCallback(e);
                else if (!_catchExceptions)
                    throw;
            }

            if (LoadingState == Data.LoadingState.Error)
            {
                try
                {
                    cacheResult = await cacheLoadingMethod();
                    if (resultCallback != null)
                        resultCallback(cacheResult);
                    LoadingState = Data.LoadingState.Finished;
                }
                catch (Exception e)
                {
                    if (errorCallback != null)
                        errorCallback(e);
                    else if (!_catchExceptions)
                        throw;
                }
            }
        }

var y = DataL.LoadFallbackToCacheAsync(
                async () => // GET THE NEW DATA ONLINE
                        {
                            HttpClient client = new HttpClient();
                            var tempResult = await client.GetStringAsync(new Uri(someUrl, UriKind.Absolute));
                            var resultSubstring = tempResult.Substring(14, tempResult.Length - 15);
                            var photosResult = await JsonConvert.DeserializeObjectAsync(resultSubstring);
                            if (photosResult != null)
                                await JsonCache.Set(CalculateMD5Hash(someUrl), photosResult);
                            throw new NullReferenceException();
                            return photosResult;
                        },
                        async () => // TRY GETTING FROM CACHE ONLY IF REFRESH FAILED
                            {
                                var result = await JsonCache.GetFromCache(CalculateMD5Hash(someUrl));
                                return result;
                            },(result) => // CALLBACK, DO SOMETHING WITH THE RESULT
                                {
                                    //check the difference here, refresh the UI
                                    if (result != null && result.photos!=null)
                                    this.DefaultViewModel["Groups"] = result.photos.photo;
                                }, async (exc) => // IF EXCEPTION, COULD BE THROWN TWICE
                                    {
                                        var msg = new MessageDialog(exc.Message, "Error");
                                        await msg.ShowAsync();
                                    });

Caching is an important thing in every Windows Phone and Window 8 app. Q42.WinRT makes caching really simple in Windows Store apps, and you should use it, or extend it to server you better if you feel that something is missing. Don’t forget to share this post if you found it useful! :)

The post Advanced data caching in Windows Store apps appeared first on Igor on Mobile.

In your Windows 8 project, add a library from NuGet called Q42.WinRT

Working with Flickr API

For this demo, we will be using the public Flickr API and the following request:

http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=YOUR_API_KEY&format=json

It’s a public API, but you still need to register in order to get your API key. Then can you start making requests.

This returns the following JSON:

Using json2csharp we can generate model classes for this data. Beware, the JSON returned starts with jsonFlickrApi(…… and ends with ) so it needs to be removed before using with json2csharp.

public class Photo
{
    public string id { get; set; }
    public string owner { get; set; }
    public string secret { get; set; }
    public string server { get; set; }
    public int farm { get; set; }
    public string title { get; set; }
    public int ispublic { get; set; }
    public int isfriend { get; set; }
    public int isfamily { get; set; }
}

public class Photos
{
    public int page { get; set; }
    public int pages { get; set; }
    public int perpage { get; set; }
    public int total { get; set; }
    public List photo { get; set; }
}

public class Response
{
    public Photos photos { get; set; }
    public string stat { get; set; }
}

http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{o-secret}_o.(jpg|gif|png)

We will use the following format:

http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{o-secret}_b.jpg

So for one of the photos from the above response, the URL is:

http://farm9.staticflickr.com/8365/8524366069_cce2bc7074_b.jpg

Where b means large photo, 1024 on longer side. Obviously, we need to add another property which returns us the URL so we can bind it to the UI. Add this to the Photo class:

public string PhotoUri
{
    get
    {
        return string.Format("http://farm{0}.staticflickr.com/{1}/{2}_{3}_b.jpg", farm, server, id, secret);
    }
}

protected async override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
    var client = new HttpClient();
    var clientResult = await client.GetStringAsync(new Uri("http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=YOUR_API_KEY&format=json", UriKind.Absolute));
    var result = clientResult.Substring(14, clientResult.Length - 15);
    var photosResult = await JsonConvert.DeserializeObjectAsync(result);
    var photos = photosResult.photos;

    this.DefaultViewModel["Groups"] = photos.photo;
}

<Page.Resources>

        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource x:Name="groupedItemsViewSource"
                              IsSourceGrouped="False"
                              Source="{Binding Groups}" />
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  Horizontal scrolling grid used in most view states  -->
        <GridView x:Name="itemGridView"
                  Grid.RowSpan="2"
                  AutomationProperties.AutomationId="ItemGridView"
                  AutomationProperties.Name="Grouped Items"
                  IsItemClickEnabled="True"
                  IsSwipeEnabled="false"
                  ItemClick="ItemView_ItemClick"
                  ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
                  ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                  Padding="116,137,40,46"
                  SelectionMode="None">

        </GridView>

<DataTemplate x:Key="Standard250x250ItemTemplate">
    <Grid Width="250"
          Height="250"
          HorizontalAlignment="Left">
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
            <Image AutomationProperties.Name="{Binding Title}"
                   Source="{Binding PhotoUri}"
                   Stretch="UniformToFill" />
        </Border>
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
            <TextBlock Height="40"
                       Margin="15,0,15,0"
                       Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                       Style="{StaticResource TitleTextStyle}"
                       Text="{Binding title}" />
        </StackPanel>
    </Grid>
</DataTemplate>

Caching

The photos are taking quite some time to load, especially because we chose to load the large versions of it. You’ll notice that nothing gets automatically cached, of course. You can check this location to see what’s happening in the local storage of your app:

C:Users{YourUserName}AppDataLocalPackages{PackageName}LocalState

In order to cache the downloaded JSON file, we need to add a few things to the LoadState method:

protected async override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
    var client = new HttpClient();
    string someUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=YOUR_API_KEY&format=json";
    var result = await JsonCache.GetAsync(CalculateMD5Hash(someUrl),
        async () =>
        {
            var tempResult = await client.GetStringAsync(new Uri(someUrl,UriKind.Absolute));
            var resultSubstring = tempResult.Substring(14, tempResult.Length - 15);
            var photosResult = await JsonConvert.DeserializeObjectAsync(resultSubstring);
            return photosResult;
        });

    this.DefaultViewModel["Groups"] = result.photos.photo;
}

• string key
• Func generate
• expire date (optional)
• force refresh (optional)

The string key is the name of the cached file under which your JSON file gets saved. In this simple case I could’ve defined a simple key myself, but in a much larger apps where users will be in charge of the requests that get called, you’ll want to have a better way of making sure that the keys are unique for every request. One way to accomplish that is to calculate the MD5 hash

public string CalculateMD5Hash(string input)
{
    var md5h = HashAlgorithmProvider.OpenAlgorithm("MD5").CreateHash();
    var buff = CryptographicBuffer.ConvertStringToBinary(input,BinaryStringEncoding.Utf16BE);
    md5h.Append(buff);
    var buffHash = md5h.GetValueAndReset();
    return CryptographicBuffer.EncodeToBase64String(buffHash);
}

The first time we run this app, there’s no cache saved, so the file gets downloaded and the cache is now saved in the local storage. The next time you run the app, it will get the data from the local storage and will skip the Func part. The cache is saved here:

C:Users{YourUserName}AppDataLocalPackages{PackageName}LocalState_jsonCache

We can also add the expireDate to the method call, like this:

var result = await JsonCache.GetAsync(CalculateMD5Hash(someUrl),
                async () =>
                {
                    var tempResult = await client.GetStringAsync(new Uri(someUrl", UriKind.Absolute));
                    var resultSubstring = tempResult.Substring(14, tempResult.Length - 15);
                    var photosResult = await JsonConvert.DeserializeObjectAsync(resultSubstring);
                    return photosResult;
                },
                expireDate:DateTime.Now.AddMinutes(30));

If you wish, you can enable user to force refresh updates. You do that by setting the forceRefresh bool property to true:

var result = await JsonCache.GetAsync(CalculateMD5Hash(someUrl),
                async () =>
                {
                    var tempResult = await client.GetStringAsync(new Uri(someUrl, UriKind.Absolute));
                    var resultSubstring = tempResult.Substring(14, tempResult.Length - 15);
                    var photosResult = await JsonConvert.DeserializeObjectAsync(resultSubstring);
                    return photosResult;
                },
                expireDate:DateTime.Now.AddMinutes(30),
                forceRefresh:true);

<Image AutomationProperties.Name="{Binding Title}"
       q42:ImageExtensions.CacheUri="{Binding PhotoUri}"
       Stretch="UniformToFill" />

This saves the images in the following folder:

C:Users{YourUserName}AppDataLocalPackages{PackageName}LocalState_webdatacache

I did notice it behaved a bit strange sometimes, so be careful.

If you wish to force clear all the cache (for example, user wants to clear it or user logs out from your app), do this:

await JsonCache.ClearAll();

or just delete one particular cache file:

await JsonCache.Delete("someKEY");

If you wish, you can only get the cache, without the ability to fall back to the HttpClient request, like this:

var result = await JsonCache.GetFromCache(CalculateMD5Hash(someUrl));

Q42.WinRT is actually much more than just a caching library, but let’s stay focused on that. We’ll see a slightly more enhanced way of using cache in the next blog post!

The post Data caching in Windows 8 apps appeared first on Igor on Mobile.

The only free, good looking and great working ‘Metro’ template I found was the one by Colin Eberhardt, which you can find here:

http://www.scottlogic.co.uk/blog/colin/2011/12/a-metro-themed-powerpoint-template/

It’s working great, but what I didn’t like was the background, some gradients etc. I modified it to get:

• wide presentation
• solid colors
• background with light light texture
• section title slides
• dark and light versions

You can see the “dummy” presentations here on my SkyDrive.

Dark version: (downloadable here: http://sdrv.ms/T8I1mR )

Light version: (downloadable here: http://sdrv.ms/U7EWTl )

There’s a really light texture in the background of both themes, like in a notebook. There are many other nice textures that can be used in PowerPoint, or you can just use a solid color or a picture. It’s up to you. Kudos goes to @colineberhardt for creating the initial version.

Feel free to modify the templates any way you like.

EDIT: Considering the author published his version under Creative Commons Attribution licence, the same licence applies to my versions, too. :)

If you use one of my templates, I would be glad to know. Ping me at @igrali.

The post Modern UI PowerPoint template appeared first on Igor on Mobile.

This is how I’ll cover it:

Day 1 – Live Connect core concepts – authentication + getting basic information about the user

Day 2 – Hotmail – working with contacts and calendar (events)

Day 3 – SkyDrive – working with files (photos, documents etc.)

Possible questions

1. Why 3 days?

Because it makes it easy to separate the problem of working with Live SDK in 3 main topic: basic, core concepts of Live SDK, Hotmail and SkyDrive.

2. OK, but why not day 4 and Windows Live Messenger?

Well, according to Microsoft and the official Live SDK website:

We recently announced that we’ll begin to encourage Messenger users to start using Skype. As a result, the Messenger developer program will end. Existing implementations that use Extensible Messaging and Presence Protocol (XMPP) will continue to work until October 2013. Existing implementations that use MSP will continue to work until March 2014.

In other words, Windows Live Messenger will very soon become forgotten, so we might as well skip it.

3. Is there a difference between the Windows Phone 7 & Windows Phone 8 Live SDK?

Perhaps not in the SDK itself, but what’s different is how you make the calls. In WP7 you may have used async calls with callback methods, but in WP8 you use the async/await pattern which makes the code simpler and cleaner. So unless you used Async CTP in your WP7 projects, there’s a difference.

4. I am a Android/iOS/Symbian/something developer. Can I use it in my apps?

YES! There is an SDK for iOS and Android platform available, as well as the possibility to use REST services, so Live SDK can be used on pretty much any platform today!

Day 1 – core Live SDK (authentication, basic user info)

In order to develop Windows Phone 8 apps, you need to install the official SDK, available here:

https://dev.windowsphone.com/en-us/downloadsdk

Next, you need to download and install Live SDK:

http://www.microsoft.com/en-us/download/details.aspx?id=35754

The latest version at the moment of writing this blog post is 5.3, available since 11/15/2012

Create a new Windows Phone 8 project, or use the old one you have. Add the Live SDK reference:

The Microsoft.Live is the main reference, and the Microsoft.Live.Controls can even be excluded – it gives you a so called Sign-In button control, which you may or may not use inside your app. I won’t be using it in this tutorial.

One more step is needed to be able to start using the SDK in your app. You need to register your app and get the Client ID which is needed to get your app recognized by the Live services. Go to:

https://manage.dev.live.com/

Then click on My apps and then click on Create application:

Add the application name and choose language and accept the terms of use.

Set the needed settings for your app, and you’ll get the very important Client ID:

You need to keep your Client ID and Client Secret a secret. We will only need Client ID.

*** Note:  If you’re developing Windows 8 apps, you just need to create a Windows 8 app in your DEV dashboard (reserve app name at least), and then associate your app in Visual Studio app with the app you created through Dashboard. You don’t need to use the Client ID.

Add the following XAML code in your MainPage.xaml

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel Orientation="Horizontal"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Top">
        <Image Name="profileImage"
                       Width="32" Height="32"
                       VerticalAlignment="Center"
                       Margin="12,0"/>
        <TextBlock Name="infoText" FontSize="22" VerticalAlignment="Center" TextWrapping="Wrap" Margin="12"/>
    </StackPanel>
</Grid>

In the MainPage.xaml.cs add the following code

LiveAuthClient auth;

        public MainPage()
        {
            InitializeComponent();
            this.Loaded += MainPage_Loaded;
        }

async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    try
    {
        bar.Visibility = Visibility.Visible;
        auth = new LiveAuthClient("YOUR_APP_CLIENT_ID_GOES_HERE");
        LiveLoginResult result = await auth.InitializeAsync(new string[] { "wl.basic", "wl.offline_access", "wl.signin" });
        if (result.Status != LiveConnectSessionStatus.Connected)
            result = await auth.LoginAsync(new string[] { "wl.basic", "wl.offline_access", "wl.signin" });

        if (result.Status == LiveConnectSessionStatus.Connected)
        {
            this.infoText.Text = "Signed in";
        }
    }
    catch (LiveAuthException exc)
    {
        this.infoText.Text = "Error: " + exc.Message;
    }
    finally
    {
        bar.Visibility = Visibility.Collapsed;
    }
}

Note how both the InitializeAsync and LoginAsync use IEnumerable of strings in constructor parameter, in my case an array of strings. Those arrays of string define a scope – what does a user allow my app to touch. In the basic, core scenario I use 3 scopes:

wl.basic – Read access to basic profile info of the user

wl.offline_access – this enables the app to access user info even when the user is not using it. It’s important because it gives the app an additional code called refresh token which the app can use to get the new access token whenever it needs one, typically for up to a year.

wl.signin – this enables single sign on – if the user signed in to your app, he’s also signed in to your app’s website

These three scopes are called core scopes, and there are other called extended scopes which ask for permission to get some other data from the user, and also use both read and write access. I’ll cover those in the next posts.

If the authentication fails and there’s an exception, the exception thrown is LiveAuthException. Let’s see what happens when I run this sample.

Because my emulator is not connected to my Microsoft Account, I am first asked to sign in using my credentials. After I do that, I get the following screen:

I am asked to give permission to this app to do some things which are defined by the scope.

After I click Yes, I am signed in:

If I exit the app and get back later, I simply get signed in automatically, and don’t have to repeat the steps from above.

After the user is signed in, I can do some pretty cool stuff – for example just access user’s profile info. Let’s see how to do that:

try
{
    bar.Visibility = Visibility.Visible;
    auth = new LiveAuthClient("YOUR CLIENT ID GOES HERE");
    LiveLoginResult result = await auth.InitializeAsync(new string[] { "wl.basic", "wl.offline_access", "wl.signin" });
    if (result.Status != LiveConnectSessionStatus.Connected)
        result = await auth.LoginAsync(new string[] { "wl.basic", "wl.offline_access", "wl.signin" });

    if (result.Status == LiveConnectSessionStatus.Connected)
    {
        var connect = new LiveConnectClient(auth.Session);
        var opResult = await connect.GetAsync("me");
        dynamic nameResult = opResult.Result;
        this.infoText.Text = "Hello " + nameResult.name + ", you are signed in";

        var photoResult = await connect.GetAsync("me/picture");
        dynamic photoResultdyn = photoResult.Result;
        var image = new BitmapImage(new Uri(photoResultdyn.location, UriKind.Absolute));
        this.profileImage.Source = image;
    }
}
catch (LiveAuthException exc)
{
    this.infoText.Text = "Error: " + exc.Message;
}
catch (LiveConnectException connExc)
{
    this.infoText.Text = "Error making request: " + connExc.Message;
}
finally
{
    bar.Visibility = Visibility.Collapsed;
}

• GET – await GetAsync(string) – get a resource
• POST – await PostAsync(string, IDictionary<String, Object>) – post a resource
• PUT – await PutAsync(string, IDictionary<String, Object>) – edit resource or create if non existing
• DELETE – await DeleteAsync(string) – delete a resource
• MOVE – await MoveAsync(string, string) – move a resource
• COPY – await CopyAsync(string, string) – copy a resource

Each of those has at least a string as a parameter. What is this string parameter? It means a path to certain resources. Examples of paths are:

• me – basic information about the user who signed in
• me/picture – picture of the user signed in
• USER_ID/picture – public picture of some user defined by user ID
• me/skydrive/files – lists SkyDrive files
• FOLDER_ID/files – lists file in a certain folder, defined by folder ID
• me/events – lists events of a user who signed in
• CALENDAR_ID/events – lists events from a particular calendar defined by calendar ID

and so on.

What is the IDictionary<string,object> parameter? You’ll notice that it’s used only in POST and PUT. This immediately tells you that you use it for defining a resource you will upload to Live services. For example, if you were creating a new event, you would define it like a dictionary of string-object key value pairs, like this:

var calEvent = new Dictionary<string, object>();
calEvent.Add("name", "MSCommunity 54. sastanak DEV UG");
calEvent.Add("description", "Jubilarni 52. sastanak");
calEvent.Add("start_time", "2012-12-13T17:30:00-08:00");
calEvent.Add("end_time", "2012-12-13T20:30:00-08:00");
calEvent.Add("location", "Somewhere in Croatia");
calEvent.Add("is_all_day_event", false);
calEvent.Add("availability", "busy");
calEvent.Add("visibility", "public");
var addEventResult = await connect.PostAsync("me/events", calEvent);

Let’s get back to the sample above.

All the methods have their async implementation in the SDK, so that’s what I use – GetAsync call which is awaitable. I use me path to get the details about the user who signed in. I get a LiveOperationResult as a result of my GET request, which holds the data in a dictionary, in a form similar to the above of a calendar event. I can easily create a dynamic type and access properties like with any other type (unfortunately, we need to know the names of the properties – the dynamic types get created during runtime so they are not available through IntelliSense).

I do the same with the picture – using me/picture path I get the URI of the image of the user who signed in. Here’s what happens when I run the sample:

The application greets me. And that’s it.

You have now conquered the core concepts of Live SDK in Windows Phone 8. What’s really cool is that the same code can be used for Windows 8 Store apps (C#+XAML), so you can reuse the code you write for Windows Phone 8 in your Windows 8 app and vice versa (the difference is only in associating the app with Live services – explained above).

In the next article we’ll see how to use the Live SDK with Hotmal – calendars, events, contacts.

The post Live Connect SDK for Windows Phone 8–authenticating and basic info appeared first on Igor on Mobile.

Not only that placing the GridViewItem title on the left from the data saves you some pixels, but it also looks really cool. One of the most popular apps that use it is Tweetro for Windows 8 by Lazyworm Apps, and I also used it in my apps Mobility Day 2012 and mscommunity.hr. Here’s what it essentially looks like:

If you carefully take a look at the picture, you’ll notice that the title is rotated by -90 degrees to save the space for the calendar item (days in a month) in the middle. This is a GridView which works as a calendar displaying the current and the next month. The title is the name of the month (“listopad” means “October” in Croatian etc.)

You may notice the problem immediately because there seems to be enough space on the bottom to fit the title on the top. But the obvious issue is – what if the first day in month is Saturday? Then I get another row of items, just like the case is with December:

I don’t want to make the calendar items smaller – I want that space back. This is a great example of vertical title making sense.

In order to rotate the title, you need to use the LayoutTransform. I wrote about LayoutTransform in Windows 8 earlier here:

http://igrali.com/2012/09/17/layout-transform-in-windows-8-winrt-xaml/

Let’s see how to use this in an app! Create a new Windows Store project in Visual Studio 2012. Make it a Grid App:

Here’s what you get if you start it without editing the code:

I want to put Group Title:1 >, Group Title: 2 > etc. on the left, rotated by 90 or –90 degrees, depends on what you think looks better.

Step number one is to download the LayoutTransformer class I gave in my old post. Find the class here:

http://sdrv.ms/RlqNF8

Include it in your project, in Common folder. Open the class in Visual Studio and change the namespace from Transforming.Common to YourProjectName.Common, where YourProjectName is the name you gave you your project.

Then, copy the following style part to the ResourceDictionary in StandardStyles.xaml which is also in the Common folder:

<Style TargetType="common:LayoutTransformer">
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="common:LayoutTransformer">
                <Grid x:Name="TransformRoot" Background="{TemplateBinding Background}">
                    <ContentPresenter
                        x:Name="Presenter"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="using:YOURPROJECTNAME.Common">

The next step is to edit the ItemContainerStyle of the GridView. You can do it from Blend (open the project in Blend, first), by simply right clicking on the GridView and then point to:

You will be asked where to put it. Choose StandardStyles.xaml:

Then save everything, close Blend and go back to Visual Studio 2012. Reload if necessary. Open StandardStyles.xaml file and find the new GroupItemStyle1 in code:

The defined template looks like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
    <ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once">
        <ItemsControl.ItemContainerTransitions>
            <TransitionCollection>
                <AddDeleteThemeTransition/>
                <ContentThemeTransition/>
                <ReorderThemeTransition/>
                <EntranceThemeTransition IsStaggeringEnabled="False"/>
            </TransitionCollection>
        </ItemsControl.ItemContainerTransitions>
    </ItemsControl>
</Grid>

You can see immediately that we have two rows, and want two columns! Change the code accordingly, so that now the grid has two columns instead of rows, and set the ItemsControl to the column number 1:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
    <ItemsControl Grid.Column="1" x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" TabIndex="1" TabNavigation="Once">
        <ItemsControl.ItemContainerTransitions>
            <TransitionCollection>
                <AddDeleteThemeTransition/>
                <ContentThemeTransition/>
                <ReorderThemeTransition/>
                <EntranceThemeTransition IsStaggeringEnabled="False"/>
            </TransitionCollection>
        </ItemsControl.ItemContainerTransitions>
    </ItemsControl>
</Grid>

This may seem like enough, but it isn’t because the header/title will still show in horizontal orientation. We want it to rotate. This is where you use the LayoutTransformer. The final grid should look like this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <common:LayoutTransformer HorizontalAlignment="Left" VerticalAlignment="Top" Grid.RowSpan="2" Margin="0,6,0,0">
        <common:LayoutTransformer.LayoutTransform>
            <RotateTransform Angle="-90"/>
        </common:LayoutTransformer.LayoutTransform>
        <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
    </common:LayoutTransformer>
    <ItemsControl Grid.Column="1" x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" TabIndex="1" TabNavigation="Once">
        <ItemsControl.ItemContainerTransitions>
            <TransitionCollection>
                <AddDeleteThemeTransition/>
                <ContentThemeTransition/>
                <ReorderThemeTransition/>
                <EntranceThemeTransition IsStaggeringEnabled="False"/>
            </TransitionCollection>
        </ItemsControl.ItemContainerTransitions>
    </ItemsControl>
</Grid>

Looks nice, doesn’t it? :)

The whole project can be found here:

http://sdrv.ms/YgETsi

The post How to set vertical title in Windows 8 GridView items appeared first on Igor on Mobile.

So, the Windows Phone 8 emulator error looks like this:

After you click OK, you get something called “Invalid pointer error” which is because the emulator didn’t open. My error said:

The Windows Phone Emulator wasn’t able to create the virtual machine: Something happened while creating a switch: Xde couldn’t find an IPv4 address for the host machine.

Some people get more generic error:

The Windows Phone Emulator wasn’t able to create the virtual machine: Generic failure

What to do when Windows Phone 8 emulator error occurs?

The steps you can take and things you can check are the following:

1. Does your hardware support virtualization? Have you enabled it in BIOS?
2. Does your hardware support SLAT (Second Level Address Translation)? You can check that one by following the tutorial here:  http://www.petri.co.il/check-cpu-slat-support.htm
3. Have you installed Hyper-V? (even if you haven’t, the Visual Studio 2012 will probably prompt you to do so) If not, here’s how: http://www.howtogeek.com/76532/how-to-install-or-enable-hyper-v-virtualization-in-windows-8/
4. Are you running Windows 8 64-bit (x64) client version? Needs to be 64bit.
5. Are you running Windows 8 Pro edition or greater?
6. Do you have any kind of other networking/virtualization software installed (VirtualBox, VPN software)? If you do, you might have to remove it to get the emulator to work.
7. Have you tried clearing the existing switches from Hyper-V manager and creating a new one? (XdeCleanup.exe is located in C:Program Files (x86)Microsoft XDE8.0)
8. Have you virtualized your Windows 8 installation? Virtualizing emulator inside virtualized OS… Not sure how that one would look… EDIT: Seems like people have done it! Running the emulator in Windows 8 that’s virtualized in VMWare on Windows 7. See here for details: http://www.veeam.com/blog/nesting-hyper-v-with-vmware-workstation-8-and-esxi-5.html

Number 6 worked for me. I got the nice emulator up and running. :)

The post Windows Phone 8 emulator wasn’t able to create the virtual machine appeared first on Igor on Mobile.