The tutorial assumes you’ve already read at least some of Spine’s documentation. My goal is not to repeat the existing documentation, only to provide a simple tutorial that works, so I’ll keep this post short and the code comments thorough.
The sample data is similar to what you might find in a Google Adwords interface. Campaigns have ad groups, and ad groups have keywords. Campaigns, Ad Groups, and Keywords all have their own models. Each cell in the grid, and the grid itself, get Controllers. The click events on the cells are handled by the jQuery fisheyeGrid plugin, so they’re absent from the controllers. In the keyword cells are a link you can click to change its color. That color state is stored in localstorage in the examples below where it’s enabled. The views are created by Handlebars.js, and rendered to the page in the controllers.
Technologies used in this tutorial:
- jQuery fisheyeGrid plugin for styling, animation, and cell click events
- Handlebars.js Templates for view creation/compilation
- HTML5 local storage (via spine.local, spine’s localstorage plugin. It’s disabled on this page and working in the example.)
- HTML5 boilerplate for the basic HTML and CSS
- JSON (for sample data)
- CSS for styling
Ways to access the code:
- View the project on GitHub
- Download the zipped tutorial and files
- Play with a working example on jsFiddle (minus localstorage)
A post discussing the visual/interaction design is coming next. Feel free to post questions/comments here or on GitHub.
Finally, here’s what you should see when running the example: