Macbook Pro Touch Bar

Apple presented the new MacBooks with a new input device that provides dynamic interface controls for interacting with applications.

In this blogpost we will talk about our experience of using the new API.

touch_bar_2x

Our application has a dedicated region inside the bar called “App region”.

The user can configure the Touch Bar by adding or removing items.

The main design guidelines from Apple are that it should:

  • be relevant to the current context
  • act as an input device, not a secondary display
  • resemble the appearance of physical keyboard keys
  • be possible to perform tasks using the keyboard or trackpad
  • provide quick access to actions
  • be responsive to the user’s touch
  • not be well-known keyboard shortcuts
  • reflect state consistently
  • not mirror the main screen

The main class to customise the Touch Bar is called NSTouchBar. This is an object that provides dynamic contextual controls in the Touch Bar. This contains items called NSTouchBarItem.

Apple provides two sample projects on how to use the Touch Bar:

NSTouchBar Catalog: Shows how to create bars and items for use in the Touch Bar

NSToolBar Sample: Shows how to add Touch Bar support to a typical Mac app

The first problem we had was that the instructions to show and hide the Touch Bar simulator were not complete. The problem was that the option was not present.

You need to have not only Xcode 8.1 but also this update to run the Touch Bar simulator.

After this on Xcode you can activate the Touch Bar simulator by pressing [Cmd + Shift + 5].

The simplest way to provide an interface on the bar are 4:

  1. override the makeTouchBar method of NSWindowController, this method should create the NSTouchBar instance and set the correct identifiers of the items you want to draw;
  2. conform to the NSTouchBarDelegate protocol and create the NSTouchBarItem the framework is asking for with the identifier;
  3. add a static constant to NSTouchBarCustomizationIdentifier with the id of the Touch Bar you intend to customise;
  4. add a static constant to NSTouchBarItemIdentifier with the id of all the Touch Bar Items present in your Touch Bar;

The spike we did started with a simple “Hello Touch Bar” where we drawn this words in a custom view on the Touch Bar.

After that we did a two way communication with the bar using a button that showed how many times the button in the bar was clicked.

Here are the results:

screen-shot-2016-11-01-at-21-13-58

screen-shot-2016-11-01-at-21-16-31

screen-shot-2016-11-01-at-21-16-38

The project is available at our GitHub.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s