This is a sample application for using some advanced features from the Three20 library, originally put out by Facebook. This presentation was given at Dallas Tech Fest 2011. For the source code, please visit http://github.com/phillipuniverse/PhotoGalleryThree20

1. Three20
Phillip Verheyden
Dallas Tech Fest
August 12, 2011

2. Who am I?
• Consultant for Credera
• ~12 months of iPhone experience
• Three20 contributor

4. Roadmap
• What is Three20 and why should I care?
• TTCatalog Demo
• PhotoGallery App demo
• Code!
• Closing thoughts

5. What is Three20?
• Framework of views, helpers, paradigms in
Objective-C built on top of iOS
• Heavy focus on network access
• Brought to you by: Facebook™
• Takes out large amount iOS boilerplate
code

6. Why Three20?

7. Features
• Custom views like a launcher view (mimics Springboard)and a photo gallery
controller
• Asynchronous URL loading + robust disk cache
• Customized table cells
• Internet-aware table views
• URL-based navigation
• Global Styling

8. Extensions
• Built on top of Three20
• extThree20CSSStyle - use CSS to style
your app
• extThree20JSON - shortcut for parsing
JSON (uses SBJSON or YAJL)
• extThree20XML - rudimentary XML
marshaling (uses NSXMLParser)

9. TTCatalog Demo

10. Our App
• Photo App
• Uses:
• TTLauncherView
• TTTableViewController
• TTPhotoController

11. Server Code Layout
• 2 categories: ATVs, Sports
• Each gallery has an arbitrary number of
albums (specified in XML)
• Each album has an arbitrary number of
Photos (specified in XML)

12. TTLauncherView
• Comprised of TTLauncherItems
• Each item can contain a picture, title and
open a view
• Mimics Springboard (except for folders)

13. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel

14. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel

15. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init

16. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init

17. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
load:more:

18. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more:

19. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more

20. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more

21. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]

22. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]

23. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
WEB

24. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
WEB

25. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
request:did(Finish,
WEB
Fail)Load

26. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
request:did(Finish,
WEB
Fail)Load

27. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
request:did(Finish,
WEB
Fail)Load
[super request:request
did(Finish, Fail)Load]

28. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
request:did(Finish,
WEB
Fail)Load
[super request:request
modelDidFinishLoad:self did(Finish, Fail)Load]

29. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
request:did(Finish,
WEB
Fail)Load
[super request:request
modelDidFinishLoad:self did(Finish, Fail)Load]
tableViewDidLoadModel:self

30. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
request:did(Finish,
WEB
Fail)Load
[super request:request
modelDidFinishLoad:self did(Finish, Fail)Load]
tableViewDidLoadModel
tableViewDidLoadModel:self - create TTTableItems based on
model results

31. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
request:did(Finish,
WEB
Fail)Load
[super request:request
modelDidFinishLoad:self did(Finish, Fail)Load]
tableViewDidLoadModel
tableViewDidLoadModel:self - create TTTableItems based on
model results
cellForRowAtIndexPath:

32. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
request:did(Finish,
WEB
Fail)Load
[super request:request
modelDidFinishLoad:self did(Finish, Fail)Load]
tableViewDidLoadModel
tableViewDidLoadModel:self - create TTTableItems based on
model results
cellClassForObject:
cellForRowAtIndexPath: - provide TTTableCell from
TTTableItem

33. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
request:did(Finish,
WEB
Fail)Load
notify delegates
[super request:request
modelDidFinishLoad:self did(Finish, Fail)Load]
tableViewDidLoadModel
tableViewDidLoadModel:self - create TTTableItems based on
model results
cellClassForObject:
cellForRowAtIndexPath: - provide TTTableCell from
TTTableItem

34. TTModelViewController TTTableViewDataSource TTModel
TTTableViewController (TTListDataSource, TTSectionedDataSource) TTURLRequestModel
MyTableViewController MyDataSource MyModel
createModel init init
add self as delegate
load:more: load:more
[request send]
request:did(Finish,
WEB
Fail)Load
notify delegates
[super request:request
modelDidFinishLoad:self did(Finish, Fail)Load]
tableViewDidLoadModel
tableViewDidLoadModel:self - create TTTableItems based on
model results
cellClassForObject: * - bold and underlined
cellForRowAtIndexPath: - provide TTTableCell from notates methods to
TTTableItem overwrite

35. Conform
to protocol

36. To the code!

37. Where to go from
here?
• Nimbus - https://github.com/jverkoey/
nimbus
• Restkit - https://github.com/RestKit/RestKit

39. Closing Thoughts
• Phillip Verheyden
• @phillipuniverse
• http://www.phillipuniverse.com
• http://github.com/phillipuniverse
• pverheyden@credera.com,
pverheyden@gmail.com
• http://blogs.credera.com