AlloyTabsTemplate icon indicating copy to clipboard operation
AlloyTabsTemplate copied to clipboard

A sample Titanium Alloy project with a cross platform tab bar, listview collection binding, native pull to refresh and infinite scrolling

Alloy tabs template

Click this image to view a video demo of this project: 1m 13s Video demo of this app

1 minute, 13 seconds (Youtube)

This project features

It follows on from the pull to refresh concepts pioneered by:

Listview binding

As much as possible, the logic to bind the behaviours to the ListView have been encapsulated in the container.js module

The alloy controller looks like:

...
    $.container.bindList({
      pullToRefresh:    true,
      infiniteScroll:   true,
      refreshLabel:     "Chuck Norris quotes",
      list:             $.listCollection, 
      listView:         $.chucknorris_list_view,
      staleSeconds:     10 * 60
    });
...

Why use a custom Tab Group for android?

It's an Instagram-style attempt to make it easier to reach the main navigation

It was influenced by this tweet from @FokkeZB: Conclusion: no more hamburgers

and the jasonkneen/com.jasonkneen.tabdemo module.

It does however break the Android tab-bar convention so depending on your position, perhaps it would be better to go native for that?

Pull to refresh API

The pull to refresh widget is calling a dummy JSON API as per: https://github.com/jkotchoff/sinatra_api_demo

It's hosted on heroku and the instance is automatically spun down when not in use so you may see a timeout error on your first request to get awesome Chuck Norris quotes

Wishlist

  • Fix the Android infinite scrolling widget so that the ActivityIndicator is visible at the bottom of the list
  • Make a widget from container.js so that the pull to refresh & infinite scroll etc. can be easily installed with gittio
  • Badge counter for Android tabs
  • Usage of the pull_to_refresh controller for the Android swipe refresh widget to display last update time
  • SearchBar to send queries to the JSON API server

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Shameless plug

This was open sourced out of

http://stocklight.com

If there are any Titanium developers out there interested in helping us out to unseat Yahoo Finance in the app space, please get in touch. Remote contributions welcomed and our preference would be to get a Titan on board for an equity stake.