Skip to end of metadata
Go to start of metadata

Demonstrates how to create a simple personal journal application using models and collections.

App Folder Location


The application's model file (journal.js) defines the fields for each journal entry: title, text, mood (happy, angry, or neutral), and creation date.


The samples uses the Alloy convention to define unique views for iOS, Android and MobileWeb.

Application view structure

Each view, like app/views/android/index.xml shown below, creates a global reference to the journal collection, which is assigned to a ScrollView element's dataCollection attribute. 


The ScrollView element also specifies a dataTransform function to transform each model in the collection for display. The specified function, doTransform(), does the following:

  • Transforms the mood value ('mad', 'happy', 'neutral') into a corresponding moodColor. This color is applied to the borderColor attribute of each View item in the ScrollView.
  • Uses the built-in moment.js library's fromNow() method to transform the entry's dateCreated value into dateSince.

A Backbone comparator sorts the items according to their dateCreated fields. Lastly, each entry displayed by the ScrollView is a View element that binds the transformed fields to the text properties of Labels and the borderColor of the View.


The addEntry() function, defined by the add.js controller shown below, creates a new Journal model object, adds it to the global journal collection object, and persists it to the SQL database.

See Also


  • No labels