App In The Cloud: Native mobile, desktop and WebAssembly apps with C# and XAML using the Uno Platform with Jérôme Laban

With Uno, you can build native apps and Web Assembly apps with C# and XAML using WinRT (UWP) APIs. In this episode, Daniel is talking with Jérôme Laban, the CTO of Uno Platform about what Uno is, the history of Uno, the current state of Uno and much more.

Jérôme Laban on LinkedIn: https://www.linkedin.com/in/jeromelaban/
Jérôme Laban on Twitter: https://twitter.com/jlaban

Uno website: https://platform.uno/
Uno on GitHub: https://github.com/unoplatform/uno
Uno on Twitter: https://twitter.com/UnoPlatform

Daniel Hindrikes on twitter: https://twitter.com/hindrikes
App In The Cloud on Facebook: https://www.facebook.com/appinthecloud
App In the Cloud on Twitter: https://twitter.com/AppInTheCloudPod

Intro music with a loop from https://www.looperman.com/

Get started with Xamarin.Forms for Windows

Xamarin has finally released support for Windows apps using WinRT. This make it possible to write apps for Windows Phone 8.1 (the stable release uses Windows Phone 8 Silverlight but can be upgraded to Windows Phone 8.1 Silverlight by changing target platform) and Windows 8.1. It's still in preview and Xamarin not recommending that we uses it for production apps yet. This post will show you how to add Windows apps to your existing Xamarin.Forms project.

First thing to do is to make sure that you have the correct PCL profile for your shared Xamarin.Forms project. If you have created your project from Xamarin.Forms PCL template you have to check Windows Phone 8.1.

PCL Target type

Next step is to create a Blank Windows App.

Create black Windows app

When you have done that you have to add the nuget package for Xamarin.Forms to the Windows project.

Run Install-Package Xamarin.Forms.Windows -Pre in the "Package Manager Console".

When the package is installed open up MainPage.xaml and add the Xamarin.Forms namespace and change Page to forms:WindowsPage.

<forms:WindowsPage
    x:Class="MyApp.WinStore.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp.WinStore"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:forms="using:Xamarin.Forms.Platform.WinRT"
    mc:Ignorable="d">
 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
    </Grid>
</forms:WindowsPage>

You also have to remove that MainPage is inherits from Page in MainPage.xaml.cs. To start the forms application run LoadApplication with the App class from the shared project as an argument.

 public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();
 
            LoadApplication(new MyApp.App());
        }
    }

The last step is to call the Xamarin.Forms Init method (Xamarin.Forms.Forms.Init(e);) in App.xaml.cs. The call should be in the OnLaunched method after before if (e.PreviousExecutionState == ApplicationExecutionState.Terminated). It will be around line 65.

if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();
                // Set the default language
                rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];
 
                rootFrame.NavigationFailed += OnNavigationFailed;
 
                Xamarin.Forms.Forms.Init(e);
 
                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Load state from previously suspended application
                }
 
                // Place the frame in the current Window
                Window.Current.Content = rootFrame;

Xamarin Forms for WinRT

If you want to use Xamarin.Forms for a Windows Phone 8.1 (with WinRT) app follow the same steps, for a Windows Phone 8.1 project.

Crossplatform and storage strategies

Many applications need to store data related to the application. If you're building applications for multiple platforms the APIs for storage is different.

Following five storage types is the most common ones:

Local storage
Storage to store application data locally on the device.

Remote storage
Storage to store application data in the cloud, for example OneDrive or iCloud. Data that is saved in the cloud could be accessible from different devices.

Cache storage
Storage to use when caching data. Platforms that have a separate storage for cache data will not contain cache storage in the backup, WinRT for an example. Cached data is not necessary to have in a backup, it will be cached again after restore of the backup.

Settings storage
Storage to store application settings locally on the device.

Remote settings storage
Storage to store application settings in the cloud, for example OneDrive or iCloud. Settings will be synced for all devices you have installed the application on.

You can handle storage in different ways, one strategy is to create one interface for each of the storage types above, for example ILocalStorage and IRemoteStorage. Every interface will have an implementation for each platform. With help of an IoC-container (Inversion of Control) we can use the interface to call platform specific code from shared code.

public interface ILocalStorage
{
     Task AddAsync(string key, object value);
     Task<T> GetAsync(string key, object value);
     Task<bool> ContainsAsync(string key);
     Task RemoveAsync(string key);
}

One other strategy is to create one storage interface, IStorage and have a method with storage type as an argument. As with the first strategy each platform will have a platform specific implementation that can be used from shared code with help of IoC.

public enum StorageTypes
{
    Local,
    Remote,
    Cache,
    Settings,
    RemoteSettings
}
 
public interface IStorage
{
     Task AddAsync(string key, object value, StorageTypes storageType);
     Task<T> GetAsync(string key, object value, StorageTypes storageType);
     Task<bool> ContainsAsync(string key, StorageTypes storageType);
     Task RemoveAsync(string key, StorageTypes storageType);
}
 
public class Storage : IStorage
{
     public async Task AddAsync(string key, object value, StorageTypes storageType)
     {
          switch(storageType)
          {
                 case StorageTypes.Local:
                      //code for local storage
                      break;  
                 case StorageTypes.Remote:
                      //code for remote storage
                      break;  
                 case StorageTypes.Cache:
                      //code for cache storage
                      break;  
                 case StorageTypes.Settings:
                      //code for settings storage
                      break;  
                 case StorageTypes.RemoteSettings:
                      //code for remote settings storage
                      break;  
          }     
     }

I prefer the first strategy beacause I like small classes with one role, the maintainability will be much higher and you can make changes to one implementation without the risk of breaking other functionality than that one you want to change.

As an example, one platform maybe don't have CacheStorage, then the LocalStorage and CacheStorage will be pretty much the same. But if that platform will get CacheStorage in the future you can change the implementation of ICacheStorage without touching the working code for LocalStorage.

Build 2014

Now we are in San Francisco for the BUILD Conference that starts on Wednesday. It was a long flight from Sweden yesterday, but I used the time for coding. Have to say that Surface Pro is an excellent device for coding on an airplane.

What I expect from the BUILD conference is a big amount of inspiration from great lectures and people, new knowledge about developing for the Microsoft platform and some product news specifically for Windows Phone.

The most discussions before has been about Windows Phone 8.1 but I have also read some that speculating about a preview of Windows 9.

I saw the schedule for the first time earlier this morning and it will not be easy to select what to listen on.

If you want to follow us on Build you can do it here on my blog and on Twitter, my username is @hindrikes and Johan's is @johankson.

Solution: Cursor disappears on Surface Pro 2 when connecting monitor

If you having problem that your cursor disappears on your Surface Pro 2 when you connecting an external monitorthere is a simple solution, disconnect the external monitor and connect it again and it will work again.

For me this problem showed up when I changed size for text and objects on the desktop after that I connecting an external monitor.

 

Windows Azure Mobile Services in Portable Class Library

In my current project, a multiplayer game for mobile devices I only using Windows Azure Mobile Services as backend. The game will be available for multiple platforms and I will use Xamarin for iOS and android.

When using Xamarin I can reuse a lot of code if I using PCL (Portal Class Library) that i shipped with Visual Studio. When creating a new PCL-project you can choose which taget platforms the project will build for, in my case Windows Phone, Windows Store, Xamarin iOS and Xamarin Android.

In order to reuse so much code as possible I want to have the communication with my backend in PCL. When using Windows Azure Mobile Services I can have all communication there except for the code for authentication. But then I put an interface i PCL and each platform will have a specific implementation of the interface.

But where to find the Mobile Services assemblies for PCL? I installed Mobile Services via NUGET to my Windows Phone project (Windows Phone is my first platform). But Mobile Services was not just installed to my Windows Phone project, I also got the assemblies for PCL (and other platforms) i my packages folder. It enabled me to add the assemblies manually to the PCL-project.

Modern UI icons

If you searching for icons for your app or website, check out http://modernuiicons.com/. There are over 1000 icons designed for your app or website. It is a very good library when building modern UI apps for Windows Phone, Windows 8 or iOS7. But I have also used them for different websites. When I searching for icons I almost always finds an icon in Modern UI icons library.

When you download the library you will get a dark and a white version of the icon. But you also got them in the vector format, .design and .svg.

Improved developer tools in Internet Explorer 11

I have run Windows 8.1 for a couple of weeks now. One of the news in Windows 8.1 is Internet Explorer 11. I have not used Internet Explorer as my main browser, but of course I wanted to try it out.

One of the reason I don't have used Internet Explorer so much is that I think that Firebug had been much better than developer tools in Internet Explorer. But for Internet Explorer 11, they have done big improvements. You can for example debug with the windows pinned in the browser window, you do not need to press start for starting the debugger, it is just to add a breakpoint. An another thing I like in the new developer tools is that you do not need to refresh page, when a javascript has changed the DOM, it is updating in real time.

You also get help to see if elements are in line when you selecting an element (see image below). I think that could be a very helpful tool.

Internet Explorer 11 Developer Tools

The only thing that I miss is that I can nott set Internet Explorer in compability view. When working for a customer that use older versions of Internet Explorer is has been a very good feature to change document mode. When using Internet Explorer 11 I need to use a virtual machine to test websites on other browser versions than 11. Microsoft links to a tool that is called Browser Stack. I signed up for a evaluation account, but it dosen't work well, it was lagging so it was very hard to do the testing.

IE 11 Developer Tools

Windows 8.1 and the new fish

The preview of Windows 8.1 is now available for download at, http://windows.microsoft.com/en-us/windows-8/preview.
I installed it earlier today and I got a start button that I never will use. But is good that they added it when it seems to be an important thing for a lot of people.

I like that I can use a photo as background at the startscreen and that it is easier to adminstrate the tiles on the start screen. For users with touch screen it's good that you can do all settings from the PC-settings app and don't need to use the control panel.

One fun thing is that the ugly fish in the preview versions of Windows 8 is also updated, the Windows 8.1 fish looks much better!
Windows 8.1 fish

Enable WebSocket Protocol in IIS

If you want to use WebSockets with IIS8 you need to enabled it. This step by step guide will show you how to enable WebSocket Protocol on Windows 8 and Windows Server 2012.

Enable WebSocket Protocol in Windows 8

  1. Open "Control Panel
  2. Open "Turn Windows features on or off
  3. Expand "Internet Information Services"
  4. Expand "World Wide Web Services"
  5. Expand "Application Development Features
  6. Check WebSocket Protocol and click "OK"

Enable WebSocket Protocol

Enable WebSocket Protocol in Windows 2012 server

  1. Open "Server Manager"
  2. Click on "Manage" in the right corner"
  3. Click "Add Roles and Feature"
  4. Go to "Installation Type in the Wizard"
  5. Select "Role-based or feature installation and click "Next"
  6. Go to "Server Roles"
  7. Expand "Web Server(IIS)"
  8. Expand "Web Server"
  9. Expand "Application Development"
  10. Check WebSocket Protocol and click "Next"
  11. Click on "Install"

Enable WebSocket Protocol Windows Server2012

If you running a web role in Windows Azure you don't need to activate it, it's already done!