Using view controllers wisely

1,805 views

Published on

The slides for the talk given at the SoftShake 2011 event in Geneva (October 2011, www.soft-shake.ch)

Published in: Technology, Business
  • Be the first to comment

Using view controllers wisely

  1. 1. Using view controllers wisely Samuel Défago, le studio October 2011
  2. 2. Who am I?• iOS developer at le studio (www.hortis.ch)• Mail: defagos (at) gmail (dot) com• Twitter: @defagos• Blog: http://subjective-objective- c.blogspot.com/• Open-source: https://github.com/defagos
  3. 3. Motivations• VCs are fundamental iOS objects, ...• ... are used and implemented every day...• ... but are often misused and abused• When correctly used, they lead to more reliable applications and superior code
  4. 4. Goals• Learn how to organize VCs in applications• Understand how to use containers• Avoid common pitfalls and errors
  5. 5. Misused? Abused?• Messy implementation• Incorrect resource management• Often only slightly superior to Xcode templates (i.e. slightly superior to void)• Poor separation of concerns, big balls of mud• Monolithic application workflow
  6. 6. yep,here Topics Havealookinthecorner toknowwhichtopicwe aretalkingabout• Overview of view controllers containers• Using view controllers in an application• Anatomy of containers
  7. 7. What is a view controller?• is a controller: Bi-directional communication channel between view and model (MVC)• has a view:View hierarchy management (lifecycle, orientation, low-memory conditions)• Manages the content of one screen or of one part of a screen• Subclass to create custom view controllers
  8. 8. What is a container?• Is an object managing a set of view controllers• In general used as-is, not meant to be subclassed• Helps managing the view controller hierarchy, i.e. the application workflow...• ... but only the workflow it implements
  9. 9. UINavigationController• Navigation bar at the top• Push from right / left animations only
  10. 10. UITabBarController• Tabs at the bottom• Must be application root VC or root in modal
  11. 11. Criticism• Few built-in containers...• ... i.e. few well-supported workflows (navigation, tabs, modal, split content)• This is annoying on iPad (emphasis on creative interfaces, use of both hands), less on iPhone (skinned interfaces, one hand usually suffices)
  12. 12. An iPad shopping application• Application to buy items from some online store on the iPad• Three people involved: • Product owner: Requirements • UI / UX designer: Design interaction • Programmer: Write the application
  13. 13. Product owner• “I want the customer to be able to browse products and their descriptions”• “I want the customer to be able to add items to its cart”• “I want the customer to be able to access its cart and to submit an order”
  14. 14. UI / UX designer (1)
  15. 15. UI / UX designer (2)
  16. 16. Programmer:VCsShoppingViewController Product- ProductList- ViewController ViewControllerShoppingViewController ShoppingViewController CartItemList- Stayin BillingInformation- ViewController carttab ViewController
  17. 17. Programmer: Workflow retains VC and addSubview:ShoppingViewController ProductListViewController presentModalViewController: showShop: showDetails: animated: showCart: retains VC and ProductViewController addSubview: checkout: close: CartItemListViewController goBackwards: dismissModalViewController showDetails: Animated: presentModalViewController: checkout: animated: BillingInformationViewController retains VC and addSubview: submitOrder: goBackwards: IBAction
  18. 18. Demo
  19. 19. Criticism• No transparency when displaying product details• ShoppingViewController manages almost all application workflow• Seems to work, but does it REALLY work?
  20. 20. Analyzing the shopping application• Use VCs logging all lifecycle and rotation events• Navigate the application• Rotate the device• Simulate memory warnings• Check the logs
  21. 21. Log archaeology (1)• Click on Shop tab, then on Cart tab:• Show product details
  22. 22. Log archaeology (2) retains VC and addSubview:ShoppingViewController ProductListViewController presentModalViewController: showShop: showDetails: animated: showCart: retains VC and ProductViewController addSubview: checkout: close: CartItemListViewController goBackwards: dismissModalViewController showDetails: Animated: presentModalViewController: checkout: animated: BillingInformationViewController retains VC and addSubview: submitOrder: View lifecycle and rotation OK goBackwards: View lifecycle and rotation KO
  23. 23. Conclusion• Creating a view controllers hierarchy using addSubview: leads to incorrect behavior• View lifecycle and rotation events are not emitted automagically• The root and modal view controllers have a proper behavior Always use containers to manage your view controller hierarchy
  24. 24. Custom containers• Custom containers are needed for more creative workflows• Using custom containers must be easy...• ... but writing custom containers is hard
  25. 25. Elementary containers• Writing containers is hard...• ... so write few correct elementary containers...• ... and combine them to create new workflows...• ... or even new containers!
  26. 26. Placeholders• Embed some other view controllers• Display VCs simultaneously• Can display other UI elements VC1 VC1 VC1 VC3 VC2 VC2 1-placeholder 2-placeholder 3-placeholder
  27. 27. Stack• Manage a stack of view controllers• Usually only display the top VC• Fill the whole view, no other UI elements VC4 VC1 VC1 VC1
  28. 28. Combinations (1) VC1 = custom UITabBarController1-placeholder
  29. 29. Combinations (2) + VC4 VC1 VC1 VC1 VC1 stack1-placeholder = custom UINavigationController
  30. 30. Combinations (3)VC1 VC2 2-placeholder = resizable UISplitViewController
  31. 31. Implementation• CoconutKit (https://github.com/defagos/ CoconutKit): • HLSPlaceholderViewController • HLSStackController• Technical details: http://subjective-objective- c.blogspot.com/2011/08/writing-high- quality-view-controller.html
  32. 32. Demo
  33. 33. iShopping revisitedShoppingViewController(PH) stack Product- ProductList- ViewController ViewControllerShoppingViewController(PH) ShoppingViewController(PH) CartItemList- BillingInformation- stack ViewController ViewController
  34. 34. Buggy workflow retains VC and addSubview:ShoppingViewController ProductListViewController presentModalViewController: showShop: showDetails: animated: showCart: retains VC and ProductViewController addSubview: checkout: close: CartItemListViewController goBackwards: dismissModalViewController showDetails: Animated: presentModalViewController: checkout: animated: BillingInformationViewController retains VC and addSubview: submitOrder: goBackwards:
  35. 35. Fixed workflow ShoppingViewController (stack root placeholder) ProductListViewController pushViewController: showShop: showDetails: setInsetViewController: showCart: ProductViewController pushViewController: close: popViewController: § CartItemListViewController (stack root) showDetails: checkout: BillingInformationViewController pushViewController: submitOrder: goBackwards: StackController popViewController:StackController
  36. 36. Demo
  37. 37. Log archaeology• Click on Cart tab when on Shop tab:• Show product details
  38. 38. Summary• Never ever display a view controller by adding its view as subview directly• Design your view controller workflow, and manage it using view controller containers• Use the view controller lifecycle correctly to insert your code where most appropriate
  39. 39. Thanks for your attention
  40. 40. Questions?

×