What's New For Devs in Win8.1
One of our partners, IT-Visions, invited me to speak at their VS2013/Win8.1 What's New event in Munich today. Of course I was happy to participate. During the session I demo new features from VS2013, Windows Store app development, and - of course - Windows Azure Mobile Services. The session was nearly 100% live coding. I just used the slides at the end to speak about those topics I could not cover. In this blog article you find the entire slide deck as well as the sample solution I (partly) developed during my talk.
Note that the sample is just demonstrating features. It is not fully functional and definitely not production-ready code!
Session Recording (German)
My goal in this session was to put a lot of Windows 8.1 + VS2013 + Azure Mobile Services news into one sample. As my hobby is bee keeping, I decided to build a "hive manager". This is how the app should look like (click to enlarge):
The sample demonstrates the following topics:
- Setting up a new Windows Store app in Visual Studio 2013
- Providing visual assets for new tile sizes
- Working with the new Hub control
- Adding an app bar using the new CommandBar class
- Adding Flyouts
- Accessing Windows Azure Mobile Services from Windows 8.1 Store apps
- Using Microsoft Accounts for authentication
- Adding and using the new Behavior SDK for Windows Store apps
- Using the new SearchBox for in-app search capabilities
- New Header and PlaceholderText properties
- New DatePicker control
Note that for this session I have picked just a few of the things that are new in Windows 8.1. If you want to have a more complete overview, check out the Windows 8.1 Feature Guide.
App Setup, New Tile Sizes
One of the nice new features in Windows 8.1 are the new tile sizes. My sample code makes use of them. The following screenshot shows how to set up the visual assets in Visual Studio 2013:
Here you see the large tile of our app in the Windows 8.1 start menu:
The New Hub Control
The new hub control makes it really easy to use the hub navigation pattern in Windows Store apps. In my app, I use the hub to display
- A "Hero" image to visually "pimp" my app
- A list of hives that I get from my Azure Mobile Services backend
- A detail form of the currently selected hive
The following code snippet from MainPage.xaml shows how I use the new hub control. BTW - note how I use the new RequestedTheme attribute to switch the theme to "light". You could even switch between dark and light theme for a specific part of your control tree.
MVVM - Model-View-ViewModel
Of course I separate view and logic for the view ("ViewModel") into two separate classes. The ViewModel could be reused on different platforms (e.g. WPF, Silverlight, with Xamarin even Android or iOS) to a large degree.
During my session I pointed out a specific feature regarding MVVM: The ability to use an instance of the ViewModel in Visual Studio to support the visual design of your app. Additionally having access to the ViewModel in Visual Studio greatly enhances your Intellisense experience. Here is the relevant code snippet (look for the XML namespace d):
BTW - while playing around with my sample, did you notice Intellisense for the StaticResource markup extension? That's an awesome new feature in VS2013! If you like it, try F12 (go to definition). Yes, it finally works even in XAML and even for built-in styles like e.g. HeaderTextBlockStyle :-)
The new CommandBar , Flyouts
Like the Hub control makes it easy to build navigation, the CommandBar greatly simplifies adding app bars to your app. In Windows 8.1, the amount of XAML you have to write has reduced massively compared to the previous version. Here is a code snippet that adds a command bar to our app:
This sample code also shows another feature of Windows 8.1: Flyouts. They are very handy for confirmation messages as the one showed above. They can even contain more complex UI (e.g. check boxes, etc.). Here you see the flyout in action:
In some areas, WinRT has a built-in mechanism for triggering ViewModel-code in response to user interaction. The Click event of a Button is one example that you are probably familiar with. Instead of writing code in the View which more-or-less just forwards the event to a ViewModel-method, you use a binding in the Command property referring to an implementation of ICommand. My sample includes this way of data binding in multiple places. Here is a short XAML snippet that shows what I mean:
To simplify the implementation of the ViewModel, I built a DelegateCommand helper class. Note that in practise you do not need to implement it yourself. Use an MVVM framework like Prism, MVVMLight, etc. instead.
Inside the ViewModel, I use the DelegateCommand to create an ICommand property for data binding:
If you want to call a ViewModel-method in response to an event other than Button.Click, many people write code in the view's code behind file. In WPF there has been a better way for quite a long time: Behaviors. Behaviors are objects that you attach to a UI element. They catch a specified event and perform an action that you specify (e.g. calling a method in the ViewModel). Visual Studio 2013 comes with a Behavior SDK for Windows Store apps. So finally you can program in this nice way in your Windows Store apps, too.
The screen shot above shows how you add a reference to the new Behavior SDK. The following XAML snippet shows how I use it in my sample to trigger authentication when the app has been loaded:
The authentication itself is provided by Windows Azure Mobile Services. If you want this kind of authentication in your app, too, you have to follow these steps:
Perform the necessary steps to register for a developer API key for your selected authentication provider (e.g. Facebook, Google, Microsoft Account). In my case, I use a Microsoft Account for authentication. Therefore I had to go to Microsoft's Live Connect Developer Center, register, and create an account for my app. You have to do similar things if you choose Facebook or Google.
Next you have to enter the provider-specific API credentials in the Windows Azure Mobile Services Portal. The following screenshot shows where this is done e.g. for Microsoft Accounts:
Once this is done, you can set the permission level for accessing your Azure Mobile Services tables to Only Authenticated Users.
Add the Windows Azure Mobile Services NuGet package to your application. As this package contains a Portable Class Library, it can easily be used in a Windows Store app.
If you have successfully completed above steps, it is really simple to add authentication code to your ViewModel:
The behavior in the XAML file will trigger the Authenticate method in the ViewModel whenever the Loaded event of the Page will occur. As a result, your user is presented with the typical login screen for Microsoft Accounts. Subsequent calls to the mobile services referenced by App.MobileService will automatically pass the identity of the user via the corresponding REST calls. If all this is new for you, I encourage you to download an HTTP debugger like Fiddler and watch the HTTP traffic. Here is a screenshot of the Mobile Services traffic in Fiddler (click to enlarge):
Data Access Using Windows Azure Mobile Services Tables
The data itself is stored in Mobile Services tables. In our simple example it is just one table. The following class shows its structure:
The code used to retrieve hive data rows via REST is simple:
You might have noticed that the RefreshHives method contains a Where clause (again, I recommend to check out the corresponding HTTP traffic in Fiddler for people who are new with REST). The reason for this is that our app supports in-app search. This is also new to Windows 8.1. Before, Microsoft encouraged all developers to add search capabilities only by supporting the WinRT Search Contract. You can still do that. However, Microsoft added special support for in-app search with the new SearchBox control.
Here is a XAML snippet that shows how to add the SearchBox to your app (note the use of behaviors to trigger RefreshHives whenever the QuerySubmitted event occurs:
To keep the sample simple, I added one little function to the view's code behind:
The core search logic can be found in the ViewModel:
Here is how the search looks like in our app:
New and Enhanced Controls
Windows 8.1 comes with quite some enhancements concerning controls used to implement forms. First you can now add a label to an input control just by settings its Header property. Additionally, many input controls support the PlaceholderText property to add a watermark. Last but not least, Windows 8.1 gives us a date and a time picker control :-) Here you see a screenshot with header, placeholder, and date picker:
During my session, I demonstrated these new features. Here is the XAML snippet that I used:
Bonus: Mobile Services Custom API, Blob Storage
As you might have noticed, my app uses image URIs. In practice, it would be very unlikely that a user would be willing to upload his photos to a public webserver and copy/paste URIs to his photos into our app. To solve this problem, I have sketched a solution allowing the user to take a photo with his Windows 8.1 tablet and upload it to Windows Azure Blob Storage.
The challenge with Blob Storage is security. Of course it would not be ok to give write access to our blob storage account to everybody. Unfortunately, blob storage does not support federated identity (e.g. Microsoft Account) like Mobile Services. The solution are Shared Access Signatures (SAS). SAS are digitally signed URIs that enable the retriever of the URI to read and/or write to a blob for a certain amount of time (typically just enough time that is necessary to upload the content).
The problem is that getting the SAS cannot be done inside our app because it requires admin access to the blob storage account. We need a service in the cloud generating the SAS. Luckily Mobile Services support custom APIs which can be protected by federated identity and can access the blob API in order to generate an SAS.
Once you have your custom API up and running, it is easy to call it from your app and use the SAS to upload the image:
I hope that you find my content useful and relevant. Feel free to use the comments section below to give feedback or ask questions.