Sony Arouje

a programmer's log

Posts Tagged ‘Async CTP

Populate Listbox Asynchronously using Await and Reactive Extension (Rx)

with 9 comments

Recently I completed rewriting one of my WPF application called iTraveller, one important area of interest was User interface. I did lot of things to make the UI responsive even in, time consuming operations. My first hurdle was populating the thumbnail images in a list box without halting the UI. If we populate Listbox in normal approach then the UI will be unresponsive till it completes. I searched a lot to find a better approach to populate ListBox asynchronously without halting my UI. Most of the approaches were too complex or not suited for my requirement. So I combined Async CTP’s await and Reactive Extension (Rx) to satisfy my requirement. The result was far far better than I thought, with my approach I could populate Listbox asynchronously with a very responsive UI.

Let’s see how I solved the issue.

First have a look at my Photo entity

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Media.Imaging;
using System.Threading.Tasks;
using System.Threading;
using System.IO;
using Db4objects.Db4o;
namespace ITraveller.Domain
{
    public class Photo:IDisposable
    {
        public Photo()
        {
            this.ImageID = Guid.NewGuid();
        }

        private Guid _imageID;
        public Guid ImageID 
        { 
            get
            {
                return _imageID;
            }
            set
            {
                _imageID = value;
            }
        }

        private String _imageName;
        public String ImageName 
        { 
            get
            {
                return _imageName;
            }
            set
            {
                _imageName = value;
            }
        }

        private string _title;
        public string Title 
        {
            get 
            {
                return _title;
            }
            set
            {
                _title = value;
            }
        }

        private string _description;
        public string Description 
        { 
            get
            {
                return _description;
            }
            set
            {
                _description = value;
            }
        }

        private Uri _uri;
        public Uri Uri 
        { 
            get
            {
                return _uri;
            }
            set
            {
                _uri = value;
            }
        }

        private string _imagePath;
        public string ImagePath 
        { 
            get
            {
                return _imagePath;
            }
            set
            {
                _imagePath = value;
            }
        }

        private LocalCategory _category;
        public LocalCategory Category 
        { 
            get
            {
                return _category;
            }
            set
            {
                _category = value;
            }
        }

        private int _commentCount;
        public int CommentCount
        {
            get
            {
                return _commentCount;
            }
            set
            {
                _commentCount = value;
            }
        }
        private BitmapImage _thumbnailImage;
        public BitmapImage ThumbnailImage 
        {
            get { return _thumbnailImage; }
            set { _thumbnailImage = value; }
        }

        private BitmapImage _previewImage;
        public BitmapImage PreviewImage 
        {
            get { return _previewImage; }
            set { _previewImage = value; }
        }



        public void EmptyImage()
        {
            this.PreviewImage = null;
            this.ThumbnailImage = null;
        }

        public delegate void LoadImage();
        public Photo GetPhotoWithThumbnail()
        {
            this.ThumbnailImage = new BitmapImage();
            this.ThumbnailImage.BeginInit(); 
            this.ThumbnailImage.UriSource = new Uri(this.ImagePath); 
            this.ThumbnailImage.DecodePixelHeight = 50; 
            this.ThumbnailImage.EndInit();             
            return this;
        }

        public Photo GetPhotoWithPreviewImage()
        {
            try
            {
                this.PreviewImage = new BitmapImage();
                this.PreviewImage.BeginInit();
                this.PreviewImage.UriSource = new Uri(this.ImagePath);
                this.PreviewImage.EndInit();
                return this;
            }
            catch (Exception ex)
            {
                this.PreviewImage = null;
                return this;
            }
        }
   
        public void Dispose()
        {
            this.PreviewImage = null;
            this.ThumbnailImage = null;
        }

    }
}

It’s a normal Entity. GetPhotoWithThumbnail function creates the BitmapImage in the photo entity. Before adding to Listbox I make a call to this function to get the thumbnail image and bind it to ListBox.

I used db4o for persisting my data, I covered how I used db4o in one of my previous post. Let’s start the code walk through from Application layer. In my app layer I have a function to fetch all the photos belongs to a category.

public async  Task<List<Photo>> GetPhotosByCategory(LocalCategory category)
{
    return await TaskEx.Run(() =>
        {
            IRepository repository = GenericRepository.GetRepositoryInstance();
            return repository.Find<Photo>(p => p.Category.ID == category.ID).ToList<Photo>();
        }, CancellationToken.None);
}

 

I used await here to perform the data fetching task asynchronously.

Now let’s go to the Viewmodel and see how I am calling this function and populating the listbox. iTraveller implements MVVM model and as usual I used Caliburn Micro as my MVVM framework.

public async void LoadPhotosInCategory(LocalCategory category)
{
    PhotoService photoService = new PhotoService();
 
    //data retrieving call using await
    List<Photo> photos=await photoService.GetPhotosByCategory(category);
 
    //loading of List using Reactive extension
    IObservable<Photo> photosToLoad = photos.ToObservable<Photo>();
    photoToLoad.Subscribe<Photo>(p =>
    {
        Dispatcher.CurrentDispatcher.Invoke(DispatcherPriority.Background, new Action<Photo>(AddThumbnailToCollection), p);
    }, () =>
        {
            //this block will execute once the iteration is over.
        }
    );
}
private void AddThumbnailToCollection(Photo photo)
{
    photo = photo.GetPhotoWithThumbnail();
    this.Thumbnails.Add(photo);
}

 

public ObservableCollection<Photo> Thumbnails { get; private set; }

 

Dispatcher can be find in System.Windows.Threading namespace.

The observablecollection Thumbnails is binded to the Listbox in the View. That all happens behind the scene and done by Caliburn Micro.

I used Dispatcher here because the creation of BitmapImage should be in the same thread of the UI otherwise while binding it will throw error.

Try it out yourself and see how responsive your UI even if the Listbox is getting loaded with hundreds of thumbnails.

Advertisements

Written by Sony Arouje

February 15, 2011 at 6:24 pm

Using await in real world asynchronous programming–Part 2

with one comment

This is the continuation to my previous post related to new async ctp. In the previous post I explained the use of await using a webclient. This post I am going to explain how can we use await in real life scenario. In real life you may not only deal with webclient, you may wanted to do a time consuming database call or you wanted to do some time consuming process or whatever in asynchronous manner, at the same time our UI should be responsive.

I did a lot of search to find a scenario to deal expensive process other than calling a webclient but no use. So I thought it will be good to post some real life scenario as most of the blogs explain the async ctp with webclient or in some complex way that person like me cant understand.

Async CTP simplify the way we write asynchronous methods, with async ctp no BeginXXX and no EndXXX. So let’s go through the scenario with a small intro.

Currently am in the process of rewriting one of my app called iTraveller. My prime focus is a very responsive UI with less app loading time. The app requires to load categories and lot of thumbnails at startup. I am doing lot of these process at startup and if we do it synchronously it will affect the application startup speed. When async CTP launched, I jumped into to it, because I know that it’s very useful for me.

Below is a piece of code we normally write to load some data from a database.

public List<LocalCategory> GetAllCategories()
{
    IRepository repository = GenericRepository.GetRepositoryInstance();
    return repository.GetAll<LocalCategory>().ToList<LocalCategory>();
}

 

Here I used the Generic repository model I explained earlier in my blog. The above method is a synchronous call and the caller should wait till the db calls complete. Am going to rewrite the above method in async mode.

public async Task<List<LocalCategory>> GetAllCategoriesAsync()
{
    IRepository repository = GenericRepository.GetRepositoryInstance();
    return await TaskEx.Run(() => 
    {
        //write the time consuming process here
        return repository.GetAll<LocalCategory>().ToList<LocalCategory>();
    }, System.Threading.CancellationToken.None);
}

 

Here I converted a synchronous method to an asynchronous one, It’s as simple as that. Let’s see how can we call the above method.

private async void LoadExistingCategory()
{
    CategoryService categoryService = new CategoryService();
    var categoriesTask=await categoryService.GetAllCategoriesAsync();
    this.ExistingCategories = categoriesTask.ToList<LocalCategory>();
}

 

You can call the async method in button event handler or where ever you want to call. But the caller should marked as async, the above method I added async just after the private.

LocalCategory is one of my entity class in the application.

I wrote a very expensive Euclidean distance algorithm using async mode and it worked very well. The same without async will keep the UI busy for two seconds and the user will be blocked from doing any action. 

Written by Sony Arouje

December 9, 2010 at 11:20 pm

%d bloggers like this: