Download Article
Download Porting Advanced User Interfaces From iOS* To Windows 8* [PDF 620KB]
Abstract
This article discusses porting advanced user interface features from an iOS app to a Windows Store app. We use an electronic medical record (EMR) application for this case study.
1 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 Windows 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.
1.1 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 Windows 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).
Figure 1. The Interface Builder in Xcode 4
Figure 2. Visual Studio 2012 XAML Designer
1.2 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.
2 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 pane of the split view shows the scrollable patient list. The right pane 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
Figure 4. Use Xcode storyboard to create a split view and its master and detailed table views
In a Windows Store app, we can accommodate this design by following the Windows 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.
Figure 5. Windows Store app hierarchical system of navigation.
Figure 6. In the Windows Store app, the root level grid view includes tiles for the patient list.
Figure 7. In the Windows Store app, the second level page shows the medical records associated with the selected patient.
Figure 8. In the Windows 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. Figure 9 shows our first level page PatientsListPage where we define an ItemsGridView_ItemClick event listener.
<common:LayoutAwarePage
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>
Figure 9 The GridView in PatientsListPage XAML file includes an ItemGsGridView_ItemClick event listener (**)
Figure 10 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));
}
…
}
}
Figure 10 PatientsListPage.cs implements the ItemsGridView_ItemClick event listener (**)
In the LoadState method in PatientGroupItemsPage.xaml.cs (Figure 11), 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);
}
Figure 11 The LoadState method of PatientGroupItemsPage.xaml.cs
3 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 Windows 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 pane. On the center pane, 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 pane. We also enter a name for the page in the text box at the bottom of the dialog (Figure 12), 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.
Figure 12 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 (Figure 13).
<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>
…
Figure 13 XRayImagesGroupDetailPage.xaml specifies the binding data source (**).
In XRayImagesGroupDetailPage.xaml.cs, we can see XRayImagesGroupDetailPage is derived from PRApp.Common.LayoutAwarePage (Figure 14).
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
{…
Figure 14 XRayImagesGroupDetailPage derives from LayoutAwarePage
In Visual Studio 2012, if we expand the “Common” folder generated under the project (Figure 15), 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.
Figure 15 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. Figure 16 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)
{
…
}
…
}
}
…
Figure 16 XRayImagesGroupDetailPageViewModel.cs, which the group and item classes derived from BindableBase class (**)
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 (Figure 17).
…
/// <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;
}
…
Figure 17. In XRayImagesGroupDetailPage.cs, the view items are connected with the data source in the LoadState method. (**)
4 Summary
In this article, we used an EMR app to investigate how to port some advanced UI features from iOS to the new Windows 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.
*Other names and brands may be claimed as the property of others.
Copyright © 2012 Intel Corporation. All rights reserved.
OpenGL is a registered trademark and the OpenGL ES logo is a trademark of Silicon Graphics Inc. used by permission by Khronos.