Porting Advanced User Interfaces from iOS* To Windows 8*

Abstract

This article discusses porting advanced user interface features from an iOS* app to a Microsoft* Store app. We use an Electronic Medical Record (EMR) application for this case study.

Introduction

In recent years, tablets, as new forms of mobile computing platforms, have quickly moved from the consumer electronics spaces into the business and enterprise computing domains. After the release of Windows* 8 operating systems earlier this year, we felt there was a need to provide some quick start tutorials for developers on how to port their existing apps from other platforms such as iOS to Windows 8, and start developing new apps on Intel Ultrabook™ devices, tablets, and other Intel® architecture-based devices running Windows 8. This article serves this objective and focuses on the advanced user interface topics.

On iOS, natively Objective-C* is the main development language. For Microsoft Store apps, you have multiple choices available, including Visual C#*, HTML / JavaScript*, and others. In this case study, we use Visual C# as the development language of choice.

From Xcode* 4 to Visual Studio* 2012

Like the Xcode* tools package on OS X* for iOS application developers, Visual Studio* 2012 provides an integrated development environment (IDE) for Microsoft Store app developers. Also like the Interface Building design tool on Xcode 4, which supports storyboarding (Figure 1), Visual Studio 2012 includes a XAML Designer tool (Figure 2).

interface builder in X code 4
Figure 1. The Interface Builder in Xcode 4

visual studio 2012 XAML desinger

Figure 2. Visual Studio 2012 XAML Designer

The Case Study Project

This article is one of a series based on a case study project. In the project (link to the folder of other articles based on this project), we ported a medical record management application from iOS to Windows 8. The basic requirements of the application include:

  • Show a list of patients
  • Show the personal and medical information of a specific patient, which includes identity, billing, vitals, lab tests, medical images, etc.
  • Display detailed graphs and images when selected

This article will cover the advanced UI features of the project.

High Level UI Design and Navigation Patterns

On iOS, we can use the split-view controller to present a master view and a detailed view on the screen. We can use table views or tab bar views to group different categories of information on the view. Figure 3 shows the split view along with the master table view and the detailed table view. The left panel of the split view shows the scrollable patient list. The right panel shows the medical records associated with the selected patient in the list. We use a table view to put the medical record categories on the same view. We can also use the tab bar view, with each tab view displaying a specific medical record category. Figure 4 shows how this view is created in Xcode 4 storyboard.


Figure 3. On iOS, a split view controller and its master table view and detailed table view

split view created in Scode
Figure 4. Use Xcode storyboard to create a split view and its master and detailed table views

In a Microsoft Store app, we can accommodate this design by following the Microsoft Store app hierarchical system of navigation pattern (Figure 5). The first level page shows a grid view that includes a tile for each patient (Figure 6). The second level page is a grouped item page that includes the medical records for the patient selected from the first level page (Figure 7). The third level page is a group detail page that shows the specific category of medical records selected from the second level page (Figure 8). We can also have a fourth level page that shows the item details, for example, the actual X-ray image selected from the third level page.

windows storae app hierarchical system
Figure 5. Microsoft* Store app hierarchical system of navigation.

root level grid in the Microsoft* Store app
Figure 6. In the Microsoft Store app, the root level grid view includes tiles for the patient list.

medical records associeated with the patient
Figure 7. In the Microsoft Store app, the second level page shows the medical records associated with the selected patient.

group selected from the second level page
Figure 8. In the Microsoft Store app, the third level page shows the group selected from the second level page.

In Visual Studio 2012 projects, the UI page is defined with a XAML file, and a C# implementation file (.cs) associated with it. Because the transitions from one page to another page usually originate from user actions, for example, when a grid view item is pressed, naturally the event listeners are the places used to handle the navigations. The code bellow shows our first level page PatientsListPage where we define an ItemsGridView_ItemClick event listener.

    x:Name="pageRoot"
    x:Class="PRApp.PatientsListPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PRApp"
    xmlns:common="using:PRApp.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

…
<GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemsGridView"
            AutomationProperties.Name="Items"
            TabIndex="1"
            Grid.RowSpan="2"
            Padding="116,136,116,46"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            ItemTemplate="{StaticResource PatientsItemStyle1}"
            SelectionMode="None"
            IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemsGridView_ItemClick"/>    

…
</common:LayoutAwarePage>

The code bellow shows in PatientsListPage.xaml.cs, we implement the ItemsGridView_ItemClick method, which calls the Windows Runtime Frame.Navigate() method to create a second level page PatientGroupItemsPage object and show as the current page on screen. When we construct the PatientGroupItemsPage object, we pass in the clicked item, which is a PatientsViewModel object.

namespace PRApp
{
    /// <summary>
    /// A page that displays a collection of item previews. 
	/// In the Split Application this page
    /// is used to display and select one of the available groups.
/// </summary>

    public sealed partial class PatientsListPage :  PRApp.Common.LayoutAwarePage
    {        
…
        void ItemsGridView_ItemClick(object sender, ItemClickEventArgs e)
        {
            this.Frame.Navigate(typeof(PatientGroupItemsPage), ((PatientsViewModel)e.ClickedItem));
        }
…
    }
}

In the LoadState method in PatientGroupItemsPage.xaml.cs, we retrieve the patient object from this parameter and construct the Groups collection for the grid view data model.

/// <summary>

/// Populates the page with content passed during navigation. Any saved state is also

/// provided when recreating a page from a prior session.

/// </summary>

/// <param Title="navigationParameter">The parameter value passed to

/// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested.

/// </param>

/// <param Title="pageState">A dictionary of state preserved by this page during an earlier

/// session. This will be null the first time a page is visited.</param>

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)

{
    // TODO: Assign a collection of bindable groups to this.DefaultViewModel["Groups"]

    PatientsViewModel patient = (PatientsViewModel)navigationParameter;
    this.DefaultViewModel["Groups"] = pgipvm.GetGroups(_patient.id);
}

Windows Project Templates and Data Binding

In Figure 7 and Figure 8, items are grouped and shown nicely in the grid views. Visual Studio 2012 Microsoft Store project templates provide a powerful basis to construct these user interface pages. The predefined project templates include grouped items page, group detail page, item detail page, etc. We use the X-rays group detail page as an example here.

In Visual Studio 2012’s Solution Explorer window, right click the project name and select Add > New Item from the pop-up menu. Select Visual C# on the left panel. On the center panel, we see the list of the predefined page templates. Among those templates, we select Group Item Page. A preview of the template is shown on the right panel. We also enter a name for the page in the text box at the bottom of the dialog (Figure 9) and press the Add button. Visual Studio 2012 now generates a file named XRayImagesGroupDetailPage.xaml file and a file named XRayImagesGroupDetailPage.xaml.cs in the project.

add new item dialogue menu
Figure 9. Add New Item dialog shows the Window Store project templates.

If we inspect the generated XRayImagesGroupDetailPage.xaml file, we can see this page is bound to DefaultViewModel data context and the grid view items in this page are bound to the Items as the collection view source.

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="PRApp.XRayImagesGroupDetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PRApp"
    xmlns:common="using:PRApp.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">   
 <Page.Resources>

        <!-- Collection of items displayed by this page -- >
        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Items}"/>
    </Page.Resources>
…

In XRayImagesGroupDetailPage.xaml.cs, we can see XRayImagesGroupDetailPage is derived from PRApp.Common.LayoutAwarePage.

namespace PRApp

{

/// <summary>

/// A page that displays an overview of a single group, including a preview of the items

/// within the group.

/// </summary>

public sealed partial class XRayImagesGroupDetailPage : PRApp.Common.LayoutAwarePage

{…

In Visual Studio 2012, if we expand the Common folder generated under the project (Figure 10), we can see Visual Studio has generated a group of files under it. Among these files, LayoutAwarePage.cs contains the class that we derive the XRayImagesGroupDetailPage from.

common folder in the project
Figure 10. The Common folder in the project.

The Common folder also includes the BindableBase.cs file. We derive a data model for the view from this class. The code bellow provides the outlines of the XRayImagesGroupDetailPageViewModel class.

…

namespace PRApp.ViewModels
{
    public abstract class XRayImageDataCommon : BindableBase
    {
    }

    public class XRayImageDataItem : XRayImageDataCommon
    {
    }

    public class XRayImageDataGroup : XRayImageDataCommon
{
…
        private ObservableCollection<XRayImageDataItem> _items = new ObservableCollection<XRayImageDataItem>();
        public ObservableCollection<XRayImageDataItem> Items
        {
            get { return this._items; }
        }
    …

    }

    public sealed class XRayImagesGroupDetailPageViewModel
    {
        …
        public static XRayImageDataGroup GetGroup(string uniqueId)
        {
            …
        }
        …
    }

}
…

To connect the view and the data sources, in XRayImagesGroupDetailPage.xaml class’s LoadState method, we pass the PRApp.Common.BindableBase derived group and items object to DefaultViewModel.

…
        /// <summary>
        /// Populates the page with content passed during navigation.  Any saved state is also
        /// provided when recreating a page from a prior session.
        /// </summary>
        /// <param name="navigationParameter">The parameter value passed to
        /// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested.
        /// </param>
        /// <param name="pageState">A dictionary of state preserved by this page during an earlier
        /// session.  This will be null the first time a page is visited.</param>
        protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
        {
            // TODO: Assign a bindable group to this.DefaultViewModel["Group"]
            // TODO: Assign a collection of bindable items to this.DefaultViewModel["Items"]
            var group = XRayImagesGroupDetailPageViewModel.GetGroup((String) navigationParameter);
            this.DefaultViewModel["Group"] = group;
            this.DefaultViewModel["Items"] = group.Items;
        }
…

Conclusion

In this article, we used an EMR app to investigate how to port some advanced UI features from iOS to the new Microsoft Store app platforms. From this case study, we can see Windows Runtime provides a rich set of features and development tools for developing impressive UI features.

About the Author

Miao Wei is a software engineer with Intel Corporation’s Software and Services Group. He currently works on the Intel Atom™ Scale and Enabling projects. He has over 15 years of experience in developing mobile platforms, web browsers, location-based applications and services, digital map databases, and other software products.

Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.