Relationship Fields w/Appcelerator Cloud Services & Titanium AppceleratorClearly Innovative | Web and Mobile Development

Using Relationship Fields with Appcelerator Cloud Services and Titanium Alloy

Integrating complex objects in an Appcelerator Alloy cloud enabled mobile solution doesn’t have to be hard

In a previous post I discussed the use of a custom adapter to integrate Appcelerator Cloud Services into your Titanium Alloy applications. In this post I will show another example of using the custom adapter and manage relationships between objects. The custom adapter allows you to interact with Appcelerator Cloud Services Objects like regular BackboneJS Objects and minimal direct interaction with the Ti.Cloud Object. The Custom Adapter also supports promises so you code is cleaner and does not suffer from callback hell

Appcelerator Alloy Cloud Services Adapter Now Supports Promises

Appcelerator Cloud Services documentation discusses the use of relationships and I needed a more complete example for use in my class I was teaching since the topic was not covered in the book that was used in the course.

Appcelerator Titanium Alloy & Cloud Services Book

This is a straight forward example of managing a list of closets and the ability to add clothing to the closet. The relationship we want to create here is that a Closet has many Clothing objects associated with it. By creating this relationship, we simplify the interaction between the objects since by querying for the Closet object, we will now get back all of the Clothing objects that are associated with the specified Closet.

The Models

The two models here are the Closet and the Clothing, we are using the Appcelerator Cloud Services Custom Object so creating the model files are straightforward.

app/models/closet.js

app/models/clothing.js

As you can see, by using the Custom Appcelerator Cloud Services Adapter, all you are setting is the object name.

Creating the objects are done by simply calling the save function against the model, the code in the adapter will specify the object name and associate the data fields accordingly so the object is successfully saved in the cloud.

Closet objects has the following fields name , mood , location , and to manage the relationship with the Clothing Objects, there is a field  [CUSTOM_clothing]clothing_ids

Snippet for Saving a Closet Object:

Saving the Clothing Object is a bit more complex if we want to save the object and add it to a Closet all in one step; but for now we will just show how to save an item of clothing using the Clothing Object to the Closet Object we just created. According to the documentation, we need to add the Clothing Object model id to the field   [CUSTOM_clothing]clothing_ids which is part of the Closet Object.

 Snippet for Creating New Clothing Object and adding it to Closet Object:

The Service

We have included a service to wrap all of the complexity of adding and managing closets and clothing objects, specifically managing the updating of a Closet Object when there already exists objects in the closet, one cannot simply over write the clothing_id field of the Closet.

app/lib/closetService.js

 Complete source code for the service is included in the Github Repository

The Controller Code

For displaying the content in the views, we are using Appcelerator Titanium Alloy model-binding with a ListView object. Going into detail about how binding works in beyond the scope of this blog post, but we will provide a high level overview of the controller and view code to help set the stage.

Basically in the controller we call fetch on the global collection that is holding all of the Closet objects. We have defined the closetCollection in the index.js file to keep all of them in one specific place.

app/controllers/ListCloset.js

Because we want to transform the data before displaying it in the list, we need to add a data transformation function. In the display, we want to show the number of items in the closet so we need to get the length of the [CUSTOM_clothing]clothing_ids array in the model that we discussed above.

app/controllers/ListCloset.js

The View Code

For the view, we set up a ListView with an ItemTemplate for each row, then we have the ListSection where the actual data-binding magic is happening.

app/views/ListCloset.xml

Video on Working with ListViews In Appcelerator Titanium Alloy

Helpful Links