Nested Content with Navbars using jQuery Mobile

I’ve been messing around with jQuery Mobile lately with the intention of using it in conjunction with Apache Cordova to build an Android app. I ran into a situation where I wanted to present different parts of the UI within an individual page depending on the item selected in a navbar on that page. This is useful for things like splitting up long forms. It took me a bit to figure out the solution, so I thought I’d share it.

Below is what the markup for my page looks like, where each link in the navbar uses an anchor that corresponds to a nested div in the content area.

<div data-role="page">
  <div data-role="header">
    <div data-role="navbar">
      <ul>
        <li><a href="#one" class="ui-btn-active ui-btn-persist">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
      </ul>
    </div>
  </div>
  <div data-role="content">
    <div id="one">One content</div>
    <div id="two">Two content</div>
    <div id="three">Three content</div>
  </div>
</div>

Below is what the JavaScript looks like to make this work.

(function($) {

// Before handling a page change...
$(document).bind("pagebeforechange", function(e, data)
{
    // If the new page is not being loaded by URL, bail
    if (typeof data.toPage !== "string")
    {
        return;
    }

    // If the new page has a corresponding navbar link, activate its content div
    var url = $.mobile.path.parseUrl(data.toPage);
    var $a = $("div[data-role='navbar'] a[href='" + url.hash + "']");
    if ($a.length)
    {
        // Suppress normal page change handling since we're handling it here for this case
        e.preventDefault();
    }
    // If the new page has a navbar, activate the content div for its active item
    else
    {
        $a = $(url.hash + " div[data-role='navbar']").find("a.ui-btn-active");

        // Allow normal page change handling to continue in this case so the new page finishes rendering
    }

    // Show the content div to be activated and hide other content divs for this page
    var $content = $($a.attr("href"));
    $content.siblings().hide();
    $content.show();
});

})(jQuery);

Here’s what this looks like in action:

Demo of nested content areas accessible via navbar links

I’d be curious to know if there are other better or more efficient ways of handling this.

Sideloading Google Play apps onto a Kindle Fire

I recently turned 30. My wonderful wife and mother got together and purchased a Kindle Fire tablet for me to go along with the Samsung Captivate Android phone I currently own. While some apps are better on the tablet than the phone, there are some I like to have on both like TinyShark. Sadly, not all apps available in Google Play are available in the Amazon App Store and there’s no easy way to get access to the former from a Kindle without rooting it. So, I did some digging and managed to find an alternate way to sideload them, no rooting required.

Obligatory disclaimer: I’m not responsible for any damage that might occur by following these instructions. Use them at your own risk. Also, be aware that being able to install an app from Google Play onto a Kindle doesn’t mean that the app will work on the Kindle. (An example of this is the app for Google Play itself, which immediately dies when you try to run it.) This is due to any number of differences in hardware, Android implementations, etc.

Here’s what you’ll need:

  • A Kindle Fire
  • An Android device* with access to Google Play, like my Captivate
  • A computer with the Android SDK installed

* It’s possible that an emulator run using the SDK can be used in place of an actual device.

On the Android device, install whatever app you want to sideload onto your Kindle, then go to Settings > Applications > Development and check the USB debugging option. Now hook the Android device to the computer with a micro USB cable.

On the computer, open up a terminal and go to the platform-tools subdirectory within the SDK directory. Run this command (which I got from this post), which uses the adb utility:

adb shell pm list packages -f

Each line of the command’s output will be in this format:

package:[path]=[namespace]

Open up a web browser and go to the page on Google Play for the app you want to sideload. The URL of that page will look like https://play.google.com/store/apps/details?id=[namespace] where [namespace] will match the [namespace] portion of a line from the command’s output. Note the corresponding [path] portion of this line.

Now go back to the terminal and run this command, substituting the path you found for [path]:

adb pull [path]

This will copy the APK file from the Android device to the computer.

Unplug the micro USB cable from the Android device and plug it into the Kindle. You may need to disconnect and reconnect the computer’s end of the cable to allow it to mount the Kindle as a storage device, which should happen automatically.

On the Kindle, hit the gear icon on the top right, select More > Device, and make sure Allow Installation of Applications From Unknown Sources is turned on. Now hit the Home button at the bottom of the screen, then Apps near the top, then Store on the top right. Search for and install the ES File Explorer app.

From the computer, use a filesystem browser to access the mounted Kindle storage and copy the APK file from the computer to a directory on the Kindle. I used the Documents directory.

Back on the Kindle, open the newly-installed ES File Explorer. It should give you access to the directory on the Kindle where you copied the APK file and allow you to open and install it.

Open your sideloaded app on your Kindle and enjoy it!

Update #1, 3/28/12: This post was linked in the PCWorld article “Get More Out of Your Kindle Fire Tablet: Five Tips.” It’s got some good information and I recommend giving it a read.

Update #2, 9/10/12: Forbes contributing author Adrian Kingsley-Hughes linked this post in his own post “Something Everyone Should Know Before Pre-Ordering a Kindle Fire HD.”

Update #3, 10/3/12: ereaderguides on YouTube published a video guide on installing third-party apps on the Kindle Fire HD and linked to this post in the video description.

Update #4, 10/26/12: Spiegel Online, a German news source, linked to this post from their review of a Kindle Fire HD.

Update #5, 12/26/12: This post got nearly 1,200 hits on 12/25, presumably from those gifted a Kindle Fire for Christmas. Also, Ars Technica posted a nice write-up of getting Google’s stock set of apps onto a Kindle Fire HD.

WordPress SyntaxHighlighter font size fix

I use WordPress for this web site. To pretty up source code examples in my posts, I use the excellent SyntaxHighlighter Evolved WordPress plugin. The WordPress theme I use, Fluid Blue, does something with its CSS such that it and SyntaxHighlighter appear to conflict. The result is that source code examples processed by the plugin are displayed with a font size that’s too small to read comfortably.

In doing some digging, I learned about the child themes feature of WordPress, which allows you to effectively extend an existing theme. I created a directory under wp-content/themes called fluid-blue-custom. In this directory, I created a styles.css file with these contents:

/*
Theme Name: Fluid Blue (Custom)
Template: fluid-blue
*/

@import url("../fluid-blue/style.css");

body .syntaxhighlighter code, body .syntaxhighlighter .gutter { font-size: 12px !important; }

The Template line of the comment block indicates that this theme is a child theme of the existing Fluid Blue theme that resides in the wp-content/themes/fluid-blue directory. The @import line pulls in the styles.css file from that directory, after which I can apply any CSS overrides I like. The last line is a CSS rule specific enough to override applicable rules from the parent theme in order to increase the font size to something more easily readable.

It appears I’m not the only one who’s encountered this issue, so I hope this post helps someone else.

Setting up EC2 for Drupal with Puppet

I’m currently working on a project that involves running Drupal on Amazon EC2. To save time in setting up future new VM instances, I decided to take the opportunity to learn puppet. For the time being, I’m using a single VM to run the full LAMP stack and running puppet without a server by copying my puppet manifest to the VM and using puppet’s apply command to apply it locally. However, this manifest can easily be adapted for a multi-VM environment. After some tinkering, I came up with the code below.

class web {
    package { 'httpd':
        ensure => 'present',
    }

    package { 'php':
        ensure => 'present',
    }

    # Update this to use your respective time zone value
    exec { 'php_config':
        command => '/bin/sed -i "s/^;date.timezone =/date.timezone = \'America\/Chicago\'/g" /etc/php.ini',
        require => Package['php'],
    }

    service { 'httpd':
        ensure => 'running',
        enable => true,
        hasrestart => true,
        hasstatus => true,
        subscribe => Package['httpd', 'php'],
    }

    # Drupal requirements
    package { ['php-pdo', 'php-mysql', 'php-xml', 'php-gd', 'php-mbstring']:
        ensure => 'present',
        require => Package['php'],
    }
}

class mysql {
    package { 'mysql-server':
        ensure => 'present',
    }

    service { 'mysqld':
        ensure => 'running',
        enable => true,
        hasrestart => true,
        hasstatus => true,
        subscribe => Package['mysql-server'],
    }

    # Equivalent to /usr/bin/mysql_secure_installation without providing or setting a password
    exec { 'mysql_secure_installation':
        command => '/usr/bin/mysql -uroot -e "DELETE FROM mysql.user WHERE User=\'\'; DELETE FROM mysql.user WHERE User=\'root\' AND Host NOT IN (\'localhost\', \'127.0.0.1\', \'::1\'); DROP DATABASE IF EXISTS test; FLUSH PRIVILEGES;" mysql',
        require => Service['mysqld'],
    }
}

class {'web': }
class {'mysql': }

With this code saved to a file called manifest.pp (.pp being the file extension for puppet manifests), I can spin up a VM and do the following to set it up:

scp -i key.pem manifest.pp ec2-user@host:~/
ssh -i key.pem ec2-user@host
sudo yum upgrade -y
sudo yum install -y puppet
sudo puppet apply manifest.pp
rm -f manifest.pp
exit

At this point, I have a basic Apache/MySQL/PHP configuration capable of receiving a Drupal 7 installation.

Top 10 Posts of 2011

Following in the trail blazed by the likes of Cal Evans and Chris Cornutt, I decided to post a list of the posts on this blog that have received the most traffic this year along with some related commentary. However, in the spirit of Charles St. Michael, I decided to up the number of posts from three to 10. So, here we go:

10. Building PHP-GTK with Cairo Support on Ubuntu Jaunty – 2009-04-25

Very interesting that this post was in the running at all. It’s over two years old, goes back five Ubuntu versions, and deals with PHP 5.3.0RC1 (current is 5.4.0RC4) and PHP-GTK when Cairo support was relatively new. (There’s now a separate PECL extension for it now.) If you want to learn more about this, you should definitely check out Elizabeth Smith and Michael Maclean.

9. Renaming a DOMNode in PHP – 2010-02-09

It seems this isn’t as uncommon a problem as I would have thought. Sadly, in the 22 months that have passed since I authored the post, it seems the DOM extension hasn’t been updated further to support the DOM 3.0 standard or the renameNode() method mentioned in this post.

8. PHP_CodeSniffer Article in php|architect – 2011-04-28

It’s nice to see this post get attention even if was just a brief hand-waving to point people to the article, which is one of two I wrote for php|architect Magazine this year. It’s also nice to see that despite being seen by some as a more menial facet of quality assurance, other people consider it important enough to read the article and take something away from it.

7. ‘New SPL Features in PHP 5.3’ Hits php|architect – 2011-02-01

Another post that was just hand-waving to an article that dealt with a topic I saw as underrated. The article followed my php|tek 2010 session and preceded a Zend webinar this year on the same topic.

6. Process Isolation in PHPUnit – 2010-08-19

Between views and comments, it seems I wasn’t the only one who ran into this head-scratcher. However, if memory serves, I think there are plans to remove this feature from PHPUnit in future versions.

5. Node.js: A Beginner’s Perspective – 2010-10-19

The post is about a year old now, and sadly I haven’t done anything of merit with Node.js since (though I hope to change that), but it seems the community is still as vibrant and growing as it ever was. Heck, you can even integrate PHP-FPM with Node via FCGI now. Node is definitely a technology to continue keeping your eye on if you don’t already use it.

4. PHPUnit and Xdebug on Ubuntu Karmic – 2010-01-03

It’s surprising that this post is still relevant since there have been four Ubuntu releases since the version that this post deals with. I’ve since moved over to Fedora 16, at least for now, and it seems to address most of my regular needs. I may look at other distributions like Mint later on.

3. Models in Zend Framework – 2010-03-26

Even though it’s over a year old now, I think this post gets the traffic it does because there’s not really one prescribed way to build models and because the existing documentation describes a number of components that can be used to build models, but doesn’t really offer specific guidance on how to approach it. Bit of a double-edged sword, I suppose.

2. New SPL Features in PHP 5.3 – 2010-05-20

I published this post on the same day that I gave my session on the topic at php|tek 2010. It’s one of my longer and more content-rich posts and I’ve updated it on occasion as I’ve had cause to update the benchmarks that go along with it. Good to see that interest in SPL seems to be rising.

1. Database Testing with PHPUnit and MySQL – 2010-01-04

While I love that this post is driving as much traffic to my blog as it is, I do want to get around to contributing related documentation to the PHPUnit project. Hopefully that will happen soon. In the meantime, you can also read more about this topic in the Testing chapter of my most recent book.

So, one big take-away from this post has been that most of my high-traffic posts were written last year rather than this year. I can’t say it’s very surprising since, looking back, a number of my posts from this year were of the hand-waving variety. I’m hoping to publish more content-rich posts more frequently in 2012. I won’t call it a resolution, because I’d likely be jinxing myself in the process, but I will say that I’ll make my best attempt.

Best wishes to everyone in the new year.

Appearance on the Engine Yard Podcast

The wonderful folks at Engine Yard invited me and my friends and fellow co-authors Lorna Jane Mitchell and Davey Shafik to be guests on an episode of their PHP podcast with our good mutual friend Elizabeth Naramore as our host.

We discuss our recently published book PHP Master: Write Cutting Edge Code, how SitePoint brought us together to work on the project, what it was like to write the book, and some reflections on the experience from each of us.

If you’ve heard about the book and not read it or been curious as it, I heartily recommend giving it a listen.

PHP Master Published by SitePoint

I’m very happy to announce that I’ve had a second book published: “PHP Master: Writing Cutting-Edge Code.” This time, I had the honor and pleasure of co-authoring the content with my good friends and peers in the PHP community Lorna Jane Mitchell and Davey Shafik and working with the excellent team at SitePoint to make it available to you. The book covers a number of fundamental skills for professional PHP developers including web services, design patterns, security, testing, and more. If you’re in the market for such a PHP title, I encourage you to consider checking it out.

New Articles on PHPmaster.com

I recently started writing articles for PHPmaster.com, a site managed by SitePoint that syndicates PHP tutorials, opinions, and news. You can check out these articles, “Documentation Makes the World Go Round” and “Integrating Amazon S3 using PEAR”, at either phpmaster.com or sitepoint.com. If you prefer getting your news via Twitter, check out @phpmasterdotcom or @sitepointdotcom. Hope you find the articles useful.

ledger stats

Occasionally, I need to take a break from the projects I’m working on. How do I do that? By working on another project, of course!

Just over a year ago, I found ledger and began using it to manage my household finances. Some people may find that sort of thing boring, but I think it’s it neat to look at the past year’s worth of transactions, get a bird’s eye view of our spending, identify trends, and so forth.

I’ve had it in the back of my mind lately that I’d like a better and preferably more visual way to do those things. After perusing through a few charting libraries, I found that Highcharts seem to do what I needed. Among other things, it provides a plugin for the the JavaScript library I’m most familiar with: jQuery.

I already had a bit of PHP code lying around to parse ledger’s XML output, give me a monthly spending breakdown by account, and output it in CSV format. I lifted the parsing logic, wrote some more PHP to search transactions by several criteria based on form input, implemented a very simple plugin system to consume the search results and output various charts, and wrote a few simple plugins. Thus, ledger stats was born.

It’s still in a very rough prototypical stage, but it’s got enough functionality for others to start playing around with it. Feel free to fork it on GitHub and suggest improvements.

Android Emulator Can’t Find AVD

I ran into a small gotcha recently when creating a new Android project in Eclipse. The first time I went to run it on an AVD, I received an error in the console output:

[2011-08-09 19:14:46 - Emulator] emulator: ERROR: unknown virtual device name: 'avd'
[2011-08-09 19:14:46 - Emulator] emulator: could not find virtual device named 'avd'

The first few results in Google didn’t turn up any useful information. The culprit turned out to be buried in the Eclipse UI.

  1. If the Package Explorer view isn’t already active, activate it by selecting Window > Show View > Package Explorer.
  2. In the Package Explorer view, right-click on your project and select Run As > Run Configurations.
  3. In the right half of the Run Configurations window, select the small Target tab.
  4. On the far right side of the window, use the scrollbar to scroll to the bottom of the Target tab’s contents.
  5. Find the text box labeled Additional Emulator Command Line Options. It probably has a value like this: -cpu-delay 0 -no-boot-anim -avd avd.
  6. Change the value of the text box to look like -cpu-delay 0 -no-boot-anim -avd AVD Name where AVD Name (which defaults to simply avd) is the name of the AVD you’ve created for this project. In other words, if you open the Android SDK and AVD Manager window (Window > Android SDK and AVD Manager), the value you should use in place of AVD Name within this text box is the same value that appears in the AVD Name column of that window for the desired AVD. So, if your AVD is named MyProjectAVD, the value of the text box should be -cpu-delay 0 -no-boot-anim -avd MyProjectAVD.