Development, Windows, Windows 8

WebView vs. SettingsFlyout

I was working on a Windows 8 application tonight, as part of some Azure content that I’m creating, and ran into a weird error.  I wanted to share it here in case other people ran into the same issue.

I have a very simple application – it’s essentially a simplified News Reader app that collects a set of RSS or ATOM feeds, displays their items, and allows a user to view the feed item – all within the confines of a Windows Store application.  The UI elements are arranged from left to right – feed list (ListBox), item list (ListBox) and item preview (WebView) looking something like this:

Simple, right?  This is a common pattern for displaying HTML content, and I’m sure one of the reasons a WebView control was included in the SDK.

OK – now that mock data is displaying like it’s supposed to, we move on to adding the “real” data.  Like all good Windows Store applications, the data for the list of feeds should be something users enter through the Windows 8 Settings panel.  To make it easy for us to implement custom content for the Settings panel, Tim Heuer created a really useful control in his Windows 8 Callisto library (also available via NuGet) called SettingsFlyout. I added some code based on his sample application to implement the SettingsFlyout, and tested it out.

I was expecting this, but it didn’t turn out that way:

What I saw, was no flyout.  Well… not a visible flyout anyway.

What to do?

The obvious answer was fire up Lync and ping Tim on IM 🙂  Talking to Tim, I learned that our friend the WebView control is a bit of a z-order piggie.  As it turns out, the SettingsFlyout was actually flying out as expected, but the WebView was obscuring it from view. The problem, in other words had NOTHING TO DO with the SettingsFlyout, or my implementation of it – rather the problem was related to the WebView (which I suspect has it’s problems rooted somewhere in COM, as COM is usually the source of chaos in managed applications…)

So – the fix?  A bit klunky, but it seems to work – there is a nifty control included in the WinRT SDK called WebViewBrush. The purpose of this brush, as described by the official MSDN documentation, says it best:

WebView has the characteristic that other UI regions such as controls cannot be rendered on top of the WebView. This is because of how window regions are handled internally, particularly how input events are processed and how the screen draws. If you want to render HTML content and also place other UI elements on top of that HTML content, you should use WebViewBrush as the render area. The WebView still provides the HTML source information, and you reference that WebView through element name binding and the SourceName property.WebViewBrush does not have this overlay limitation.

The clunky part, of course, is that you can’t just use a WebViewBrush to display your content.  The MSDN documentation again guides us through how we should implement this: when the Settings panel is opened, “capture” the current content of the WebView control into the WebViewBrush and display that via a Rectangle control, while also hiding the WebView.  When the Settings panel is closed, switch back to the real WebView.  Here’s my code that shows what I did:

private void RegisterForCommands(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
    var feedsCommand = new SettingsCommand("manageFeedsCommand", "Manage Feeds", (feedCommand) =>
    {
        // create the settings flyout
        SettingsFlyout settings = new SettingsFlyout();
        settings.Closed += (s, e) =>
        {
            FeedItemWebView.Visibility = Windows.UI.Xaml.Visibility.Visible;
            FeedItemWebViewRect.Fill = new SolidColorBrush(Windows.UI.Colors.Transparent);
        };
        settings.FlyoutWidth = SettingsFlyout.SettingsFlyoutWidth.Wide;
        settings.HeaderBrush = new SolidColorBrush(App.VisualElements.BackgroundColor);
        settings.HeaderText = "Manage Feeds";
        BitmapImage bmp = new BitmapImage(App.VisualElements.SmallLogoUri);
        settings.SmallLogoImageSource = bmp;
        settings.Content = new SettingsContent();

        // hide the webview due to z-order chaos
        WebViewBrush b = new WebViewBrush();
        b.SourceName = "FeedItemWebView";
        b.Redraw();
        FeedItemWebViewRect.Fill = b;
        FeedItemWebView.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

        // show the settings panel
        settings.IsOpen = true;

    });
    args.Request.ApplicationCommands.Add(feedsCommand);
}

So – not the most elegant solution, but enough to be getting on with for now. Viva la cutting edge!

PS – Mad props to Tim Heuer for the AWESOME Callisto library, and helping to set me straight on the WebView control.

Azure, Cloud, Development, Events, Featured, ITPro, Online, Training, USCloud

AzureConf

On November 14, 2012, Microsoft will be hosting Windows AzureConf, a free event for the Windows Azure community. This event will feature a keynote presentation by Scott Guthrie, along with numerous sessions executed by Windows Azure MVPs and community members. Streamed live for an online audience on Channel 9, the event will allow you to see how developers just like you are using Windows Azure to develop applications on the best cloud platform in the industry. Community members from all over the world will join Scott in the Channel 9 studios to present their own ideas, innovations inventions and experiences. These presentations will provide you the opportunity to see how your peers in the community are doing great things using Windows Azure offerings like Mobile Services, Web Sites, Service Bus, virtual machines, and more. Whether you’re just learning Windows Azure or you’ve already achieved success on the platform, you won’t want to miss this special event. For more information on Windows AzureConf or to register for the event, please visit http://windowsazureconf.net.

While you’re waiting for the conference to kick off, here are some helpful links to prepare your mind, body and soul for the Windows Azure experience:

SO – Get out to http://windowsazureconf.net and sign up today!

 

Development, MVVM, Open Source, Videos, Windows, Windows 8

Microsoft DevRadio: Community Corner – Update Controls for Windows 8 app Development

This entry is part 2 of 3 in the series Dev Radio: Community Corner

I recently had the  pleasure  to interview wicked smart Microsoft Client App Dev MVP Michael Perry as part of the Microsoft DevRadio show to hear about the amazing work he’s done on an open source databinding framework called  Update Controlswhich can help Windows 8 app developers simplify their code by automatically discovering dependencies so that you won’t have to manage them in your view model.

Next Steps:

Subscribe to the podcast via iTunes, Zune, or RSS

If you’re interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

Videos:

Virtual Labs:

Download

Azure, Cloud, Development, Events, Product Announcements

Windows Azure Fast!

Enter to win a trip to Las Vegas for you and a friend plus track time with some of the world’s fastest cars! Just upload a short video telling us how Windows Azure made your apps or development faster.

This is how we do it:

  1. Visit www.meetwindowsazure.com/fast and check out some of the videos on how people are going fast using Windows Azure
  2. Grab a flipcam, video camera, phone or whatever is in front of you and record a short video discussing (or showing) how you are doing something fast using Windows Azure (5 minutes or less)
  3. Upload your video to the site
  4. Spread the word to the rest of the community, and encourage people to vote for your video.  Blog with pointer to campaign site (http://bit.ly/AzureFast1) and tweet using #AzureFast (case sensitive)

To get your eukaryotic cells separating the chromosomes in their nuclei into two identical sets, check out the worlds fastest rapper laying down an awesome Windows Azure groove:

Cloud, Development, General, user group, Videos, Windows, Windows 8

Microsoft DevRadio: Community Corner – How I created my Windows 8 app for UserGroup.tv

This entry is part 1 of 3 in the series Dev Radio: Community Corner

I had the great pleasure recently to interview Microsoft C# MVP Shawn Weisfeld as part of the Microsoft DevRadio show to hear about the Windows 8 app he built for UserGroup.tv. Tune in and listen to this great story as Shawn describes his experience building the app and how you can watch great user group created content anywhere, anytime.

Next Steps:

Subscribe to our podcast via iTunes, Zune, or RSS

 If you’re interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

 Websites:

 Videos:

 Virtual Labs:

Download

Azure, Cloud, Development, Product Announcements

New Azure SDK and Services Updates

Some AMAZING new updates to Windows Azure were announced yesterday. I LOVE the rate at which new and improved features are being added to the Windows Azure platform, and I think you’ll find these updates particularly compelling. In a nutshell, here’s what was announced:

iOS Support for Windows Azure Mobile Services

The team released a native iOS SDK is for developers programming in Objective-C on the iPhone and iPad platforms. Included in the SDK are support for all the same features you get with the Windows 8 around data storage, dynamic schematization and authentication. Each Mobile Service can actually support *all* available clients, which now includes iOS, and it does NOT require a separate Mobile Services project for each different client. You can get sample code for each platform from the Mobile Service simply by toggling a switch:

While the release is still in development, and should not be considered a “final product”, the bits are pretty solid and the sample app worked for me without issue. I’m looking forward to them adding support for Notifications, which is missing from this current release, but should be coming out soon.

New Authentication Providers

Supported in both the Windows Store and new iOS bits, a set of new authentication providers have been added to the Mobile Services SDK. New providers include Google,  Twitter and Facebook, to augment the already existing Microsoft Account capacity.  Using the new provider model is really simple – first, you update the Mobile Services portal with the API keys that correspond to the types of authentication your application supports:

Then, you add code similar to the following, to process the login with the selected authentication provider:

private MobileServiceUser user;

private async System.Threading.Tasks.Task Authenticate()
{
    while (user == null)
    {
        string message;
        try
        {
            user = await App.MobileService
                LoginAsync(MobileServiceAuthenticationProvider.Facebook);
            message = 
                string.Format("You are now logged in - {0}", user.UserId);
        }
        catch (InvalidOperationException)
        {
            message = "You must log in. Login Required";
        }

        var dialog = new Windows.UI.Popups.MessageDialog(message);
        dialog.Commands.Add(new UICommand("OK"));
        await dialog.ShowAsync();
    }

}

Pretty simple!

Service Scripts Update

Some great new functionality is now available in the Mobile Service script layer.  These scripts are triggered off of any CRUD operation on a Mobile Service’s table and can already handle doing data and query validation, filtering, web requests and more.  The update now brings script access to blob storage, service bus, table storage, and more.  In addition, SendGrid and Twilio are now modules that can be called from the scripts, giving developers the ability to send emails (SendGrid) or SMS text messages (Twilio) whenever a script is fired.

Updates to the Windows Azure Training Kit

Along with all the updates to the SDK, there are also some updates to the Windows Azure Training Kit.   With this latest refresh, the kit now contains 38 presentations, 24 demos and 47 Hands-on Labs.  Speaker notes have been added to may of the presentations, and man of the labs have been updated to reference Visual Studio 2012.

SO GO GET IT ALREADY!

If you don’t already have a Windows Azure account, sign up today for a FREE 90-Day Trial at http://aka.ms/thecloud and get to work trying out some of these cool new features! You’ll get access to all the Windows Azure services for 90-days with a “spending limit” cap put in place once the trial expires to make sure that your credit card is not charged for any services without your explicit permission.  It’s a no-risk offer that you should jump on ASAP!

Azure, Cloud, Design, Development, Events, Oklahoma, TechFest, Tulsa, user group, Windows 8

Tulsa TechFest 2012

Tulsa TechFest is the premier technical conference in eastern Oklahoma, boasting “the broadest topics in the United States, maybe the world”. Sporting a healthy 18 separate tracks across multiple disciplines including  architecture, software and web development, databases, project management, security, social media, mobile, enterpreneurs, managers, BI & reporting, mentoring and even  a special Windows 8 Track, Tulsa TechFest is one of the largest events of its kind.

It’s primary focus is to provide training/teaching sessions that are immediately beneficial to the broadest range of IT professionals in their day-to-day jobs. They accomplish this with over 40 national/international speakers covering this wide range of topics over 90 to 120 75 minute sessions.

As with all conferences of this type, there is a cost associated with attending.  This year, in keeping with the traditions of the previous 4 years, attendance at the Tulsa TechFest will require you to pay your choice of $2, to be donated to the John 3:16 Mission, or 2 cans of food, to be donated to the Community Food Bank of Eastern Oklahoma. Last year, the event collected 469 pounds of food, and our target this year is to DOUBLE that amount, so please bring whatever you can to support these worthwhile charities.

This is the one that started it all, folks – since their first event, many other communities have been following our example by hosting their own TechFest events including VancouverTechFest, HoustonTechFest, DallasTechFest, AlbertaTechFest, IndyTechFest, and NWA TechFest.

I myself will be featured in the Cloud track talking about Windows Azure, including deep dive sessions on Windows Azure Caching, Access Control Service, Service Bus and Windows Azure Mobile Services.

This is one event you *won’t* want to miss – so sign up today at http://tulsatechfest.com!

Azure, Development, Open Source, Product Announcements, Videos, Web

Announcing TypeScript Preview for Visual Studio

Today, Soma announced on his blog the preview release of a new, open source project called TypeScript.  TypeScript adds optional types, classes and modules to JavaScript so that developer can make better tooling for large-scale JavaScript applications.  TypeScript comes with a cross-platform compiler that allows developers to code in TypeScript and output standards-based JavaScript for any browser or host.

Along with the language features of TypeScript itself, Microsoft is also announcing the release of an extension for Visual Studio 2012 which provides a cool tooling experience with Intellisense, refactoring support and as-you-type error reporting, just like you’d expect from Visual Studio.

You can learn more about TypeScript via the following links:

Go get it – it looks really cool!

Design, Development, Product Announcements, Web, Windows, Windows 8

GameSalad Embraces Windows 8

I know this has been in the oven for some time now, but I just got the email confirmation this morning that GameSalad – creators of the popular “no coding required” game development environment – now support publishing to the Windows Store!  I’ve used the GameSalad environment a bit, and although I’m a far cry from ready to publish a game, will say that it is crazy easy to build games with this platform.  All the stuff I was always concerned about keeping up with on an XNA-based game simply goes away as you dive into the GameSalad Creator product.

Game development is basically a set of drag-and-drop operations that you perform against a set of objects in your environment. You drag in images, videos, sounds and other assets and wire them up to “actors” that do activities within your game. You can use a simple rules engine to assign different behaviors to the actors and make them perform in your game in any way you can imagine.

And, as they say – that’s not all!

In addition to being able to publish your game to the Windows Store, GameSalad also allows you to publish to iOS (iPhone an iPad), Android and HTML5 as well – making your single investment in game development pay off with 5 separate targets! Awesome!

Download your copy of GameSalad Creator today and get busy building some amazing games!