A first encounter with Windows8 Development (C#, XAML, JavaScript)
Yesterday I have watched the
Keynote speech presenting to developers around the world the new Windows8 development ecosystem. And in my opinion the basic idea on what is going to happen, which programing skills we need to master and what we can carry with us from the .net world is summarized in the following basic figure:
In this figure with light-blue we have the “old” paradigm and with light-green the “new” one. And as I see it in this “new” era XAML is there, C# is there and also HTML5 and JavaScript are now more “natively” supported, being two more than welcome additions to the picture. So if I tried to summarize the awaited change I would say: a new underlying API (WinRT) that understands more developers and provides richer functionality out-of-the-box along with a big set of new UI interaction ideas at the hands of the developer. Of course there are hundreds of features in this new ecosystem for the developer to harness and master but this for me is the general idea. Myself being a WPF enthusiast I was happy to see that XAML is still there and also the fact that VS 2011 and Expression Blend are the two IDEs that will handle the development workload for the developer. Having said that I wanted to get a “hands-on” experience on how it is to develop in this new ecosystem.
So in order to have some insight I have installed Windows8 on a virtual machine and tried to implement a very basic app in C# , XAML and then in JavaScript using VS2011 and Expression Blend 5. Below are my first thoughts/encounters/guidelines on how this can go:
Installing Windows8
Initially go ahead and download the .iso image for the Windows8 Developer preview from this
link. Download the 64bit edition with VS2011 and Expression Blend 5. My approach then was to download VirtualBox from this
link ,install it and then do the following:
Run VirtualBox, select New, name the VM Windows8, select Microsoft Windows as your OS and Windows 7 64bit as the OS Version. Specify that the VM will use 4GB of memory and create a virtual HDD of fixed size of at least 30GB. Once the VM is created mount the .iso you have downloaded and Windows8 will be up and running in no time!
Developing the Unit Converter in Windows 8 (XAML + C#)
At that point I was ready for development. I switched to Desktop in Windows8 and started VS 2011. We will create a simple Unit Converter in XAML,C# so we select Visual C#/Windows Metro Style/Application:
The first thing to notice is that the files created for us in the project are well known to the WPF/Silverlight enthusiasts. The usual XAML, XAML.CS files are holding the UI graphics and the code-behind file that supports its operations:
Trying to run Expression Blend 5 and open the project got me an error that “EB does not support the Target Framework” and therefore UI design will be performed only in VS 2011. I suppose this is due to the early stage of these tools. The UI to create is as follows:
The XAML has a canvas element for the basic layout which is as follows:
And a sample of the event handler of a button at the XAML.cs file is as follows:
One thing I realized is that apart from some small issues (I could not find the MessageBox class to display a modal Message Window), the code is exactly the same for WPF and Windows8.Of course this is a small example and therefore the likelihood of finding big differences is small. But it felt like I was developing in WPF and this is the most important thing.
I have built and run the application and got the following result along with the fact that the app appeared on the Windows8 ecosystem (the one with the star) having its own box shape!
The code of this project can be downloaded
The project does not open in VS 2010 and therefore if you want to see it outside of VS 2011 use a simple text editor.
Developing the Unit Converter in Windows 8 (JavaScript)
Then I thought of trying to implement the same thing using JavaScript. Therefore I have created a new VS project but now I selected(JavaScript/Windows Metro Style/Blank Application):
The project is created for us and we see the following:
This is pretty much what we would expect from a HTML5+JavaScript application. The good thing is that Expression Blend works with these projects and therefore we can create the UI there. I have experienced some issues when moving the elements with the mouse around but I am not sure whether those were caused by EB or by the fact that the OS was running on the VM. Additionally I did not find any Designer for html from within VS2011. Below a screenshot of Expression Blend with the new app opened.
I wrote the following simple code in default.html:
Which is pretty much the same application with the one I have developed in XAML+C#. I again run the project and the Unit Converter (JavaScript) version run smoothly in Windows8 and got its own box in the main screen!
The JavaScript version of the project can be downloaded
I conclusion I would say that having the knowledge of both technologies, I did not have any problems adapting to the new tools. XAML is well supported (or will be I suppose in EB) as it is today and I was impressed by the way those tools started to support the HTML5+JavaScript languages. Of course this is a today’s draft study. I hope I can be more elaborate on those in the future.
.aspx)