PhoneGap

Video Tutorial: Installing the Ripple Emulator for PhoneGap Development

2013-05-23T19:39:00Z

Probably not terribly useful to my readers as I've blogged this before, but I wanted to create a quick video tutorial on how to install the Ripple Emulator for PhoneGap developers. Feel free to share and give to team members who may be new to PhoneGap Development.

Capturing camera/picture data without PhoneGap

2013-05-20T14:31:00Z

As people know, I'm a huge fan of PhoneGap and what it allows me to do with JavaScript, HTML, and CSS. But I think it is crucial to remember that you don't always need PhoneGap. A great example of that is camera access. Did you know that recent mobile browsers support accessing the camera directly from HTML and JavaScript? Let's look at an example.Over a year ago I wrote a blog post where I created an application called "Color Thief." This application made use of PhoneGap's Camera API and a third party JavaScript library called Color Thief. I loved this example because it demonstrated how you could combine the extra power that PhoneGap provides along with existing JavaScript libraries. This morning I watched an excellent Google IO presentation (https://www.youtube.com/watch?v=EPYnGFEcis4&feature=youtube_gdata_player) on Mobile HTML. It was an overview of some of the exciting stuff you can now do with mobile HTML and JavaScript. To be clear, this was all without using wrappers like PhoneGap. In one of the examples the presenters discussed the new "capture" support for the input/file field type. This is rather simple to implement: <input type="file" capture="camera" accept="image/*" id="takePictureField"> If supported (recent Android and latest iOS), the user can then use their camera to select a picture. I decided to rebuild my old demo to skip PhoneGap completely and just make use of this feature. Here's the code: For the most part, this is pretty similar to the last version. I no longer wait for the deviceready event, but instead just listen for the document itself to load. Instead of listening for a button click, I've switched to a input field using type=file. I now listen for the change event, and on that, I see if I have access to a file. If I do, I can then use the URL object to create a pointer to the source and then simply add it to my DOM. After that, Color Thief takes over. The only tricky part I ran into was that in iOS the URL object is still prefixed. You can see how I get around that in the startup code. To be fair, this isn't 100% backwards compatible, I could add a few checks in here to ensure that things will work and gracefully let people on older phones know they can't use this feature. But the end result is nearly the exact same functionality in a web page - no PhoneGap, no native code.

Join the PhoneGap Windows Phone Porting Challenge

2013-05-20T11:40:03+00:00

As you may know, PhoneGap supports the Windows Phone platform including the new capabilities in Windows Phone 8 , including IE 10. We’re excited to announce a fun new challenge from our friends at Microsoft: The PhoneGap Windows Phone Porting Challenge!

Do you have an existing PhoneGap app? Port your PhoneGap app to the Windows Phone Store. Not only will you reach a wider audience to expose your app to, but you could also win some cool prizes! 20 winners in total with 3 grand prize winners who will each receive a Windows Phone 8 and a Surface Pro, and 17 first prize winners receiving a Windows Phone 8. All winning apps will be evaluated for featured slots in the Windows Phone Store, too.

Members of a panel selected from Microsoft, PhoneGap and industry experts will choose 20 winners based on apps that are:

Original
Innovative
Easy to use
Engaging and visually appealing to the user

The challenge started May 20th and you have until June 30th to submit your apps for the Porting Challenge. Winners will be announced July 19th during PhoneGap Day US in Portland, OR. The challenge is open to developers in all countries/regions where Windows Phone Dev Center Registration is availabe. Read the complete rules for all the details before you sign up at http://www.phonegapwpchallenge.com.

Resources Need some help to get started?

Watch Microsoft’s 5-minute video tutorial that shows you how to set up PhoneGap with Visual Studio, and a few other detailed tutorials. You can also find tips and tricks to adapt WebKit-optimized HTML5 code to Internet Explorer 10, and how to give your app UI a Windows Phone look and feel.
Read Jesse MacFadyen’s post Apache Cordova and Windows Phone 8 and Developing for Windows Phone 8 in Apache Cordova on how to get started.
Watch Christophe Coenraets’ video Top 10 Performance Techniques for PhoneGap Applications
Get inspiration by looking at examples of PhoneGap/Windows Phone apps.

We look forward to seeing what you all create!

Cordova will no longer support BlackBerry 7 and Below post 3.0

2013-05-16T15:40:02+00:00

With the release of the BlackBerry 10 platform, the Apache Cordova/PhoneGap team have decided to focus efforts on creating the best possible framework for mobile apps on BlackBerry devices. To further this goal, support will be deprecated for the venerable BlackBerry Java platform with the release of Cordova 3.0 in July 2013.

Cordova is undergoing a major architectural transformation as we near 3.0. This transformation will bring a uniform interface for creating and managing Cordova Applications, and a universal plugin-based architecture. We will be focussing our efforts on BlackBerry 10 and PlayBook support.

Rest assured, this will in no way prevent you from building apps for BlackBerry 7 and below using Cordova 2.9.

PhoneGap & Android Studio

2013-05-16T15:11:10Z

Yesterday at GoogleIO, Google announced Android Studio, a new development environment for authoring Android applications. This is a great looking new IDE for Android, based off of IntelliJ IDEA, with some new Android-specific tools and features. You can read more about Android Studio on the Google Android Developers blog. One of my first tasks upon [...]

PhoneGap at Adobe MAX 2013

2013-05-15T15:40:02+00:00

The PhoneGap team headed to LA from May 4-8 to attend Adobe MAX. We were stoked to have so many PhoneGap and PhoneGap Build sessions there! We met tons of people who were new to PhoneGap and lots who were already familiar with us and wanted to take it to the next level.

Did you know? The Adobe MAX mobile companion app was made with PhoneGap! Even though the conference is now over, you can still check out the app and see how it works.

If you weren't able to attend MAX, we have a video round-up of most of the sessions that were presented:

Building Mobile Apps with Web Standards

Architecting a PhoneGap Application

Optimizing PhoneGap Applications

Tips for Creating Real PhoneGap Apps That Look As Good As They Perform

Top 10 Performance Techniques for PhoneGap Applications

Expanding PhoneGap with Plug-ins

Advanced PhoneGap Build

Case Study: Designing and Developing PhoneGap from the Ground Up

PhoneGap and UnTappd: The Perfect Pint

What else happened at MAX?

We got some great coverage from the guys at Nerd Radio in MAX's Community Pavilion. You can listen to the interviews to get even more insight into PhoneGap from Ray Camden, Brian LeRoux, Joni Rustulka, Serge Jespers, Chris Griffith, and Greg Avola.
We also participated in a hackathon with the Brackets team on Monday and Tuesday in the Expo Hall. We had some couches, tables and plenty of people gathered around for some hacking. Thanks to those who showed up!
Joni Rustulka spoke at the IxDA LA Meetup on "Design for Many Devices". Joni's talk included a reference to an application built using PhoneGap and gave the downlow on how to approach designing a product that will deliver on multiple devices and multiple platforms. Check out her slides.
Fil Maj spoke at the LA PhoneGap User Group giving an Intro to PhoneGap and PhoneGap plug-ins.
Our friends at Microsoft announced their Porting Challenge. Publish/Port your PhoneGap app to the Windows Phone Store and expand your opportunities by reaching a growing number of Windows Phone 8 users. Plus, a number of finalists will win some cool prizes!

It was a jam packed schedule and had an awesome time. Thanks to everyone who connected with us -- see you at the next event!

Architecting a PhoneGap Application: Video + Slides

2013-05-13T16:04:34Z

Here is the video of my PhoneGap Architecture talk at Adobe MAX 2013: The slides are available here.

Top 10 Performance Techniques for PhoneGap Applications

2013-05-13T15:49:32Z

Here is the video of my PhoneGap performance session at Adobe MAX 2013:

The Ottawa City Councillor PhoneGap app

2013-05-13T14:00:00Z

So a couple of friends of mine wanted to learn more about programming mobile applications so we decided to get together and create an application for the Apps4Ottawa competition.

We settled on creating an application that would enable folks from Ottawa to learn more about and connect with their city councillors. Sadly, I didn't even know who my city councillor was until I started working on this app.

It uses the open data Ottawa to get the city councillor information and it the Open North API to do reverse geocoding to turn your GPS co-ordinates into the correct ward.

Currently the app is available on the Google Play store and we are going through the process of getting approval for the app on the Apple store.

PhoneGap was definitely the way to go with this project. We developed pretty much in Android then when we were ready to release a version of the app we just compiled it in Xcode and it just worked. The only thing we changed were the break points for the CSS media queries to deal with the different iPhone screen sizes. Support for Windows 8 and BlackBerry 10 are also coming as we have time.

I'm going to write up a post later in the week to talk about some of the micro libraries we used in order to accelerate development.

Please give the app a try and let me know what you think of it and what can be done better. If you are so inclined we wouldn't mind a vote or two in the app in the Apps4Ottawa competition.

PhoneGap AdobeMax Sessions

2013-05-10T14:08:00Z

Were you at AdobeMax this week? No, neither was I. Disappointed? Yeah, me too. Luckily Adobe is posting their talks on line for everyone to be able to watch. Not everything is up yet so I will update this post as they become available. Right now I recommend checking out:

Top 10 Performance Techniques for PhoneGap Applications by Christophe Coenraets

Architecting PhoneGap Applications by Christophe Coenraets

Advanced PhoneGap Build by Raymond Camden

Designing and Developing PhoneGap Applications from the Ground-Up by Sandy Fleischer

Expanding PhoneGap with Plug-ins by Fil Maj

Optimizing PhoneGap Applications by Steve Gill

PhoneGap and Untappd: The Perfect Pint by Greg Avola and Tim Mather

Tips for Creating Real PhoneGap Apps That Look As Good As They Perform by Mike Wolf

Building Mobile Apps with Web Standards by Michael Brooks

MAX Session: Advanced PhoneGap Build

2013-05-10T01:49:00Z

Oddly, the last of my Adobe MAX sessions is available online now but none of my earlier ones. I assume they will show up in the next day or so. But for now, enjoy my eloquent presentation on the more advanced aspects of using PhoneGap Build. You can download the source code for the sample apps and slide deck as well. As always, I hope this is helpful!

Visual comparisons of PhoneGap Notification UIs

2013-05-05T12:03:00Z

If you are a PhoneGap users, hopefully you know about the various aspects of the Notification API. The Notification API allows for visual, audio, and tactile notifications. In this post I want to focus on the visual notifications and how they differ from the built in web view notifications.To begin, I created a simple HTML interface with buttons that would let me test alerts, confirms, and prompts. These are the three forms of visual notifications both in vanilla JavaScript as well as PhoneGap's Notification API. I used my epic CSS skills to make this a bit more touch friendly: Now let's look at the JavaScript. The first three event handlers are for the vanilla JavaScript notifications. Notice how in confirm and prompt the result is handed back to a variable. The only real customization available is with the prompt method which allows for a default. Here is the alert being fired: Here is the confirm: And finally the prompt: Now let's consider the native options. First note that they allow for customization. In each one you can tweak the button (or buttons) as well as the title. Be aware that confirm takes a list of button labels while prompt takes an array. (I consider that a bug and I hope they fix that soon.) Also note that all three have callbacks for handling button presses. I've used null as a way of signifying I don't want to do anything, but you would normally have some kind of logic there. Here is the native alert: Here is the native confirm: And lastly, the native prompt: Just to be clear, do remember that you can build your own alerts, confirms, and prompts as well if you feel like it.

What’s new in Cordova iOS 2.7.0

2013-05-03T23:08:49Z

Mainly bug fixes, the only highlights are new features for InAppBrowser – executeScript() and insertCSS(). Download 2.7.0. 1. Script Updates [CB–2849] Fix bin/create when CordovaLib parent dir has a space [CB–2788] add ./bin/check_reqs script to iOS [CB–3048] Add –arc flag to create script, support arc in template. 2. FileTransfer Updates [CB–2537] Implement streaming downloads for [...]

Recording and Assets from my PhoneGap Presentation

2013-05-02T20:34:00Z

For those who attended my PhoneGap presentation earlier in week (or those who just want to hear the sound of my silky-smooth almost Billy Dee Williams voice) you can view the recording at the URL below. Note that if you did not register for the event you will be asked to register before you can view it. To be clear, this is free. http://w.on24.com/r.htm?e=582941&s=1&k=A3BCF648B71580CC093EF1264D5D27B1 For folks who want a copy of the demos I used, you can get the source code and the slide deck here: https://github.com/cfjedimaster/Introduction-to-PhoneGap As always, thank you to everyone who showed up (apparently near 900) and I hope you enjoyed it.

Using the Progress event in PhoneGap file transfers

2013-05-01T20:08:00Z

Earlier today I was happy to hear that PhoneGap 2.7 was released. While perusing the changelist, I thought I read that progress events for file transfers were added in this release. However, I was wrong. FileTransfer has supported a progress event for a few months now. But since I figured this out while halfway through a demo, I figured I'd finish it up anyway and share it on my blog.As you can imagine, the onprogress event is a property of the FileTransfer object. It is passed a progressEvent that is - unfortunately - not documented as far as I can see. The code example though gives you enough information I think to deal with it: So from what I can see - you get a property that determines if the total size is known, and if so, you can get a percentage by using it with the loaded property. Otherwise you're just guessing at the time left, but at least you know something is going on. For my demo, I thought I'd build a simple MP3 downloader/player. I googled for 'free open source music' and came across this incredible MP3 by Kansas Joe McCoy and Memphis Minnie: When the Levee Breaks. Go ahead and listen to it. As much as I love indie music and trance, the sound of old recordings like this is like pure gold to the ears. Anyway - I began by creating an incredible simple web page. It lists the name of the artists and the song along with a picture. I've included a button that will trigger the download. Also make note of the status div I'll be using for - you guessed it - progress events. Here's a screen shot of it in action. Ok, now let's take a look at the code. Starting from the top, the first thing that may interest you is the file system request. I ask for the temporary file system so I have a place to store the mp3. Once I've got a hook to the file system I then enable the button in my web page and start listening for a touch event. The function that handles the download, startDl, creates the FileTransfer object and points it to the remote MP3. I've used almost the exact same onprogress event as demonstrated in the PhoneGap docs. I changed it to write out a percentage when possible and in other cases, simply append dots to the end of a string. That way people know something is still being transferred. The final portion simply handles the media portion. I didn't bother adding any real controls so it just begins to play the track and that's it. (To be clear, this wouldn't be hard to add, just check the Media API for more information.) Watch the video below to see it in action: As a last tip, note that the docs for Media seem to imply the you need a URI, not a file path. On iOS it seems to require a path, not a URI. Thanks to Simon MacDonald for helping me with this.

Cordova/PhoneGap and the new Apple App Store Requirements

2013-05-01T19:48:28Z

Beginning May 1st 2013, apps submitted to the Apple App Store… 1. must be built for iOS devices with Retina display and iPhone apps must also support the 4-inch display on iPhone 5 2. will no longer accept new apps or app updates that access UDIDs Cordova/PhoneGap fulfills requirement (1) since version 2.5.0 and fulfills requirement (2) since [...]

PhoneGap 2.7.0 Released!

2013-04-30T18:20:03+00:00

We have just released PhoneGap 2.7.0! Thanks to everyone who worked so hard to get this release out.

In this release, the community mainly focused on bug fixes. View the 2.7.0 commits in the changelog on GitHub.

If you find any bugs with this version, help out our community and project by reporting them on our issue tracker.

New AT&T APIs for Adobe PhoneGap

2013-04-24T11:40:02+00:00

We’re delighted to introduce two new features for AT&T SDK for PhoneGap– Advertising API and Text to Speech transcription (part of the Speech API update).

Advertising

Create a new revenue stream through the use of customized advertising. The Advertising API allows you to incorporate a simple, easy-to-use solution that supports revenue share-based monetization of your apps through the placement of paid advertising.

Speech – Speech to Text and Text to Speech

Powered by the AT&T Watson℠ speech engine, the Speech API supports speech-enabled apps that run on virtually any cellular network in the United States. There are seven speech contexts available that are built and maintained by AT&T, and we’ll continue to tune them for you. Now with Text to Speech functionality, you can just send us text as part of the API call, and one of our polite, well-versed characters will be happy to ‘say’ what you sent.

If you are not a current user - the AT&T SDK enables AT&T API Platform services to be accessible through the PhoneGap platform to help you quickly bring PhoneGap mobile applications to market. The AT&T SDK significantly reduces the complexity of building applications that use the AT&T APIs.

While we are working with PhoneGap to provide a separate developer tool for the AT&T HTML5 SDK, integration with Cordova web view tool and wrapping with PhoneGap allows you to integrate robust services like the AT&T Speech API into your app.

For example, using this method for the Speech API will look like this:

In addition to Advertising and Speech APIs, the SDK enables you to add the following AT&T APIs and more:

Location

Take your application to the next level by including your subscriber’s location, with their consent. Whether your app involves mobile advertising, local search, or any of a number of other location-related activities, the Location API will make your app or service stand out over other non-connected alternatives.

MMS

Multimedia Messaging Service (MMS) greatly enhances the power of your communications by moving beyond the text only capabilities of text based messaging.

Payment

Monetize your apps with the Payment API. The Payment API can give your customers the convenience and security of having their in-app purchases charged directly to their AT&T bill. Visit developer.att.com to download and install the AT&T API SDK.

PhoneGap 2.7.0rc1 Released!

2013-04-23T18:20:03+00:00

We have just released the first release candidate (RC) for PhoneGap 2.7.0 and plan on releasing the official release in the coming days.

If you find any bugs with this version, help out our community and project by reporting them on our issue tracker. Rest assured, we only tag a release candidate if we are happy with where the code is.

View the 2.7.0rc1 commits in the change log on GitHub.

Building Pluggable and Mock Data Adapters for Web and PhoneGap Applications

2013-04-23T17:01:09Z

This is not rocket science, but when planning your web or mobile architecture, it is important to make sure your client application is not tightly coupled to a specific data access strategy. The Problem In tightly coupled applications, the presentation logic is intertwined with data access logic (for example, $.ajax() calls), and it leads to [...]

Note about PhoneGap Build and Splash Screens

2013-04-23T15:54:00Z

I'm currently working on my MAX Advanced PhoneGap Build presentation (wait, scratch that, of course I'm done already, I mean, who waits to the last minute???) and ran into an interesting issue. Using a splash screen is rather easy via the PhoneGap Build config.xml file.To test this feature, I used Placekitten.com to quickly create an image sizes 320x480. PhoneGap Build supports multiple splash screens of multiple sizes and densities, but I wanted to see how well a default splash screen would work. I dropped the kitten in my folder and added this to config.xml: <gap:splash src="splash.png" /> I zipped up my folder, uploaded to PGB, and everything worked fine. I noticed, though, that my splash screen only lasted for about a second. I did some digging and found that you can disable the automatic hide of the splash screen by doing this: <preference name="auto-hide-splash-screen" value="false" /> I then wrote a bit of JavaScript that made use of the PhoneGap Screen Shot API: In theory, that should be it, but I noticed something odd. I launched my app, and then saw this: What the heck? At first I thought I had broken something, but then I noticed the image went away after 5 seconds. I then realized what my issue was... size. When using the a default splash screen, PhoneGap is able to size it correctly for any device (afaik), but if you keep the splash screen around, it then reverts to the proper size for the device. In my case, I was testing on an iPhone 5. So I created a new image sized 640 by 1136 and added this to my config.xml: <gap:splash src="retina.png" width="640" height="1136" /> And it worked perfectly. You can see via this exciting YouTube video: So I guess the take away from this is - while a default splash screen may work on multiple devices, if you are doing anything with the splash screen (like keeping it on screen longer), you want to ensure you build out properly sized images for your supported platforms. Frankly, that's probably the best idea in general anyway.

Presenting on PhoneGap Next Week

2013-04-23T14:15:00Z

On Tuesday, April 30th, I'll be giving a free, online presentation about PhoneGap as a preview of my Fluent 2013 presentation in San Francisco next month. This presentation will be your basic "What the frak is PhoneGap"-type presentation, but if you are looking for a chance to get introduced to the product, please join me. Developing Mobile Applications with PhoneGap (Wow - I need to update my bio there. Apparently I'm still an independent contractor focused on ColdFusion.)

The Story behind Exfm

2013-04-23T08:40:02+00:00

Six months ago, Exfm had a native iPhone app that was rated 4 stars in the App Store. We also had a native app in Google Play, along with an HTML5 webapp for both desktop and mobile. As a small team of six, we do most of our development in-house, but had contracted out a lot of the native mobile app work. Around this time, I sat down with Lucas Hrabovsky, CTO of Exfm to plan for the future. We looked at our native mobile apps, our Python back-end and our Javascript front-end. We thought about our hiring needs in the next 12 months. We came to the conclusion that the six of us all knew Javascript really well and moving forward we were going to build everything we could in JS. That meant node.js on the back-end and PhoneGap for mobile. Here is the story of how we went from a native iPhone app to one built with PhoneGap. The end result is we now have a 4.5 star rated app, with more daily installs now than we ever did with our native app.

iOS 6

When we initially started building our PhoneGap iPhone app, iOS 6 had not yet been released. It was released about a month into our development. iOS 6 was truly a turning point for HTML5 and mobile web development. Performance gains on iOS 6 compared to iOS 5 were significant. iOS 6 fixed some meaningful bugs as well. -Webkit-overflow-scrolling: touch is a major part of making a webapp feel native and prior to iOS 6 was just too buggy to really use. In terms of development, while tools like Weinre for debugging are great, it can’t compare to the speed of desktop Safari’s Webkit Inspector. Looking back, it would have been very difficult for us to build and release our app prior to iOS 6.

Development and Debugging

When we started development, it quickly became apparent that having to build and run in XCode every time we made a JS or CSS change was not going to suffice. We decided that we had to put the absolute bare minimum in our HTML shell and load all of our JS, CSS and HTML templates remotely from a webserver when the app started. This approach allowed us to refresh the app in Webkit Inspector and immediately see our changes without having to do a native build. I highly recommend setting up your app this way. To make this happen, we built a node module that watches our source folders for changes, then combines all the JS files, converts LESS files to CSS and serves them up. We called our little node module ‘Mott’ and open sourced it on GitHub. Mott also has the ability to deploy all your assets, including minified JS, CSS and images, to S3 when it comes time to ship code. When you do deploy, Mott will create a manifest JSON file for you that includes version numbers of your JS and CSS. We use these version numbers in our released app to determine at runtime where we are actually loading our code from. We’ll blog more about Mott soon over on the Exfm blog.

Loading Assets

One of the beauties of PhoneGap compared to native is its ability to load and run remote code. As I mentioned above, for development this is a complete time saver. But it also has the added benefit of being able to update your app at any point you want without having to go through App Store approval. Remote loading is certainly great, but mobile apps are also expected to work when offline. To get the best of both worlds, we decided to bundle our JS and CSS with the native build, but before loading them check online to see if we have newer versions available. To accomplish this, when our app first starts, it remotely loads the manifest JSON file that Mott created to determine the version numbers of our latest JS and CSS. If the remote versions are different, it loads them and then saves them locally using PhoneGap’s FileSystem API. If the remote versions are the same, it loads them directly from the FileSystem thus saving time. If we are offline, it goes directly to FileSystem. And if for whatever reason FileSystem fails, it loads the JS and CSS versions that we bundled inside the app when we uploaded to the store. This system has allowed us to update our app often while also keeping load times down and working offline.

Native Feel

Our goal in building this app was to make it feel as native as we could. Here’s a list of the important things we concentrated on to make that happen:

Animations. They must be butter smooth. We always use transform: translate in our app for all transitions. Those are hardware accelerated and the difference is noticeable. It may sometimes be easier to use width/height or x/y positioning but we avoided that at all costs.
Scroll bounce. We use -webkit-overflow-scrolling: touch on all scroll parent elements. We also set an inner child absolutely positioned with 110% height inside those overflow parents. This way, there is always a bounce even when the content inside may not be overflowing, which is how native components behave.
Hide scrollbars. You’ll sometimes notice that bouncy sections sometimes don’t show scrollbars in a native app. With iOS 6, you can now hide the scrollbar whenever you like using selector::-webkit-scrollbar { display: none; }.
Pause DOM changes on scroll. One thing we noticed when using native style scrolling is that while scrolling, any other DOM change caused the entire screen to jank. This may be a webkit bug but I believe it’s bigger than that since you’ll notice that native apps typically pause all other changes while scrolling. We ended up building in ‘scroll’ listeners that pause other DOM changes until the scroll has finished.
Buttons. First, always use the ‘touchstart’ and ‘touchend’ events. Never use ‘click’. On iOS, you can touch a button, then slide your finger off the button and have it not fire. If you want, you can even slide your finger back on the button and have it fire. When your buttons don’t act this way, users detect something as being off. We built a small JS class that mimics this functionality. You can grab it on GitHub if you’d like to use it.
Lists. Lists also have a native feel. When you touch a list item, it typically highlights. If you drag your finger, the item loses its highlight and the whole list scrolls. If you touch a list item quickly while in the motion of scrolling, it won’t highlight. We built a JS class that mimics this as well.

Wishes

While I feel that we succeeded in our goal of making the app feel native, there are still a few tell-tale signs that it’s HTML. I’m hoping that PhoneGap or iOS 7 will address these:

Scroll to top. An overflow-scrolling: touch element will not scroll to the top when you touch the top status bar. Weirdly, it works on the iPad but not on the iPhone. I’d love to see PhoneGap assist with this - send us an event when the status bar is touched and we can scroll the element ourselves.
Hide keyboard assistant. E̶v̶e̶r̶y̶ ̶t̶i̶m̶e̶ ̶t̶h̶e̶ ̶k̶e̶y̶b̶o̶a̶r̶d̶ ̶c̶o̶m̶e̶s̶ ̶u̶p̶,̶ ̶i̶t̶ ̶s̶h̶o̶w̶s̶ ̶t̶h̶e̶ ̶P̶r̶e̶v̶i̶o̶u̶s̶/̶N̶e̶x̶t̶/̶D̶o̶n̶e̶ ̶b̶u̶t̶t̶o̶n̶s̶.̶ ̶T̶h̶i̶s̶ ̶i̶s̶ ̶u̶n̶n̶e̶c̶e̶s̶s̶a̶r̶y̶ ̶a̶n̶d̶ ̶t̶a̶k̶e̶s̶ ̶u̶p̶ ̶p̶r̶e̶c̶i̶o̶u̶s̶ ̶s̶p̶a̶c̶e̶.̶ ̶I̶’̶v̶e̶ ̶s̶e̶e̶n̶ ̶s̶o̶m̶e̶ ̶n̶a̶t̶i̶v̶e̶ ̶c̶o̶d̶e̶ ̶t̶o̶ ̶r̶e̶m̶o̶v̶e̶ ̶t̶h̶i̶s̶ ̶b̶u̶t̶ ̶i̶t̶’̶s̶ ̶s̶o̶m̶e̶w̶h̶a̶t̶ ̶o̶f̶ ̶a̶ ̶h̶a̶c̶k̶ ̶a̶n̶d̶ ̶s̶o̶m̶e̶t̶h̶i̶n̶g̶ ̶I̶ ̶w̶i̶s̶h̶ ̶P̶h̶o̶n̶e̶G̶a̶p̶ ̶w̶o̶u̶l̶d̶ ̶b̶u̶i̶l̶d̶ ̶a̶s̶ ̶a̶n̶ ̶o̶p̶t̶i̶o̶n̶ ̶t̶o̶ ̶a̶l̶w̶a̶y̶s̶ ̶r̶e̶m̶o̶v̶e̶.̶ Fixed in PhoneGap 2.6!
Position:sticky. While technically available in iOS 6, its implementation is very buggy on overflow-scrolling elements. Many lists in iOS have headers and those headers stick to the top as you scroll. I’d love to be able to do this in HTML/CSS.

Plugins

We also used a bunch of Plugins in our app. Some we wrote ourselves, others we found on GitHub. Many thanks to Twitter, Facebook, ActionSheet, ChildBrowser, EmailComposer, SMSComposer and VolumeSlider. The ability to dip into native code for custom system integration is what makes PhoneGap truly awesome.

Conclusion

In closing, I’d like to thank all of the PhoneGap developers as well as Adobe for creating the tools Exfm needed to truly make an awesome mobile app using web technologies. We set out to create a native feeling app using HTML, JS and CSS. I believe we achieved our goal as the installs and reviews bear out. You can find our iPhone app here and look forward to iPad and Android versions in the near future. We always love feedback! Tweet at us - Exfm or @dankantor.

Guest blog post by Dan Kantor, CEO of Exfm

PhoneGap + Brackets Hackathon at Adobe MAX

2013-04-19T10:00:03+00:00

The PhoneGap + Brackets teams will be hosting a free 2-day hackathon at Adobe Max this year. The hackathon will be on May 6 & May 7 from 1:00pm-6:00pm at the LA Convention Center, 1201 S Figueroa St, Los Angeles, CA. An Adobe MAX ticket is NOT required to participate in the hackathon and anyone is welcome to attend.

Bring your laptop and come hack with the teams! There will be internet, power, and plenty of table space to comfortably work. No prior experience with PhoneGap or Brackets is required.

Registration

Registration is not required, but it will get you an awesome t-shirt. Register on our Eventbrite page.

Resources

Inside the LA Convention Center

Another reason to attend MAX - Hack on Brackets and PhoneGap

2013-04-18T17:44:00Z

Attending MAX? Or going to be in LA at the same time? Use Brackets or PhoneGap? Both teams will be hosting a hackathon on Monday and Tuesday from 1 to 6PM. A MAX ticket is not required to attend. There will be free wifi and a comfy place to sit. While a MAX badge isn't required, if you are not registering for MAX you must register on the EventBrite site. For more details, see http://dev.brackets.io/hack/adobemax/. No prior experience required!