Tag Archives: open source

New UI Article and Architectural Presentation on PhoneGap

A couple of PhoneGap related activities I’ve been up to recently…

First, an article I recently wrote on Creating a Card-based UI in PhoneGap has been published on DZone.  Be sure to check it out for some tips on creating the user interface, all with just HTML, CSS, and JavaScript.   This covers both basic/static and dynamic use cases.

cards

Second, a video of my presentation on “Architectural Considerations for PhoneGap and Mobile Web Apps” has been published by the Atlanta HTML5 meetup group.  Check it out in the video below, and if you’re in the Atlanta area, be sure to check out the meetup group!  Here’s the presentation description:

Tired of Hello World? In this session, we explore best practices to build real-world PhoneGap applications. We investigate the Single Page Architecture, HTML templates, effective Touch events, performance techniques, modularization and more. We also compare and contrast the leading JavaScript and Mobile Frameworks. This session is a must If you plan to build a PhoneGap application that has more than a couple of screens.

… and here’s the actual presentation video:

If you’re reading this, and wondering what PhoneGap is:

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

You should definitely check it out, and enjoy!

PhoneGap & Hardware Session Video now Available

The recording for my session “PhoneGap and Hardware” from PhoneGap Day back in July is now available! Be sure to check it out. There were apparently some issues with the audio, but you can still hear everything.

I’d like to express a huge Thank You to everyone who attended, and to everyone who watches this video!

Below are the sample projects I showed in the presentation, including source code. However, keep in mind that all of these examples were written before PhoneGap 3.0. The native plugin syntax, and inclusion methods have changed.

Pressure Sensitive Sketching in PhoneGap

In this example, the pressure-sensitive Pogo Connect Stylus uses a low energy Bluetooth 4 connection to relay touch/pressure information back to the PhoneGap application. This makes for a unique drawing and sketching experience powered with the HTML5 Canvas element. I’ve written about this example previously… Check out the video below to see it in action, and read the blog post for technical details and source code.

Moga Gamepad

The second example that I explored is a PhoneGap native plugin that is used to handle input from a Moga game controller inside of a PhoneGap application on Android.

This implementation is intended to be a proof of concept demonstrating how you could integrate the gamepad within your application. It currently only supports input from the joysticks (axisX and axisY) and the A and B buttons, and it does not handle all possible input from the controller.

This implementation is adapted directly from the com.bda.controller.example.demo.listen example from the Moga developers SDK samples available for download at: http://www.mogaanywhere.com/developers/

Check out the video below to see it in action:

The game is based on the Universe prototype that was used as a sub-game inside of the MaxMe app for the recent Adobe MAX conference. I make no guarantees about the code for this game, it was in a huge rush!

Quick Links

Status Tap/Scroll To Top in PhoneGap Apps on iOS

One criticism of PhoneGap apps that I sometimes hear is that they often don’t have “standard” features from the native operating system.  Little things, like iOS’s ability to scroll a container back to the top, just by tapping on the operating system’s status bar. These types of features are not hard to add to a PhoneGap application, at all. This is more of an “attention to detail” issue, not something that the platform can’t do.

Since this isn’t a feature that is applicable on all platforms, and it can vary per PhoneGap app implementation, it is not part of the core PhoneGap/Cordova download.  However, this can be very easily added via a native plugin.  Native plugins enable you to access native code, or augment the capabilities of PhoneGap for a particular platform.

Here’s proof… I just added the “scroll to top” capability to my Halloween PhoneGap app.

If you download the app from the app store today, you won’t see this yet because I literally *just* submitted it to Apple.

So how did I do this?

It wasn’t hard. The first thing to do is check and see if there was an existing native plugin that has already been created by someone in the PhoneGap/Cordova community.  It turns out, Greg pointed out one that already existed.  Since this plugin was built targeting an older version of PhoneGap, and my project was built using PhoneGap 3.0, I had a few minor updates.  Though, I was able to get everything all set up in a very short period of time.

Here’s what I did:

  1. I forked the existing plugin.
  2. Added plugin.xml metadata so the plugin can be included via PhoneGap & Cordova CLI tools.
  3. Added logic in the JavaScript so that it auto-initializes – you no longer have to manually initialize the plugin.
  4. Moved the native Objective-C initialization logic into a background thread.

Now that I’ve done this, and pushed it to github, you can include it into your own PhoneGap projects with a single command using the PhoneGap CLI:

phonegap local plugin add https://github.com/triceam/cordova-statusTap

Then, in your PhoneGap application, you just have to add an event listener for the “statusTap” event, which is triggered when the user taps on the operating system’s status bar.  It is literally this simple:

window.addEventListener("statusTap", function() {
  alert("status tap");
});

This just shows an alert that the status bar was tapped. If you want to animate specific containers, you have to do this manually yourself via JavaScript. Again, that isn’t hard to do. Here’s an excerpt that I used from the Halloween app, using jQuery syntax:

window.addEventListener("statusTap", function() {
    var target = $("#scroller");

    //disable touch scroll to kill existing inertial movement
    target.css({
        '-webkit-overflow-scrolling' : 'auto',
        'overflow-y' : 'hidden'
    });

    //animate
    target.animate({ scrollTop: 0}, 300, "swing", function(){

        //re-enable touch scrolling
        target.css({
            '-webkit-overflow-scrolling' : 'touch',
            'overflow-y' : 'scroll'
        });
    });
});

This disables touch scrolling to kill any inertial scrolling in progress, animates the scroll to top, then re-enables touch scrolling once the animation is complete.

That’s it…  Go check out the code, fork it, or use it in your own project: https://github.com/triceam/cordova-statusTap

Enjoy!

New Version of My Halloween PhoneGap App

With Halloween less than a month away, I figured it’s about time to update my “Instant Halloween” PhoneGap sound effects app. I’m happy to say that the latest version is now out for both iOS and Android. It has a few new sounds, a new UI style, and has been updated for iOS 7. I also updated the low latency audio plugin so it now supports PhoneGap 3.0 method signatures and supports the command line tooling for installation.

halloweenThis app is fantastic for scaring people… Just hook it up to really loud speakers, and start playing the sounds to your heart’s content. It’s got everything from background/ambient loops to maniacal laughter, screams, ghosts, zombies, and other spooky sound effects.

It is available now, for FREE, for both iOS (5.0+) and Android (4.0+).

 

So what has changed in this version?

First, I updated the app to support iOS 7. For the most part, this is a non-issue. PhoneGap apps are based on web standards, and HTML/JS/CSS work pretty much everywhere. However, you do have to account for a few minor changes. One is that the OS status bar now sits over top of the application. You’ll need to update your UI on iOS 7, so there are no UI issues. Check out this post from Christophe Coenraets for details regarding creating PhoneGap apps for iOS 7.

iOS 7 also introduces some new UI design paradigms and guidelines. I simplified the user interface, got rid of all textures, and tried to make things as simple and minimalistic and native-feeling as possible. I also got rid of iScroll for touch-based scrolling – both the iOS and Android versions now use native inertial based scrolling from the operating system. This is the reason that the new Android version is only Android 4.0 and later, but it is also the reason that the app feels much closer to a fully native experience.

I updated the low latency audio native plugin to support PhoneGap PhoneGap 3. There were two parts to this: First, there is the updated method signature on the native interfaces. I just took the old plugin, and updated it for the new method signature. The new method signature was actually introduced a while back, but I never updated the plugin for it. Second, I added the appropriate XML metadata to enable CLI-based installation of the plugin for both iOS and Android. Take a look at the PhoneGap documentation for details on creating PhoneGap native plugins and plugin.xml.  Also check out this tutorial from Holly Schinsky for help creating native plugins for Android.

You can check out the full source code for the low latency audio native plugin for both iOS and Android, plus the plugin.xml specification on github at: https://github.com/triceam/LowLatencyAudio

To include it in your own PhoneGap 3.0 (or later) projects, you can just add it from the PhoneGap command line interface:

phonegap local plugin add https://github.com/triceam/LowLatencyAudio

Of course, as with all of my PhoneGap apps, this one is open source too. You can check out the full app source (minus the audio assets) at: https://github.com/triceam/Instant-Halloween

In the process, I also ran into an unexpected issue with Android deployment… Back in the spring I had a corrupted hard drive. I was able to recover *most* of my data, and I thought I had all of my app signing keys. It turns out that for Android, your apps must not only have the same signing keys, but also the same key store when you sign the APK files, or else Google won’t let you distribute the Android APK file as an update; it must be a new app. It turns out that I had recovered the key, but not the keystore. So, I had no choice but to distribute it as a new app.

Go download the free apps, get the source code, and start building your own PhoneGap apps today!

The Web Just Got A Whole Lot More Awesome

Lots of awesome web-related stuff has been happening over the last few days. Here’s a quick summary, with links to learn more…


iOS 7 & Safari have new Web Platform Features

This includes CSS Regions, Clip Paths, and Canvas Blend Modes… read more on the Adobe Web Platform Team blog.


Adobe Edge Reflow & Adobe Edge Code Updated For CSS Regions

Adobe Edge Reflow and Adobe Edge Code now support CSS Regions.

CSS regions is a revolutionary CSS specification draft that allows a deeper separation of concerns in the way designers and developers structure their content and layout. They can now manage the way content should flow across different regions of the page design (hence the name CSS Regions) separately from the content itself . Then content can now be made to flow in different chains of regions, typically laid out differently for a mobile, tablet or desktop/laptop use.

Reflow now supports CSS Regions in the user interface/design surface, and Adobe Edge Code now supports CSS Regions in code hinting. Check out the video below to see CSS Regions in Reflow in action:


Brackets Sprint 31 Released

Brackets, the open source code editor for the web, built with web technologies, released a feature-packed build this week.  This build includes:

  • Live HTML Editing
  • CSS Code Intelligence for SASS
  • Improved Search
  • A new UI

…and much, much more…

Download Brackets today!


All in all, this is a lot of “awesome”.