HTML5-Clear: A replica of the Clear iPhone UI in HTML5 and CSS3 #

If we’re fans of anything, we’re fans of experiments that get open sourced.

As a followup to our native coverage of Clear’s UI with JTGestureBasedTableViewDemo, you might enjoy this experiment by Evan You to replicate the UI of Clear in HTML5 and CSS3.

HTML5 Clear

HTML5 Clear is a replica of the awesome Clear iphone app (UI only) featuring the innovative gesture controls and the look and feel in HTML5 using CSS3 transitions.

While Evan might not have been able to get 100% of the details right, it comes pretty close and there’s certainly something to learn from the codebase.

Source on GitHubDemoVideo

JTGestureBasedTableView – Buttonless interface for iOS like that found in Clear #

A great effort by mobile developer James Tang to recreate that innovative UI pattern found in Clear:

Screenshot

The README provides sample code to set up your UITableView and enable gesture recognition:

#import "JTTableViewGestureRecognizer.h"

@interface ViewController () <JTTableViewGestureAddingRowDelegate, JTTableViewGestureEditingRowDelegate>
@property (nonatomic, strong) NSMutableArray *rows;
@property (nonatomic, strong) JTTableViewGestureRecognizer *tableViewRecognizer;
@end

@implementation ViewController
@synthesize tableViewRecognizer;

- (void)viewDidload {
    /*
    :
    */

    // In our examples, we setup self.rows as datasource
    self.rows = ...;

    // Setup your tableView.delegate and tableView.datasource,
    // then enable gesture recognition in one line.
    self.tableViewRecognizer = [self.tableView enableGestureTableViewWithDelegate:self];
}
...

If you haven’t seen the Clear interface, be sure and check out the video demo:

Sample source on GitHub.

Python script to backup up your iPhone SMS messages #

Tom Offerman wrote a well documented script for grabbing SMS from your iPhone using its iTunes backup. SMS-backup supports human, JSON, and CSV output options as well as creating phone number aliases to make the results a bit more friendly:

$ sms-backup.py --myname Tom 
                --alias "555-555-1212=Michele" 
                --phone "5555551212" 
                --phone "1112223333" 
                --date-format "%b %d, %Y at %I:%M %p" 
                --format json

[
  {
    "date": "Jan 01, 2010 at 03:31 PM",
    "from": "Tom", 
    "text": "I love donuts!!", 
    "to": "Michele"
  }, 
  {
    "date": "Jan 02, 2010 at 04:17 PM",
    "from": "Michele", 
    "text": "I love a man who loves donuts!!!", 
    "to": "Tom"
  }, 
  {
    "date": "Jan 02, 2010 at 06:00 PM",
    "from": "Tom", 
    "text": "Just checking in...where are you?", 
    "to": "(111) 222-3333"
  }, 
  ...

Sadly, MMS messages are not supported. Check out the README for usage and background.

scrollability: Native scrolling for the mobile web #

Perhaps even more than advanced features like GPS, camera access, contacts, and
App stores, the lack of viewport-aware position:fixed is what drives
many apps to be developed as a native experience.

Joe Hewitt who brought us
Firebug and the Facebook iPhone app has
released Scrollability, a
single script with no external dependencies that allows developers to
achieve near-native feeling scrolling, just by adding a few CSS classes
to their markup. In just a few hours of its release, the project has over 250 watchers on GitHub.

Joe includes a simple demo for iOS devices that demonstrates super smooth scrolling as well as fixed header and footer elements.

Screencap

[Source on GitHub]

UIDickBar: Annoying Twitter style #dickbar for your iOS apps #

Ever wanted to add an obtrusive Dickbar to your iOS apps?

Dickbar

Wait no more, for Ching-Lan HUANG 黃青嵐 AKA @digdog has packaged up this UI tragedy for you to use in less than ten lines of Objective-C:

UIDickBar *dickBar = [[UIDickBar alloc] initWithDickTitle:@"#DickBar" dickBadge:@"Stupid" actionBlock:^{
    // Anything you want to do after UIDickBar tapped
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://digdog.tumblr.com"]];
}];
[dickBar showInView:self.view];
[dickBar release];

[Source on GitHub] [Blog post]

X-Callback-URL: URL specification for iOS interapp communication #

URLs are one of those things about the web that we often take for granted. As developers, we can request resources and send users to other destinations just by knowing a location on the Internet.

The mobile landscape is a bit different. While most mobile applications speak Web, consuming REST-ful APIs and other web resources, quite often they’re little silos of vertical, site or brand-specific functionality. Did you know that for iOS developers Apple makes it possible to register your own URL scheme, as in this Gowalla example:

The list of known iOS applications supporting OpenURL is growing daily.

Beyond application launching

As handy as these custom iOS URL schemes are in launching other applications, mobile developer Greg Pierce wants to the community to extend the idea of custom URL schemes and adopt a standard for inter-app communication. X-Callback-URL is a draft specification for one-way and two-way communication between mobile apps on iOS and looks like this:

[scheme]://[host]/[version]/[action]?[x-callback parameters]&[action parameters]

Let’s look at a real world example from Greg’s popular Terminology, a language reference app for iPhone and iPad:

terminology://x-callback-url/1.0/lookup?text=a%20good%20deal
  • scheme: The app’s custom URL scheme, terminology in the above example
  • host: Callback URLs are identified by a host value of x-callback-url
  • version: The X-Callback-URL spec version, currently 1.0
  • action: The action to perform in the target app. In this case, Terminology will perform a lookup action.
  • x-callback parameters: Optional. Not used in this example
  • action parameters: The parameters to pass to the executing action, “a good deal” in this example

This approach provides a robust way to not only launch an app, but also request that the app handle an action, which may or may not have a UI associated with it.

Two-way communication

The real power of X-Callback-URLs lies in two-way inter-app communication. By using the x-callback parameters in the spec, we can ask the target app to call us back on our own URLs, even handling success and error scenarios. Sort of like custom HTTP headers, these callback parameters are identified with an x- namespace:

  • x-source : The friendly name of the source app calling the action. If the action in the target app requires user interface elements, it may be necessary to identify to the user the app requesting the action.
  • x-success : If the action in the target method is intended to return a result to the source app, the x-callback parameter should be included and provide a URL to open to return to the source app. On completion of the action, the target app will open this URL, possibly with additional parameters tacked on to return a result to the source app. If x-success is not provided, it is assumed that the user will stay in the target app on successful completion of the action.
  • x-error : URL to open if the requested action generates an error in the target app. This URL will be open with at least the parameters “errorCode=code&errorMessage=message. If x-error is not present, and a error occurs, it is assumed the target app will report the failure to the user and remain in the target app.

Here’s how you’d build a URL to allow your users to select some text in your app, choose a replacement in Terminology, and have to return back to your app.

terminology://x-callback-url/1.0/replace?text=white&x-source=MyAppName&x-success=myappurl://x-callback-url/1.0/returnAction

Greg has a great screencast that demonstrates the process end-to-end:

Be sure and check out the full documentation for all of Terminology’s callbacks on Greg’s site as well as implemenation examples on GitHub. If you decide to implement X-Callback-URL in your application, please add it to the directory so the community knows how to integrate with you.

[Source on GitHub] [Home page] [@xcallbackurl on Twitter] [Discuss on HackerNews]

nib2objc: Convert iPhone NIB files into Objective-C code #

Interface Builder is one of the coolest things about Cocoa development. Being able to draw your interfaces visually can save you tons of otherwise tedious code to create layouts and set visual styles for your user interface elements.

Adrian Kosmaczewski, iPhone and iPad developer and creator of Device DNA and several other apps in the App Store turned us on to nib2objc, which is a brilliant name because it takes NIB (or XIB) files from Interface Builder and converts them to Objective-C.

To run from the command line, simply run nib2objc, passing the path to your NIB file:

nib2objc yourfile.xib > code.m

The output is a rather nice looking set of UIKit objects and property assignments to match values from your NIB:

// ...
UIView *view6 = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 460.0)];
view6.frame = CGRectMake(0.0, 0.0, 320.0, 460.0);
view6.alpha = 1.000;
view6.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
view6.backgroundColor = [UIColor colorWithWhite:0.750 alpha:1.000];
view6.clearsContextBeforeDrawing = NO;
// ...

UIButton *button9 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
button9.frame = CGRectMake(167.0, 65.0, 72.0, 37.0);
button9.adjustsImageWhenDisabled = YES;
button9.adjustsImageWhenHighlighted = YES;
button9.alpha = 1.000;
button9.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin;
button9.clearsContextBeforeDrawing = NO;
button9.clipsToBounds = NO;
button9.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
// ...
[button9 setTitleShadowColor:[UIColor colorWithWhite:0.000 alpha:1.000] forState:UIControlStateSelected];

// ...
[view6 addSubview:button9];
// ...

Bonus #1

As an added bonus, nib2objc includes a GUI to browse NIB files and even peer into their generated Objective-C code, complete with Fragaria-based syntax highlighting.

GUI

Check the project home page for more details, not to mention the most minimalistic Redmine theme we’ve seen.

Bonus #2

But wait, there’s more. We also stumbled across Adrian’s other project Bluwoki, a Bluetooth peer-to-peer walkie-talkie for iPhone and iPod Touch. Since my daughters get their Dad’s old hand-me-down iPhones, I may have to install this for them to have some fun around the house. Bluwoki is also open source, grab the code on GitHub.

Bluwoki

[Source on GitHub] [Home page]

applitude: Elegant DSL to create iPhone apps in Eclipse #

While language purists might balk at the growing popularity of projects that compile to Objective-C, the verbosity of the Cocoa framework has many developers looking for a faster way to create iPhone apps. Let’s face it, the vast majority of apps in the App Store follow a familiar pattern of making a network request, showing an activity indicator, parsing a JSON response, handling errors, loading a UITableView, and handling navigation to the next bit of data.

Screenshot

Applitude is based on Applause, a nifty Domain Specific Language from Heiko Behrens and Peter Friese based on Xtext for creating iOS apps. Ralf Ebert has pared down Applause to have an iPhone focus to create Applitude. Here’s a sample:

application Demo {
  view:Tabs()
}

tabview Tabs {
  tab {
    title: "Inventors"
    view: Inventors()
  }
}

type String mapsTo "NSString"

entity Inventor {
  String name
  String imageUrl
  Invention[] inventions
}

entity Invention {
  String name
}

contentprovider AllInventors returns Inventor[] fetches JSON from
  "http://applitude.org/demo/inventors.json" selects ""

tableview Inventors {
  Inventor[] inventors = AllInventors()

  title: "Inventors"

  section {
    cell Default for inventor in inventors {
      text: inventor.name
      image: inventor.imageUrl
      action: InventorDetail(inventor)
    }
  }
}

tableview InventorDetail(Inventor inventor) {
  title: inventor.name
  style: Grouped

  section {
    cell Value2 {
      text: "Name"
      details: inventor.name
    }
  }

  section {
    title: "Inventions"
    cell Default for invention in inventor.inventions {
      text: invention.name
    }
  }
}

This example creates a simple demo app based on some JSON:

[
  {
    "name" : "Thomas Edison",
    "imageUrl" : "http://applitude.org/demo/edison.jpg",
    "inventions" : [
      { "name" : "Light bulb" },
      { "name" : "Motion picture" },
      { "name" : "Phonograph" }
    ]
  },
  {
    "name" : "Alexander Graham Bell",
    "imageUrl" : "http://applitude.org/demo/bell.jpg",
    "inventions" : [
      { "name" : "Telephone" }
    ]
  },
  {
    "name" : "Nikola Tesla",
    "imageUrl" : "http://applitude.org/demo/tesla.jpg",
    "inventions" : [
      { "name" : "Tesla coil" },
      { "name" : "Alternating current" }
    ]
  }
]

Applitude bundles popular open source iOS frameworks including TouchJSON, TouchXML, and ASIHTTPRequest. Visit the project home page for advanced usage, requirements, and installation instructions

[Comment on Hacker News]

[Source on GitHub] [Web site]

betabuilder: Ruby gem makes iOS ad-hoc builds suck less #

Behind most every App Store download, there is a painful trail of ad hoc beta builds as developers send beta bits to users to gather feedback and fix bugs. Luke Redpath, UK Rubyist and iOS developer, aims to ease that pain for iOS developers with BetaBuilder, a Ruby gem that bundles up a collection of rake tasks to make it easier to deploy your iOS apps.

BetaBuilder supports distributing your apps own your own server or using TestFlightApp.com. To get started, first install the gem:

gem install betabuilder

Next, require BetaBuilder in your Rakefile:

require 'rubygems'
require 'betabuilder'

… and configure your app:

BetaBuilder::Tasks.new do |config|
  # your Xcode target name
  config.target = "MyGreatApp"

  # the Xcode configuration profile
  config.configuration = "Adhoc" 

  config.deploy_using(:web) do |web|
    web.deploy_to = "http://beta.myserver.co.uk/myapp"
    web.remote_host = "myserver.com"
    web.remote_directory = "/remote/path/to/deployment/directory"
  end
end

Now we can see all of our tasks with rake -T:

rake beta:archive   # Build and archive the app
rake beta:build     # Build the beta release of the app
rake beta:deploy    # Deploy the beta using your chosen deployment strategy
rake beta:package   # Package the beta release as an IPA file
rake beta:prepare   # Prepare your app for deployment
rake beta:redeploy  # Deploy the last build

If you want to use TestFlight instead of hosting your builds yourself, simply swap out the deploy config with:

config.deploy_using(:testflight) do |tf|
  tf.api_token  = "YOUR_API_TOKEN"
  tf.team_token = "YOUR_TEAM_TOKEN"
end

Nifty. Need additional deploy strategies? Go ahead and fork the project and share it with the community.

[Update]:

Thanks, Luke, for pointing out some prior art from Hunter who lent the name to the project.

[Source on GitHub]

tweetanium: JavaScript-powered native Twitter client for iPad, iPhone, Android, Windows, Mac, and Linux #

The folks over at Appcelerator have been busy, recently releasing version 1.5 of their Titanium Mobile platform that enables developers to create native iOS and Android applications using JavaScript.

In the spirit of showing versus telling, they’ve released Tweetanium, a Twitter client and cross-platform showcase of the Titanium platform.

Tweetanium screenshot

Tweetanium is an excellent example of how to build real-world applications with Titanium and demonstrates JavaScript best practices, including the module pattern, API integration with Twitter, as well as advanced CSS3 techniques.

If you missed it, be sure and catch Episode 0.0.8 in which Marshall Culpepper gives us the scoop on the Titanium architecture.

Tweetanium Desktop from Appcelerator Video Channel on Vimeo.

[Source on GitHub]

jsconsole: JavaScript console now on the iPhone, iPad #

jsconsole

JSConsole from Remy Sharp is a great way to play with JavaScript in the browser, especially during live coding sessions.

Just like Firebug or the WebKit JavaScript consoles, simply type an expression and JSConsole will evaluate it:

Math.floor(-3.15)
> -4

JSConsole also serves up permalinks for each command: http://jsconsole.com/?Math.floor(-3.15). You can even load external JavaScript libraries with a single command:

:load jquery

Remy has now ported the console to mobile devices using PhoneGap, complete with Websockets support.

Screenshot of jsconsole on iPhone

[JSConsole on GitHub][JSConsole for iOS on GitHub]

OmniGroup Frameworks: Objective-C frameworks for Mac OSX and iOS apps #

The Omni Group, makers of wildly popular Mac and iOS products such as OmniFocus and OmniGraffle, want to share some of their code with you.

The OmniGroup Frameworks are a set of Objective-C code libraries for both Mac and iOS that peform a wide range of common tasks.

  • OmniFoundation includes a set of low-level objects like OFStringScanner for scanning Unicode strings, OFRegularExpression for Regex, and OFMessageQueue & OFQueueProcessor for multithreaded operations.
  • OmniDataObjects resemble CoreData light, built on top of SQLite for Mac and iOS.
  • OmniAppKit provides types like OAOSAScript for enabling AppleScript in your app, OAPreferences for multi-pane preferences windows, and OAFindPanel for find-and-replace tasks.
  • OmniInspector is the inspector seen at work in OmniGraffle, OmniFocus, OmniOutliner and OmniPlan
  • OmniNetworking provides higher-level types to work with TCP, UDP and Multicast networking.

[Source on GitHub] [Framework forums]

#30: Sencha Touch with David Kaneda

Wynn caught up with David Kaneda to talk about mobile web app development with Sencha Touch. Items mentioned in the show: Sencha Touch – HTML5 mobile application framework WebKitBits – David’s Tumblr for the latest in WebKit news and tips jQTouch – jQuery plugin for mobile web development on the iPhone, iPod Touch, and other […]

Episode 0.2.8 – Mobile web development with John Resig

Adam and Wynn caught up with John Resig at TXJS and talked about mobile web development with jQuery and TestSwarm, a continuous integration project from Mozilla Labs. Items mentioned in the show: TestSwarm – Distributed continuous integration testing for JavaScript. Pro JavaScript Techniques John’s JavaScript book Secrets of the JavaScript Ninja John’s upcoming book of […]

MGTwitterEngine – Objective-C Twitter library for the iPhone #

If you need to integrate Twitter into your iPhone app or build your own Twitter client, you might check out MGTwitterEngine from Matt Gemmell. MGTwitterEngine consumes the Twitter XML API and supports both NSXMLParser and libxml.

When building your controller, the library supports a few callbacks:

- (void)requestSucceeded:(NSString *)requestIdentifier;
- (void)requestFailed:(NSString *)requestIdentifier withError:(NSError *)error;
- (void)statusesReceived:(NSArray *)statuses forRequest:(NSString *)identifier;
- (void)directMessagesReceived:(NSArray *)messages forRequest:(NSString *)identifier;
- (void)userInfoReceived:(NSArray *)userInfo forRequest:(NSString *)identifier;

If Obj-C is a bit too low-level for you, take a look at Appcelerator Titanium Mobile which has an easy JavaScript API that includes network API support. If you missed it, also be sure to check out Episode 0.0.8 with Marshall Culpepper.

[Source on GitHub] [Matt’s blog post]

SimFinger – make awesome screencasts of your mobile apps on your Mac #

SimFinger is a screencasting tool from Loren Brichter aka @atebits, author of popular apps like Tweetie for the iPhone as well as the desktop. SimFinger is a Cocoa app for the Mac that adds some polish to your mobile app screencasts by providing:

  • A frame that sits on top of the simulator and adds shine and an iPhone 3G look
  • A halo around the pointer to indicate touch events
  • Ability to set the carrier text
  • Fake apps (and dock badge counts) so that your app isn’t so lonely on the home screen.

Notice that we say ‘mobile apps’ and not ‘iPhone’ or ‘Touch’ apps because a fork from @kreutz adds support for the PalmPre simulator.

[Source on GitHub] [Original blog post] [Palm fork]

Tradui: Civic Hacking for Haiti #

Tradui iPhone Screenshot

Across the United States there has been a gathering of people looking for ways to ease the suffering caused by the devastating earthquake that struck Haiti on Jauary 12th, 2010. Three members of Intridea, Chris Selmer, Brendan Lim and Jonathan Nelson stepped up to help with the efforts towards those in need in Haiti by heading to DC to take part in Crisis Camp DC.

Their “civic hacking” efforts in DC lead them to develop Tradui.

Tradui is pronounced: Trad – eww – ee

Tradui, Creole for “translate”, is an application for the iPhone and Android platforms to translate Creole to English and English to Creole and was built by Intridea for Crisis Commons as part of Crisis Camp DC. Additional work was also done by members of CrisisCamp Haiti on 1/23 in DC, Boston, and Boulder.

Built in 15 man hours w/ Appcelerator

We spoke with Brendan Lim, Intridea’s mobile application extraordinaire who lead the development of Tradui.

“From concept to completion, the development for the actual mobile application took 15 man hours. Our biggest initial hurdle to get over was getting our hands on a good dictionary. Then we had to parse it out.”

When asked how they were able to keep the development time so short, Brendan replied…

“That’s the beauty of using Appcelerator’s Titanium Development Platform. We can do builds super quick for both the iPhone and Android platforms.”

If you want to learn more about Appcelerator and their exciting open source development platforms, make a note to go back and listen to Episode 0.0.8 with Marshall Culpepper from Appcelerator after reading this.

The data for Tradui’s Creole to English and English to Creole dictionary was extracted with permission from the HaitiSurf Creole to English Dictionary. Each and every one of the translation capabilities inside Tradui are available offline. That means that no data plans are required. It is completely offline.

It’s Open Source, spread the word!

In order to spread Tradui to other platforms and uses the code was open sourced on GitHub, allowing the community to fork the project and help with development. Many people have even ported the idea to other platforms.

To learn more head to traduiapp.com

CrisisCamp @ SXSW

If you plan to be in Austin for SXSW and want to take part in some Civic hacking at CrisisCamp @ SXSW, you can join CrisisCamp and many others March 16-17 to “hack to help” in times of Crisis.

CrisisCamp is hoping to have LIVE streaming video from the event courtesy of @texascoworking

[Source on GitHub] [Homepage]

Appcelerator Titanium Mobile 0.8.0 is out #

Appcelerator released version 0.8.0 of Titanium Mobile which allows developers to build native iPhone and Android apps using HTML, CSS, and JavaScript. New in this release:

  • Native Map Support
  • Access to Contacts
  • Native Coverflow View (iPhone only)
  • Push Notifications (iPhone only)
  • Custom Table Views and Grouped Views
  • Embedded SQLite database file support
  • Facebook Connect for Android
  • Record Video (iPhone only)

[Product page] [Source on GitHub] [Changelog]

Changelog Ads Ship it!

Continuous Deployment made simple. Codeship runs your tests & continuously deploys your code. Try it now for free!