Titanium Alloy RefreshControl Example

“Pull to refresh” is now a common design pattern for mobile development. And it’s become incredibly easy to implement this pattern in your Appcelerator Titanium project. So let’s dive into an Alloy RefreshControl example.

For our purposes, we’re going to assume we have a people.js collection model that’s Alloy/Backbone compatible. We don’t particularly care where it comes from. It could be a SQLite database, or a REST API. We’ll make that a topic of a future post.

First, let’s put together a quick UI using Alloy XML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<Alloy>
  <Collection src="people" />
  <NavigationWindow id="navigation">
    <Window class="container" onClose="cleanup">
      <TableView dataCollection="people">
        <RefreshControl id="refresh" tintColor="#393939" onRefreshstart="refreshPeople" />
        <TableViewRow>
          <View height="50" layout="vertical">
            <Label text="{firstName}" height="25" />
            <Label text="{lastName}" height="25" />
          </View>
        </TableViewRow>
      </TableView>
    </Window>
  </NavigationWindow>
</Alloy>

There’s not a whole lot going on here. We have our assumed Collection, a Window, TableView, and TableViewRow definitions. All that’s left for the Alloy view is adding the RefreshControl, which we’ve done on line 6. Within the tag, we’ve added a value for the onRefreshstart attribute, a callback we’ll define in the Alloy controller.

Alloy RefreshControl Example Controller

To get the common functionality of “pull to refresh”, we need to specify some actions in our controller. We need to make sure the “pull” activates the refresh, and we need to make sure the view releases the indicator when the data refresh is complete.

Collections in Alloy are based on Backbone.js, giving us access to the events and actions we need, and the RefreshControl view let’s us specify a callback for the refresh action, so let’s take a look at our controller.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var people = Alloy.Collections.people;
 
people.on( 'fetch', function() {
  $.refresh.endRefreshing();
} );
 
function cleanup() {
  $.destroy();
}
 
function refreshPeople() {
  people.fetch();
}
 
$.navigation.open();
 
people.fetch();

Once we have a reference to the collection, we can setup an event handler for the fetch request (line 3). This event handler just tells the RefreshControl to remove the indicator that lets the user know the table is refreshing its data. Our onRefreshstart callback is the refreshPeople function. This callback just does a fetch request on the collection.

The rest is standard UI handling—opening the navigation controller, handling the cleanup of the collection, and doing the initial data request.

Our Alloy RefreshControl example is fairly simple to implement, and the results will give your app a common design pattern to emulate.