Enhancing the Hilo Browser User Interface

The Hilo Browser application now allows you to share selected photos through an online photo sharing application. It also allows you to edit selected photos by launching the Hilo Annotator application. The Hilo Browser has been extended to make it easier to perform these two actions. In the first version of the Browser double-clicking (or double-tapping) on a photo launches the Annotator in order to edit the photo. The Browser now uses the double-click gesture to launch the slide show mode where the carousel is hidden and the selected photo is shown at a larger scale (Figure 1).

Introducing Hilo Annotator

The Hilo Annotator is a separate application that you can launch either directly from the desktop, the command line, or from within the Hilo Browser application itself. The Browser application was updated to support the integration of the Annotator. The user can launch the Annotator from within the Browser by double tapping on a photo with their finger or double-clicking with the mouse. This action generates a WM_LBUTTONDBLCLK message which is handled by the media pane through theMediaPaneMessageHandler::LaunchAnnotator method, by passing the name of the selected photo. Listing 1 shows the code for the LaunchAnnotator method.

Listing 1 Hilo Browser code to launch the Annotator process

Using Windows HTTP Services

Flickr Share Dialog

When Hilo uploads a photo to Flickr, it makes several calls to the Flickr web server. These calls are made to authenticate the Hilo application (and obtain a session token called a frob); to authorize the access of the Hilo Flickr application to upload a photo to a Flickr account (and obtain an access token) and then to upload the photo. These calls are made across the network, and potentially they can take a noticeable amount of time. Hilo has to wait for responses from the Flickr web server in such a way that the user is kept informed. This is the purpose of the Share dialog.

The Hilo Browser’s user interface provides a button, labeled Share (Figure 1). When you click on this button you will see the Share dialog (Figure 2), which is implemented by theShareDialog class. This class has static methods and allows you to upload either the selected photo, or all photos in the current folder. The Share dialog has effectively three sets of controls reflecting your progress through the mechanism of uploading photos. The first set of controls is shown in Figure 2. When you click the Upload button a progress bar is shown under the radio buttons (Figure 3) to display the progress of the upload; and when the upload is complete all the initial controls are hidden except for the Cancel button which is relabeled Close, and the View Photos link control is displayed (Figure 4). The same class is used for all versions of this dialog.

Sharing Photos with Hilo

Updating the Hilo Browser User Interface

Hilo’s photo sharing functionality is accessed through the Hilo Browser application. Previous versions of the Hilo Browser allowed the user to launch the Annotator by double-tapping (or double-clicking) a photo in the media pane. This worked adequately because there was just one action that could be performed on a photo. Now that there is an additional action—share—another approach must be used. In the final version of the Hilo Browser, double-tapping a photo shows the photo in the slideshow mode (Figure 1) while double-tapping the screen again returns to browsing mode.

Using Windows 7 Libraries and the Shell

Users can store documents, images, and other files in many locations—on different types of hardware installed locally or on other computers on the network. In the past, files were often physically stored in a location according to their type —for example, images in the My Pictures folder, documents in the My Documents folder, and so on. However, a far more powerful and modern way to access files is via their type rather than through their location. This is the purpose of Windows 7 Libraries. Files from many different locations can be accessed through a single logical location according to their type even though they are stored in many different locations. Libraries are user defined collections of content that are indexed to enable faster search and sorting. Hilo uses the Windows 7 Libraries feature to access the user’s images.

Using the Shell Namespace

The Hilo Common Library

Hilo is made up of a number of Windows 7 applications and each has a main window and one or more child windows. Hilo implements a lightweight object orientated library to help to create and manage these windows and to handle messages sent to them. In this article we will introduce the Hilo Common Library so that future articles can focus on the features of the applications themselves and the Windows 7 features used to implement them.

Introducing the Hilo Common Library

The Hilo Common Library contains classes that are common to all the projects in the Hilo solution. These classes provide the basic infrastructure to access and provide reference-counted objects, to create windows, and to handle Windows messages.

Reference Counting

Setting up the Hilo Development Environment

The Hilo Browser application is a sample application written in C++. The application uses the Microsoft Windows 7 operating system application programming interface (API) through the Win32 and DirectX libraries. This article outlines how to set up a workstation for the development environment so that you can compile and run the Hilo Browser sample application. In subsequent articles, we’ll be walking through the code and explaining the rationale for the choice of technologies, the UI design, and the implementation of the application’s features.

Setting up the Developer Workstation

Windows 7 offers a wealth of Windows C/C++ API features for developers. The Hilo Browser application has been developed using Visual C++ 2010 Express. The minimum machine configuration needed to install Visual C++ 2010 Express is:

Introducing Hilo

The first Hilo sample application—the Hilo Browser—implements a touch-enabled user interface for browsing and selecting photos and images. You can download the code for the Hilo Browser application from the MSDN Code Gallery. This article introduces you to the Hilo Browser application and to developing applications for Windows 7 by describing some of the tools and APIs that you can use. In subsequent articles, we’ll drill into the details of the Hilo Browser application.

Using Hilo