I was working on a new actual post (as opposed to just posting slides like I have been lately) and realised that my grunt-init-cordova slides never made it onto the blog. I have just totally updated grunt-init-cordova (as part of writing the upcoming post) and there will be more about it there.
Slides from my talk at the Melbourne Mobile meet up - August 20th, 2013.
So, I decided to advocate for “none of the above”
Slides from my PhoneGap Day US talk about SpiderOak
Slides from my talk at the Melbourne Mobile meet up - May 21st 2013.
This is my attempt at a non-techical talk about the path that led to the current Android version of the open source SpiderOak mobile client app.
__AUTHOR_NAME__(“Author”) and Contributors
All rights reserved.
The “Free as in Hugs” License
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
Redistributions of source code must…
4ZzZfm app in need of an update
The 4ZzZfm app was my first ever mobile app. It was then my first PhoneGap / Cordova app when I ported it.
It’s in desperate need of an update if for no other reason than that the iOS version does not support the iPhone 5 screen size.
I am thinking of trying to consolidate the codebases (currently it is a codebase for each of its two platforms) and maybe even expand it to cover other platforms beyond iOS and Android.
Questions I am going to have to look at over the next couple of weeks:
- Does anyone listening to 4ZzZfm want to do so on WP8, BlackBerry or any of the other platforms supported by PhoneGap / Cordova?
- Do I just use KendoUI and keep it closed source, or do I do a completely custom UI and open source the app? (note: I will only open source it if I can get a real program feed instead of scraping the website like I do now… the current code is embarrassment personified)
- If I am supporting Android 2.3 (and I am sure I will), how will I handle the fact that it does not support html5 audio… and conversely, the media APIs I use for it are no good for streaming radio on iOS?
- Are there other features that would be of use to 4ZzZfm?
I’ll try to keep updating the blog as I go with it (since I haven’t been using the blog for anything else lately with Pixfor’s own update on hold).
A Great intro to the Cordova Command Line Tooling
Cordova-CLI is doing some great things to make working with multiple platforms in one Cordova project easier. But installing with it can initially seem a little daunting if you’ve never played with it before, and so I thought it would help to write this guide up to help anyone else getting their…
Raised center TabBar button in Cordova / PhoneGap for iOS
A popular pattern in iOS lately (especially in apps with a focus on photo taking) is the raised / highlighted middle TabBar button. It’s easy enough to get a native TabBar in an iOS PhoneGap app using one of the two popular plugins (NativeControls and TabBar). There is even a great article on getting a raised middle TabBar button on iOS.
But not everyone using PhoneGap can comfortably turn that article into a modified TabBar plugin. There was even a recent thread on this topic in the PhoneGap Google Group recently.
Since I have done this in one of my apps, I thought I might post a quick outline on how to use the code in the iDevRecipes article above to get one of these buttons into one of the plugins above.
The Button Image
This is the button I created for my app Pixfor. It’s basically just a green tinted screenshot of the middle third of a standard TabBar with an Aperture icon and a subtle shadow. You certainly don’t need to have a tinted gradient as well as your larger icon or whatever. That’s just a design decision. The great thing about how this works is that the touch goes straight through the added UIButton, so the highlight of the TabBar still happens so if your button image has transparency, it will show through nicely.
The button image is named
aperture-tab.png and also has a corresponding
firstname.lastname@example.org image for retina devices.
Note: these images (unlike the icons normally used in the TabBar plugins as icons) are added to the project through XCode as a resource, not just copied into the
www folder with the other PhoneGap assets.
For example, in NativeControls:
window.plugins.nativeControls.createTabBarItem("takepix", "", "", options);
and in TabBar:
window.plugins.tabBar.createItem("takepix", "", "", options);
The Objective-C Code
Pixfor happens to use the NativeControls plugin, but the code below should work in both.
Both these methods end with
What we are going to do is add the following code directly after this line before the closing brace.
This code will add a custom UIButton using our image centered on our TabBar. Note the file name
aperture-tab.png in the first line. The retina @2x version does not need to be explicitly referenced.
And there it is! Our special TabBar button.
* Line numbers only used for illustration. Please find the methods above in the plugin’s latest version.