How To Run Win32 Applications On Windows RT

I have to admit that after using the Surface with Windows RT for a few months there have been times when I’ve needed to use a traditional Win32 application like VS2012 or SQL Server. As you probably know, Windows RT doesn’t allow you to install traditional Win32 applications, but that shouldn’t stop you.

To run Win32 applications on Windows RT you need two things. The first is a network connected Windows PC. The second is the Remote Desktop app from the Windows Store.

The Remote Desktop app lets you connect to multiple PCs in a chrome-less (it is a Windows Store app after all) environment.

Screen shot 2

With a good network connection I hardly ever realize that I’m not sitting on my desktop. The App Bar lets you easily jump from one session to another (as show above), and there are a host of settings you can change.

I recommend using it with the Type Cover but in a bind I’ve managed to navigate the Windows 2003 server my startup is sitting on using touch when I was in South America.

You’ll have to open up a port and allow RDP connections on your x86/x64 PC but in doing so you’ll be able to access your Win32 applications from anywhere. As long as you don’t need offline access you can hopefully save the $899 the Surface Pro costs that’s going to  be released in a few weeks.

Azure Website Migration

This blog is still located at http://alnurismail.com but hosted on http://alnurismail.azurewebsites.net thanks to the power of Azure Websites.

Maximizing Code Reuse Across Windows 8 and Windows Phone Apps

A common ask among customers and developers is around guidance on how to structure/architect their code to maximize reuse across Windows 8 and Windows Phone apps. This post will explain what is/isn’t reusable across apps, cover some patterns that will help increase code reuse across Microsoft platforms, and puts the theory into practice with a sample that shows common code being used for both a Windows 8 and Windows Phone 7.5 app — available here.

Note: This post focuses on Windows 8 and Windows Phone 7.5 app development. However, the patterns and practices described can be applied to other platforms (i.e. Windows Phone 8 when it’s generally available).

To maximize code reuse across Windows 8 and Windows Phone the best practice is to use the MVVM (Model/View/ViewModel) pattern to architect your code combined with PCL (Portable Class Libraries).

MVVM (Mode/View/ViewModel)

MVVM focuses on separating the user interface (the View) from the data or business logic (the Model). The ViewModel provides a specialization of the Model that the View can use, and also provides a place for complex operations that are View related and maintaining state like selection. The MVVM pattern relies heavily on data-binding. I won’t go into any more detail about MVVM since it’s been covered ad nauseam. If you’d like additional information on the pattern I’d suggest this video by John Papa/Dan Wahlin as a starting point.

PCL (Portable Class Libraries)

PCL by definition are constrained and  can only reference APIs that are available across multiple platforms (i.e. Windows 8, Windows Phone 7.5). Consequently, libraries can be shared across projects without modification.

image

 

By combining MVVM with PCL it is possible to architect code so large portions like the ViewModel and Model can be reused across supported platforms. It is also possible to reuse parts of the View because a significant amount of XAML (i.e. StackPanel, Grid, Button, etc.) is available to both platforms but the general guidance is to focus on taking advantage of the form factor instead of forcing the issue.

Practice, however, is never as clear cut as theory. For example, when creating a ViewModel that is responsible for retrieving data the first wrench appears. Writing code to retrieve data that is common across both platforms is non-trivial because WinRT introduces HttpClient that is asynchronous using async/await  to simplify networking

HttpClient client = new HttpClient();
HttpResponseMessage response = new HttpResponseMessage();
client.MaxResponseContentBufferSize = int.MaxValue;
response = await client.GetAsync(requestURL);
string responseString = await response.Content.ReadAsStringAsync();

and Windows Phone relies on HttpWebRequest that requires a callback.

HttpWebRequest req = HttpWebRequest.CreateHttp("http://odata.netflix.com/...");
req.BeginGetResponse(new AsyncCallback(GetResponseStringAsync), req);

To leverage either of these networking stacks in the ViewModel would be impossible because they are not in the PCL common subset.

The solution is to first abstract the concept of getting data by providing an interface that accepts a callback

public interface IGetTitlesService
{
    void GetTitles(Action<List<Title>> callback);
}

and then to implement the interface in a platform dependant way.

public class Query: IGetTitlesService
{
    //...
}

The ViewModel needs to be created with the correct concrete implementation but the interface lives in the PCL keeping the ViewModel platform independent.

public TitleViewModel(IGetTitlesService getTitlesService)
{
    getTitleServie.GetTitles(LoadTitles);
}

private void LoadTitles(List<Title> titles)
{
    //..
}

Another wrench appears when using MVVM on Windows Phone because the responsibility lies with the developer to marshal calls back to the UI thread. Windows 8 automatically takes care of this. Again this difference threatens to tie the ViewModel to a specific platform but a similar pattern can be used to abstract the Dispatcher.

public interface IDispatch
{
    void Dispatch(Action action);
}

The sample I’ve provided shows how to work around both wrenches and uses a common ViewModel and Model for both the Windows 8 and Windows Phone apps.

Other Reuse Tips

From my experience there are two other ways to maximize code reuse that can be used in conjunction with MVVM and PCL.

  1. Linked Files – allows a file to be shared between two projects but only one copy is maintained
  2. Preprocessor Directives – compiles code based on conditions that are set up in the build environment (contributes to code smell and not recommend but I’ve included an example in the sample for reference)

I hope these tips help – if you have additional tips or suggestions please feel free to leave a comment.

Windows 8 samples require Windows RP & Visual Studio 2012
Windows Phone 7.5 sample requires Visual Studio 2010 with Windows Phone SDK 7.1, Windows Phone SDK 7.1.1 (to run on Windows 8),  Portable Library Tools 2 RC

Implementing ISupportIncrementalLoading

A customer recently asked about how to use the ISupportIncrementalLoading (ISIL) interface to enable the familiar endless scrolling scenario as seen on Bing’s image search. By implementing the ISIL interface you’re able to tell the collection control that more data is available and ask the control to request it asynchronously as the user is scrolling. There are a few properties you can set on the control like IncrementalLoadingTrigger, IncrementalLoadingThreshold and DataFetchSize that affects when and how much data is requested.

The ISupportIncrementalLoading interface is minimalistic containing only one method and one property but can be confusing if you’re not familiar with the async pattern. I’ve created a quick sample to show how you can use the GridView/ListView control + a custom collection (that implements ISIL) to incrementally load all the movies available on Netflix.

netflix_incremental

You can grab the source (Windows 8 RC) here.

Three Point Checklist For a Great Windows 8 Metro App

Over the past few months I’ve spoken with a variety of customers about Windows 8 and worked with them to shape their app strategy. It’s a process that begins by first defining their business requirements, then identifying the features that support those requirements, and finally mapping those requirements to a Windows 8 app.

Take for example a company that wants to build an app to search for jobs. The app should allow a user to search for a job and be notified of new jobs. Those requirements would, at a minimum, get mapped to using the search charm, geolocation, and live tiles + notifications.

After we have a rough scope of the app, the next question the customer usually asks is “what makes a great metro app?”. The answer to this question is littered throughout the documentation on the Windows 8 Dev Center and I strongly urge you to read, and then re-read, everything you can. However, customers are always busy so they just don’t have the time to RTFM Winking smile.

This is my three point checklist that I share with customers to help guide them on what I think makes a great Windows 8 metro app from design to interaction to consumption.

Clean & Clear

Clean and clear should be the mantra every designer chants when building their wireframes and visuals. Metro apps are about a compelling user experience — that  can only be achieved when the app is clean and clear. The app should have a clean layout with little to no distractions so the user knows exactly what to expect and what’s expected of them. Utilize whitespace to frame content and use the App Bar to reduce clutter. The app should also be clear about what’s important and what’s not. The user should be able to easily follow the information hierarchy to get to the content they want. Follow the metro design principle of using subtle changes in typography (i.e. size, weight and color) to establish structure and importance.

Touch Friendly

Windows 8 is touch first (but it still works great with mouse and keyboard) and defines a brand new touch language that  permeates through all metro apps making them feel consistent and familiar. Apps should use the built-in controls where possible but when it’s not they should be designed for fingers, which are bigger than mice. The rule of thumb is to stay above a hit target of 7x7mm for most actions, and use a larger target of 9x9mm for actions that have severe consequences like deleting. Larger hit targets with at least 10px padding between targets helps the user avoid accidental taps due to fat fingers.

Optimize View

Windows 8 apps will be viewed in a variety of different ways. It will depend on the orientation/grip, the device (i.e. tablet, desktop, TV), the resolution and the user (i.e. snapped view). It’s a lot to think about but don’t worry because the platform also makes it easy for you. My guidance here is to optimize the app’s design based on the natural grip the app lends itself to, always provide 3 sets of assets to scale, and create a simple but functional snap view that keeps the user engaged by retaining context.

 

Next Steps…

For more details on each of these check points head over to the Dev Center and check out the design guidelines.

How to be “Styling” Using CSS3

In my last post I covered how to build a nifty HTML5 form. I used as many of the new HTML5 form features as possible to create a simple recipe entry form. The sample form is here and lacks a bit of polish. After reading The Book of CSS3 by Peter Gasston, a comprehensive book aimed at more experienced web developers, I wanted to spruce up the form using some CSS3 features. In this post I’ll cover the CSS3 features I used.

Note: I’m using IE10 from the Windows 8 Developer Preview. You can view the sample here.

 

Media Queries

The exponential growth of devices (i.e. slates, phones, consoles) viewing online content – each with their own unique form factor – has made life extremely difficult for web developers trying to present their content in a consistent way. Tailoring content for each device, in the past, meant creating related but separate websites for each device, which put even more burden on the developer and caused code fragmentation.

In CSS3, Media Queries (MQs) help solve this problem by extending the @media types with a new query syntax to enable true device-independent websites. The MQ I used looks like:

<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 480px)" />

The above MQ targets devices that have a minimum screen width of 480px and shows them, what I call, the desktop version of the recipe entry form. All other devices show the basic/mobile version. You can see this in action by changing the browser size.

css3formRecipe Record – Desktop Version css3form-mobile
Recipe Record – Basic Version

The desktop version has a different layout and a background image. I’m following best practices by targeting mobile devices first via a basic style sheet and only loading the desktop style sheet if the MQ is satisfied. This helps save resources (i.e. bandwidth) for mobile devices because only the required style sheets and images are being prefetched. It’s not required for my simple demo but since MQs can completely alter the look and feel of a site it’s a good habit to get into.

For scenarios that require images that aren’t contained in a style sheet (i.e. switching between hi-res/low-res images) use IE10’s MQ listener, which evaluates the MQ at runtime, to dynamically choose what images to load. You can get more information here.

 

Backgrounds

Layers are a familiar concept in most photo editing software like Photoshop and in some UX stacks like Flash. Think of layers like a stack of transparencies. In CSS3 backgrounds now support layers allowing multiple images to be applied to an element. To create the background for the desktop version I created two layers (one for the repeating pattern and another for the bell pepper) like so:

form
{
    background-image: url('red-bell-pepper.png'), url('bgrepeat.jpg');
    background-position:right bottom, left top;
    background-repeat: no-repeat, round;
    background-size: 250px, auto;
}

The layers are created in reverse so the properties for the repeating pattern are second. I used the new “round” background-repeat value that lets the pattern repeat as space allows but scales the image so no clipping occurs. I also used the new background-size property to scale down the bell pepper.

 

Web Fonts

If you’ve ever wanted to use a custom font on your webpage it’s time to celebrate since all browsers finally support the @font-face rule defined in CSS3. The @font-face rule allows you to define any font you choose, which the browser will download and use. The @font-face rule I used looks like:

@font-face
{
    font-family: 'AlnurFont';
    src: url('MarketingScript-webfont.eot');
    font-weight: normal;
    font-style: normal;
}

The @font-face rule has a few legacy issues so I’d suggest you use http://www.fontsquirrel.com/fontface to generate the correct font formats and CSS for cross browser support. Since I’m targeting IE10 I used the supported .eot format.

 

Text

Some nice text effects can be created in CSS3 by using the new text-shadow property, which also supports multiple layers. I haven’t done it justice in my sample but here is the simple glow effect I used on the header:

h1
{
    text-shadow: 3px 3px 4px #fff;
}
shadowbefore
Before
shadowafter
After

The text-shadow supports x,y and blur – the latter causes the glow effect.

Note: There’s also a text-outline property that isn’t supported yet that’ll make stroking text a breeze.

There are also a handful of new text properties, which are valuable additions to the spec, that didn’t make sense in my sample. For example, text-overflow to define how text is clipped and word-wrap to define if lines or words are wrapped.

 

Layout

One of my favorite additions to CSS3 are the layout properties that make defining columns using DIVs or tables a thing of the past. However, there seems to be a catch. The new column properties (i.e. column-count, column-width, column-fill, etc.) seem to be designed for blocks of text and not for page layout. Since I didn’t have a large block of text in my sample I decided to play with them for layout. It worked for my simple scenario but I have a feeling it’d be a lot more complicated for anything complex. Nevertheless, by using a few properties I was able to achieve the three column layout I wanted using:

section
{
    column-count:3;
    height:350px;
    column-gap:10px;
}

Note: I think I hear -ms-grid calling…

 

Borders & Box Effects

To finish off my sample I added some rounded corners that finally made it into CSS3! It only takes one property to change square edges to smooth rounded edges.

input, textarea
{
    border-radius:7px 7px;
    box-shadow: 4px 4px 3px #000;
}

I also used the box-shadow to give the elements a drop shadow. The syntax is equivalent to text-shadow.

 

Next Steps…

That’s my step by step walkthrough of some of the new CSS3 properties. If you want to learn more about CSS3 I highly recommend The Book of CSS3 or the spec.

How to Build a Nifty HTML5 Form

After reading Introducing HTML5 by Bruce Lawson & Remy Sharp, a good read that lived up to its namesake by introducing the majority of HTML5 in a concise and humorous way, I decided to build a quick sample to play with a few of the new HTML5 Form features. In this post I’ll cover the HTML5 Form features I used.

Note: I’m using IE10 from the Windows 8 Developer Preview. You can view the sample here.

I tried to use as many of the HTML5 Form features as possible in this sample, which allows a user to enter their favorite recipe, and didn’t concern myself with styling. However, I do plan to write a follow-up post on using the new CSS3 selectors & properties to make it look professional. Again, everything in this sample was tested in IE10 from the Windows 8 DP so some of these features may not work or may work a little differently in another browser.

image

Input Types

HTML5 introduces a new set of input types that define the behavior/UX of the input element. The input type also helps with validation, which I’ll cover shortly. An example of an input type that does both is the slider control for Servings. To create the slider I used the range input type and set the min/max attributes, like so:

<input id=”servings” type=”range” min=”1″ max=”10″ value=”4″/>

I’ve also used the url (for Source) and number (for Prep Time and Cook Time) input types that behave as you’d expect.

Another nice addition in HTML5 is that by default an input element with no type defaults to text, which saves you some typing time.

Data Lists – Drop Down Options

In the screenshot you’ll notice that Dish Type has focus and has a static list of predefined options beneath it. This allows the user to either select one of the options or type in a new one. The static list of options was created using the new HTML5 <datalist> element. Tying the input field and data list together was as simple as setting the input element’s list attribute to the <datalist>’s id, like so:

<input id=”dishtype” list=”dishtypeopts” />
<datalist id=”dishtypeopts”>
<option value=”Appetizer” />
<option value=”Main” />
<option value=”Dessert” />
</datalist>

The nice thing about data lists is that they can be reused across the form so it keeps the HTML clean.

Placeholders

Another HTML5 form feature I used was placeholder text. Gone are the days of doing this manually with JavaScript or using the AJAX Control Toolkit’s Watermark control. Now you can provide a helpful hint to your users that appears/disappears based on focus & input. I set the placeholder attribute like so:

<input id=”source” type=”url” placeholder=”http://www.foobar.com” />

It’s simple and intuitive, and it also works on <textarea> elements!

Autofocus

A quick mention on the new HTML5 input attribute autofocus that does exactly what it implies. When set the browser will give focus to the control during page load.

<input id=”name” placeholder=”Recipe Name” autofocus />

Validation

Validation has finally arrived in HTML5 and makes JavaScript/JQuery plugins a thing of the past (in theory). This is hands down one my favorite HTML5 features since I’ve had to do a lot of work in the past for my own e-business to get form validation just right. By using the required attribute in your element definition you get browser based validation out of the box. Pair that with the input types and you’ve got some nifty validation that looks like this:
image

Which was achieved with this HTML:

<input id=”source” type=”url” required />

You can also go a  step further and customize the validation by supplying a regex pattern via the pattern attribute and a friendly error message using the  title attribute, which looks something like this:

<input id=”dishtype”required pattern=”[A-z]{0,50}” title=”Max 50 alpha chars” />

Note: I noticed that the url validation isn’t very strong. It seems to only check for the presence of ‘http:’ which must be a spec issue because FireFox behaves the same. Using pattern may be the better way to go. Also, it would have been great if pattern was implemented on textarea for multiline text.

Next Steps…

So that’s my step by step walkthrough of some of the new HTML5 Form elements and attributes. If you want to learn more about the HTML5 Forms you can read over the spec, or check out Introducing HTML5.

Who Else Wants a HTML5 Office Dictionary?

I’m currently reading some books on HTML5 and have been taking notes in OneNote as I go. I was getting increasingly frustrated with all the spelling “errors” OneNote was detecting, and my yelling ‘”SERENITY NOW!” like Frank Costanza started to annoy the neighbors.

serenity_now

To keep me sane I created a custom HTML5 Office dictionary that contains all the HTML5 tags and attributes. You can grab it here.

Time For a Change – Becoming a Microsoft Evangelist

It’s been a great, and crazy, few years working on Silverlight 4 & 5 and being responsible for a handful of XAML feature areas for Metro style apps. I’ve learned a ton of new skills that I know will serve me well in my new role as a Microsoft Evangelist. It was always one of my personal career goals to end up on the evangelist track and to some degree I tried to tailor my career to fit that trajectory. So I’m thrilled that the day has finally come.

Leaving the product team was a tough decision to make. Being able to directly impact a product on a daily basis was a honor, and working with such a talented pool of people was a lot of fun. At some point I plan to write about what life was like on a product team that details the good, the bad and the ugly.

When I started sharing the news to family and friends about my new role as a Microsoft Evangelist I was greeted with the obligatory congratulations which was quickly followed by “a what?”. A coworker of my wife, who is not in the IT field, was even a little offended when my wife shared the news because of it’s highly religious etymology.

“Evangelist”, because of its religious ties, doesn’t do the role justice because it’s not about preaching. I’m not a big fan of the “Technology Advocate” title either but it’s closer to the truth. Also, since the evangelism role differs across companies and even across teams inside the same company the definition changes depending who you ask. However, at the core, I think an evangelist is someone that couples their technical skills with a passion to inspire and enable customers to leverage technology to reach & surpass their goals. As a consequence evangelists get to improve our products based on customer feedback and help customers be successful. Those customers’ wins may also cause a ripple effect by inspiring other companies to apply the same technology to reach their goals.

I’m really excited about my new role and I can’t wait to start meeting customers and making an impact. I’ll be primarily focusing on helping Fortune 500 companies shape their 3 screen strategy by leveraging Metro Apps, WP7 Apps, Xbox/Kinect, and Azure.

//BUILD

Finally the time has come to talk. The vow of silence is over and it’ll feel so good to share what we’ve all been working extremely (work-life balance FAIL) hard on! I’m waiting for the cab to pull up so I can catch the flight to Anaheim. Recently it was made public that XAML is part of Windows 8 – come Tuesday all will be revealed..

[Update] – The keynote was awesome and we already heard some great feedback on what XAML offers developers. Here are some links that I posted on twitter (@alnurismail) earlier today:

1) List of XAML sessions this week: http://timheuer.com/blog/archive/2011/09/13/xaml-sessions-at-build.aspx

2) Get Windows 8 Developer Preview from:

3) Windows 8 code samples (covers the WinRT API surface) at: