Oct 192013
 

I just released version 1.2.1 of VirtualScroller. This minor update adds two enhancements:

  • Any number of items (at least 1) is supported. If less than 6 items are specified, the VirtualScroller falls back on a standard ScrollableView with the fancy scroll logic disabled. This is transparent to developers and users. Resolves issue 3.
  • VirtualScroller automatically detects whether you want finite or infinite scrolling. If the itemCount property is omitted, infinite scrolling is assumed. Otherwise finite scrolling is used. As such, the infinite property is no longer used. Resolves issue 4.

Download the latest version
Visit the Wiki

Enjoy!

 Posted by at 8:51 pm
Aug 172013
 

It’s been almost a year (exactly a year in seven days), but I finally have a new version of VirtualScroller! Version 1.2 is versioned as a minor update (in the 1.x family), but it contains some significant bug fixes and stability improvements. With the exception of a change in default options (see below), this is a drop-in replacement for version 1.1.1 and 1.1.

Glitch free, smooth scrolling

Previously, scrolling through a VirtualScroller too fast could leave the control in a transient state. Before version 1.2, I had worked around this issue by essentially limiting the scrolling speed. This resulted in an annoying user experience, because it was impossible to quickly swipe through pages. In fact, it was only possible to scroll through one page at a time, with a short pause in between pages.

This is no longer the case with 1.2. Users should not notice any jittering as they swipe along, thanks to vastly improved scrolling logic and event handling.

Two important internal changes made this possible:

  1. Increased view cache: Previously, only three views were maintained in memory which meant that the active view was padded on both sides by only a single view. Because of this, it was possible to scroll to the end of the in-memory views before the VirtualScroller had loaded the next views. Version 1.2 works around this problem by using a cache size of five. This makes it harder to outpace the VirtualScroller’s caching. Note: This means that your VirtualScroller itemCount MUST be at least five (or infinite), or else the VirtualScroller constructor will return null.
  2. Simplified scrolling logic: The code, in general, has been heavily refactored and simplified. For example, VirtualScroller now has a much easier check to determine if a scrollEnd event actually resulted in a page advance. As a consequence, there is much less that can go wrong.

Touch support is assumed

A minor change: previously, the touch option defaulted to false. Since all Google Play apps require touch support, I realize it is more convenient to default it to true instead. In version 1.2, touch now defaults to true.

Updated documentation

The (previously neglected) Wiki has been updated to reflect the new changes. Also, the code example should actually work now.

Download and documentation

Download the latest release here, and get the documentation here. As usual, if you encounter any issues or have any suggestions, please report them here.

Future development

I’m in the process of adding methods for advancing the control forwards and backwards, but I don’t have estimates for when that will be done.

Enjoy!

 Posted by at 9:11 pm
Dec 042012
 

If you’re trying to debug an app (or website) on Android that is using HTTPS, then this short guide might be for you. I’ll show you how to set up Fiddler and Connectify Me so that you can view your device’s encrypted communications.

Requirements

  • Computer with internet access and WiFi
  • Android device that supports WiFi proxies (Honeycomb or later – older devices might require a proxy app, though I can’t guarantee it will work)

 

Instructions

  1. Install Connectify Hotspot (the free version works fine) and start your hotspot. Side note: Don’t pick a stupid password for your hotspot; you probably don’t want world+dog hopping on your connection.
  2. Connect your Android device to your hotspot (via WiFi settings) and ensure you can access the internet using the connection.
  3. Install Fiddler (but don’t open it yet.)
  4. Install this certificate maker plugin (seems to have moved to here). It replaces the default certificate plugin in Fiddler so that the certificates will be compatible with Android.
  5. Open Fiddler and follow these configuration steps:
    1. Go to Tools | Fiddler Options… | General tab. Uncheck “Show a message when HTTP protocol violations are encountered”
    2. Switch to the HTTPS tab. Check “Capture HTTPS CONNECTS” and then “Decrypt HTTPS traffic”. Click Yes twice on the two dialogs that pops up.
    3. Click the “Export Root Certificate to Desktop” button.
    4. Switch to the Connections tab and check “Allow remote computers to connect”. Click Ok on the dialog.
    5. Take note of the port listed next to “Fiddler listens on port:”. We’ll need it soon.
    6. Close the options dialog.
  6. Exit Fiddler and then reopen it.
  7. On this website, upload the certificate that was exported to your desktop. Then, on your Android device, navigate to the URL the page produces to install the certificate.
  8. Determine the IP address of your computer (using ipconfig at the command line) on the ad-hoc WiFi connection that Connectify Hotspot has created.
  9. Using the instructions on this page (halfway down), configure the WiFi connection on your phone to use the following proxy information:
    1. IP address: What you found in step 9.
    2. Port: From step 5.e.

 

Test it out

Let’s see if everything works. Make sure Fiddler is open on your screen. On your Android device, browse to a random page. You should see the connections on the left-hand side of the Fiddler screen. If all of our HTTPS configurations worked, you should also see HTTPS communications decoded and dumped as well.

It’s possible that not all HTTPS communications will be shown, since some apps might reject the Fiddler root certificate. There’s nothing that can be done about that, unfortunately.

Note that Fiddler will also have changed the proxy settings for your entire computer. Connections from your desktop browser, email clients, etc. will be shown side-by-side with those from your Android device.

Cleanup

When you’re done, you’ll want to do a few things to revert your Android device and computer back to how they were.

  1. Undo the proxy configurations on your Android device.
  2. Uncheck the “Allow remote computers to connect” option in the Fiddler settings
  3. Uninstall Fiddler’s root certificates from both your computer (Google for instructions) and Android device (under settings | Security)
 Posted by at 11:31 pm
Aug 242012
 

I’ve updated VirtualScroller (grab the latest download here). Here is the change log for the new version:

  • Breaking change: The return value of the factory method now returns an object, not a View. To access the VirtualScroller view (to add it to your view or window), you need the view property of the return value. See the Wiki for more information.
  • Dispose method: Call the dispose method to clean up event listeners and views used by the VirtualScroller instance. Not required but highly suggested.
  • Improved anti-jitter: With this new update I can almost guarantee that your VirtualScroller instance will never end up in an invalid state. In the past, this has happened when someone scrolls the VirtualScroller too fast.
  • Improved options handling: Internally, I’ve added deep option defaulting, which gives you the ability to override properties in sub-options (like top in containerDef, for example) without overriding the entire object. This functionality is similar to jQuery’s $.extend.
  • Accessibility: Set touchSupported to false (the default is true) to enable support for trackball navigation of the VirtualScroller. This is useful if you plan to publish your app on Amazon Appstore, or another app store that doesn’t require devices to have touchscreens.
  • Auto-focus: Set autoFocus to true and the first child of each view will be focused automatically upon viewing.

Access the updated documentation here.

 Posted by at 4:04 pm
Aug 152012
 

I looked through the Titanium documentation and user boards, but I couldn’t find a simple way to detect whether a device has a touch screen (as opposed to a trackball). Obviously, all iDevices will have touch screens, so this code is really meant for Android and web deployments.

Here is my very primitive (but functional) solution. Place this code where the first window that your user interacts with is created.

    Titanium.App.Properties.setBool("touch", false);

    function touchStart(){
        Titanium.App.Properties.setBool("touch", true);
        self.removeEventListener("touchstart", touchStart);
    }

    self.addEventListener("touchstart", touchStart);

The first time the user touches the screen (indicating that a touch screen is present), an application-wide setting is written indicating touch support.

In the rest of your application, check for touch support with:

var hasTouchSupport = Titanium.App.Properties.setBool("touch", false);

Note: I found that it was necessary to first clear the setting, for some reason, at least during debugging on an emulator. You could probably get rid of that first line.

 Posted by at 12:28 pm
Aug 032012
 

If anyone else is having trouble with the combo of Titanium, the Android SDK, and Windows 7 64-bit, then maybe this post if for you. It took me a few hours to get right.

Upon clicking “Android Emulator” under the Run button, I was receiving errors about jarsigner and java missing. Here’s what you have to do:

  1. Titanium requires the 32-bit version of the Java SDK, even if you are running on 64-bit Windows. Furthermore, it requires Java 6; Java 7 is the default.
  2. Uninstall all other versions of Java, and download Java 6 (which appears to be version 1.6, as opposed to Java 7 which appears as 1.7) for 32-bit from here: http://www.oracle.com/technetwork/java/javase/downloads/index.html
  3. Install that.
  4. Set your JAVA_HOME path by following these steps: Go to your Start Menu, right click on Computer, click Properties. Click Advanced System Settings on the left, go to the Advanced tab, and click the Environment Variables… button at the bottom. Under System Variables, and click New… Name is JAVA_HOME, and value is something like C:Program Files (x86)Javajdk1.6.0_33, with the path possibly varying depending on the exact version of Java you installed.
  5. Now, add the bin directory to your PATH variable. Still in Environment Variables, under the System Variables section, find Path. Click Edit…, and in the Value box, append a semicolon if one isn’t already there. Then, append C:Program Files (x86)Javajdk1.6.0_33bin, taking note that your exact path might be a little different.
  6. Click Ok twice to get out of both dialogs.
  7. Restart your computer – yes, really. It simply won’t work if you don’t.

Side-rant: Why can’t Java configure the damn path variables for me? It couldn’t possibly be that hard to have the installer perform these two simple steps. I propose a new slogan. Java™ : Complexity for the sake of tradition.

Further troubleshooting

If you still get errors, then make sure you got all the paths to your JDK right. Actually navigate to the exact directory and copy the path from the address bar, instead of relying on the exact paths that I posted above.

If you still get errors, then make sure you have the right version of the JDK installed. Remember: 32-bit, Java 6 (1.6).

 Posted by at 9:40 pm
Jul 272012
 

Time to release something new. I’ve been working on a little project to develop an Android app. I’ve chosen Titanium because the app is simple (no network connectivity, sensor interaction, maps, etc.) and the learning curve for Titanium is low.

I had been working with the Android SDK for about a week (very frustrating), and one feature I found to be missing from Titanium is a decent way to scroll through large datasets horizontally. In my case, I had a few dozen pages that needed to be scrolled. I didn’t want to plop all of them into a ScrollableView, since that would put a strain on Android. So, I created this little module.

It is based off of this GitHub gist, though it doesn’t bear much resemblance anymore. Scroll down for links to my project.

VirtualScroller

The module I created is called VirtualScroller, and you use it like this:

// Replace the path as necessary
var VirtualScroller = require('ui/common/VirtualScroller');

var virtualScroller = VirtualScroller({
    itemCount: 10,
    getView: function(i) {
        return Titanium.UI.createLabel({
            width: Titanium.UI.FILL,
            height: Titanium.UI.FILL,
            text: "This is item " + (i + 1)
        });
    },
    infinite: false
});

window.add(virtualScroller);

I’ll steal the description from my BitBucket page, since I don’t feel like writing a new one:

VirtualScroller is an easy to use Titanium module that wraps around a ScrollableView and provides finite and infinite scrolling. All items (which are actually Views) are created on-demand, and only remain in memory when needed. The ScrollableView instance has three Views, which act as containers for the actual items.

This method permits memory-efficient scrolling of large sets of views.

So, if you have a large amount of views to scroll through, but don’t want to load them into memory until they’re needed, check out my module. It supports finite and infinite scrolling, and uses a callback to generate each view only when needed.

On BitBucket:
Wiki (instructions and information)
Downloads

 Posted by at 12:24 pm