So i have managed to get myself out of bed (yes feeling quite sick today), just long enough to push out something I finished writing on Friday. Which means I don’t have to take my laptop with me tomorrow now. Less weight, cool.
Anyway its part 2 of my StyleMVVM series. This time we look at a full demo app I have written in Style MVVM. I think this app is worth a look:
http://www.codeproject.com/Articles/678087/WinRT-StyleMVVM-Demo-2-of-2
Enjoy
As I promised I have now started to write up an article or 2 on using the truly awesome WinRT MVVM framework StyleMVVM.
The 1st part of this series (my gut feeling is there will only be 2 parts), is available right now here :
http://www.codeproject.com/Articles/676432/WinRT-StyleMVVM-Demo-1-of-2
In this article I discuss what StyleMVVM gives the average developer that might choose to use it. The article is definately written from an ed user point of view. I think once you have read the article you will see that StyleMVVM is indeed very useful.
Anyway I guess I better start on part 2 now huh.
About a year ago I contacted by this uber sharp american guy called Ian Johnson, who asked me if I would be so kind as to review his upcoming Windows 8 MVVM library. I stated that I was currently on holiday, but when I got back I would be glad to. Now I have been in pretty much constant contact with Ian over the past year and have been fielding his questions, and we have even written a joint article (Expression API Cookbook) . What immediately struck me about Ians framework (here after known as StyleMVVM) was how feature rich it was, and how well thought out it all was. Remember I have taken time to look at his code base.
At the time I was lucky enough to be asked to be an advisory member for the new PRISM offering for Windows 8 code name “Kona”. I didn’t really have enough time to do much on this but it was still an honor. Though I have since spent quite a bit of time getting to known “Kona” now known as “PRISM for Windows Runtime“.
Now I love PRISM and have nothing but respect for that team, and previous team members, but I have to also say at the moment, I prefer the StyleMVVM offering, as I think it is just more feature rich, and some of the code seems to be better to use than PRISM for Windows Runtime.
One thing I really liked in StyleMVVM was the fact that Ian had written a Expression Tree (fast as hell) IOC container from scratch. He has bench marked this and it is rihgt up there, with speeds far exceeding Castle / Unity and AutoFac. It is based around the MEF style attribute model, but fluent registration is also happening any second now (I know I have seen the beta versions of it, and it looks very cool). Ian is very proud of this piece of StyleMVVM , and rightly so, its awesome.
Now that is no small thing, for a single individual to come up with a framework as feature rich as one of the big boys in the MVVM arena, kudos to Ian.
I believed in Ians work so much I have been working on a demo app using it in my spare time. This demo app will be the source for a series of articles on how to use StyleMVVM which I hope to have out there in the wild very soon. You will hear about it here. In the mean time I just want to list some of the features of StyleMVVM, which I have shamelessly stolen from the StyleMVVM codeplex site.
Some of the core features are:
So you can expect to see some more material on how to use StyleMVVM very soon. If you just can’t wait, grab the code and have a look at the demo, which is very good and showcases most of the features very nicely.
So I have just finished doing my 1st WinRT demo article (and yes it is for an article for codeproject), which I will have up soon. Coming from a place where I was working a lot with WPF I thought it might be a good idea to capture some of my thoughts/current gripes when working with Win8/WinRT.
I have tried to be as pragmatic as possible, and view WinRT as a v1 thing, which will (hopefully) get better in time. That said there were certain things I just missed a lot. I think what I will do is just list some of the things I found lacking when I was doing my little demo app, and then I will talk about how I found the whole Win8/WinRT ecco system.
So here is a list of things that I found a bit odd/off, now that is not to say that these will not get fixed, but they still bugged me all the same
XAML Issues
Decision Issues
Plain Weird Issues
WinJS or C#
Now as I have stated I am predominately involved with WPF, I do however also do a fair amount of ASP .NET MVC / and MVC/MVVM client side Javascript development (Knockout.js / Angular.js / BackBone.js). So what language did I pick when doing my Win8 article. For me that was a no brainer, C#. Too be honest I find the whole idea of a bastardized version of Javascript that will only run on Windows8.* completely alien. If you believe the press, its plain JavaScript. Sure it is.
The other thing I just don’t see it as a very transferrable skill (oddly XAML is, its in WPF / SL and now WinRT). For example if I used just WinJS every day, do you think that would be a transferrable skill, cos I sure don’t. Lets say I was doing TypeScript or native JavaScript would they be transferrable skills, well yes they would. C# on the other hand, still very much in vogue if you ask me. So that 1st language choice hurdle was an easy one for me to make.
Others may strongly disagree, but that was just my take on it.
App Structure
I have to say I am not mad keen on the overall application structure. I mean have you seen how much boiler plate code you get in App.xaml.cs, here it is for a new project. Thats nasty if you ask me:
///
/// Provides application-specific behavior to supplement the default Application class.
///
sealed partial class App : Application
{
///
/// Initializes the singleton Application object. This is the first line of authored code
/// executed, and as such is the logical equivalent of main() or WinMain().
///
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
///
/// Invoked when the application is launched normally by the end user. Other entry points
/// will be used when the application is launched to open a specific file, to display
/// search results, and so forth.
///
///Details about the launch request and process.
protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
Frame rootFrame = Window.Current.Content as Frame;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (rootFrame == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame();
//Associate the frame with a SuspensionManager key
SuspensionManager.RegisterFrame(rootFrame, "AppFrame");
if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
// Restore the saved session state only when appropriate
try
{
await SuspensionManager.RestoreAsync();
}
catch (SuspensionManagerException)
{
//Something went wrong restoring state.
//Assume there is no state and continue
}
}
// Place the frame in the current Window
Window.Current.Content = rootFrame;
}
if (rootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
if (!rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups"))
{
throw new Exception("Failed to create initial page");
}
}
// Ensure the current window is active
Window.Current.Activate();
}
///
/// Invoked when application execution is being suspended. Application state is saved
/// without knowing whether the application will be terminated or resumed with the contents
/// of memory still intact.
///
///The source of the suspend request.
///Details about the suspend request.
private async void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
await SuspensionManager.SaveAsync();
deferral.Complete();
}
}
Coming from other stuff like there is a lot less clutter in the main entry point.
The other thing I really didn’t like is the way you had to have this special ResourceDictionary called “StandardStyles.xaml“. If they truly are standard, what the hell are they doing in my app, and why aren’t they included in the framework. Also why are most of the styles in there commented out, and we have to uncomment them as we need them.
Magic Classes That Are Provided
I also didn’t like the fact that there are a bunch of classes provided which I have no idea whether I need them or not.
For example if you create a new Grid application you get this.
Now I know what a value converter is, so they are ok, but don’t things like “LayoutAwarePage” and “SuspensionManager” sound like framework issues to you? They sure do to me, again why are these classes in my codebase. Surely a LayoutAwarePage should be the defacto page for ANY WinRT application. You know we are supposed to think that the Surface is an iPad rival, yet last time I looked I could twist an iPad this way and that, and you can also do that with a Surface. So why isn’t the LayoutAwarePage the standard. By the same token since there is a suspension type of lifecycle in WinRT why is the SuspensionManager not in the class library.
Also what the heck is “RichTextColumns” do I need that, what does it do. Is it required for a GridView, and if so (yes I’ll say it again) why isn’t it in the framework.
Ok, I could find out, but when I start a new app, I would much prefer to see a clean slate really.
Early Days But
To my mind it just feels like it was rushed out the door, and feels very unpolished. Now I am a massive Microsoft fan boy, but I just felt let down by WinRT. As I say I will still be putting out this WinRT article soon, but it will likely be my one and only for a while.
Anyway those are just my thoughts, no one elses, many will likely disagree, which is fine.
As part of something a lot larger that I am currently working on I wanted to implement the Search charm logic in Windows 8.
Now being the model citizen that I am, I have read all the good technical bumpg around Windows 8, and I paid particular attention to the fact that we really need to keep the UI free, as anything more than 30/300ms (can’t recall which) on a touch system just feels broken.
So what does that mean? Well it means I have been a good chat and played nice and used Async/Await where needed. All good so far.
So now onto the Search charm. I obviously enabled this in the manifest file. Then I wrote the following code which I expected to work
sealed partial class App : Application
{
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
....
....
....
....
SetupSearch();
}
private async void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
await SuspensionManager.SaveAsync();
deferral.Complete();
}
private void SetupSearch()
{
var searchPane = SearchPane.GetForCurrentView();
searchPane.SuggestionsRequested += searchPane_SuggestionsRequested;
searchPane.ResultSuggestionChosen += searchPane_ResultSuggestionChosen;
}
void searchPane_ResultSuggestionChosen(SearchPane sender,
SearchPaneResultSuggestionChosenEventArgs args)
{
MessageDialog dialog = new MessageDialog(string.Format("You picked {0}",args.Tag));
dialog.ShowAsync();
}
async void searchPane_SuggestionsRequested(SearchPane sender,
SearchPaneSuggestionsRequestedEventArgs args)
{
var suggestions = Enumerable.Range(1, 2).Select(x => new
{
Desc = string.Format("{0}_{1}", args.QueryText, x.ToString()),
Id = x
});
//To simulate waiting on something more meaningful (such as a webservice etc etc)
await Task.Delay(2000);
var imageUri = new Uri("ms-appx:///Assets/search40.png");
var imageSource = Windows.Storage.Streams.
RandomAccessStreamReference.CreateFromUri(imageUri);
args.Request.SearchSuggestionCollection.
AppendSearchSeparator("Demo Suggestions");
foreach (var suggestion in suggestions)
{
args.Request.SearchSuggestionCollection.AppendResultSuggestion(
"Suggestion",
suggestion.Desc,
suggestion.Id.ToString(),
imageSource, "");
}
}
}
That looked fair enough to me. But when I ran this code I got this Exception
Most strange.
Turns out this is an issue for which there is a solution, that is just rather poorly documented. In fact it borrows a lot from the jQuery Deferred pattern (which you can read more about here)
So what is the solution. Well as I say WinRT has certainly borrowed from the jQuery Deferral / Promise idea. Where we ask for a Deferrable object, do some work, and then complete the Deferrable object.
So here is the code above refactored to use a WinRT Deferrable object. This technique can be used with most of the charms.
sealed partial class App : Application
{
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
....
....
....
....
SetupSearch();
}
private async void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
await SuspensionManager.SaveAsync();
deferral.Complete();
}
private void SetupSearch()
{
var searchPane = SearchPane.GetForCurrentView();
searchPane.SuggestionsRequested += searchPane_SuggestionsRequested;
searchPane.ResultSuggestionChosen += searchPane_ResultSuggestionChosen;
}
void searchPane_ResultSuggestionChosen(SearchPane sender,
SearchPaneResultSuggestionChosenEventArgs args)
{
MessageDialog dialog = new MessageDialog(string.Format("You picked {0}",args.Tag));
dialog.ShowAsync();
}
async void searchPane_SuggestionsRequested(SearchPane sender,
SearchPaneSuggestionsRequestedEventArgs args)
{
var suggestions = Enumerable.Range(1, 2).Select(x => new
{
Desc = string.Format("{0}_{1}", args.QueryText, x.ToString()),
Id = x
});
//FIXED CODE : Use args.Request.GetDeferral() / deferral.Complete
var deferral = args.Request.GetDeferral();
await Task.Delay(2000);
var imageUri = new Uri("ms-appx:///Assets/search40.png");
var imageSource = Windows.Storage.Streams.
RandomAccessStreamReference.CreateFromUri(imageUri);
args.Request.SearchSuggestionCollection.
AppendSearchSeparator("Demo Suggestions");
foreach (var suggestion in suggestions)
{
args.Request.SearchSuggestionCollection.AppendResultSuggestion(
"Suggestion",
suggestion.Desc,
suggestion.Id.ToString(),
imageSource, "");
}
deferral.Complete();
}
}
As always here is a small demo project (requires Windows 8 / Visual Studio 2012) : AsyncSearchSuggestionDemo.zip
The other day I was contacted by one of the fellow Xaml Disciples (who have been dormant for a long time, but hey ho), who was asking how he might
determine if some audio within a web site was playing or not. I thought he problem could be solved using the WebView available
in WinRT. Turns out I didn’t get what his actual problem was, and this did not help him. I did however try something out before I answered him, which
was how to communicate with the WebView hosted HTML/JavaScript from c# and vice versa.
I thought that may make a semi-useful blog post. So I have provided a dead simple example, the c# code will try and change the FontSize of a DIV
within the hosted HTML content by calling a JavaScript function in the hosted HTML content. The JavaScript will then double the incoming FontSize and use
it for the DIV, and at the same time tell the c# what the doubled size is via a callback into the c3 code. Simple requirement really
It all starts with the markup which is shown in its entirety below
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Border Background="{StaticResource ApplicationPageBackgroundThemeBrush}" BorderBrush="White"
BorderThickness="4" Height="400" Width="640" Padding="10">
<StackPanel>
<StackPanel.Resources>
<Style x:Key="RefreshAppBarButtonStyle" TargetType="ButtonBase"
BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="RefreshAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Refresh"/>
<Setter Property="Content" Value=""/>
</Style>
</StackPanel.Resources>
<WebView x:Name="webView" Height="300" Width="600"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
<Button x:Name="font25" Content="25px" Click="Change25_Click"/>
<Button x:Name="font40" Content="40px" Click="Change40_Click"/>
<Button x:Name="font60" Content="60px" Click="Change60_Click"/>
<Button x:Name="reset" Content="Reset" Click="Reset_Click"/>
</StackPanel>
</StackPanel>
</Border>
</Page>
Nothing fancy there, just a WebView control and a few buttons to change the FontSize of the DIV
So lets have a look at the c# side of things. Here it is in its entirety
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace App1
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
webView.ScriptNotify += webView_ScriptNotify;
}
async void webView_ScriptNotify(object sender, NotifyEventArgs e)
{
var jsScriptValue = e.Value;
MessageDialog msg = new MessageDialog(jsScriptValue);
var res = await msg.ShowAsync();
}
private const string htmlFragment =
"<html><head><script type='text/javascript'>" +
"function doubleIt(incoming){ " +
" var intIncoming = parseInt(incoming, 10);" +
" var doubled = intIncoming * 2;" +
" document.body.style.fontSize= doubled.toString() + 'px';" +
" window.external.notify('The script says the doubled value is ' + doubled.toString());" +
"};" +
"</script></head><body><div id='myDiv'>I AM CONTENT</div></body></html>";
protected override void OnNavigatedTo(NavigationEventArgs e)
{
webView.NavigateToString(htmlFragment);
}
private void Reset_Click(object sender, RoutedEventArgs e)
{
webView.NavigateToString(htmlFragment);
}
private void Change25_Click(object sender, RoutedEventArgs e)
{
webView.InvokeScript("doubleIt", new string[] { "25" });
}
private void Change40_Click(object sender, RoutedEventArgs e)
{
webView.InvokeScript("doubleIt", new string[] { "40" });
}
private void Change60_Click(object sender, RoutedEventArgs e)
{
webView.InvokeScript("doubleIt", new string[] { "60" });
}
}
}
Calling JavaScript from c#
This is done using the WebView.InvokeScript() method, where it expects a name of a function, and a string[] for the arguments
Calling c# from JavaScript
This is slightly trickier as you need to carry out the following 3 steps
Step 1 : Hook up the WebView.ScriptNotify event
Step 2 : Use the result of the NotifyEventArgs.Value from Step 1
Step 3 : Get the WebView to actually call the ScriptNotify c# event, which is done via this bit of code:
window.external.notify(..)
WinRT makes a big point out of the fact that the WebView control is a regular WinRT control that can be treated as any other element
such as applying Transforms etc etc, while this is true (I have seen the demos/videos/screenshots). However it seems one area has been missed (at least in Windows 8.0 that
I am currently using), which is that the WebView seems to be the top most element. Try the XAML below and see what you think
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Black" Grid.Row="0">
<StackPanel Orientation="Horizontal" Margin="20">
<ComboBox Width="150">
<ComboBoxItem Content="hello1"/>
<ComboBoxItem Content="hello2"/>
<ComboBoxItem Content="hello3"/>
<ComboBoxItem Content="hello4"/>
<ComboBoxItem Content="hello5"/>
<ComboBoxItem Content="hello6"/>
<ComboBoxItem Content="hello7"/>
<ComboBoxItem Content="hello8"/>
<ComboBoxItem Content="hello9"/>
<ComboBoxItem Content="hello10"/>
<ComboBoxItem Content="hello11"/>
<ComboBoxItem Content="hello12"/>
<ComboBoxItem Content="hello13"/>
<ComboBoxItem Content="hello14"/>
</ComboxBox>
<Button Content="Reset" Margin="10,0,0,0" Height="45" />
</StackPanel>
</Grid>
<WebView Grid.Row="1" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="10,0,10,10" />
</Grid>
</Page>
For me the ComboBox popup goes behind the WebView, a tad annoying, and for me makes the WebView pretty unworkable.
As always here is a small demo project :
As some of you may know I have been somewhat of a fan boy of WPF. All of a sudden there is this new kid on the block, WinRT and Windows store applications. So far. I have not ventured into this world, as I think it is early days with WinRT, and I expect it to change a lot. I did however quite like some of the look and feel elements of it, and thought what the heck it can’t hurt to take it for a quick spin. I also just co-authored an article with a fine yanky chap (hey Ian) who contacted me to review his WinRT MVVM framework, called : StyleMVVM which I promised Ian I would look at, and also take for a spin.
Thing is I did not want to start a big WinRT application (I like to write full apps as you tend to learn a lot more that way), without at least trying out WinRT on something smaller. I still fully intend on doing a larger StyleMVVM app, in fact the material presented in the associated article will form part of the larger StyleMVVM demo application that I promised Ian.
The code attached to this demo is pretty simple, but actually is was enough for a WPF guy to try and find out the WinRT way of doing things, and I have to say there certainly were a few weird things that were quite unexpected coming from WPF land. I will talk about these in the body of the article, but we digress, what does the demo app do?
Like I say I wanted to keep things very simple, so I have written a very simple grid based schedule control, that is readonly you can not add items to it by clicking, its all setup via existing code. Ok that data could suck stuff from a database, but there is no way to dynamically add appointments to the schedule using touch, or the mouse at runtime, though that may feature in the fuller StyleMVVM app.
So in summary, the associated article demo code is a simple schedule control that works with touch or the mouse.
You can download the code and get a full blow by blow account of it right here :
http://www.codeproject.com/Articles/654374/WinRT-Simple-ScheduleControl
Sacha's Blog 