Tag Archives: ios

Introducing the US Census Browser Application

I’d like to take this opportunity to introduce you to a new project I’ve been working on to showcase enterprise-class data visualization in HTML-based applications.   The US Census Browser is an open source application for browsing data from the 2010 US Census.

The app is completely written using HTML and JavaScript, even for the charting/data visualization components. You can check it out in several application ecosystems today:

Apple iTunes: http://itunes.apple.com/us/app/census-browser/id483201717
Google Android: https://market.android.com/details?id=com.tricedesigns.CensusBrowser
BlackBerry App World: http://appworld.blackberry.com/webstore/content/69236?lang=en
Amazon App Store: http://www.amazon.com/Andrew-Trice-US-Census-Browser/dp/B006JDATOY/ref=sr_1_1?ie=UTF8&s=mobile-apps&qid=1323874245&sr=1-1 (this includes support for Kindle Fire)

Support for additional platforms is planned for future development. Future targets include BlackBerry Playbook as well as Android 2.x devices, including the Amazon Kindle Fire and Barnes & Noble Nook Color – Android 2.x does not support SVG graphics in-browser, so I am working on some alternative features.

Update: Kindle Fire and Playbook have been approved, and are now supported. See links above.

You can also view the US Census Browser application in your desktop or mobile browser at: http://tricedesigns.com/census/

Please keep in mind that this application was designed for mobile devices.  Internet Explorer in particular does not work well with the Census Browser – use at your own risk.   The browser-based application has been tested and works properly in the latest versions of Chrome, Safari, Firefox, and Opera.   The US Census Browser application also does not work in Android 2.x and below, due to the fact that these versions of Android do not support SVG graphics in the mobile browser.

Full application source code for the HTML/JS interface and ColdFusion backend system are available at https://github.com/triceam/US-Census-Browser under the terms of the “Modified BSD License”. Be sure to review the README if you want to get this running on your own.

APPLICATION OVERVIEW
The application is essentially a single-page web site, which asynchronously loads data from the backend upon request, and displays that data to the user. The main application file is index.html, which loads the UI and appropriate client-side scripts. The main presentation logic is applied via CSS stylesheets, and the application control is handled by the ApplicationController class, inside of application.js. The ApplicationController class handles state changes within the application and updates the UI accordingly. The main data visualization and data formatting logic is all contained within the censusVisualizer class, which the ApplicationController class uses to render content. All DOM manipulation, event handling, and AJAX requests are performed using jQuery.

The data visualization is implemented 100% client-side, using the Highcharts JavaScript library. Highcharts renders vector graphics client-side, based upon the data that is passed into it. Check out the examples at: http://www.highcharts.com/demo/ for a sample of what it is capable of.

The fluid scrolling and swiping between views is implemented using the iScroll JavaScript library. Note: I’m using iScroll-lite.js. This is a great resource for any HTML-mobile, or mobile-web applications.

PHONEGAP USAGE
The client-side runtime does not have any dependencies for access to device-specific functionality. However, PhoneGap is being used as an application container so that the application can be distributed through various mobile “app stores”.

SERVER-SIDE
The back-end of this application is written using ColdFusion. Yep, that’s right. I used CF. In fact, the server side is ridiculously simple. It is only a single ColdFusion Component (CFC), with three remotely exposed methods for accessing data, and relies upon CF’s built in functionality to serialize JSON. CF is incredibly powerful, and made this project very simple and quick to develop.

Feel free to check it out on github: https://github.com/triceam/US-Census-Browser
You can also check out more technical details at: http://www.tricedesigns.com/2010-census/

Why Cross Platform Mobile Development?

Perhaps you have heard of the topic “cross platform development”, but aren’t really sure what it is, or you aren’t sure why you would want to use cross-platform technologies. If this is the case, then this post is especially for you. I’ll try to shed some light onto what it is, and why you would want to use cross-platform development strategies.

What is cross-platform development?

Cross platform development is a concept in computer software development where you write application code once, and it runs on multiple platforms. This is very much inline with the “write once, run everywhere” concept pioneered in the 90s, and brought to a mainstream reality with Flash in the browser, and AIR on the desktop. The standard evolution of technology has been to make everything faster, smaller, and more portable, and it is only natural that that this concept has now come into the mobile development world. In mobile scenarios, it is applied by writing an application using a codebase & technology that allows the application to be deployed and distributed across multiple disparate platforms/operating systems/devices.

Using Adobe AIR, this includes Apple’s iOS devices (iPhone and iPad), Android (a plethora of devices), BlackBerry Playbook & upcoming BBX platform, and soon Windows Metro (the tablet offering of Windows 8).   Using PhoneGap, this includes Apple iOS, Android, BlackBerry 4.6 and higher, HP WebOS, Symbian, Samsung Bada, and Windows Phone 7 – Mango platforms.

In case you’re wondering why I offered 2 cross platform technologies, that is because Adobe will soon have 2 cross-platform product offerings.  Adobe has entered an agreement to purchase Nitobi, the creators of PhoneGap.

Adobe AIR

Adobe AIR is a cross-platform technology with roots in the Flash Player and the AIR desktop runtime.  AIR allows you to build cross-platform mobile applications using ActionScript and the open source Flex framework.   AIR apps can be built from the Flash Professional timeline-based design/animation tool, Flash Builder (an Eclipse-based development environment), or other open source solutions using the freely available AIR SDK.   Applications developed with Adobe AIR can target desktop platforms (Mac, & Windows), smart phone and tablet platforms (iOS, Android, BlackBerry, soon Windows), and even smart televisions.

PhoneGap (Apache Callback)

PhoneGap is an open source cross platform technology with roots in the HTML world. Essentially, a PhoneGap application consists of a web view that consumes 100% of the available width & 100% of the available height, taking advantage of web browsers on each platform.   PhoneGap offers a JavaScript to native bridge that enables you to build natively-installed applications using HTML and JavaScript, using the native bridge to interact with the device hardware/APIs.   Note: PhoneGap is also being submitted to the Apache Foundation as the Apache Callback project.

More Devices, Less Code

The driving factor behind cross-platform technologies is that you will be able to use those technologies to target more devices & platforms, with writing a minimal amount of source code.   There are many advantages with this approach.  Here are a few of the major reasons…

Lower Barrier of Entry

Generally speaking, development with HTML & JavaScript or Flex & ActionScript is easier than developing with Objective-C or Java.   Due to the ease of use of the development tooling and familiarity of the languages, cross platform technologies lower the technical barriers which may have prevented adoption of native development.  This allows your development team to build applications that they may not previously have been able to, and also enables your team to focus on what matters – the application; not the skills required to develop on multiple disparate platforms.

Reduce the Number of Required Skills for the Development Team

Native development on multiple platforms requires your development team to learn Objective C for iOS applications, Java for Android applications, Silverlight for Windows Phone applications, etc…   Finding all of these skills in a single developer is nearly impossible.   Using cross-platform development technologies, your team only needs to be proficient with one language/skillset.  Knowledge of the native development paradigms and languages are always a plus, but are no longer a requirement.   Many developers transitioning from web development already know either Flex/ActionScript and/or HTML/JavaScript, and making the transition from web to mobile development will not be a major undertaking.

Reduced Development & Long Term Maintenance Costs

Cross-platform mobile applications can originate from a single codebase, which requires a single development skillset.  You don’t need to have staff for each individual platform.  Instead, resources working on the shared codebase can cover all target platforms.   Having a single codebase also reduces long term maintenance costs.  You no longer need to have bug tracking for X number of codebases, and do not need to maintain a larger staff to support each platform.  Did I also mention that you have one codebase to maintain?

Having a single codebase doesn’t reduce the need for QA/testing on each target platform – nothing can get rid of this.  It is absolutely imperative that you test your codebase on physical devices for all platforms that you intend to support.   Emulators and Simulators can go a long way during development, but they will undoubtedly not cover all scenarios possible on a physical device, and they will not have the same runtime performance as a physical device.

Play the Strengths of a Technology

Some technologies make tasks easier than others.   For example, programmatic drawing and data visualization are very easy using Flex & ActionScript.   Developing equivalent experiences in native code can be significantly more complex and time consuming.   Use the the features of the language to their fullest potential, to your advantage- that’s why they exist.

Ready For Adobe MAX 2011?

Adobe MAX 2011 is rapidly approaching, are you ready? Next week will bring some exciting announcements, so be sure to watch the MAX Keynotes steamed live online if you aren’t able to be there in person (Monday AND Tuesday). Definitely do not miss them.

Adobe MAX 2011

For those of you who will be able to attend, don’t forget to get the MAX companion application, available for iOS and Android at http://max.adobe.com/companion/. The MAX Companion is an application that enables MAX attendees to check their session schedules and access general information about the MAX 2011 conference being held October 1-5, 2011 in Los Angeles, CA.

MAX Companion

If you are interested in HTML5, or Flex/AIR for mobile, also don’t forget to stop by and check out my labs & sessions:

  • Create beautiful, immersive content and applications with HTML5 and CSS3
    Sunday, October 2, 9:00 a.m. – 5:00 p.m.

    Stay up to date on the latest developments in HTML, CSS, and javascript. Learn how to use HTML5 to add interactivity, motion, and video to the web. This lab will start with the fundamentals of HTML5 and how it can be used today for both designers and developers. Get tips, tricks, and best practices from experts, while learning how to apply Adobe’s tools into your evolving workflow. Discover what can be done with next-generation web standards to create powerfully engaging websites that can transcend screens of all sizes.

  • Multi-Device Best Practices Using Flex 4.5 and Adobe AIR for mobile
    Monday, October 3, 5:00 p.m. – 6:30 p.m.
    Tuesday, October 4, 12:30 p.m. – 2:00 p.m.

    Learn techniques and lessons from real-world mobile application development, including UI/skinning approaches, custom components, platform integration, application architecture, and device dependent considerations.

  • Practical Mobile Development with Flex and Adobe AIR
    Wednesday, October 5, 8:00 a.m. – 9:00 a.m.

    Learn techniques and lessons from real-world mobile application development, including UI/skinning approaches, custom components, platform integration, application architecture, and device dependent considerations. You’ll come away better prepared to embrace the industry-shifting paradigm change that mobile development promises.

Adobe Tools Make Great Mobile Apps (and Games!)

I awoke this morning to discover that Machinarium, originally developed as a Flash game and recompiled for iOS using Adobe AIR for mobile, is the #1 paid iPad game in Apple’s App Store, and the #2 overall paid iPad application.   Adobe Tools make great apps for mobile devices.

Machinarium #1 in iTunes Games
Machinarium #2 Overall iPad App

Did you know that Adobe Tools can create awesome cross-platform games and applications for iOS, Android, BlackBerry Playbook, desktop web browsers, and cross-platform desktop applications?

Learn more at:

Update:
Machinarium is now the #1 paid iPad app:

Why Can’t I Run My App in the iOS Simulator?

One very common and valid question when developing AIR mobile applications is “Why can’t I run my app in the iOS simulator?”

This is especially the case once you realize that you can compile and target the Android emulator; The ADT packager supports exporting to the Android emulator, but you can also install any APK (Android Package) binary file into the emulator using the normal tools contained within the Android SDK.

The reason that you can run a Flex Mobile app in the Android emulator, but not in the iOS Simulator comes down to the fundamental difference between an emulator and a simulator. An emulator emulates a physical device; The emulator program mimics the hardware, and the device-specific code that will run on the actual device runs within the mimicked environment. A simulator simulates an environment – it has a likeness or model of an environment, however it is not identical to the target environment.

In this case, the Android emulator mimics the hardware environment and is capable of running a compiled APK for a Flex/AIR mobile application. However, the iOS simulator is not capable of executing the contents of an IPA file. This isn’t specific to an IPA file for an AIR mobile app, but any IPA file – even those downloaded from Apple’s own app store.

The executable content within an IPA file is compiled targeting the device’s A4-ARM processor. Your desktop computer uses an intel-based processor architecture, which isn’t compatible and will not work. Even if you rename an IPA file to a ZIP file and extract the contents, it will not work within the iOS Simulator because of the CPU architecture differences.

Best Practice:

The first, and most important point that I emphasize regarding mobile application development is that nothing is more important than testing your mobile applications on a physical device. Emulators and simulators can help you see how an application may operate within a given environment, but they do not provide you with the actual environment. Physical devices may have memory, CPU, or other physical limitations that an emulator or simulator may not be able to reveal.

Secondly, keep in mind that emulators and simulators are created to make your development process easier and faster (especially if hardware is not readily available for the entire dev team). The debugging environment within Flash Builder is designed exactly for that purpose. You can quickly and easily test your application’s interface and functionality with a single button click. You can even setup debugging profiles for multiple devices, or use one of the predefined device configurations:

While these capabilities make developing for multiple form factors and multiple device types significantly easier and faster, this does not trump my first point. If you are targeting specific hardware, then it is imperative that you test thoroughly on your target platform(s).