Mobile Zone is brought to you in partnership with:

Shayne Boyer has been developing Microsoft based solutions for the last 15 years. Currently working as a Solutions Architect focused on Services Oriented Architecture and in his spare time runs the Orlando Windows Phone and Windows 8 User Group. He is a passionate developer and loves to talk about his craft, teach and also learn from others. - Telerik MVP - Nokia Developer Champion - Microsoft MCP - INETA Speaker Shayne is a DZone MVB and is not an employee of DZone and has posted 12 posts at DZone. You can read more from them at their website. View Full User Profile

When Making Apps, It’s the Little Things That Matter…

11.12.2012
| 10963 views |
  • submit to reddit

Windows 8 is here, it’s exciting, it’s new and we are all looking for new ideas to bring to platform in the way of applications. However, if we’re too focused on figuring out what the next “big” thing is, we forget to put the little things in an application that the users have simply come to expect. Regardless of how cool or hip your application is or how it changes the way the user consumes the data it provides, it won’t matter if for instance I cannot share how cool it is with my friends, or if you can’t search for something in the application the way you expect it too. The next thing you will see is a tweet like this:

@UnhappyUserName Really ?!?!? @YourAppNameHere– Can’t share #fail

Let me give you a real-world example that I recently encountered. Netflix just released their application for Windows 8.  I was pumped about it, as was a majority of the community.  This was the application that was demoed with the Surface and I immediately grabbed it. First off, the app was undeniably impressive.  Great use of the Modern UI Design principles.  , however even better with a touch first device and operating system like Windows 8.

Launching the application you are met with the “Home” screen displaying the most recent movies and shows as I would expect. My first action was to start typing, as I do in the Windows Store or on the Windows Start Screen, expecting to be automatically met with some search results; there was no response. I had to take my mouse and move it to the right to make the charms (http://www.guidingtech.com/10146/windows-8-charm-bar-introduction/) show, click Search, type my show name and then it was there.

After getting to the series I was looking for, I wanted to tweet it and let the other cool kids know the series was available on Netflix for Windows 8. But, yet again a failure.  I was met with a message of “This app can’t share”. Ugh…



First of all, I love Netflix and have the application on every platform (Windows Phone, Xbox, Windows 8, iOS, Android, Wii) and it’s a fantastic service. Secondly, the experience created in this application is perfect for a touch device such as a Surface or Slate with no keyboard/mouse as the first point of input. However, this is something you as a developer must consider when developing an application for Windows 8. Keep in mind that there are a number of devices; new, current, and old that the operating system will be installed on and handling the various scenarios are important to make sure you give the broadest user base the best experience possible.

Implementing the Search Charm

Here is a very quick run through of how to implement the Search Charm.  First, let’s start with the built-in Grid App template in Visual Studio so that we already have the design and some test data to work with. Start by creating a new application, in the example here I’ll be using C#, and name it SearchAndShareTest.

Download Visual Studio 2012 Express Free and get started! 

Next, we need to add the Search Results page, which will also add the Search Declaration in the Supported Declarations within the Package App Manifest. Right click the solution and select ‘Add New Item’, then select ‘Windows Store’ from the left tree view and ‘Search Contract’ from the listed templates. Name the file SearchResultsPage1.xaml.



Now that the page is added to the solution for the search results, it’s time to add the wiring to make all the magic happen.

Handling the Keydown

In comparison to almost every other platform I have developed for, Windows 8 makes this a piece of cake.  Open the GroupedItemsPage.xaml.cs, the main page in these solutions, and find the constructor. Add the following code and that’s it! The keydown is handled, the search flyout appears, and the user’s input is presented in the search box as expected.

public GroupedItemsPage()

{

	this.InitializeComponent();

	SearchPane.GetForCurrentView().ShowOnKeyboardInput = true;

} 

Repeat this on any view/page you have in the application in order to handle the key down on subsequent pages.  You can also put it in the base class page; in this solution the LayoutAwarePage.cs.

Now we need to make sure that the application navigates to the search results page when the user clicks/taps the search button. Next, open App.xaml.cs and locate the OnLaunched method and at the bottom create a new handler for QuerySubmitted like this:

Windows.ApplicationModel.Search.SearchPane.GetForCurrentView().QuerySubmitted += App_QuerySubmitted;

Which subsequently will add the handler, and change the inserted snippet to match the following code here. This will navigate to the Search Results page and pass the typed argument to the LoadState method so we can handle the search there.

void App_QuerySubmitted(Windows.ApplicationModel.Search.SearchPane sender, Windows.ApplicationModel.Search.SearchPaneQuerySubmittedEventArgs args)

{

	(Window.Current.Content as Frame).Navigate(typeof(SearchResultsPage1), args.QueryText);

}



Depending on the UX and datasource of your application there are a number of ways you can present the results of the search. However, there are guidelines such as showing counts, filtering, hints etc.

The take away from the search implementation is the amount of effort needed to add and handle the search charm in a Windows 8 is minimal. With the exception of games, there is no reason not to have this feature in your next application. So what about sharing?

Sharing is Caring

Face it, the mobile space is all about sharing information.  We check in here, post a picture there, tweet the next hot meeting space from every device we own.  So why, when I want to tell my friends about an awesome movie, can I not just do it from the app I am using?

There are at least two benefits from having this functionality in your application. One, free advertising of your app! Two, the user gets what they expect and they don’t hate you.  Here is how easy it is to add one side of the sharing contract.

Note: there are two sides, sending and receiving data in the share contract

Open ItemDetailPage.cs in the current solution and in the constructor add the following code:

DataTransferManager.GetForCurrentView().DataRequested += ItemDetailPage_DataRequested;

Then in the ItemDetailPage_DataRequested method we will add code to send the Title and Subtitle of the current item in view to be shared. This is done by adding the code in the handler:

void ItemDetailPage_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)

{

  args.Request.Data.Properties.Title = "Item Details";

  var item = ((SampleDataItem)this.flipView.SelectedItem);

  args.Request.Data.SetData("text", item.Title + "\r\n" + item.Subtitle );

}

These few lines of code respond to the event that happens when a user selects the share charm. Depending on the content that is being shared, and depending on the applications that are on the user’s device, various options will be available. For instance, in this example on the machine, only text is being shared and three applications are presented that are exposing a share contract accepting text.


When the FlipToast application is selected, the Title and SubTitle content is then passed and handled however the developers of that application wanted it to. In this case, it is avaible to send to other social networks in the form of a status update.



Just like in the search charm, implementing the share charm is very simple.  Make sure to add this to your application, and when you do, give it a little plug like “from XYZ for Windows 8”.

It is a requirement to implement at least one of the charms in a Windows 8 application.  Most developers will always have the settings charm due to the privacy policy requirement, and other settings.  Given that it’s so easy, I would strongly recommend you do at least three.

Wrapping Up

There are a few key features when creating a compelling application regardless of the platform. Many of the developers entering the Windows 8 platform are not foreign to this experience due to the fact that they are probably like me and have also spent some time in the Windows Phone arena where the same is true.

Performance, UX and being cognizant of my data plan were the major points that I always wanted the phone developers to be worried about and now with a new platform, marketplace rules, not to mention some really nice hardware; there are plenty of hurdles ahead of us. Just don’t trip on your laces on the way to the race.

Netflix as I said is a great product, but now every time I need to go search for something I get just a little irritated just because, as you can see from the example, it’s pretty easy to make it all work.  I am sure that by the time this article is published, they will fix the issue. Let’s hope.

Additional Resources

Learn to Build Windows Store Apps 

API Reference for Windows Store Apps 

Guidelines for sharing content in Windows Store Apps 

Sharing and Exchanging Data 



Published at DZone with permission of Shayne Boyer, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)