Filer v7 Icon
Filer v7 Icon
Filer is an app written for my book, PhoneGap 3.x Mobile Application Development Hotshot. The app is intended to support many different kinds of media as notes — such as audio, video, and images (and text, of course). The app is built on Cordova 3.x, and supports iOS and Android. Plugins used include: Media, Media-Capture, Camera, Globalization, Keyboard, and a third-party sharing plugin.

The icon is to the right, minus the iOS 7 curved borders (these are applied automatically by the operating system). The “7” simply represents the version number — there are seven versions of the project in the book.

Main Screen

Filer: Main Screen
Filer: Main Screen

This is the main screen that the app uses. The icons next to each note can vary based upon the type of media. The look and feel changes according to whether or not the app is running on iOS (shown) or Android (not shown, but uses a light Holo theme).

Audio Notes

Filer: Audio Note
Filer: Audio Note

The image above is an example of one of the editing screens — this one for an audio note. There are different editing screens for different note types — one that’s pure text, another for photos, and one for video.

Responsive Design

Filer: Responsive Design #1
Filer: Responsive Design #1
Filer: Responsive Design #2
Filer: Responsive Design #2

The last version of the app in the book is modified to support multiple form factors — the above is one of the responses to the larger screen — the list view is replaced with a grid pattern where each item looks a bit like a document icon.

The image to the right is another response — a split view is used instead. Technically, it’s not the best example, since the document grid fits the app better, but we needed to cover multiple methods for responding to a larger screen.