Three20
Phillip Verheyden
Dallas Tech Fest

August 12, 2011
Who am I?

• Consultant for Credera
• ~12 months of iPhone experience
• Three20 contributor
Roadmap

• What is Three20 and why should I care?
• TTCatalog Demo
• PhotoGallery App demo
• Code!
• Closing thoughts
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
Why Three20?
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
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)
TTCatalog Demo
Our App
• Photo App
• Uses:
 • TTLauncherView
 • TTTableViewController
 • TTPhotoController
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)
TTLauncherView

• Comprised of TTLauncherItems
• Each item can contain a picture, title and
  open a view
• Mimics Springboard (except for folders)
TTModelViewController            TTTableViewDataSource                  TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)   TTURLRequestModel



MyTableViewController               MyDataSource                       MyModel
TTModelViewController            TTTableViewDataSource                  TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)   TTURLRequestModel



MyTableViewController               MyDataSource                       MyModel

     createModel
TTModelViewController             TTTableViewDataSource                 TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)   TTURLRequestModel



MyTableViewController               MyDataSource                       MyModel

     createModel           init
TTModelViewController             TTTableViewDataSource                 TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)   TTURLRequestModel



MyTableViewController               MyDataSource                       MyModel

     createModel           init                           init
TTModelViewController             TTTableViewDataSource                 TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)   TTURLRequestModel



MyTableViewController               MyDataSource                       MyModel

     createModel           init                           init



                                         load:more:
TTModelViewController             TTTableViewDataSource                  TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)    TTURLRequestModel



MyTableViewController               MyDataSource                        MyModel

     createModel           init                               init

                                       add self as delegate
                                          load:more:
TTModelViewController             TTTableViewDataSource                   TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)    TTURLRequestModel



MyTableViewController               MyDataSource                         MyModel

     createModel           init                               init

                                       add self as delegate
                                          load:more:                  load:more
TTModelViewController             TTTableViewDataSource                   TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)    TTURLRequestModel



MyTableViewController               MyDataSource                         MyModel

     createModel           init                               init

                                       add self as delegate
                                          load:more:                  load:more
TTModelViewController             TTTableViewDataSource                    TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)    TTURLRequestModel



MyTableViewController               MyDataSource                          MyModel

     createModel           init                               init

                                       add self as delegate
                                          load:more:                  load:more

                                                                     [request send]
TTModelViewController             TTTableViewDataSource                    TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)    TTURLRequestModel



MyTableViewController               MyDataSource                          MyModel

     createModel           init                               init

                                       add self as delegate
                                          load:more:                  load:more

                                                                     [request send]
TTModelViewController             TTTableViewDataSource                    TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)    TTURLRequestModel



MyTableViewController               MyDataSource                          MyModel

     createModel           init                               init

                                       add self as delegate
                                          load:more:                  load:more

                                                                     [request send]
                                                                                      WEB
TTModelViewController             TTTableViewDataSource                    TTModel




TTTableViewController   (TTListDataSource, TTSectionedDataSource)    TTURLRequestModel



MyTableViewController               MyDataSource                          MyModel

     createModel           init                               init

                                       add self as delegate
                                          load:more:                  load:more

                                                                     [request send]
                                                                                      WEB
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
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
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]
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]
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
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
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:
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
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
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
Conform
to protocol
To the code!
Where to go from
        here?

• Nimbus - https://github.com/jverkoey/
  nimbus
• Restkit - https://github.com/RestKit/RestKit
Closing Thoughts
• Phillip Verheyden
• @phillipuniverse
• http://www.phillipuniverse.com
• http://github.com/phillipuniverse
• pverheyden@credera.com,
  pverheyden@gmail.com
• http://blogs.credera.com

Leveraging the Three20 Framework for iPhone applications

  • 1.
  • 2.
    Who am I? •Consultant for Credera • ~12 months of iPhone experience • Three20 contributor
  • 4.
    Roadmap • What isThree20 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.
  • 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 ontop 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.
  • 10.
    Our App • PhotoApp • 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 ofTTLauncherItems • 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.
  • 36.
  • 37.
    Where to gofrom here? • Nimbus - https://github.com/jverkoey/ nimbus • Restkit - https://github.com/RestKit/RestKit
  • 39.
    Closing Thoughts • PhillipVerheyden • @phillipuniverse • http://www.phillipuniverse.com • http://github.com/phillipuniverse • pverheyden@credera.com, pverheyden@gmail.com • http://blogs.credera.com