using view controllers wisely

Download Using view controllers wisely

Post on 15-May-2015

1.488 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. Using view controllerswiselySamuel Dfago, le studioOctober 2011

2. Who am I? iOS developer atle 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. Motivations VCs are fundamental iOS objects, ... ... are used and implemented every day... ... but are often misused and abused When correctly used, they lead to morereliable applications and superior code 4. Goals Learn how to organize VCs in applications Understand how to use containers Avoid common pitfalls and errors 5. Misused? Abused? Messy implementation Incorrect resource management Often only slightly superior to Xcodetemplates (i.e. slightly superior to void) Poor separation of concerns, big balls ofmud Monolithic application workow 6. yep,here Topics Havealookinthecorner toknowwhichtopicwe aretalkingabout Overview of view controllerscontainers Using view controllers in an application Anatomy of containers 7. What is a view controller? is a controller: Bi-directionalcommunication channel between view andmodel (MVC) has a view:View hierarchy management(lifecycle, orientation, low-memoryconditions) Manages the content of one screen or ofone part of a screen Subclass to create custom view controllers 8. What is a container? Is an object managing a set of viewcontrollers In general used as-is, not meant to besubclassed Helps managing the view controllerhierarchy, i.e. the application workow... ... but only the workow it implements 9. UINavigationController Navigation bar at the top Push from right / left animations only 10. UITabBarController Tabs at the bottom Must be application root VC or root inmodal 11. Criticism Few built-in containers... ... i.e. few well-supported workows(navigation, tabs, modal, split content) This is annoying on iPad (emphasis oncreative interfaces, use of both hands), lesson iPhone (skinned interfaces, one handusually sufces) 12. An iPad shoppingapplication Application to buy items from some onlinestore on the iPad Three people involved: Product owner: Requirements UI / UX designer: Designinteraction Programmer: Write the application 13. Product owner I want the customer to be able to browseproducts and their descriptions I want the customer to be able to additems to its cart I want the customer to be able to accessits cart and to submit an order 14. UI / UX designer (1) 15. UI / UX designer (2) 16. Programmer:VCsShoppingViewControllerProduct-ProductList- ViewControllerViewControllerShoppingViewController ShoppingViewControllerCartItemList- Stayin BillingInformation-ViewController carttabViewController 17. Programmer: Workow retains VC andaddSubview:ShoppingViewControllerProductListViewController presentModalViewController:showShop:showDetails: animated:showCart: retains VC and ProductViewController addSubview:checkout:close: CartItemListViewController goBackwards:dismissModalViewControllershowDetails:Animated:presentModalViewController: checkout: animated: BillingInformationViewController retains VC andaddSubview:submitOrder:goBackwards: IBAction 18. Demo 19. Criticism No transparency when displaying productdetails ShoppingViewController manages almostall application workow Seems to work, but does it REALLY work? 20. Analyzing the shoppingapplication Use VCs logging all lifecycle and rotationevents Navigate the application Rotate the device Simulate memory warnings Check the logs 21. Log archaeology (1) Click on Shop tab, then on Cart tab: Show product details 22. Log archaeology (2) retains VC andaddSubview:ShoppingViewControllerProductListViewController presentModalViewController:showShop:showDetails: animated:showCart: retains VC and ProductViewController addSubview:checkout:close: CartItemListViewController goBackwards:dismissModalViewControllershowDetails:Animated:presentModalViewController: checkout: animated: BillingInformationViewController retains VC andaddSubview:submitOrder: View lifecycle and rotation OKgoBackwards: View lifecycle and rotation KO 23. Conclusion Creating a view controllers hierarchy usingaddSubview: leads to incorrect behavior View lifecycle and rotation events are notemitted automagically The root and modal view controllers have aproper behaviorAlways use containers to manage yourview controller hierarchy 24. Custom containers Custom containers are needed for morecreative workows Using custom containers must be easy... ... but writing custom containers is hard 25. Elementary containers Writing containers is hard... ... so write few correct elementarycontainers... ... and combine them to create newworkows... ... or even new containers! 26. Placeholders Embed some other view controllers Display VCs simultaneously Can display other UI elements VC1 VC1VC1VC3 VC2 VC2 1-placeholder 2-placeholder3-placeholder 27. Stack Manage a stack of view controllers Usually only display the top VC Fill the whole view, no other UI elements VC4 VC1VC1VC1 28. Combinations (1) VC1= custom UITabBarController1-placeholder 29. Combinations (2) +VC4VC1 VC1 VC1 VC1 stack1-placeholder = custom UINavigationController 30. Combinations (3)VC1 VC22-placeholder = resizable UISplitViewController 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. Demo 33. iShopping revisitedShoppingViewController(PH) stackProduct- ProductList- ViewController ViewControllerShoppingViewController(PH) ShoppingViewController(PH) CartItemList- BillingInformation- stackViewController ViewController 34. Buggy workow retains VC andaddSubview:ShoppingViewControllerProductListViewController presentModalViewController:showShop:showDetails: animated:showCart: retains VC and ProductViewController addSubview:checkout:close: CartItemListViewController goBackwards:dismissModalViewControllershowDetails:Animated:presentModalViewController: checkout: animated: BillingInformationViewController retains VC andaddSubview:submitOrder:goBackwards: 35. Fixed workowShoppingViewController (stack rootplaceholder) ProductListViewControllerpushViewController: showShop: showDetails:setInsetViewController:showCart:ProductViewController pushViewController: close:popViewController: CartItemListViewController(stack root)showDetails: checkout: BillingInformationViewController pushViewController:submitOrder:goBackwards: StackControllerpopViewController:StackController 36. Demo 37. Log archaeology Click on Cart tab when on Shop tab: Show product details 38. Summary Never ever display a view controller byadding its view as subview directly Design your view controller workow, andmanage it using view controller containers Use the view controller lifecycle correctlyto insert your code where mostappropriate 39. Thanks for your attention 40. Questions?