Touch Bar And Your App

Patrick shares with how it's been living with the new MacBook Pro TouchBar and how you can add support for it in your Mac app.

Example App: https://github.com/mccarron/McTouchBar

Links:

Apple's Touch Bar Documentation
https://developer.apple.com/macos/touch-bar/

Apple's NSTouchbar Catalog
https://developer.apple.com/library/content/samplecode/NSTouchBarCatalog/Introduction/Intro.html

Apple's Toolbar Sample
https://developer.apple.com/library/content/samplecode/ToolbarSample/Introduction/Intro.html

Red Sweater's Touche
https://red-sweater.com/touche/

Touch Bar iPad Demo App
https://github.com/bikkelbroeders/TouchBarDemoApp

Duet Display
https://www.duetdisplay.com

9to5 Mac's Touch Bar Tips and Tricks
https://www.youtube.com/watch?v=aU2eqKO-Fz4&ab_channel=9to5Mac

VLC's Touchbar Issue Ticket
https://trac.videolan.org/vlc/ticket/17727

Chrome's Touchbar Issue Ticket
https://bugs.chromium.org/p/chromium/issues/detail?id=660126#c38

Transcript

1. TOUCH BAR YOUR APP THIS VALENTINES DAY LEARN HOW TO Patrick McCarron McCarron
2. TOUCH BAR? WHAT IS THE…
6. TOUCH BAR YOUR APP TOUCH BAR TECH SPECS ▸ OLED Multitouch Screen (Resolution 2170px x 60px) ▸ Touch ID Sensor on Right ▸ T1 ARM Chip (“Secure Enclave”) ▸ Like Apple Watch’s S1 ▸ May run fork of watchOS ▸ T1 controls Bar, Touch ID & Camera
7. TOUCH BAR YOUR APP WHERE CAN I GET ONE? ▸ 2016 MacBook Pro 13” ▸ 2016 MacBook Pro 15” ▸ That’s it…
8. TOUCH BAR YOUR APP WHAT MACS HAVE ONE? ▸ 2016 MacBook Pro 13” ▸ 2016 MacBook Pro 15” ▸ That’s it… ▸ … or is it?
9. ANY MAC!
10. WITH IPAD TOO!
11. TOUCH BAR YOUR APP TOUCH BAR FUTURE? ▸ The new non-Pro MacBook will likely get one ▸ Standard is doubtful due to +$$$ ▸ Desktop Macs? ▸ Added cost $$$ ▸ External USB-C? ▸ Wireless Fast Enough?
12. TIPS & TRICKS BEST BAR TOUCHING
13. TOUCH BAR YOUR APP TIPS & TRICKS ▸ Most App’s Bars Can Be Customized from View menu
14. TOUCH BAR YOUR APP TIPS & TRICKS ▸ Tap & Slide on Popovers!
15. TOUCH BAR YOUR APP TIPS & TRICKS ▸ Make Function Keys always show per App
16. TOUCH BAR YOUR APP TIPS & TRICKS ▸ Always show expanded Control Strip setting ▸ Save screenshot of Touch Bar ⇧⌘6
17. TOUCH BAR YOUR APP TIPS & TRICKS ▸ Video scrubber always available in any app when playing by hitting "Graph Bar" icon on Control Strip ▸ Answer/Screen Phone Calls
18. TOUCH BAR YOUR APP TIPS & TRICKS ▸ Skip Youtube Ads with Scrubber!
19. TOUCH WITH TODAY? WHAT APPS CAN I GET IN
20. TOUCH BAR YOUR APP APPS WITH TOUCH BAR SUPPORT ▸ Almost All Apple Apps ▸ Keynote ▸ Photos ▸ Messages
21. TOUCH BAR YOUR APP APPS WITH TOUCH BAR SUPPORT ▸ Xcode ▸ Notes ▸ Calculator
22. TOUCH BAR YOUR APP APPS WITH TOUCH BAR SUPPORT ▸ Sketch ▸ Photoshop ▸ Pixelmator
23. TOUCH BAR YOUR APP APPS WITH TOUCH BAR SUPPORT ▸ 1Password ▸ Spotify ▸ Boot Camp Window driver support too! ▸ Fun Demo Time!
24. TOUCH BAR YOUR APP MISSING POPULAR APPS? ▸ List shrinking monthly… ▸ Slack ▸ Chrome (coming soon) ▸ Microsoft Office (coming soon) ▸ VLC (needs developers *hint hint*) ▸ BBEdit ▸ Sublime Text ▸ Tweetbot
25. YOUR MAC APP LETS TOUCH UP
26. TOUCH BAR YOUR APP HIG CLIFF’S NOTES ON UX ▸ Not a display ▸ Contextual functions improve usefulness ▸ Have functions also in your app, not Touch Bar exclusive ▸ Respond immediately, always ▸ If you can start something on Touch Bar allow user to finish there. ▸ Use of Alt Text and Customization Labels for Voice Over ▸ Use Multi-touch sparingly, hard for user to do.
27. TOUCH BAR YOUR APP HIG CLIFF’S NOTES ON DESIGN ▸ Design with the assumption that the Control Strip is visible ▸ Match design to physical keyboard ▸ Use defined system colors to match System Bar items ▸ Avoid Animation, Limit Color Use ▸ Touch Bar default font is a variant of San Francisco controlColor labelColor secondaryLabelColor tertiaryLabelColor quaternaryLabelColor
28. TOUCH BAR YOUR APP TOUCH BAR LAYOUTS Fluid 1 Principal 2 Principals 3 Principals
29. TOUCH BAR YOUR APP FREE SYSTEM ICONS FOR TOUCH BAR
30. TOUCH BAR YOUR APP NSTOUCHBARITEMS ▸ Button ▸ Toggle ▸ Candidate Lists
31. TOUCH BAR YOUR APP NSTOUCHBARITEMS ▸ Character Picker ▸ Color Picker ▸ Popover ➡ ➡ ➡
32. TOUCH BAR YOUR APP NSTOUCHBARITEMS ▸ Scrubber ▸ Segmented Control ▸ Slider ▸ Misc Others ▸ And of course…
33. TOUCH BAR YOUR APP NSTOUCHBARITEMS ▸ CUSTOM! 
 Add any NSView subclass to an NSTouchBarItems
34. TOUCH BAR YOUR APP GIVING YOUR CONTROLLER A TOUCH BAR ▸ Every NSViewController can have it’s own NSTouchBar ▸ Be a NSResponder in responder chain ▸ Class must conform to NSTouchBarProvider ▸ Implement makeTouchBar() in your Protocol class that returns a NSTouchBar ▸ Every NSTouchBar contains an array of NSTouchBarItems
35. TOUCH BAR YOUR APP INFORM APPDELEGATE func applicationDidFinishLaunching(_ aNotification: Notification) { if #available(OSX 10.12.2, *) { NSApplication.shared().isAutomaticCustomizeTouchBarMenuItemEnabled = true } }
36. TOUCH BAR YOUR APP SETUP WINDOW CONTROLLER @available(OSX 10.12.2, *) override func makeTouchBar() -> NSTouchBar? { if let controller = contentViewController as? ViewController { return controller.makeTouchBar() } //Handle other view controller touch bars here return nil }
37. TOUCH BAR YOUR APP SETUP NSTOUCHBAR ITEM IDENTIFIERS fileprivate extension NSTouchBarCustomizationIdentifier { static let touchBar = NSTouchBarCustomizationIdentifier("com.mccarron.touchBar") } fileprivate extension NSTouchBarItemIdentifier { static let sharingPicker = NSTouchBarItemIdentifier("com.mccarron.sharing") static let button = NSTouchBarItemIdentifier("com.mccarron.button") static let sizeSlider = NSTouchBarItemIdentifier("com.mccarron.slider") }
38. TOUCH BAR YOUR APP IMPLEMENT MAKETOUCHBAR() FUNCTION @available(OSX 10.12.2, *) override func makeTouchBar() -> NSTouchBar? { let mainBar = NSTouchBar() mainBar.delegate = self mainBar.customizationIdentifier = .touchBar // Default Bar Items mainBar.defaultItemIdentifiers = [.button, .sizeSlider] // Items you allow to be chosen for customization mainBar.customizationAllowedItemIdentifiers = [.sharingPicker] // This item will be centered mainBar.principalItemIdentifier = .sizeSlider return mainBar }
39. TOUCH BAR YOUR APP IMPLEMENT MAKEITEMFORIDENTIFIER DELEGATE func touchBar(_ touchBar: NSTouchBar, makeItemForIdentifier identifier: NSTouchBarItemIdentifier) -> NSTouchBarItem? { switch identifier { case NSTouchBarItemIdentifier.button: let buttonItem = NSCustomTouchBarItem(identifier: identifier) let button = NSButton(title: "Reset", target: self, action: #selector(reset)) buttonItem.view = button return buttonItem case NSTouchBarItemIdentifier.sizeSlider: let sliderItem = NSSliderTouchBarItem(identifier: identifier) sliderItem.label = "Size" let slider = sliderItem.slider slider.target = self slider.action = #selector(changeFontSize) slider.minValue = 1.0 slider.maxValue = 250.0 slider.integerValue = defaultSize return sliderItem default: return nil } }
40. TOUCH BAR YOUR APP NOW CONSIDER YOURSELF TOUCH BAR’ED ▸ Hook up the Selectors and you are good to! ▸ Quick Demo
41. TOUCH BAR YOUR APP IB CAN HAVE FUN WITH NSTOUCHBARS TOO!
42. TOUCH BAR YOUR APP NO TOUCH BAR? USE XCODE’S SIMULATOR ▸ You can launch the Touch Bar simulator from Xcode’s Window menu.
43. TOUCH BAR YOUR APP TOUCH ID ▸ Use the LocalAuthentication Framework ▸ 1Password has the best example of how to handle it in your app
44. FINAL THOUGHTS LET ME TOUCH ON SOME
45. TOUCH BAR YOUR APP FINAL THOUGHTS ▸ Like the Touch Bar overall. ▸ Would like to see wider machine adoption to encourage developer adoption. ▸ HATE the odd space on the left next to ESC. ▸ LOVE Touch ID. More devs will hopefully use it. Wish Mac 
 knew when it’s lid was closed.
46. Slides: 
 speakerdeck.com/McCarron Demo Source & Links:
 github.com/mccarron/McTouchBar TOUCH BAR YOUR APP Patrick McCarron McCarron