Windows UI Components and Conventions

Introduction

In this section, you will learn some of the user interface and user experience components that are specific to Windows.

Back Button

Windows phones have a hardware back button allowing you to go to the previous opened window.  However, Windows tablets do not have a hardware back button.  If you rely on the back button for navigation, you will need to implement a navigation element, such as a software back button, for Windows tablets if you choose to support it.

To distinguish between the Windows Phone OS and Windows OS, the Titanium.Platform.osname property will return windowsphone if the application is running on a Windows Phone device or windowsstore if the application is running on a device running the Windows OS.

In Alloy, use the formFactor attribute to distinguish between a phone (set to handheld) or tablet (set to tablet). 

<Alloy>
    <Window>
        <Button formFactor="tablet" onClick="closeWindow">Back</Button>
    </Window>
</Alloy>

As of 5.0.0 of the SDK, you can create an event that can prevent accidental closure of the app due to hitting the back button to many times. 

var win = Ti.UI.createWindow(
	{ // some code... }
);
// more code
win.addEventListener("windows:back", function()
	{ alert("Back pressed"); }
);

Command Bar

The command bar displays a row of buttons the user can tap to invoke additional functionality with your application (similar to the Action Bar in Android or Toolbar in iOS).  On a phone, the command bar always appears at the bottom of the application, and on a tablet, the user needs to tap the More icon ([...]) to reveal the command bar.  If you are testing locally on your Windows computer, right-click on the application to reveal the command bar.

Windows Phone app

Windows Store app
  • Buttons are centered
  • Room for only four buttons
  • Command bar is always present

  • Buttons are right-aligned
  • Room for more than four buttons
  • Command bar must be revealed by the user

 

To create a command bar:

  1. Create buttons and separator objects using the following methods:
  2. Pass an array of button and separator objects to the items property when creating a command bar with the Titanium.UI.Windows.createCommandBar() method.  Note that on the phone only four buttons can be displayed.
  3. Add the command bar to a Titanium.UI.Window object.
var backButton = Ti.UI.Windows.createAppBarButton({
        icon: Ti.UI.Windows.SystemIcon.BACK
    }),
    likeButton = Ti.UI.Windows.createAppBarToggleButton({
        icon: Ti.UI.Windows.SystemIcon.LIKEDISLIKE
    }),
    forwardButton = Titanium.UI.Windows.createAppBarButton({
        icon: Ti.UI.Windows.SystemIcon.FORWARD
    }),
    commandBar = Ti.UI.Windows.createCommandBar({
        items: [backButton, likeButton, forwardButton]
    }),
    win = Ti.UI.createWindow();
win.add(commandBar);
win.open();

Asset Qualifiers

Windows provides different qualifiers to select which assets to use.  The qualifiers can be used to support devices with different screen sizes, contrast themes, layout directions, languages, regions, etc.

For information about using qualifiers, see Windows Asset Qualifiers.

Related Links