Free Windows 8 Book
For today only (expiries midnight, May 1 2012), you can pick up a digital copy “of “Metro Revealed – Building Windows 8 apps with HTML5 and JavaScript” from Apress
Simply add the book to the basket and use the discount code met12.
I found the website to a bit slow when trying to get it, and it also helped that I had an account before hand and didn’t sign up during the checkout process.
Configuring Knockout.js
I’ve recently been playing around with the fantastic knockout.js library that aims to bring the MVVM design pattern to web development & help simplify the creation of dynamic user interfaces using JavaScript.
The knockout.js website is super slick and has many live tutorials and examples that allow you to learn the concepts directly on the site. It’s extremely intuitive and walks you through the basics and builds up nicely.
This is all very well and good, but one thing that I couldn’t find anywhere on the site was a walkthrough to getting the library working on your own projects. Now, this might seem extremely easy to most web folk out there, But being primarily a Windows developer who is new to web related tech, I found this quite frustrating.
What follows here is a quick walkthrough to getting a basic sample up and running with a link to the source code at the end.
I have also grown up as part of the internet generation which means I very rarely spend longer than 30 seconds looking for anything (If you want to hide anything from me, the best place to start would be page 2 of a Google search). If this already exists, please do link to it in the comments.
The actual code for the example is taken from the one of the tutorials on the knockout site.
I put this code together using Expression Web 4, but you can use any site editor you fancy.
Step 1: Download the Knockout.js library
This one is pretty simple, head over to the knockout.js site and hit the download button on the top right of the home page. At the time of writing, the current version is v2.0.0 and it’s about 13kb.
Step 2: Create/Open your web project & add the knockout.js library
For this example, I have created a new site in Expression Web and added the library to a scripts folder, like so:
Step 3: Add a Reference to the Knockout.js library in default.html
Again, very simple. Crack open default.html and add the following reference within the <head> tag.
<script type='text/JavaScript' src='scripts/knockout-2.0.0.js'/>
The “src” attribute is, of course, relative to where you have placed the library file.
Step 4: Define some View data in default.html
In default.html, add the following code to the <body> tag.
<p>First name: <input data-bind="value: firstName" /></p><p>Last name: <input data-bind="value: lastName" /></p><h2>Hello, <span data-bind="text: fullName"/>!</h2>
This code binds two <p> and one <h2> elements to three properties which we will create in the next step.
Step 5: Create a ViewModel JavaScript file
In the scripts folder, add a new JavaScript file and call it “viewmodel.js”. Your folder structure should look like the following:
In the viewmodel.js file, add the following code
// Here's my data modelvar viewModel = {firstName: ko.observable("Kris"),lastName: ko.observable("Athi")};viewModel.fullName = ko.dependentObservable(function (){// Knockout tracks dependencies automatically. It knows that fullName depends// on firstName and lastName, because these get called when evaluating fullName.return viewModel.firstName() + " " + viewModel.lastName();});// This makes Knockout get to workko.applyBindings(viewModel);
This JavaScript code creates a new viewModel object with firstname and lastname properties. There is also a lastName property that returns a concatenation of these with a space.
Step 6: Add a reference to the viewmodel.js file to default.html
All easy so far? hopefully it has been, but this is the step that had me confused for a short while.
As we are using default.html as our view, it needs a reference to our viewmodel object.
Add the following code to the default.html file within the <head> tag but after the reference to the knockout library you added in Step 3.
<script type="text/javascript" src="scripts/viewmodel.js" />
Step 6.1: Add the Reference to viewmodel.js to the end of default.html
This is quite easy, simply remove the reference from the <head> tag and place it just before the closing </body> tag.
Spin the site up, and you will notice that it now works a treat.
Step 6.2: Place the viewmodel code into a function that is called when the document is ready
There are a few ways to do this, but for this example I will be using the jQuery library.
First, visit the jQuery website, download the latest version and add a reference to default.html (follow steps 1-3 again but with the jQuery library).
Then, crack open the viewmodel.js file and wrap the code in a jQuery document.ready function, like so:
jQuery(document).ready(function(){//existing viewmodel.js code here
});
you can now place the viewmodel.js reference anywhere you like as this function will make sure that the code is only executed once the DOM is ready.
Spin up the site, and you will notice that it works just fine.
Download The Code
I hope this helps, you can download a working sample with knockout and jQuery from my skydrive here.
Installing the Windows 8 Consumer Preview on the Build Samsung Slate
I had a bit of difficulty doing this, but after a bit of research I managed to get it working. Here are the steps I took (with thanks to MosoLee on the MSDN forum).
Requirements
USB Drive (4GB).
Windows 8 Developer Preview ISO (I used the 64bit version).
Samsung Tablet from the Build Conference.
Format the USB Drive
1. Format USB drive as FAT32 on a Win7/Win8 PC.
2. Open Command Prompt, and use the diskpart utility to perform the following actions in order.
list disk (Find USB device)
select disk 1 (careful! select USB drive
clean
create partition primary
select partition 1
active
format quick fs=fat32 (UEFI can only USB boot to FAT32, not NTFS)
assign (In this example, USB mount point become F: when assigned.)
exit
Preparing the installation Media
You can do this in one of two ways. You can use the user friendly Windows 7 USB DVD Download Tool which will copy the files from the ISO to your USB drive on it’s own, or you can use command prompt with the xcopy utility. I used the latter, like so
1. Mount Windows8-ConsumerPreview-64bit-English.iso using your favourite mounting software. I use Virtual CloneDrive.
2. In the command prompt, type the following command with the drive letter for your ISO first. the following example assumes the ISO is mounted as drive H:\, and the usb stick is drive F:\.
xcopy H:\* F:\ /s /e
3. Wait while the files are copied
Disable UEFI Secure Boot on the Slate
1. On the device, press and hold Volume-Up and Volume-Down together, then power up or reboot the slate. It should go into BIOS setup.
2. In "Advanced Configuration", change "Attempt Secure Boot" to Disabled.
3. Press Volume-Up and Volume-Down to exit, then "Save Changes and Reset".
4. Power off the slate.
Install Windows 8 Consumer Preview
1. Back up all your important files from the Developer Preview install on your slate – power down.
2. Plugin USB drive to slate. Press and Hold Volume-Up button, then power up the slate. It should boot into USB drive now.
3. Install Windows 8 Consumer Preview using the product keys on this page.
NOTE – during Install, I tried to first install over the existing Dev Preview files with an attempt to keep them (by moving them to a “windows.old” directory) but this didn’t work. I got to the desktop and the only app that installed was the Store and this just crashed. My second attempt I reformatted the main partition completely (50 gig) and this worked a treat.
When it’s done, USB drive can be removed.
4. Re-enable UEFI Secure Boot.using the same steps as above
5. Welcome to Windows 8 Consumer Preview
I hope this helps – Please not that I can’t be held liable if you manage to break anything. If you want to try the approach of installing from within the Developer Preview install, take a look at this article.
Windows 8 Consumer Preview Links
The Windows 8 Consumer Preview is now available for download.
Check out the following video for an awesome overview of some of the features
And here are some links for the bits
New Site Design
Just under a week ago I pushed out a new site design for www.lookitskris.com.
I wanted something that was was simple, clean, to the point and Metro based in some way.
The design went through several revisions until I arrived at the version you see up there now and I hope you agree it covers those bases.
I worked on this personal project when I was travelling, and the few hours I put in here and there means that the site was effectively in development for about 5-6 months with a bulk of it getting finished over the Christmas break.
With the release, it now means I have a homepage with links to all of my stuff, this blog which contains bigger pieces on what I want to say, and my tumblr page for anything that I find on the internet – A pretty cool collection of sites!
Some Technical Stuff
The site is built on top of the Skeleton boilerplate with HTML5, and thanks to the cool scaling features it looks great on mobile browsers.
For development, I used Expression Web 4 as my IDE. This choice was mainly because it came as part of my Expression Studio install and personal projects usually carry little / no budget.
For hosting, the site (and this blog) are both hosted with mediaTemple. These guys are really great and helped me move this blog from a previous provider and get both sites up and running smoothly.
If you are using Internet Explorer 9, I have also added site pinning to the site. You can drag the “K” icon to your task bar, right click and gain access to all of my sites. I’m not expecting anybody to actually do this apart from me though!
This feature is super easy to add, just add the required meta tags, like so.
<meta name="application-name" content="main.lookitskris" /> <meta name="msapplication-navbutton-color" content="#3480C0" /> <meta name="msapplication-starturl" content="http://www.lookitskris.com/" /> <meta name="msapplication-task" content="name=blog.lookitskris;action-uri=http://blog.lookitskris.com; icon-uri=assets/icons/blog.ico"/> <meta name="msapplication-task" content="name=found.lookitskris;action-uri=http://found.lookitskris.com; icon-uri=assets/icons/tumblr.ico" />
Note that using this feature requires your site to contain different resolutions of the site Icon. I used the X-Icon editor to put together my icon files. It’s free and it’s really easy.
Thanks
Finally, I just wanted to say thank you to Sophie Head who put together the icon graphics and Nathaniel Hammond for his guidance, help and setting me on the right path when I was going the wrong way 
.
There are still a few more features I want to add so more will be coming in the future.
Windows Phone Emulator Skin Switcher
This one’s a little bit of fun as it’s Christmas / New Year, right?
Geert van der Cruijsen has created a really cool skin switcher to change the look of the Windows Phone emulator.
Simply switch and then fire up the emulator to see the new skin in action. The following skins come included:-
Default skin – Microsoft - Fujitsu IS12T Green – Geert van der Cruijsen
- Fujitsu IS12T Black – Geert van der Cruijsen
- Generic unbranded skin – Jeff Wilcox
- HTC Arrive (7pro) – Jeff Blankenburg
- HTC HD7 – Geert van der Cruijsen
- HTC Mozart – Danijel Malik
- HTC Radar Silver – Geert van der Cruijsen
- HTC Titan – Geert van der Cruijsen
- HTC Trophy – Geert van der Cruijsen
- Nokia Lumia 710 Black Blue – Geert van der Cruijsen
- Nokia Lumia 710 Black Yellow – Geert van der Cruijsen
- Nokia Lumia 710 White Black – Geert van der Cruijsen
- Nokia Lumia 710 White Blue – Geert van der Cruijsen
- Nokia Lumia 710 White Pink – Georg Kalus
- Nokia Lumia 800 Black – Pedro Lamas
- Nokia Lumia 800 Blue – Georg Kalus
- Nokia Lumia 800 Pink – Geert van der Cruijsen
- Samsung Focus – Jeff Wilcox
- Samsung Focus S – Geert van der Cruijsen
- Samsung Omnia 7 – Geert van der Cruijsen
- Samsung Omnia W – Geert van der Cruijsen
- ZTE Tania – Geert van der Cruijsen
Head on over to Geert’s blog to download the app
I found this via @gcaughey
Hosting WPF Content in a CCA Application
I’ve recently been involved with a project using Microsoft Dynamics CRM 2011. This customer relationship management product is a server-client application that stores case management based data.
Client applications usually access Dynamics CRM either by using a web browser or by a thick client plug-in to Microsoft Outlook.
Developers can also use the Customer Care Accelerator which focuses on delivering contact centre enabling functionality.
The what now?
CCA demonstrates how Microsoft Dynamics CRM, in conjunction with User Interface Integration (UII), can be leveraged to deliver a composite agent desktop application.
Picture the scene – A contact centre currently uses multiple (sometimes legacy) applications to perform separate tasks such billing, customer information storage, product information storage etc. and these all store data in different locations.
With CCA, developers can create a unified desktop complete with new UI pieces that can bring all of this together. Tasks are still performed with the existing systems through automation and Dynamics CRM effectively becomes the new case management store.
CCA is actually made up of quite a few bits and pieces, but the primary reference for this is known as Agent Desktop. This is quite a complex WPF demonstration application that pulls it’s configuration data from Dynamics CRM and constructs the views presented to the user for a given context. Below is an screenshot of the default, out-of-box Agent Desktop Application
Cool, so how do I add my custom content into that?
WPF is the weapon of choice that is used to create custom UI pieces that make up the Agent Desktop.
As a WPF developer, I found it extremely difficult trying to figure out how to add a new WPF based UI piece into the CCA infrastructure, and this was not made any easier by the lack of reference content that is currently available.
In this article, I want to go through how to use the WPF control template to create a simple UI and then configure Dynamics to display it.
Ok, so what do I need?
To get this to work, you will need the following:
A Windows Server 2008 R2 install complete with a Dynamics CRM 2011 instance (I do all my work in a virtual machine – note that it has to x64 annoyingly as Virtual PC is no longer an option!)
Visual Studio 2010 SP1
The Customer Care Accelerator download package that is available from codeplex.
The UII Component Templates for VS 2008 & 2010 that are available from codeplex.
Let’s get started
Open Visual Studio, point to File, New Project and select the UII category under the Visual C# pane in the New Project Dialog.
In the New Project dialog, select “UII WPF Hosted Control” and name the project TestControl.
When the project opens, the first thing you will notice is that it will not build because of some missing references. Let’s add those.
In Solution Explorer, right-click References, and select Add Reference. In the Add Reference Dialog, in the Browse tab, navigate to C:Program Files (x86)Microsoft UiiFramework (default location), select the missing assemblies and then click OK. Compile and build your solution to make sure everything is A OK.
Out of the box
The WPF developer inside you might notice the UiiWPFControl.xaml file. We will get to that in just a second, I just want to take a look at what this project type gives you out of the box. Below is a class diagram generated based on this starter project.
There are a few important items to note here, which i have outlined in the following table
HostedWpfControl
The HostedWpfControl class wraps the most common CCA integration methods and properties into a base class and the project we have just created uses this.
A Key method that is worth noting here is NotifyContextChange, which is used to notify the control that the CCA context has changed.
IDesktopUserItemConsumer
The Landing Page client entry point will also implement the IDesktopUserItemConsumer interface. This interface is not specific to CTI, but it is typically used by the CTI controls to provide access to desktop operations. It has two members – DesktopLoadingComplete and SetDesktopUserActionsAccess which are raised when the desktop has completed loading and provide a pointer to the shell desktop interface.
The Context object
The Context object contains the customer data for the case that is currently being processed. When a customer call is received or a search is performed, CCA retrieves the customer data from CRM and populates the Context object.
All controls that are hosted in CCA have access to the Context object and this is where Landing Page will retrieve the customer data that is needed for further processing.
The Context object, in conjunction with the NotifyContextChange method is what Landing Page will use to determine what page to display (Media, Mobile or Mobile PAYG) and the data to display on that page.
The Bottom Line
By using this framework, you can easily build a component based desktop application where all the components can access common properties and react in tandem when these properties change.
Back to the WPF
Right now our control is pretty much empty, so lets add a label to the control and populate it with some text.
In Solution Explorer, double-click UiiWpfControl.xaml. In the Code Editor, add the following XAML to the <Grid> element:
<Label Content="Ola, CCA!"/>
Then press Ctrl+Shift+B to build your project. Hopefully everything is awesome.
Configuring CRM
CCA pulls it’s configuration data from CRM so we now need to add some details about our new control to CRM.
Open the CRM configuration page, click Settings, open the Uii Settings tab and click UII Hosted Applications.
From the ribbon, click New and enter the following configuration data
| Name | TestControl |
| Hosted Application Type | Hosted Control |
| Application is Global | Checked |
| Adapter | Use No Adapter |
| Assembly URI | TestControl |
| Assembly Type | TestControl.UiiWpfControl |
In the Ribbon, click Save & Close.
Copying the Assemblies
If you attempt to run Agent Desktop now, you will notice that it will complain that TestControl cannot be created. This is because Agent Desktop does not know where the assembly that contains the type is located. Let’s copy the files over now.
In Visual Studio, in the Solution Explorer, right-click the TestControl project and select Open Folder in Windows Explorer. This will open up the project folder.
Navigate to bin/Debug, select TestControl.dll and TestControl.pdb. Then, Right-click and select Copy to copy these files to the clipboard.
Navigate to the Agent Desktop folder (C:Program Files (x86)Microsoft UiiCCASource CodeAgentDesktopbinDebug by default) right-click and select Paste to paste the assemblies into the Agent Desktop folder.
The Big Reveal
Open agent desktop, and you should now see a new tab titled “Test Control” with the label data we defined earlier.
Conclusion
I hope you have found this introduction to CCA and how to host WPF content useful. If you have any comments please add them below
Metro Colour ValueConverter
I recently needed a converter that would take one of the Windows Phone accent colours as a string and return a SolidColourBrush of that colour. If anybody else has ever needed this functionality (or just a list of the bush values for the accent colours) I have included it below.
public class MetroColourConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { SolidColorBrush scb = new SolidColorBrush(); switch (value as string) { case "Magenta": scb.Color = Color.FromArgb(255, 255, 0, 148); return scb; case "Purple": scb.Color = Color.FromArgb(255, 165, 0, 255); return scb; case "Teal": scb.Color = Color.FromArgb(255, 0, 170, 173); return scb; case "Lime": scb.Color = Color.FromArgb(255, 140, 190, 41); return scb; case "Brown": scb.Color = Color.FromArgb(255, 156, 81, 0); return scb; case "Pink": scb.Color = Color.FromArgb(255, 230, 113, 181); return scb; case "Orange": scb.Color = Color.FromArgb(255, 239, 150, 8); return scb; case "Blue": scb.Color = Color.FromArgb(255, 25, 162, 222); return scb; case "Red": scb.Color = Color.FromArgb(255, 230, 20, 0); return scb; case "Green": scb.Color = Color.FromArgb(255,49,154,49); return scb; default: scb.Color = Color.FromArgb(255,255,255,255); return scb; } } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } }
This ValueConverter inherits from IValueConverter but I have not implemented the ConvertBack method.
On the right is a picture of several ListBoxItems (within a ListBox) which have had their Foreground properties bound to the Content property using this converter.
If you have never seen this before and want to know about converters, check out this article on MSDN.
Please remember that you should never hard code an accent colour where possible and use the PhoneAccentColour static resource to reference the colour the user has chosen in the settings
using the Dispatcher in an MVVM application
Somebody at work today asked how you can call the Dispatcher from the ViewModel in an MVVM situation.
When using interfaces such as INotifyPropertyChanged the changes are reflected in the UI thread. This will usually do the job just fine but if some heavy processing occurs the UI Thread is locked out and it will appear to the user like the application has crashed.
The usual answer is to marshal the processing to a different thread using the Dispatcher, but how do you reference the Dispatcher object when your processing occurs on the ViewModel which is separate from the UI implementation in the View?
One answer is to create a static Dispatcher which you can then reference throughout your application. To make interacting with this a a lot simpler, you can wrap the object into a service class.
I originally wrote a wrapper class for this, but after a bit of searching I found David Rickard’s post who had the same idea as me but has written it in a much cleaner way. Here is his version which I really like
public static class DispatchService{public static Dispatcher DispatchObject { get; set; }public static void Dispatch(Action action){if (DispatchObject == null || DispatchObject.CheckAccess()){action();}else{DispatchObject.Invoke(action);}}}
and then in your ViewModel, you can reference the dispatcher and pass in an action like this
DispatchService.Dispatch(() =>{//DoSomething});
notes from //build
Usually when i am at a conference, I tend to do a lot of “this is what was announced” posts. These are cool but at the end of the day, you can go to just about any technology website and get this stuff (or even watch the keynote yourself!).
What follows here is some notes I have gathered from the event – both from Microsoft staff (during the sessions and while casually talking at the social events) and from discussions with the other attendees.
Please note that this stuff shouldn’t be taken as gospel and some of my own personal thoughts have been thrown in for good measure. If you feel you have something else to add or think that I have got something wrong please do leave a comment or drop me a line.
Let’s begin – to me the whole event pretty much boiled down to two things – Windows 8 with the awesome looking”Metro Style Apps” and WinRT (there was, of course stuff to do with Server etc but I’m ignoring that for now)
Windows 8 & Metro Style Apps
This is just awesome, from what I saw it really looks like Microsoft has a direct strategy with everything coming together. Metro has now shown its face on the phone, Xbox and now it’s in the core operating system.
Metro style apps kind of look like a big brother to windows phone apps. These apps are big, full screen, engineered for touch and (most often) data driven.
These apps can then work together without you needing to worry about how another developer as created his/her app (using a feature called Contracts).
This does not replace the notion of a desktop app, you know, the type of apps we have been making all these years. Sinofsky made a great point during the keynote that a Metro Style app is only well placed in certain situations – you wouldn’t exactly go and recreate Photoshop using this style.
Not only does the styling look sweet, but it looks like there has been a real concerted effort to get the performance nailed and considering its only in the developer preview stage, it’s looking pretty solid.
Another important fact that I feel was skimmed over by the technology journalists is that the tablet strategy includes full-whack Windows (unlike the iPad which runs on iOS, just like the phone).
This, I feel, was a good move by Microsoft but it is very important that the apps are quick and responsive for users (or “fast and fluid” which is a phrase I heard countless times over the course of the last week!)
The new features that are coming are also very cool indeed. I loved the idea of Contacts, Charms (though I wasn’t keen on the name) and the Picture Password. All good stuff.
As far as enterprise development goes, it’s business as usual. All of what was shown at build was very consumer centric and it is very clear that Microsoft is hoping to up the ante on it’s consumer offerings.
WinRT
Here we go – What WinRT essentially boils down to is this slide
There it is, in all it’s glory. But what exactly is WinRT?
Here we have a complete set of native, object orientated library’s for your metro style apps to sit on top of. This uses DirectX to draw the entire user interface which will give a ton of performance related improvements.
For the moment, this only applies to Metro Style apps, with the developer story for desktop apps remaining untouched. If you are currently a developer on a big scale enterprise application and were part of the build up panic to this event – breath easy – nothing changes here.
From discussions with people at the event, the WinRT box is a bit misleading as it implies that this is something totally new and that the CLR is nowhere in sight.
In reality, the CLR is part of the WinRT API and this powers your .NET Metro Style Apps.
I guess at this point WinRT could have been named something like WinMetro to make it better suited to the current situation, but this is just an after thought that I had.
And now for the best part – You can use pretty much any development method you want to get to the Metro Style heaven. HTML5 and CSS3? Yep! XAML with C++ or C#? this platform has you covered.
Should you be learning any of these technologies if you don’t already know them? Not if you don’t want to. The super awesome thing about this is that you can just bring what you know and can pretty much get to the same place just off the back of that.
This is all cool and shouldn’t leave any devs at Microsoft shops feeling uneasy.
That said, I did notice that most of the sessions were heavily HTML5/CSS3/JavaScript based and there were clear signs that Microsoft is positioning itself this way to get any platform agnostic web developer types on board with Windows while keeping it’s existing developer base happy.
I did question a few of the Microsoft guys on the web team about this, but the general answer I got was pretty much “no comment”.
I’m a XAML guy and most of the XAML based sessions I went to were all pretty standard. a few new interfaces here and there but nothing to get in a twist over.
A few more thoughts around this were that maybe .NET is going the way of Java and becoming more of an enterprise platform. Kind of makes sense.
Extra Stuff
Here are a few other observations I made while at the event which I couldn’t really fit into the above. This section will be updated as I try and remember stuff!
Yes, the developer preview Slate is super cool and it makes me all giddy inside while I’m using it.
-
Installing a .net 3.5 apps is a pain. There probably should be a workflow for moving to .net 4.0 first.
-
Including Direct3D and C++ as prime development platform offers the best opportunity for developers, particularly in this new compact, portable device world we are moving into.
While I was in LA, I read on some sites that Flash had been dropped. I’m not sure about this, but it installed and worked fine on my developer slate.
XNA is not supported in WinRT but games should run fine as desktop apps. DirectX is the way forward.
I got talking to the Microsoft Interns who wrote the apps included in the developer preview. These guys are really smart and hardworking and they should be hired by any company immediately (if they haven’t already decided to become FTE’s at Microsoft)
One of the attendees I was talking to made a good point by saying that Win8 feels like what Microsoft were trying to do with Vista and then made enterprise ready with 7. So this could be making the platform consumer focused for 8 and then go all Enterprise focused with with Windows 9. This kind of makes sense to me but we shall see what happens.
WinRT in Windows 7? Who knows, there was no mention of this during the event.
I managed to 100% Lady Gaga – Just Dance in Hard mode on Dance Central in the Expo hall.
Links
you can get hold of the Windows 8 / Server 8 developer preview images, Visual Studio 11 preview, some sample apps and a whole bunch of other stuff from dev.windows.com
While I was writing this post (I’ve been at it on and off for a few days now) I saw a great post by Shawn Wildermuth. Some of this has influenced the above as I totally agree with him.
I hope some of this information has been useful 