An Introduction to AIM Pages Module Development

Kevin Lawver

This is a presentation. If you'd like to view all the slides like a normal web page, you can.

What's the Point?

• Small, atomic pieces of content
• Keep it simple
• Start small, work your way up.
• Don't worry about presentation at first.

Development Tools

• Firefox
  • Firebug
  • Make sure you install the DOM Inspector (installed by default on OS X, under advanced on Windows)
• A good text editor or XML editor:
  • Crimson for Windows
  • Text Wrangler for Mac

Getting Started

• Generate your module
• Your module-name should be something like "joes-module":
  • No spaces
  • All lower case
  • No special characters

Make Your Playground

• Save your module in a new directory that's the same as your module-name (from the step before)
• The file should be saved as index.html
• Now, go add some stuff

Edit Mode: The Easy Way

• Add this script to the head: http://dev.lawver.net/aimpages/lop_module_form_helper.js

Edit Mode Continued

• Now, it's time to hook that script up to your module. See this example
• Make sure you change all instances of "formtester" to your module name (with no "-" or spaces).
• That script is still new, so use at your own risk.

CSS

• See the Best Practices for the rules for module CSS.
• Keep it simple

Javascript

• No generic function names
• Keep it as simple as possible
• Use Dojo" as much as possible
  • See the manual

How to Steal

• Grab an existing module: http://iamalpha.com/.module/MODULENAME
• View source to grab all the associated files
• Make sure you change all the classes and/or javascript objects
• For example: http://iamalpha.com/.module/code-snippet

No Substitute For Documentation

• See I Am Alpha for everything else
  • Module Maker
  • Module Validator
  • Module Best Practices
• The wiki is good too.

Q&A

• What do you like?
• What do you hate?
• What's too hard?
• What do you need?