A (simple) live example
Want to know what real Famous code looks like? Here's a simple demo that shows several of the key concepts in Famous working together. For illustration purposes, we've written this example to be straightforward at the expense of conciseness.
Anywhere you see an example like this -- note the Famous logo at the top, and the live demo at right -- you can modify it right here in your browser. Click in the code area to focus the code editor, and just start typing (note: the editor is disabled on mobile devices). You'll see your changes reflect as you type.
Let's take a closer look at what's going on in the example above. The code example begins with a few lines of required boilerplate script to initialize the Famous platform internals. You don't need to know exactly how the
FamousEngine creates the rendering environment.
Next we create a scene, a special object that represents the home for all our visual elements. Think of it as the origin of space, from which all things will be positioned and drawn relative to. Scenes are the root of the render tree and allows the ability to create Nodes that give shape to your application.
Finally, we attach components to the scene graph nodes in order to assign properties and produce visible output. The components in use here include
DOMElement (for rendering HTML-formatted content),
Size (for sizing elements), as well as
Position (for positioning).