Microsoft All-In-One Code Framework – Developers’ Pain Killer

Microsoft has a team working in samples for MSDN Gallery. The project is called the All-In-One Code Framework

all in one framework

References:

They did a blog post about my samples, that can be read here:
Sharing great Windows Store app samples written by the MVP–Sara Silva

My samples in Sample Browser app for Windows Store:
@saramgsilva

[PT]Microsoft WebCamp Lisboa

Com as novas plataformas e frameworks ao seu dispor como oHTML5, jQuery, as novidades no ASP .NET ou ainda o poder daCloud (com o Windows Azure), a Web não pára de evoluir e expandir-se para novos domínios, como o mobile ou as recém-apresentadas Office Apps.

Foi por isso que criámos o Microsoft WebCamp do próximo dia 22 de Março onde, com o acompanhamento de um dos speakers oficiais dos Microsoft DevCamps a nível mundial (www.devcamps.ms), Cory Fowler, lhe iremos dar a conhecer em detalhe as principais novidades que, como Web Developer, precisa saber para dominar esta nova geração de WebsitesApps e serviços.

Contamos consigo!
A Equipa DevCamps da Microsoft Portugal

What’s a Web Camp?
Web Camps are free, fun, no-fluff events for developers, by developers.  You learn from experts in a low-key, interactive way and then you’ll get to apply what you’ve learned. The speaker is Cory Fowler from Microsoft Corporation in Redmond. All sessions will be in English.

                                   

What am I going to learn?

At this Web Camp, you’ll learn how to develop beautiful, interactive and fast web sites using Microsoft’s web tools and platform.  You will also learn how to deploy and scale your web sites with the cloud.

Agenda?

Here’s a snapshot of the topics that will be covered in the sessions and demonstrated with extensive hands-on resources.

08:30 – 09:00: Keynote
09:00 – 09:30: What’s new in ASP.NET 4.5
09:30 – 10:30: Building and deploying websites with ASP.NET MVC 4
10:30 – 10:45: Break
10:45 – 11:45: Creating HTML5 Applications with jQuery
11:45 – 12:45: Lunch
12:45 – 13:15: Building a service layer with ASP.NET Web API
13:15 – 13:45: Leveraging your ASP.NET development skills to build Office Apps
13:45 – 14:15: Building and leveraging social services in ASP.NET
14:15 – 14:30: Break
14:30 – 15:00: Building for the mobile web
15:00 – 15:30: Realtime communications with SignalR
15:30 – 15:45: Break
15:45 – 16:45: Using Cloud Application Services
16:45 – 17:00: Wrap Up


Speaker?

Cory Fowler, Windows Azure Technical Evangelist, Microsoft
Cory Fowler is a Windows Azure Technical Evangelist focusing around PHP on Windows Azure. Before joining Microsoft Cory referred to himself as a Developer as a Service and was one of the inaugural members of the Windows Azure group of Microsoft MVPs. Cory takes great pride in being both Canadian and a Ginger. You can find Cory on twitter under the handle @SyntaxC4 or read up on Windows Azure and other insightful things on his blog http://blog.syntaxc4.net.

This event will be conducted in English

 

Source:

https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032547673&culture=pt-PT

Sharing Code: Adding NavigationService

Introduction

This sample has the goal to show an example about NavigationService in share code scenarios, that will be registered in one Ioc container and injected by view model’s contructor. The idea is to have an INavigationService interface that is portable and used in portable view models, in pratice will have diferent implementation in the platform project.

The source can be get here.

Building the Sample

You only need Visual Studio 2012 and Windows 8, both the RTM version.

Description

Before starting the sample, I recommend to see the related samples that was created:

  1. Consuming Odata Service in Windows Store Apps (Include MVVM Pattern)
  2. Creating portable code in Windows Store Apps (PCL + MVVM + OData Services)
  3. Sharing Code between Windows Store and Windows Phone App (PCL + MVVM + OData)

In this moment we have a TitlesPage.xaml in both projects and in this samples we will create a second page called   TitleDetailsPage.xaml and implementation for navigate between them and passing parameters.

 

Let’s start!

The main points are:

  1. INavigationService
  2. NavigationService in Windows Store Apps
  3. NavigationService in Windows Phone Apps
  4. Others details

 

1. INavigationService

 

Navigation is a verify important point in one application, because it allow us to switch between page and in some cases send data between them. There are some points to analyze:

– In Windows Store app we navigate to type of the page that is an object and in Windows Phone apps we navigate to uri using the string name of the page;

– For pass parameter, we can send an object when is a Windows Store app,  but for Windows Phone app we need to create a query string with the parameter;

– more common features are the CanGoBack property and GoBack method;

 

In gerenal, the for navigation must have:

  • Navigation method (that allow parameters)
  • GoBack method
  • CanGoBack property

 

Another “little problem” is the fact in portable class libraries i cannot use the page type, and an solution for it is to navigate for the ViewModel that will be used in next page. With this my INvaigationService could be:

/// <summary> 
    /// The NavigationService interface. 
    /// </summary> 
    public interface INavigationService 
    { 
        /// <summary> 
        /// Gets a value indicating whether can go back. 
        /// </summary> 
        bool CanGoBack { get; } 

        /// <summary> 
        /// The go back. 
        /// </summary> 
        void GoBack(); 

        /// <summary> 
        /// The navigate. 
        /// </summary> 
        /// <param name="parameter"> 
        /// The parameter. 
        /// </param> 
        /// <typeparam name="TDestinationViewModel"> 
        /// The destination view model. 
        /// </typeparam> 
        void Navigate<TDestinationViewModel>(object parameter = null); 
    }
 Let’s see who it will be implemented in Windows Store apps.

 

2. NavigationService in Windows Store Apps

    /// <summary> 
    /// The navigation service. 
    /// </summary> 
    public class NavigationService : INavigationService 
    { 
        /// <summary> 
        /// The view model routing. 
        /// </summary> 
        private static readonly IDictionary<Type, Type> ViewModelRouting = new Dictionary<Type, Type>() 
                                                                      { 
                                                                          { 
                                                                              typeof(TitlesViewModel), typeof(TitlesPage) 
                                                                          }, 
                                                                          { 
                                                                              typeof(TitleDetailsViewModel), typeof(TitleDetailsPage) 
                                                                         } 
                                                                     }; 

        /// <summary> 
        /// Gets a value indicating whether can go back. 
        /// </summary> 
        public bool CanGoBack 
        { 
            get 
            { 
                return RootFrame.CanGoBack; 
            } 
        } 

        /// <summary> 
        /// Gets the root frame. 
        /// </summary> 
        private static Frame RootFrame 
        { 
            get { return Window.Current.Content as Frame; } 
        } 

        /// <summary> 
        /// The go back. 
        /// </summary> 
        public void GoBack() 
        { 
            RootFrame.GoBack(); 
        } 

        /// <summary> 
        /// Navigates the specified parameter. 
        /// </summary> 
        /// <typeparam name="TDestinationViewModel"> 
        /// The type of the destination view model. 
        /// </typeparam> 
        /// <param name="parameter"> 
        /// The parameter. 
        /// </param> 
        public void Navigate<TDestinationViewModel>(object parameter) 
        { 
            var dest = ViewModelRouting[typeof(TDestinationViewModel)]; 

            RootFrame.Navigate(dest, parameter); 
        } 
    }

3. NavigationService in Windows Phone Apps

The implementation for the windows phone could be something like the following code

 

 /// <summary> 
    /// The navigation service. 
    /// </summary> 
    public class NavigationService : INavigationService 
    { 
        /// <summary> 
        /// The view model routing. 
        /// </summary> 
        private static readonly Dictionary<Type, string> ViewModelRouting = new Dictionary<Type, string> 
                                                                    { 
                                                                          { 
                                                                              typeof(TitlesViewModel), "View/TitlesPage.xaml" 
                                                                          }, 
                                                                          { 
                                                                              typeof(TitleDetailsViewModel), "View/TitleDetailsPage.xaml" 
                                                                         } 
                                                                     }; 

        /// <summary> 
        /// Gets a value indicating whether can go back. 
        /// </summary> 
        public bool CanGoBack 
        { 
            get 
            { 
                return RootFrame.CanGoBack; 
            } 
        } 

        /// <summary> 
        /// Gets the root frame. 
        /// </summary> 
        private Frame RootFrame 
        { 
            get { return Application.Current.RootVisual as Frame; } 
        } 

        /// <summary> 
        /// Decodes the navigation parameter. 
        /// </summary> 
        /// <typeparam name="TJson">The type of the json.</typeparam> 
        /// <param name="context">The context.</param> 
        /// <returns>The json result.</returns> 
        public static TJson DecodeNavigationParameter<TJson>(NavigationContext context) 
        { 
            if (context.QueryString.ContainsKey("param")) 
            { 
                var param = context.QueryString["param"]; 
                return string.IsNullOrWhiteSpace(param) ? default(TJson) : JsonConvert.DeserializeObject<TJson>(param); 
            } 

            throw new KeyNotFoundException(); 
        } 

        /// <summary> 
        /// The go back. 
        /// </summary> 
        public void GoBack() 
        { 
            RootFrame.GoBack(); 
        } 

        /// <summary> 
        /// Navigates the specified parameter. 
        /// </summary> 
        /// <typeparam name="TDestinationViewModel">The type of the destination view model.</typeparam> 
        /// <param name="parameter">The parameter.</param> 
        public void Navigate<TDestinationViewModel>(object parameter) 
        { 
            var navParameter = string.Empty; 
            if (parameter != null) 
            { 
                navParameter = "?param=" + JsonConvert.SerializeObject(parameter); 
            } 

            if (ViewModelRouting.ContainsKey(typeof(TDestinationViewModel))) 
            { 
                var page = ViewModelRouting[typeof(TDestinationViewModel)]; 

                this.RootFrame.Navigate(new Uri("/" + page + navParameter, UriKind.Relative)); 
            } 
        } 
    }

 

There are some differences for each implementation, the big one is the way we sent parameters in Windows Phone app, because it must be a query string.

 

4. Others details
With this i need to register the view model and the NavigationService interface and implementation, in ViewModelLocator:

/// <summary> 
    /// This class contains static references to all the view models in the 
    /// application and provides an entry point for the bindings. 
    /// </summary> 
    public class ViewModelLocator 
    { 
        /// <summary> 
        /// Initializes a new instance of the ViewModelLocator class. 
        /// </summary> 
        public ViewModelLocator() 
        { 
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default); 

            if (!SimpleIoc.Default.IsRegistered<IServiceManager>()) 
            { 
               // For use the fake data do: 
               // FakeServiceManager.FakeImagePath = "ms-appx:///Images/FakeImage.png"; 
               // SimpleIoc.Default.Register<IServiceManager, FakeServiceManager>(); 
               SimpleIoc.Default.Register<IServiceManager, ServiceManager>(); 

               SimpleIoc.Default.Register<INavigationService, NavigationService>(); 
            } 

            SimpleIoc.Default.Register<TitlesViewModel>(); 
            SimpleIoc.Default.Register<TitleDetailsViewModel>(); 
        } 

        /// <summary> 
        /// Gets the titles view model. 
        /// </summary> 
        public TitlesViewModel TitlesViewModel 
        { 
            get 
            { 
                return ServiceLocator.Current.GetInstance<TitlesViewModel>(); 
            } 
        } 

        /// <summary> 
        /// Gets the title details view model. 
        /// </summary> 
        /// <value> 
        /// The title details view model. 
        /// </value> 
        public TitleDetailsViewModel TitleDetailsViewModel 
        { 
            get 
            { 
                return ServiceLocator.Current.GetInstance<TitleDetailsViewModel>(); 
            } 
        } 

        /// <summary> 
        /// The cleanup. 
        /// </summary> 
        public static void Cleanup() 
        { 
            // TODO Clear the ViewModels 
        } 
    }

and the TitlesViewModel  will be updated with an new method:

  /// <summary> 
        /// The show title details. 
        /// </summary> 
        /// <param name="myTitle"> 
        /// The my title. 
        /// </param> 
        /// <returns> 
        /// The <see cref="bool"/>. 
        /// </returns> 
        public bool ShowTitleDetails(MyTitle myTitle) 
        { 
            if (_navigationService != null) 
            { 
                _navigationService.Navigate<TitleDetailsViewModel>(myTitle); 
                return true; 
            } 

            return false; 
        }

and in TitlesPage.xaml.cs we will add the

 /// <summary> 
        /// Handles the OnItemClick event of the Title control. 
        /// </summary> 
        /// <param name="sender">The source of the event.</param> 
        /// <param name="e">The <see cref="ItemClickEventArgs" /> instance containing the event data.</param> 
        private void Title_OnItemClick(object sender, ItemClickEventArgs e) 
        { 
            var titlesViewModel = DataContext as TitlesViewModel; 
            if (titlesViewModel != null) 
            { 
                var item = e.ClickedItem as MyTitleItemView; 
                if (item != null) 
                { 
                    titlesViewModel.ShowTitleDetails(item.Item); 
                } 
            } 
        }

that allow to navigate to the next page. Here i am using the method from view model to keep the same code between platforms.

 

Note: The reason for this is besause there are differences between Behaviors between platforms, and the implementation i tested for Windows Store apps don´t liked.

 

Source Code Files

  • IServiceManager.cs has the IServiceManager interface and define the interface for the ServiceManager.
  • ServiceManager.cs has the ServiceManager class and it encapsulate the NetFlixService and exposes only the methods that is need in ViewModel.
  • FakeServiceManager.cs is the implementation of the IServiceManager, but is a fake data.
  • TitlesViewModel.cs has TitlesViewModel class and it is used for binding with the DataContext from TitlesPage.
  • TitleDetailsViewModel that represent the view model that will be binding to the TitleDetailsPage.
  • ViewModelLocator.cs has the ViewModelLocator class that help to binding the view model with the view.
  • ViewModelHelper.cs has the ViewModelHelper class the helps to create grouped data.
  • TitlesPage.xaml and TitlesPage.xaml.cs that is the main page.
  • TitleDetailsPage.xaml that represent the page with details from selected item in TitlesPage.xaml.
  • Templates.xaml is a resource dictionary that has the DataTemplate for the view.
  • NetFlixItemTemplateSelector.cs has the NetFlixItemTemplateSelector that is used for get the ItemTemplate for each item in gridView.
  • TitleDetailsPage.xaml that represent the page with details from selected item in TitlesPage.xaml.

More Information

Run the sample

This sample requires a Nuget package restore. For it, you should follow the steps:

Open the solution (.sln file), the aspect should be:

 

 

Go to Top Menu > Tools > Library Package Manager

 

 

We will see something like this:

 

Download process will start….

 

 

At the end, is recommend to close the solution and then open again.

 

To debug the app and then run it, press F5 or use Debug > Start Debugging. To run the app without   debugging, press Ctrl+F5 or use Debug > Start Without Debugging.

 

More Information

Ask me on twitter @saramgsilva