Category 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!

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”.

Porting A PhoneGap App To Firefox OS

About a year ago I released the Fresh Food Finder, a multi-platform mobile application built with PhoneGap. The Fresh Food Finder provides an easy way to search for farmer’s markets near your current location, based on the farmer’s markets listings from the USDA. This app has seen a lot of popularity lately, so I’m working on a new version for all platforms with a better data feed, better UI, and overall better UX – unfortunately, that version isn’t ready yet. However, I have been able to bring it to an additional platform this week: Firefox OS!

Fresh Food Finder on iOS, Firefox OS, & Android

Fresh Food Finder on iOS, Firefox OS, & Android

PhoneGap support is coming for Firefox OS, and in preparation I wanted to become familiar with the Firefox OS development environment and platform ecosystem. So… I ported the Fresh Food Finder, minus the specific PhoneGap API calls. The best part (and this really shows the power of web-standards based development…) is that I was able to take the existing PhoneGap codebase, and turn it into a Firefox OS app AND submit it to the Firefox Marketplace in under 24 hours! If you’re interested, you can check out progress on Firefox OS support in the Cordova project, and it will be available on PhoneGap.com once it’s actually released.

So, on to the app (you can download the Fresh Food Finder in the Firefox Maketplace here)…

Basically, I commented out the PhoneGap-specific API calls, added a few minor bug fixes, and added a few Firefox-OS specific layout/styling changes (just a few minor things so that my app looked right on the device). Then you put in a mainfest.webapp configuration file, package it up, then submit it to the app store. Check it out in the video below to see it in action, running on a Firefox OS device…

The phone I am using is a Geeksphone Firefox OS developer device. It’s not a production/consumer model, so there were a few hiccups using it, but overall it was a good experience. Also, many thanks to Jason Weathersby from Mozilla for helping me get the latest device image running on my phone.

You can learn more about getting started with Firefox OS development here:

Also, be sure to check out the Fresh Food Finder:

Enjoy!