Extending ScrollableView with Focus and Blur listeners

Circuit board and shield icon on blue background with digital code

Today’s guest post comes from Titanium developer Uriel Lizama.

Titanium’s ScrollableView provides a user interface object in which you can add views as “pages”, and move through them by swiping your finger. However, there’s a small problem when you have a complex set of pages: if you’re not careful, you may be loading too much data at a time, thus making your app unstable. Uriel Lizama came up with a simple solution, where the ScrollableView will fire events every time a particular view gets and looses focus. This simple trick, with he uses on his Secrets Resorts & Spas application for the iPad app, will allow you to load and unload your user interface as needed, thus greatly improving you app’s performance.

Extending ScrollableView with Focus and Blur listeners

Several of our applications follow what we at Baboon Media like to call a magazine layout, which basically means that when you launch the application you move around the different sections by going from left to right.

For these apps we use as the main skeleton of the app a ScrollableView which will hold a view for each section of the application. Now, we had a couple of issues we needed to tackle to make this work as we needed:

  • We couldn’t have everything displayed at the same time, this would generate real performance issues, specially considering that we would have some really heavy views.
  • We had to detect when the user entered each specific view so we could launch animations and effects for painting the view.

We though of a simple but yet effective solution, what we did is extend the views that will be added to the ScrollableView by adding a couple of listeners that will be called whenever the view is blurred (moved away from it) or focused (move to it). This allows us to easily run the actions needed to reset the view and remove any content from it when it’s blurred, and add it back and start the animations when it’s focused.

Let’s take a look at a simple example of how you would go and easily implement this on your own project.

We create a couple of views:

We have created two views and attached on them two listeners. myfocus will be called whenever the user has moved into the view, and myblur will be called when the user has moved away from the view. In here is where you would add all your magic, on blur you would stop animations, reset positions and remove elements from the view, and then on focus add the elements back and start animations.

Now we will create our ScrollableView:

We added a couple of properties into our object, we will be using lastPage to keep track of where the user has been so we can call the blur listeners on the correct views, and mainScroller as a boolean just to make sure that we trigger actions correctly in case of bubbling.

On our ScrollableView we will add our magic on the scrollEnd event.

On Lines 3-4 we make sure that the event was triggered by the main scroller. Also we don’t want to launch the blur/focus events if the user didn’t actually move away from the view but just moved the scroller a little bit and then it snapped back, so we ignore the event if the lastPage is equal to the currentPage.

On line 8 we call the lastPage view myblur event. At this moment lastPage will hold the index of the view that was seen last.

On line 11 we call the currentPage view myfocus event.

On line 14 we set lastPage to the currentPage index, this way when we exit the view we know how to call it’s myblur event.

And that’s it, that’s the simple way to extend the ScrollableView by adding events into the views to know when to load and unload content, and that’s the way we do it in applications such as the Secrets Resorts & Spas application for the iPad.


Comments are closed.