Method ~ of ~ failed by Tim Heuer

Priorities, passion and employment

Tim Heuer — Fri, 03 May 2013 17:59:28 GMT

Those of us who work for corporations/companies/whatever (read: not self-employed) usually get an allotment of vacation (or ‘PTO’ – personal time off) each year. Most companies have policies that put a cap on the amount of PTO you can carry over year after year. Anything you don’t use, you lose. You’d be an idiot to lose PTO (which is effectively paid days of work).

I was an idiot last year.

At the end of the year I got the email from HR indicating that I was going to forfeit a lot of vacation if I didn’t use it. The problem? The math didn’t even work out that I could even use it. It was forfeiture by idiocy for sure. I left money on the table, but more importantly it led me to a realization that has been obvious to me, of course, for a long time.

I work too much.

I love my job. I really do. I enjoy going to work every day, I enjoy the people I work with, and I love the technology that I’m working with daily. My work is also my hobby/passion. This presents a problem for my non-work life and a conflict in what people call ‘work/life balance.’

Working from home

For the first 5 years working for Microsoft I was able to work from home. This provided me the flexibility (an incredible flexibility I might add) of being there for my family when I needed as well as being able to succeed at work. My commute was downstairs. I ate lunch with my friends (yes, I realize work folks can be friends as well, but not always the case). I was able to take/pickup my kids from school. In the hot summer days I could go outside and jump in the pool. Okay I rarely did that, but I could. Reflecting on this time, I never really cared about vacation because I truly did have a decent work/life balance. Yes, I still worked a lot, but felt I was “there” for my family. They may disagree, of course.

Working in an office

3 years ago I moved to our corporate offices in Washington. Aside from the other challenges of relocating a family, my fundamental work structure changed. I don’t work from home. I go into an office, mingle with co-workers, drown in meetings and lose track of time to realize that I’m not making it home for dinner at times. Vacation has a different meaning and is more important…or should be. Since I spend more time away from those niceties of seeing friends/family very frequently during the day, my perspective has certainly changed.

I spend more awake time in my office than I do in my home during the week. Think about that. If you work at a company, you likely do as well. So why are us workaholics giving up so much time given to us in our vacation?

Philosophy conflicts with career growth

In reflecting on this work/life balance (or imbalance) I have, a co-worker pointed me to a blog post from Jon Gallant on this very topic. It is a good read and resonated (too well) with me likely because he also works at Microsoft. I shared this post with some other community-driven guys in the company and started some more thoughts. One of which (and somewhat pointed out in Jon’s post) is that establishing a real work/life balance is in conflict with career growth, stack ranking systems, etc. On this point I agree. However, it all comes down to priorities. If you want upward career growth you are sacrificing something. If you want massive family time, you are likely sacrificing career growth. A small discussion happened about how you can’t even be in the middle and have a job. I don’t subscribe to that, but understand that every org/division/manager is different and that is something you have to manage against in your role at work. One thing pointed out in Jon’s post is so true:

“At work you can be replaced in about 5 minutes, but you are effectively irreplaceable at home. Keep that in mind. I think about it every day.”

I shared some thoughts with Jon via email, thanking him for writing what was in my head for so long and we shared some more thoughts. In the end, his final comments to me were something I don’t think anyone could argue with (note the ‘number’ refers to the stack ranking system), emphasis mine:

The [rank] [your company] gives you doesn’t mean anything. No one is EVER going to bring it up in my house – except me. No one cares. Especially my 2 year old. I’ll get whatever rank I get this year...it doesn’t bother me because I know that the time I would have put in to always getting the absolute top rank I was at the playground with my kid or teaching him how to ask to be excused from the table.

It made me pause and realize how true that is. I need to get better at this. I need to stop saying “just wait one second” to my kids so much. In fact, Jon got an email from a co-worker that I thought was funny as well…his co-worker *who was on vacation even* said:

“One of my directs was on the beach celebrating his kid’s birthday when he read it. He put down his phone and went to play with his kid.”

Yep…been there. Bottom line, there is NEVER a good time to take vacation. I’ve used that excuse too much. I need to stop. My career may suffer. My thirst for knowing everything around me may suffer. My family and my own personal sanity will not suffer. I hope that I can find that right balance as I continue to grow both as a parent/husband and a professional. I’m not perfect, haven’t found it, but strive to achieve a true work/life balance.

Anyhow, I hope you read his post. And I hope you are better and balance than I am currently.

tags: balance, work/life, microsoft, stack rank, vacation, life

This work is licensed under a Creative Commons Attribution By license.

Ensuring your Windows store app knows of a language change

Tim Heuer — Tue, 26 Mar 2013 20:05:10 GMT

In my working with Windows Store apps, I’ve become increasingly fond/aware of the advantages for app localization. There are a lot of resources out there for you to localize your app using a good-better-best approach as well. I’ve previously written about localizing a Windows Store app using some of these methods and what the WinRT platform supports to make this easier in most cases.

Now that you’ve localized your app, you may be faced with the question of how you might want to respond to language choice changes by the user. Remember that the Windows Store app model is that it honors the user’s language choice preferences matching that with the available languages the app indicates it supports. This may not always map to the user’s installed OS language. For instance I can have an English OS install but prefer German in my apps and set my language preference to: de-DE, en-US. If a Windows Store app was localized in German, then I would see that version instead of English because my preferences say so, regardless of my OS install.

Language switching problem

Now, I’m not as proficient in German as I’d like to be, so there may be times where I need to flip back to English to understand certain areas of an app. I can do this easily by going to the languages panel and switching my order of preference:

But when I go back to my app, it is still in German…until I terminate/restart the app. Let’s say I started the app and it honors my language preference:

Now I go and change back to English and click the button to take me to page 2. It is still in German even though my language preference list is now: en-US; de-DE.

The XAML framework doesn’t automatically re-evaluate the resource cache in response to these changes. This is something the developer has to manage and luckily there are some easy steps you can do to make this experience better for your users.

We should point out that this is likely a rare case that a user of your app is constantly switching languages and switching back to your app, but having your app support this is a delighter for your users when it does happen.

Solution: listening to qualifier updates

There are APIs to the rescue here! When you switch your language preferences, the system actually is aware of it, however the context that your app already had at launched has been cached…and thus it will still be delivering the original context-aware resources. Good for us is that the APIs can let us know when this happens and we can respond.

Since most apps have only a single Window object and since this change is likely rare, we should manage this call and not put it on every Page load, for example, but rather higher up in the App because it will likely be rare that it happens. In our activation code path we can listen for the resource context to change

        1: protected override void OnLaunched(LaunchActivatedEventArgs args)

       2: {

       3:     ...

       4:     ResourceManager.Current.DefaultContext.QualifierValues.MapChanged += QualifierValues_MapChanged;

       5:     ...

       6: }

In this snippet we are using the default ResourceContext and listening for when its qualifier map changes. The qualifier map is the set of context for resources like language, but also scale, phonetics (for Japanese), high contrast, etc. Once that map changes we can force a refresh of the cache essentially:

       1: void QualifierValues_MapChanged(IObservableMap<string, string> sender, IMapChangedEventArgs<string> @event)

       2: {

       3:     ResourceManager.Current.DefaultContext.Reset();

       4: }

This simple flow basically says “hey, when a qualifier has changed, reset the context map so that I get the new data” and our app in subsequent calls to the resources will get the updated resources.

Here’s a video demonstrating the completed before/after approach.

There is a big caveat to this approach. The change doesn’t automatically affect your current view. So your page has rendered and is in German. If I go and change it to English, then go back to my page…it isn’t automatically in English. Subsequent view loads (and even going back to this page) will get the new resources, but already-rendered ones do not. The developer can, of course, implement way more logic to refresh the view, traverse the tree, etc. to manage this, but that experience is up to the app developer to determine what is most appropriate for the app itself.

This is a little subtle but helpful tip in enabling your localized apps to be flexible to these types of changes by users when that happens.

Hope this helps!

tags: xaml, winrt, win8appdev, winappdev, windows 8, localization

This work is licensed under a Creative Commons Attribution By license.

Implement a ‘smart banner’ for your Windows Store app

Tim Heuer — Mon, 18 Feb 2013 16:25:43 GMT

As someone who uses a few iOS devices around the house, I’ve become fond of visiting sites and seeing a little banner that lets me know that a native app is available for the web app I’m using. This concept was introduced in iOS 6 and called “Smart App Banners” in the developer documentation. You may have seen them as well

I wanted to provide the same affordance for Windows Store apps and recalled there are already two ways to integrate the web app browsing experience with the native app in the Windows Store:

In iOS, this is implemented a bit natively in mobile Safari, not through any additional JavaScript files/functions. As with any random idea I have, I always set out to search if it has been done before (often it already has). I couldn’t find something like this specifically for Windows Store apps, however I did find an implementation for pre-iOS6 browsers as well as Android. It was from Arnold Daniels and hosted on GitHub, so what’s a guy to do? Fork it!

And that’s what I did: https://github.com/timheuer/jquery.smartbanner

With a few more conditional checks, if you put this in your web app/site now you’ll get it automatically linked to your Windows Store app if you have the correct meta tags. For the implementation for Windows Store apps I’ve made some assumptions about the meta tags used. The following would get you a good experience:

        1: <html>

       2:   <head>

       3:     <title>Hulu Plus</title>

       4:     <meta name="author" content="Hulu LLC"/>

       5:     <meta name="msApplication-ID" content="App" />

       6:     <meta name="msApplication-PackageFamilyName" content="HuluLLC.HuluPlus_fphbd361v8tya" />

       7:     <link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen"/>

       8:     <meta name="msapplication-TileImage" content="http://wscont1.apps.microsoft.com/winstore/1x/c8ac8bab-d412-4981-8f31-2d163815afe4/Icon.6809.png" />

       9:   </head>

      10:   <body>

      11:         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>   1:     2:         <script src="jquery.smartbanner.js">   1: </script>   2:         <script type="text/javascript">   3:             $(function () { $.smartbanner() })   4:         </script>

      12:   </body>

      13: </html>

If you have the combination of linking your app using the msApplication-ID and msApplication-PackageFamilyName values and the pinned sites high fidelity msApplication-TileImage value to deliver the combined experience. If you have all these, then the banner “just works” for you.

NOTE: Because the Microsoft documentation mixes msApplication and msapplication (note the casing on the “A”), you should use the capitalization (which is more consistent in the documentation) for ensuring it all works smoothly.

Now some may use a different pinned site TileImage than that of what they may use for the app tile, however this can also be overridden in the options:

       1: $(function () { $.smartbanner({ icon:'http://some/url/to/tile/image.png' }) })

When done the web app/site would display a dismissable banner (using Hulu as an example here) on a machine running Windows 8:

So adding one reference, 2 files and an initialization and you’ll help give your app a bit more promotional flare for those viewing in browsers other than the ‘modern’ IE view. As you can see the screenshot above is from the desktop version which doesn’t take advantage of the other msApplication-** attribute usage in desktop mode. The one thing it doesn’t do that the iOS system-level banner does is detect if the app is installed and change “view” to “open” however there isn’t a mechanism to easily detect if the app is installed using JavaScript from a web app.

NOTE: While the ‘View in Store’ button works in IE, Safari and Firefox it does not work in Chrome. I’m not sure what any timeframe it would be for Chrome to support the store launch protocol.

Anyhow, I thought this might be a useful addition to app developers web apps that have a Windows Store app counterpart (and perhaps already have an iOS and Androi counterpart as well). I’ve submitted a pull request to the project I forked from, but you can get it from my GitHub repository for jquery.smartbanner.

Hope this helps!

tags: winappdev, win8, windows 8, smartbanner, jquery, github

This work is licensed under a Creative Commons Attribution By license.

Remote Debugging your Windows Store app on your Surface

Tim Heuer — Fri, 26 Oct 2012 17:24:26 GMT

So you got that shiny new Surface device today? I’m sure you spent the first few hours just opening it up, setting your personal experiences to your desire, re-installing and discovering new apps.

But you are a developer and now you want to see how your app looks on this great device…Here are some tips to get you quickly started.

Setting up the tools

One thing to keep in mind is that Surface is NOT a full ‘desktop’ machine and runs on an ARM processor. This means to that you cannot install Visual Studio directly on the Surface RT device. You will need to still ensure that you have a full development environment set up. But the first thing you will need is to get the remote developer tools for Visual Studio *for your target remote device* architecture. For Surface RT, this is the ARM tools.

You can get them here: Microsoft Visual Studio Downloads. Scroll down a bit and look in the “Additional Software” section. Grab the Remote Tools for Visual Studio 2012 section.

You can do this either from the desktop browser on the Surface or from your own desktop and download the remote tools for ARM to a USB key.

On your device, install the remote tools for ARM. No other Visual Studio installation is required here. Just run the installer. When completed you should have a tile on your screen for the tools:

Now you can get started with your remote debug session!

Configuring the Remote Debugger

After install go ahead and launch the Remote Debugger on your device. You’ll be presented with (maybe after some firewall questions you need to authorize) the remote debugger now running and in default mode:

By default, it is set up secure. This means that in order to attach a remote session you’d need to ensure permissions are correct, etc. Now since your ARM device isn’t likely on the same domain/workgroup as your developer machine this may be tricky. Personally, I turn off the authentication options to make my developer experience smoother. Now of course, you shouldn’t leave your device in this state, but you can close the remote debugger when complete. Here is the config that I use on my remote debugger:

This allows me to just launch the app on the remote machine without having to use any special authentication tricks since the machine isn’t on my domain, etc. My remote environment is now set up and ready for me to launch an app and start debugging!

Launching an App on the remote debugger

Now that your remote device is configured and listening, you want to start your app and debug remotely. Once you have your app in Visual Studio you’ll want to change your launch target to “Remote Device” in the IDE. This is in the toolbar or in the project properties. For a C# application it looks like this:

Once you launch that you’ll be able to select your device. Now if you are on your home network, with no domains and all on the same subnet, you may just be able to discover your device in the remote debugger connections window. However you can also just specify the machine name. Be sure to match the authentication method in this window with what you chose when you set up the remote debugger…in my case “none.”

Now that the configuration is there (and selected), when I run (F5) the application it will attempt to deploy it on the remote device. When you run you’ll notice the remote debugger will show the connections:

And in your developer workstation you’ll be able to set breakpoints, investigate watch parameters, etc. All the same stuff you normally do is still available to you.

Summary

Now that you have a Surface (or other Windows RT device) running on an ARM processor, this remote debugging toolset/workflow will be important to you. The great thing is that once it is set up and you understand the flow, it is very simple and seamless to use. This presents a great opportunity for you to debug and profile your apps on Windows RT to see any areas that you might be able to optimize for the target device. And all you need is Visual Studio Express for Windows 8 (free) and the Remote Debugger tools for Visual Studio 2012 (free)

Hope this helps!

tags: windows 8, winrt, windows rt, surface, arm, remote debugging, debugging, visual studio, xaml

This work is licensed under a Creative Commons Attribution By license.

Using Azure Web Sites to market your Windows App

Tim Heuer — Thu, 27 Sep 2012 03:39:03 GMT

In some of our internal discussion lists there was some questions about how to host certain content for their application. Most of the discussion came up from apps needing a privacy policy (Rule 4.1 from the Windows Store App Certification Requirements). Some folks had apps they just developed, but no “site” or service they were using. But they needed to host a privacy policy. Lots of thoughts were floated around and I suggested Azure Free Web Sites as an option. I originally suggested it as a simple way you could just have a URL to a privacy policy, but…duh, you could easily use it as a very quick marketing site for your app.

Creating a web site in Windows Azure

If you didn’t know, Windows Azure allows you to create a free web site! It is very quick and simple to set up once you have your Azure account set up. After doing that go to the portal and choose to create a new Web Site. I recommend picking from the gallery and choosing WordPress. There is such a vast ecosystem around WordPress as a CMS system that it is simple to use and set up.

NOTE: Of course you can use others, even a static web site using the TFS/Git deploy feature even. Do whatever you want. I just think WordPress is great and allows you to scale your site features without writing code, etc.

Choose to create a site from the gallery:

This will walk you through a wizard to pick some names and options. It is pretty self explanatory. Once completed you will see your site provisioned in the portal.

Just click that link and you will be taken to your site…which for WordPress will be the initial setup page to choose your login.

Choosing a WordPress Theme

Once in the WordPress admin site, choose the Appearance option on the left, then the Themes sub-menu. Once there, go to the Install Themes tab to pick a theme from the gallery. Optionally you can grab a premium theme from various sites. There is one called “Responsive” (search for that term) that is in the built-in gallery, free, and actually serves the basic needs well. We’ll choose that one:

After you pick it you’ll want to Activate it as the current theme. Now let’s do some simple configuration.

Configure the WordPress site

In order to serve the goal of making this more of a marketing site and to host our privacy policy we don’t need commenting on pages. Additionally we want “nice” URLs for our site. Let’s start with a few simple tweaks.

First (in the WordPress admin site) go to Settings->Permalinks. Choose the “Post name” option.

Next go to Settings->Discussions. In the top uncheck the “Allow people to post comments on new articles” in the top:

This will prevent commenting on content. Next using the Responsive theme we can configure the home page. Go to the Appearance->Theme Options section. You’ll see a “Home Page” option for the Responsive theme. You can set the main text, tagline and two other options. This gives you the chance to set the URL for your app that is provided from the Windows Store.

Here are some posts to help you find URLs for your app: Linking your apps on the web and Connect your web site to your store app.

Here is an example:

Now go to Appearance->Widgets to modify some information on the home page for the 3 widget areas. These could be simple things like a quick blurb about what the app is, maybe some top features, or whatever. In the admin widget area you’ll see Home Page Widget 1,2,3. Simply add the “Text” widget to these and you can add the title/text for this:

You can also remove the theme logo to provide your own logo in the Appearance->Header section to provide your own image. You can also specify a custom image on the main “hero” section of the home page instead of the default image and specify that. Once all these quick tweaks are done, your home page is done. Visit the site to see the quick changes.

Now let’s add our privacy policy so we have a permanent place for our privacy details.

Add a Privacy Policy page

From the WordPress admin site, go to Pages->Add Page. Name it “Privacy Policy” and then type in your privacy policy text. You can modify the text using HTML formatting to fit your needs. Make sure to use the “Full Width Page” template so that it shows the entire page. Notice the URL for the permalink. I recommend keeping it simple with “privacy” or “privacy-policy” as the name (which should be default):

Once you Publish the page, your site will now have a link to “Privacy Policy” on the home page and you can use that in your site, for your certification process and other areas you may need it.

You can now provide a link within your app to your privacy policy as well. Andy has a simple method of adding it to the Settings charm and simply linking to your online site now. You can visit the site to confirm it looks as you wish:

Done! You can see this example at http://timscoolapp.azurewebsites.net.

Profit!

Now you have a free site on Azure to host marketing your app. Of course this helps those getting over the hump with providing a nice place for a simple privacy page, but also enables you to have a way to provide other pages for your app. You could provide more detail on features, have a form to collect feature requests, whatever. WordPress is very flexible and the same process you used to create the privacy page can be used for other full-page content. Or you can explore what WordPress has to offer you. Again, there are many different ways you can do this and even within WordPress other themes you could choose. However I think the Responsive one is a simple one to get started with as a base.

You may want to not have “azurewebsites.net” as your site URL as well. If you wanted you can migrate to a shared instance (not free) and have custom domain name resolution on your Azure site as well.

Hope this helps!

tags: windows 8, win8appdev, win8, xaml, winrt, azure, privacy policy, window store

This work is licensed under a Creative Commons Attribution By license.

Using vector data for AppBar icons in XAML

Tim Heuer — Mon, 03 Sep 2012 23:36:12 GMT

I was helping a friend today doing some over-the-shoulder code review and suggestions for his Windows app he’s writing for the store. In doing this I asked a question about how to perform a certain action. He indicated that he put those functions in the AppBar and was it not obvious I was supposed to use them. I looked at the AppBar again and found out why I wasn’t drawn to them. First, the labels he used weren’t descriptive to me and relied too much on me looking at the actual icon. Second, however, is that when I hovered over them I received no visual feedback I was expecting and immediately thought they were just disabled (the color was slightly gray as well which probably didn’t help this).

I mentioned these to him and noted he should use the AppBarButtonStyle base definition that comes in the Visual Studio templates as a guide and just set the appropriate content. He proceeded to let me know that he received the vector data from Syncfusion’s Metro Studio product. We then began to examine the vector data. Metro Studio is doing probably too much than it needs to for AppBar button definitions. To be fair, it serves a goal to get Windows UI style icons for the developers in XAML form. This is great! However, if my intention is to use them for AppBar buttons, then it is doing too much. It led me down a path to see how easy it was to use vector data with the default AppBarButtonStyle definition. Turns out it wasn’t as simple as I thought. Let me first explain the core issue then walk through a step on how to do this with vector data.

Fill versus Foreground

The main culprit is Fill vs. Foreground. The default AppBarButtonStyle has the different visual states for setting the correct default/inverted colors for your icon within the ellipse. These visual states however set these colors based on changing the Foreground property of the ContentPresenter. When your content is text – as is the case with the default styles that are commented out – this works fine. However the Path element in XAML understands Fill and Foreground doesn’t really apply. So while the vector data could be represented in the icon location, it wasn’t working on the different states because the Foreground value changing had no effect!

Let’s see how we can accomplish this…

Step 1: Get your vector data

I mentioned that we discovered this using Syncfusion’s Metro Studio, but this is one way where you can get vector-based artwork for XAML. Another is http://xamlproject.com which is similar in how it does things. Both will give you vector data based on a selected icon.

NOTE: The one thing I don’t like about The XAML Project site is the sizer doesn’t tell me what size I’m using. Metro Studio gave me the option to set a specific size.

When we launch Metro Studio we can search for different items based on keywords. Since the Segoe UI Symbol font includes a ton of these for us (all of which are represented in a commented-out style definition in StandardStyles.xaml you can just uncomment and use) I will pick an obscure one called “wash” from Metro Studio. When I select to edit it I’m presented with a default UI to modify the data:

Now notice how it gives me options for background shapes, etc.? For an AppBar button you do not these shapes so you can uncheck that option. Secondarily the ideal size is 20px with no padding. The colors (background color and icon color) don’t really matter here as we aren’t going to use them to get the default AppBar button style. My final options look like this:

Notice I unchecked the Background Shapes option, chose Custom Size and entered 20 with 0 padding.

Now what I do is click the XAML button and am presented with the full definition. You don’t need it all. Just copy only the path Data to your clipboard or wherever you can get it later.

Now that we have our vector data we need to put it in our button.

Step 2: Creating the path button definition

Because of the Fill versus Foreground issue we can’t just simply use the AppBarButtonStyle as the button style and just set our vector data. We will not receive the correct state visuals when it is used. So we first need to re-define a base that we can use. Since I may use other vector data in the future, I’ll encapsulate this in a new base style I’ll call PathBasedAppBarButtonStyle. This will allow me to remap Foreground to my Fill property to achieve the desired outcome. The resulting style is this:

        1: <Style x:Key="PathBasedAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="ButtonBase">

       2:     <Setter Property="ContentTemplate">

       3:         <Setter.Value>

       4:             <DataTemplate>

       5:                 <Path Width="20" Height="20" 

       6:             Stretch="Uniform" 

       7:             Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" 

       8:             Data="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>

       9:             </DataTemplate>

      10:         </Setter.Value>

      11:     </Setter>

      12: </Style>

Notice that for Fill and Data I’m using Binding with the RelativeSource being the TemplatedParent…the actual Button. This allows me to essentially get at those properties that will be set and put them in my Path element that makes up the container for the vector data.

Step 3: Setting our custom vector data

Using the exported definition from my “wash” icon above, I can now use the style in my AppBar resulting in something like this:

       1: <Page.BottomAppBar>

       2:     <AppBar IsOpen="True">

       3:         <Button Style="{StaticResource PathBasedAppBarButtonStyle}" 

       4:                 AutomationProperties.Name="Wash" AutomationProperties.AutomationId="WashAppBarButton"

       5:                 Content="M9.6803506,4.8474294C10.209365 ... 3.5652149,0z" />

       6:     </AppBar>

       7: </Page.BottomAppBar>

Please note that I trimmed the Path data so as not to take up so much space for your reading. I set my Button to use the base style, then set my label (via AutomationProperties.Name) and the Content is the exported vector data from the tool.

NOTE: AutomationProperties.Name is used here in the base AppBarButtonStyle to enable us to expose the Content property as the icon and still have a label. By using this property you also get accessibility for free in using these styles for this particular instance. Screen readers will read out the name you set when using this.

The resulting visual is correct in the AppBar UI guidelines:

Now when my users mouse-hover or press this button the correct visuals and state changes will happen.

Summary

The default AppBarButtonStyle base definition provided from the Visual Studio templates is optimized for the 150+ styles provided in StandardStyles.xaml and font-based vector data. For most, this is likely more than enough to use the same icons that are used throughout the operating system to give a consistent feel. If you find one in the 150+ styles provided you should use that. However if there is something entirely custom or not available in those, you can use your own vector data to provide your AppBar icon. Using fonts and vectors make it easy to scale up to the different resources without having to provide different images if you used that method. Defining a new base for vector data isn’t difficult and provides us the flexibility when we need it!

Hope this helps!

tags: winrt, xaml, windows 8, windows, metro, vector, appbar

This work is licensed under a Creative Commons Attribution By license.

New-DiffGist: a powershell cmdlet for posting diffs fast

Tim Heuer — Thu, 23 Aug 2012 00:05:14 GMT

In the late nights when I have time to work on Callisto (my Windows 8 XAML toolkit), I often am making changes that I really wish I could either pair with someone on or at a minimum solicit some feedback. Primarily single-person open source projects are lonely :-).

Last night was no different. I had a user of Callisto having a problem with a specific code path. While my testing of the fix was fine, I didn’t want to rush it without him understanding the simple fix. I had no good way of showing him a combined diff to comment on at the time. My problem was, what I thought, simple: how do I quickly share a diff from a GitHub project without requiring them to have a fork?

I set out to the best place to have an argument, Twitter. I asked the same question and got a lot of different responses, but almost all of them pointing to what appears to be the typical git flow in this matter is to use pull requests for code reviews and sharing potential updates. This really frustrated me as I thought it was unnatural to the goal I was trying to accomplish. Lots of folks told me this was the way to do it and that I was thinking about it wrong. To them I say this is broken. I didn’t want to pollute pull requests to be a mix of legitimate pull requests to “in-flight” code changes that shouldn’t be even considered for merge yet. I simply wanted a quick, light-weight way to share a diff graph.

Paul Betts (as he has always awesomely helped with my GitHub questions) pointed me to the thing I was ultimately looking for:

        1: git diff > current.diff

This gave me the output that I needed and Gist understands color coding for this data so I just needed to post it there. Good thing is that GitHub has an API that is relatively simple to understand. Since I’ve been using poshgit as my shell lately I set out to create a CmdLet for my flow. I wanted one command that would grab the diff and post to a Gist and give me the URL. I’ve never touched a line of PowerShell programming before and set out to start.

Honestly, it was painful to understand PowerShell for me in this simple task. The PowerShell “IDE” is slow to help with any really good flow. I wanted some VS experience to bootstrap me and I knew I didn’t want a full-on assembly approach. A PowerShell script should do me just fine. I scoured many sites online and started out with my script. After a few hours of searching/trying I was almost there but still not successful. I ended the night posting back to Twitter with a Gist of my attempt.

It was late, I went to bed. As is how most things happen on the interwebs, I awoke to some pointers to where someone has already done most of the work! Despite my searching I never found something that basically took me 90% there already. This was in the form of PsGist. Boom! This is exactly what I needed. I just needed to modify the input from a literal file to the source of the diff. I spent an unnecessary hour fighting with an unauthorized error on the GitHub API due to some unexpected value being in the string captured after entering credentials, but after that was solved I was done. I decided to merge this back to PsGist and submit a pull request for the new command. A few minutes later and after a few questions/quick modification, it was merged. I now have a simple/fast flow to quickly say “hey, here’s what I’m working on, what do you think?” to anyone without having to do any different branching that isn’t currently in my flow.

       1: New-DiffGist -Description "SettingsFlyout fix" -Public

After the module is imported the above command will perform a diff, and immediately post that to Gist and give you the URL (and optionally launch in browser if you use the –Launch param). I know it may sound trivial, but it helps my flow and is the simple thing that I was looking for. Thanks Ryan for the PsGist starting point (and for merging my new CmdLet)!

Hope this helps someone!

tags: gist, github, poshgit, psgist, powershell, callisto

This work is licensed under a Creative Commons Attribution By license.

UPDATED HOWTO: SQLite with Windows 8 apps

Tim Heuer — Tue, 07 Aug 2012 21:05:09 GMT

I’ve previously posted a few things about SQLite including a HOWTO on how to build from their source code. If you still want to build your own DLL from their source code that is totally fine, but not necessary in most every single case I’ve seen in app usage. One of the challenges I noted is that since SQLite is a native component and if you are a managed (.NET) app you can’t be architecture neutral anymore (AnyCPU). What this means is that you have to build your app for each architecture you want to support: x86, x64 and ARM. The flow of this using SQLite3.dll was that you would have to package, change the DLL, re-package.

Not anymore.

In working with the great folks on the SQLite team, they’ve packaged the binaries up (for Windows 8 apps) in a nice installer using the Extension SDK format. What this means is you now add a ‘reference’ to the SQLite binary and based on the architecture being built for your package, it will pull in the right DLL without you having to manage that yourself. Here’s some step-by-step…

Installing the SQLite for Windows Runtime package

The first thing you want to do is install the package. You can do this from within Visual Studio itself in all editions. From the Tools menu, choose Extensions and Updates and then choose the Online section (on the left of the dialog) and search for ‘sqlite’ in the search term. This will show you the SQLite for Windows Runtime package:

Click install my friends. You will be prompted to restart Visual Studio which you should do. Go ahead…I’ll wait.

Using the new package in your C#/VB app

Now that you have the SQLite for Windows Runtime package installed in your Visual Studio environment, you want to use it. In a managed (.NET) app you would do the following steps.

First, create your app (e.g., a Blank XAML app is fine). Once within your app, use the Add Reference mechanism to get to the next step. Now you will not be browsing for any DLL directly like you would in a traditional .NET. What we are adding here is a reference to the Extension SDK…not the library itself, a small but important distinction. Once in the Add Reference dialog choose the Windows\Extensions view (see on left) and you’ll see SQLite for Windows Runtime.

To correctly use this in a managed app you’ll need to select that *and* the C++ runtime as seen below:

The reason for this is to ensure that your app declares the right dependencies that are needed for the app to run. The likelihood of the C++ runtime not being on a Windows machine where your app will be installed is extremely rare, but you need to declare this anyway. Failure to do so will fail your app certification tests.

Now with this involved you can grab a managed wrapper to call the SQLite APIs as I’ve previously described in my HOWTO video. I personally recommend the sqlite-net library (available via NuGet) to make this easier for you.

NOTE: sqlite-net is available as source in C#. If you are using a VB app, you would first need to compile the sqlite-net source in a separate DLL so you can just add a reference to that in your VB project.

Using the sqlite-net library you can perform tasks using a model similar to LINQ2SQL where you can have types represent database entities:

        1: public sealed partial class MainPage : Page

       2: {

       3:     public MainPage()

       4:     {

       5:         this.InitializeComponent();

       6:         LoadData();

       7:     }

       8:  

       9:     public void LoadData()

    {

        var dbPath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "db.sqlite");

        using (var db = new SQLite.SQLiteConnection(dbPath))

        {

            db.CreateTable<Person>();

  

            db.RunInTransaction(() =>

                {

                    db.Insert(new Person() { FirstName = "Tim", LastName = "Heuer" });

                });

        }

    }

}

  

public class Person

{

    [SQLite.AutoIncrement, SQLite.PrimaryKey]

    public int ID { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

}

Now you just need to specify your architecture for your app (x86, x64, ARM) and when you build, the appropriate sqlite3.dll will be packaged in your app automatically. This also happens during the packaging step for the store so the right item is included for each architecture-specific package.

WARNING: Do not package in DEBUG mode as you will fail certification. Ensure that you build/package in RELEASE mode prior to submitting to the store or running the app certification toolkit (also referred to as WACK in some places). You will get false positives if you are compiled in DEBUG mode.

This should make your development much easier without having to swap out DLL files each time.

Using the new package in your C++ app

If you are a C++ developer you will do the same steps for installing and adding as a reference to your app. In the C++ project system there is no 'Add Reference’ menu on the project context menu, but you will choose References and then the Add Reference button shows up.

Once you have the reference to the SQLite SDK then as a C++ developer you can just #include the header and go to work:

       1: #include <sqlite3.h>

Since C++ projects are already architecture-specific you don’t have to worry about the AnyCPU situation because there isn’t one! You’ll get IntelliSense on the API by just including the header. The Extension SDK mechanism already includes the C++ props file to help the project system know where to get the header for development and the lib for linking when building. Most C++ developers will interact with SQLite using the native APIs and not need any additional wrapper library.

Using the new package in your JavaScript app

If you are using JavaScript/HTML to developer your app, you will follow the same flow as the C#/VB flow. Add a reference to both the SQLite SDK as well as the C++ runtime (to declare the dependency). As to accessing SQLite in your app, you’ll need a WinRT wrapper library to do that. The one that seems to be gaining favor is the SQLite3-WinRT library on GitHub. I have not personally used this, but seen a lot of people using this. It allows you to use the JavaScript programming model in a familiar way:

       1: var dbPath = Windows.Storage.ApplicationData.current.localFolder.path + '\\db.sqlite';

       2: SQLite3JS.openAsync(dbPath)

       3:   .then(function (db) {

       4:     return db.runAsync('CREATE TABLE Item (name TEXT, price REAL, id INT PRIMARY KEY)');

       5:   })

       6:   .then(function (db) {

       7:     return db.runAsync('INSERT INTO Item (name, price, id) VALUES (?, ?, ?)', ['Mango', 4.6, 123]);

       8:   })

       9:   .then(function (db) {

      10:     return db.eachAsync('SELECT * FROM Item', function (row) {

      11:       console.log('Get a ' + row.name + ' for $' + row.price);

      12:     });

      13:   })

      14:   .then(function (db) {

      15:     db.close();

      16:   });

If using JavaScript this might be the way to go for your app.

Summary

I’m very glad the SQLite team worked to get this deployment package out there. I think for some Microsoft developers, using SQLite is fairly new and this SDK package will make it easier to ensure you have the right bits at the right time. Of course you are free to do it your own way, but I think this will ease the process a little bit.

Why no NuGet? Well, the NuGet infrastructure right now doesn’t support some of these semantics around native components to deal with headers, linking and architecture-specific deployments. We’ll continue to work with them to see if we can drive these changes into that platform.

So please feel free to download via the Visual Studio ‘Extensions and Updates’ option from within VS, download directly from the Visual Studio Gallery, or download from the SQLite site themselves. Once installed, once an update is available, VS will notify you that an update is available and you can install it.

Hope this helps!

tags: sqlite, sqlite-net, sql, metro, win8appdev, win8, windows 8

This work is licensed under a Creative Commons Attribution By license.

Seeding your Metro style app with a SQLite database

Tim Heuer — Thu, 28 Jun 2012 15:59:48 GMT

It looks like people are really glad about being able to use SQLite within their Metro style apps. I had written two previous posts (Using SQLite in your Metro style app and HOWTO: Build and include SQLite) about this topic. I’m pleased to report that since those posts the SQLite team released a build (3.7.13 as of the datestamp on this post) which also provides the binary (32- and 64-bit versions) pre-compiled for you for inclusion in your Metro style app. You can get them from the SQLite download page.

I’ve received a few comments/questions that I thought I might clarify in my own opinion (and some facts) about using SQLite in your app.

Creating new databases

The first thing to understand is that your app lives in a secure sandbox during operation. This is also referred to as the AppContainer in the Metro style app world. What this means is that you can only do certain operations in certain places or through brokers provided by the various WinRT APIs. The first stumbling block I’ve seen people try to do is create a database in places where they cannot create databases. When using SQLite, regardless of whatever client method you use to program with it, you need to pass in a full path to where the database should be created (or an existing one that you are opening). Simply passing “foo.db” in the open method is not enough as that will assume an incorrect path to create the database file. Another incorrect thing that folks are doing is using the Windows.ApplicationModel.Package.Current.InstalledLocation.Path API. This represents the location of where your app is installed which is not an area you can directly write files/content.

NOTE: SQLite uses the CreateFile2 API which is not a WinRT broker API. This means that it is restricted to certain areas of the AppContainer.

The other area where people are trying to create files is in the document library location for the user. If you have declared the Document Library capability as well as provided a file association for the file you want to create, then you can read/write files in the Document Library using the WinRT broker APIs. This, however, is not possible using the CreateFile2 Win32 APIs.

This leaves the app’s ApplicationData location. So the correct path to create your database from your app is Windows.Storage.ApplicationData.Current.LocalFolder.Path as a starting point. Here’s an example (using the sqlite-net library and C#):

        1: using (var db = new SQLiteConnection(Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "foo.db")))

       2: {

       3:     // do stuff here

       4: }

Now whenever I need to query this database I would use that same path from my app.

Seeding your app with starting data

Some folks want to start their application with some seed data. There are a few ways that you could do this. One way would be to create a database during startup and execute SQL statements against the newly-created database. You would basically be shipping a script in your app that you’d run on the first run of the app after install. If you went this route, then you’d use the method above to create the database and then execute your INSERT statements.

Another method is to use an existing database file that perhaps you’ve already created. The misconception here that people have is that since they include a seed database in their app that they can just open that database file and read/write on it. The read part is correct, however you will fail to write to that file as it is in the package install location and not the ApplicationData location. The first step you want to do in this approach is move your seed database to the place where you can write to it. You can use the Windows.Storage APIs to accomplish this. Here’s an example of how you might do this. This assumes that your app has a file named “Northwind.sqlite” in your package:

       1: // grab the file from the package installed location into a StorageFile

       2: StorageFile seedFile = await StorageFile.GetFileFromPathAsync(

       3:     Path.Combine(Windows.ApplicationModel.Package.Current.InstalledLocation.Path,

       4:     "Northwind.sqlite"));

       5:  

       6: // copy the StorageFile to the ApplicationData folder

       7: await seedFile.CopyAsync(Windows.Storage.ApplicationData.Current.LocalFolder);

Now the code above does the copy. Of course you would want to add some logic to verify that you aren’t overwriting an existing database. Just like anything else there are various ways to do this so I am not prescribing any one way. Once you get the data where you need it to be, then you can work with the database how you’d like.

I hope this helps understand the method of creating (in the right place) and seeding your app with a SQLite database. Hope this helps!

tags: sqlite-net, sqlite, winrt, xaml, metro

This work is licensed under a Creative Commons Attribution By license.

AutoHotkey–my new snippet tool

Tim Heuer — Wed, 13 Jun 2012 13:43:20 GMT

This week was TechEd North America, a conference from Microsoft for technical professionals covering the span of pretty much everything Microsoft produces to support IT professionals and software developers. I was pleased to have been invited to speak on developing Metro style apps in XAML for .NET developers. Like most developer presenters, I planned on showing a lot of demos, using different tools, editors, and varying code samples, URLs, etc. When you are a presenter at a conference you usually don’t have the luxury of sitting in your office and doing things without distractions. You want to get across your message of your presentation and also be able to have some good demonstrations articulating your points. When you have a lot of demos, most of the time presenters will rely on some form of snippets – something for them to either type in quickly, copy/paste, or drag/drop onto editors.

I’ve used various snippet concepts over the years:

Using the Visual Studio Toolbox area and dragging text there (yes, did you know you can do that)
VS Code Snippets
Custom WPF “always on top” snippet utility (developed by a WPF team member when she was doing presentations)
Other 3rd party macro tools

But mostly I, like others, have relied on good ol’ notepad. For each presentation I have a file and just blocks of code separated with headers denoting to me which step the snippet is for in the demonstration. I don’t always use snippets because I do have some sense of pride in being able to demonstrate yes, I do actually know what I’m talking about and not just always copy/pasting! However, again, for efficiency and to get many points across, it is an effective way to start from a blank slate (project) and build up how code gets structured for your particular concept.

Notepad has been great and reliable so I’ve always used it. The other methods are more laborious to set up and sometimes error prone…aside from the fact they don’t work in all scenarios (i.e., VS code snippets don’t work in XAML…argh).

This week while preparing in the speaker room with my colleague John Lam (who also gave a presentation on the Windows Runtime) he was using a new utility I hadn’t heard of before. I usually get my little widgets of knowledge from Scott Hanselman’s massive list of tools. Most I don’t use, but there are some really helpful gems in there. So I was surprised about this new tool John was showing me I hadn’t heard of before.

YES, I realize this is probably not a new tool and this invites comments of ‘duh, this has been around forever dude’ so feel free to not post those. It is new to me, like in that new used car kind of way.

When John was walking through his demo he was typing what seemed like random keystrokes in various places: VS, Blend, Notepad, dialogs, command prompt, web apps. All of these were translating into blocks of text, shell commands, etc. He lit up showing me about this new tool, AutoHotkey.

AutoHotkey is a very small tool that basically is a mini macro language. I’m going to completely under-sell it for it’s likely true abilities, but even for the simplest use it has been a new favorite. AutoHotkey works by listening to the accessibility features in Windows (also referred to UIA) for anything that has input focus. Yes, that’s right, anything. You define a ‘macro’ keyword and then what the command defines. For me, this was just needing to be a series of copy/paste automation. Here’s an example of one of my snippets:

        1: ; clear clipboard

       2: ^+x::

       3: clipboard = ; null

       4: return

       5:  

       6: ; Initial StackPanel stubs

       7: ::d1::

       8: clipboard = 

       9: (

      10: <StackPanel>

      11:             <TextBlock FontSize="53" x:Name="FirstName" />

      12:             <Button Content="Click Me" Click="Button_Click_1" />

      13:         </StackPanel>

      14: )

      15: send ^v

      16: return

Anything preceded with a semicolon is a comment. The next line is the macro command it will listen for when input has focus. In the above there are two “^+x” means CTRL+SHIFT+X. The command is followed by two colons which is the delimiter for the command. The simpler one for “d1” shows how you issue a copy/paste. I tell it what I want to put on the clipboard, then say to send a CTRL+V (paste) and end the script with a ‘return’ statement.

The beauty is that there is no “app” that you have to run – your script is basically the app. You create your script in a text file named with an .ahk extension. When your script is complete, double-click on it and it is now listening. You’ll get an icon in the system tray showing you that it is running and some options (i.e., you can pause it, edit, reload to tweak):

What is cool is that if you want to see how it is working and what it is doing you can look at the “spy” feature:

to see how it is listening to automation events and input focus.

The other great feature it has is that you can compile your script. What this does is take your script (ahk file) and compiles the AutoHotkey runtime into it as well, producing an EXE. Now you can take that EXE to any machine and double-click and boom, your snippets are available and listening. So now I can can compile my snippets for each presentation and put them alongside my other presentation materials on my SkyDrive…keeping everything together and quickly restorable to any machine. Awesome.

I immediately started using it and became an instant evangelist to other presenters that moment. John Papa used it in his presentation as well and Pete Brown I think is now converted as well. For me it worked great, no issues.

Creating the script was a bit of trial and error because the documentation is, well, not great. It does SO MUCH MORE than what I’m using it for which is why I felt the docs lacking for the simple cases. The ‘return’ keyword was critical for me to get mine working without error. When you install AutoHotkey there is also an “Extras” folder that contains plugins for various editors: VIM, Emacs, TextPad, SciTE, Notepad++ and more. These allow you to get syntax highlighting in these editors quickly.

Thanks to John Lam for turning me on to this. UPDATE: I’m the idiot because it *is* on Scott’s list. My search wasn’t good enough apparently :-) ~~and maybe Scott Hanselman will consider it for his ultimate tools list this year~~. What is also awesome is that there is a Chocolatey installer for it so I just added this to my personal just-repaved-my-machine-please-give-me-my-utilities package. Be sure to check it out if you find yourself doing a lot of snippets.

Hope this helps!

tags: snippets, visual studio, autohotkey, tools

This work is licensed under a Creative Commons Attribution By license.