Tutorial App

I would suggest creating a second app, which will have code examples that won't be used in the superapp.

I don't think we will need Collection Views in the mood app, so we will implement them in a tutorial_app. Let's run motion create tutorial_app, and add ProMotion, motion-kit and sugarcube gems. To make the app look better, let's also copy device_family, icons and resources_dir code from Rakefile. To make it work, we will also need to copy a content of the /superapp/resources folder into /tutorial_app/resources. Now when app initialization is finished, let's init git repository there:

        git init
        git add .
        git commit -m "init"
      

The tutorial app will open a table view that will have all available code examples. First one will be a CollectionView. First, let's prepare the folder structure: /app/screens /app/layouts /app/layouts/screens /app/layouts/cells /app/models. Now let's create layouts for our HomeScreen and HomeCell. HomeCellLayout will have only one label right in the center of the cell:

        class HomeCellLayout < MotionKit::Layout
          def layout
            root :cell do
              add UILabel, :title
            end
          end

          def title_style
            font          "Helvetica".uifont(16)
            text_color    0x000000.uicolor
            numberOfLines 1

            constraints do
              center_y.equals(:superview, :center_y)
              left.equals(:superview, :left).plus(15)
            end
          end
        end
      
HomeScreenLayout will have only a full-screen table view:
        class HomeScreenLayout < MotionKit::Layout
          def layout
            add UITableView, :table
          end

          def table_style
            constraints do
              x 0
              y 0
              right.equals(:superview, :right)
              bottom.equals(:superview, :bottom)
            end
          end
        end
      
Let's create a cell now, that will use HomeCellLayout, and will have one method that sets cell's title title=:
        class HomeCell < UITableViewCell
          def initWithStyle(style, reuseIdentifier:reuseIdentifier)
            super

            @layout = HomeCellLayout.new(root: self.contentView).build
            @title = @layout.get(:title)

            self
          end

          def title=(text)
            @title.text = text
          end
        end
      
Then create a HomeScreen, that will use HomeScreenLayout:
        class HomeScreen < PM::Screen
          # set screen's title:
          title "Home"

          def load_view
            # tell it which layout we are going to use:
            @layout = HomeScreenLayout.new
            self.view = @layout.view
          end

          def on_load
            self.view.backgroundColor = 0xffffff.uicolor

            table = @layout.get(:table)
            table.dataSource = self
            table.delegate = self

            # set cell class that will be used with this table:
            table.registerClass(HomeCell, forCellReuseIdentifier: "reuse_id")

            set_table_data
          end

          def set_table_data
            # simple table data that will have only code examples:
            @data = [
              {
                cells: [
                  {
                    title: "Collection Views",
                  }
                ]
              }
            ]
          end

          def numberOfSectionsInTableView(table)
            @data.count
          end

          def tableView(table, numberOfRowsInSection: section)
            @data[section][:cells].count
          end

          def tableView(table, cellForRowAtIndexPath: index)
            # remember we were talking about reuse identifiers?
            # here we get a cell by given reuse_id:
            cell = table.dequeueReusableCellWithIdentifier("reuse_id", forIndexPath: index)

            # get our cell's data:
            item = @data[index.section][:cells][index.row]

            # set cell's title to our item's title
            cell.title = item[:title]

            # return cell to the table so that it can render it:
            cell
          end
        end
      
The last thing we need to do is to tell App Delegate we want to load HomeScreen:
        class AppDelegate < PM::Delegate
          def on_load(app, options={})
            open HomeScreen.new(nav_bar: true)
          end
        end
      
Now we can make a commit:
        git add .
        git commit -m "HomeScreen added"
      
And launch the app:

The tutorial app will be used to learn and test all new stuff. Right now we are going to add CollectionViews to it.

Book Index | Next