Let's see this library in action.
Basics: A Contact Book
Try it! See how easy it is to add and remove contacts and properties (Hint: use keyboard keys like arrows, enter, tab, and escape). Check out the schema and data tabs to see what goes in to make this interface (and what comes out, the data tab updates based on your changes).
Data comes in all shapes and sizes, though, much more than just whether it's a string or a number. Treema is built to allow all sorts of ways to set up the interface just the way you like it.
Objects As Single Nodes
Say your data object has a 2d position in there.
Even with Treema's compact format, three lines for an object that will only ever have two properties just seems like overkill. So, define a Treema node that instead treats that object as a single entity, rather than a collection.
Much better. Use this technique to compress several related properties into single rows, like names, addresses and version numbers.
ACE is a great library for creating text editors for all sorts of formats on the web. What if some of your nested data is better edited with ACE than a plain textarea or input field?
References to Other Database Records/Documents
You have users who can list their favorite fast food restaurants. This would be a good thing to have separate tables (or collections) for, one for users and one for restaurants. But you don't want to have a third table for this minor one-to-many relationship. This should all fit just fine into the User entries, along with some basic, denormalized data so that when you fetch the User object, you have enough info to show what their favorite restaurants are, saving on database queries.
The database search Treema node encapsulates all this logic, leaving it to you to implement the GET search endpoint, and describe in a function how to format that data.
This is one of the coolest features in Treema. Making a simple, consistent pattern for working with denormalized references.
To see how these and more advanced nodes are implemented, check out /src/extra.coffee.
Treema aims to make manipulating these complex data structures as natural and quick as possible. To that end, Treema features plenty of keyboard shortcuts so you can stay as far away from your mouse as you like. Here's a brief overview:
- Arrow keys: Navigates the selection, opening and closing collections.
Enter and tab: Adds, edits and navigates between value inputs.
Use shift to go upward.
- Note: They have slightly different behaviors. Generally speaking, enter is more 'aggressive' with what it does. For example, while editing a field whose data is invalid, enter will let you move on anyway, and tab will not. Enter will open selected collections, tab will not.
- Escape: Discards changes on the input currently being edited.
- Delete: Removes a field when the input currently being edited is empty.
- Shift and Ctrl-Click: Selects multiple rows.
The tests double as specifications for how shortcuts work, also.
Schema-Defined, Interface Enforced
Whenever possible, the interface reflects the limits the schema imposes on the data, including:
- Preventing adding more elements to arrays and objects when the maximum number has been reached, or there are no more properties available to add.
- Using HTML input types and attributes to enforce rules such as length and value minimums and maximums.
- When there are errors, showing exactly what row or closed collection has issues.
You can register callbacks for when:
- Rows are hovered onto and off of
- Selection changes
- Data changes
Say the user selects a contact on a contact list. Use the callbacks to know when to update another part of the page, showing details about that contact.
It's open source! Join the project and make Treema even more awesome.