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

alloy/test/apps/models/journal

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

app/models/journal.js

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. 

app/views/android/index.xml

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.
app/controllers/index.js

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.

views/entry.xml

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