GithubHelp home page GithubHelp logo

ac3.2-periodictable's Introduction

Periodic Collection View of the Elements

Objective

To build the classic graphical representation of the Periodic Table of the Elements using a Collection View. The data will come from our familiar elements endpoint and it will be stored in Core Data. We'll build the cell in a separate nib file.

Mockup

PToE

We'll probably only get as far as doing it in black and white and placing elements 57 and 89 within the main table and ignoring the rest of the Lanthanides and Actinides depicted in the broken out rows at bottom. The data model makes this relatively easy.

Theme Song

Tom Lehrer's Elements

Also cute, discovered in the related videos.

A note about cannibalization

HtC

We will be grabbing code from (a.k.a. cannibalizing) the CoreArticles and MidtermElements projects to build this one. There's a balance between blindly cutting and pasting and blindly retyping the same code. I think it's fair to say most developers have a sort of database in their mind of projects they've worked on and the patterns that may be reusable from them, but still not worth putting in a common location.

Steps

  1. Fork and clone.

  2. Create a project named PeriodicTable inside.

  3. Alter the storyboard to be a Collection View embeded in a Navigation Controller.

  4. Create a UICollectionViewCell subclass with associated XIB file. Leave it empty for now.

  5. Register the class in your collection view.

    // Register cell classes
    self.collectionView!.register(UINib(nibName:"ElementCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: reuseIdentifier)
  6. Create a custom view named ElementView.swift.

  7. Create a nib file named ElementView.xib.

  8. Add your custom view to your collection view cell. Yes, this is a nib backed view referencing another nib backed view.

  9. Add a label for the element's symbol and a label for the element's number to the view and hook it up.

  10. Test your collection view with some bogus data before moving on.

        let data = [("H", 1), ("He", 2), ("Li", 3)]
  11. New File > Data Model. Accept the default name.

  12. Make an entity named Element and give it these attributes: symbol, name, number, group, and weight.

    1. Make number not optional and indexed
  13. Add a constraint on number to make it unique the object so that multiple attemts to insert the same entity will fail.

  14. Grab Data Controller.swift from the CoreArticles project.

  15. Make a Element+JSON.swift. Naming convention justification that I've mentioned before.

  16. Steal getData from MidtermElements' main view controller.

  17. Add data controller to AppDelegate (pilfer code from CoreArticles).

  18. Initialize fetched results controller (poach method from CoreArticles' table view controller)

  19. First try all the data in one section.

  20. Then section by group and sort by group and number.

  21. Hmm, how are we going to balance this table?

ac3.2-periodictable's People

Contributors

jgresh avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.