I was so proud of myself: I held out for an amazing four days before I gave in to the iPhone. Certainly, the fact that my original phone was a piece of junk was a lot of incentive. But what really sold me was the fact that the phone had Wi-Fi built-in and—more importantly—has a great browser. You see, the software development kit (SDK) for the iPhone is standard Dynamic HTML (DHTML) through the Web browser. So, you can use all the familiar HTML, Cascading Style Sheet (CSS), and Asynchronous JavaScript™ + XML (Ajax) front-end technologies in combination with your choice of back-end technology: PHP, Rails, Java™ technology—whatever you like.

After playing with my iPhone and doing all the usual stuff like calling people, playing with Google Maps, and listening to tunes with the iPod functionality, it was time to develop something specifically for the phone. So, the question becomes, what to develop?

Well, one thing that I missed from my old phone was the Salling Clicker application. Salling Clicker turns any phone into a remote control for a Macintosh (and now, computers running Microsoft® Windows®, as well). Using the clicker application on the phone, I can launch AppleScripts on my Macintosh computer to do all kinds of useful things, such as controlling Apple iTunes or KeyNote (Apple's alternative to Microsoft Office PowerPoint®). On smart phones, this functionality required a small downloaded application on the phone. But the iPhone doesn't allow you to download special applications, because Apple Safari, the Web browser, is the SDK. So, how could I use Safari to control my Mac?

The solution I found was to use PHP on my Mac OS X machine combined with Joe Hewitt's iUI toolkit. The toolkit builds an iPhone-looking interface in the Web page. It also handles the feel of the interface. For example, as you page through a list of items, iUI sweeps from side to side, just like the iPhone does when you page through your list of contacts.

Building the command list

Building the application starts with defining some commands that the iPhone remote control will present for you to select. You use an XML file to define the commands. Listing 1 shows this file.

                
<commands>
  <command title="Next Song">
    tell application "iTunes" to next track
  </command>
  <command title="Previous Song">
    tell application "iTunes" to back track
  </command>
</commands>

The file is a list of <command> tags. Each tag has a title attribute that defines a human readable title for the command. And the content of the <command> tag is the AppleScript code to execute when the command is requested. Because of XML encodings, if you want to put in any AppleScript code that has angle bracket (< or >) or ampersand (&) characters, you must encode those as <, >, and &, respectively.

To wrap this XML file, I wrote a PHP V5 Command class that reads the file, returns the command names, and runs the commands using the Mac OS X osascript command. The code for this class is shown in Listing 2.

                
<?php
class Commands
{
  private $_commands;

  function __construct()
  {
    $this->_commands = array();

    $doc = new DOMDocument();
    $doc->load('commands.xml');
    $cmds = $doc->getElementsByTagName( 'command' );
    foreach( $cmds as $cmd )
    {
      $this->_commands []= array( 
        'title' => $cmd->getAttribute('title'),
        'command' => $cmd->firstChild->nodeValue
      );
    }
  }

  function getCommands()
  {
    $cmds = array();
    foreach( $this->_commands as $cmd )
    {
      $cmds []= $cmd['title'];
    }
    return $cmds;
  }

  function runCommand( $id )
  {
    $ph = popen( "osascript", "w" );
    fwrite( $ph, $this->_commands[$id]['command'] );
    fclose( $ph );
  }
}
?>

The class starts by loading up the commands.xml file. It reads in the file using the DomDocument PHP class. Then, it finds all the command arguments using getElementsByTagName. When it has the <command> tags as an array, the class loads the _commands member variable with the titles and AppleScript commands.

Two additional methods are defined:

• The getCommands() method, which simply returns a list of the names
• The runCommand() method, which given an index runs that command using the osascript command-line AppleScript executor.

Back to top

Building the interface

With the commands XML file and Commands PHP class written, it's time to add an interface. Just to make sure everything is working properly, I'll put a fairly rudimentary interface on it. This interface is shown in Listing 3.

                
<html><body>
<?php
require_once('commands.php');
$cmds = new Commands();
?>
<?php
$id = 0;
foreach( $cmds->getCommands() as $cmd ) {
?>
<a href="do.php?id=<?php echo($id);?>"><?php echo( $cmd ); ?></a><br/>
<?php $id++; } ?>
</body></html>

The script first gets the Command class, and then asks it for the lists of commands using the getCommands() method. Then, the script builds a set of links to the do.php page using the command index number and the name of the command that the Commands class returned.

When I navigate to the page in the Safari browser, I see something like Figure 1.

I could use this as my iPhone interface and it would work. But it wouldn't feel like the iPhone. So, the next thing to do is use the iUI toolkit to extend the interface. Listing 4 shows the code for doing so.

                
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Mac Controller</title>
<meta name="viewport"
  content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<style type="text/css" media="screen">@import "iui/iui.css";</style>
<script type="application/x-javascript" src="iui/iui.js"></script>
</head>
<body>
<div class="toolbar">
  <h1 id="pageTitle"></h1>
  <a id="backButton" class="button" href="#"></a>
</div>
<?php
require_once('commands.php');
$cmds = new Commands();
?>
<ul title="Commands" selected="true">
<?php
$id = 0;
foreach( $cmds->getCommands() as $cmd ) {
?>
<li>
<a href="do.php?id=<?php echo($id);?>"><?php echo( $cmd ); ?></a>
</li>
<?php $id++; } ?>
</ul>
</body></html>

At the top of the file, you include the iUI CSS file that has all the styles that give the page its iPhone look. Then, you include the iUI JavaScript file that handles all the interactivity. After that, you use the Commands class to get the list of commands. With that list, you build an unordered list (<ul>) with list item elements for each item (<li>). No, it's not as ugly as it sounds. In fact, you can look at it in Safari, and you'll get exactly the same look as you would on the iPhone, as shown in Figure 2.

If you use Windows, don't worry: Safari now runs on both Windows and Mac. Of course, the PHP that runs this code must be on a Mac to run the osascript command and the AppleScript code. But you could use system commands if you want to run this on DOS or UNIX® systems.

The final step is to create the do.php file that index.php references to run the actual commands. This class is shown in Listing 5.

                
<?php
require_once('commands.php');

$cmds = new Commands();
$cmds->runCommand( $_GET['id'] );
?>

Now, you can use Safari to browse to the page locally and just click the links to check whether the application works. If everything is in order, iTunes will go to the next or previous song depending on what you select.

One thing I did have to change on my installation was to edit the /etc/httpd/httpd.conf file, change the User setting to my user name, and change the Group setting to staff. I then rebooted my Apache server by running this command line:

% apachectl graceful

With that done, my iTunes interface flipped back and forth between tracks when I clicked the links. I can then turn on my iPhone and use the Safari browser to go to my local machine by IP address and access the application, as long as my laptop and my iPhone are on the same Wi-Fi network.

Back to top

Telekenesis

As I did the research for this article, I found that someone had already taken this whole concept of a Mac-driven remote for the iPhone to a new level. The project is called telekinesis, and it's hosted on the Google Code site. The application is called iPhone Remote, and it runs as a graphical user interface (GUI) application in Mac OS X.

When I launch iPhone Remote, it opens Safari to a page that shows what it will look like on the iPhone. This is shown in Figure 3.

From here, I can navigate to my applications and open them, browse my documents, use an iTunes remote, even navigate around the screen and run command lines—all from my iPhone.

The iPhone Remote does prompt you for a user name and password so that not just anyone can use your Mac after you've installed and run it. So, it's possible to use the iPhone as a secure virtual network computing (VNC) device for your Mac remotely.

Back to top

Conclusion

Developing for the iPhone is a breeze. The ads say that the iPhone gives you access to the Internet as is rather than some mobile version of it, and the ads are right: You can browse to your normal pages just as you would on your Mac or PC. But toolkits like the iUI interface builder help give the application a more genuine iPhone look and feel—handy with applications like this XML and PHP-driven iPhone remote.

Resources

Learn

• iPhone: See Apple's iPhone site, a good place to find information on the iPhone.
  
  
• PHP home page: Visit the PHP home page to learn all about PHP.
  
  
• iUI toolkit: Check out Joe Hewitt's site and learn more about the iUI toolkit.
  
  
• Salling Clicker: Learn more about the Salling Clicker, the original inspiration for this article. It remains a fantastic resource for people who want to use their mobile phones to control their Macs or PCs.
  
  
• iPhone Remote: Explore the iPhone Remote from the telekenesis project, the full version of this example.
  
  
• IBM XML certification: Find out how you can become an IBM-Certified Developer in XML and related technologies.
  
  
• XML technical library: See the developerWorks XML Zone for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks.
  
  
• developerWorks technical events and webcasts: Stay current with technology in these sessions.
  
  
• The technology bookstore: Browse for books on these and other technical topics.
  
  

Get products and technologies

• Have an iPhone?: Don't miss a single developerWorks feed ever again. Pick a topic, zone, brand, select an article, read the blurb, or visit the site. All on your iPhone with this feed URL: http://www.ibm.com/developerWorks/iphone.
  
  
• IBM trial software: Build your next development project with trial software available for download directly from developerWorks.
  
  

Discuss

• Participate in the discussion forum.
  
  
• XML zone discussion forums: Participate in any of several XML-centered forums.
  
  
• developerWorks XML zone: Share your thoughts: After you read this article, post your comments and thoughts in this forum. The XML zone editors moderate the forum and welcome your input.
  
  
• developerWorks blogs: Check out these blogs and get involved in the developerWorks community.
  
  

About the author

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Building the command list
• Building the interface
• Telekenesis
• Conclusion
• Resources
• About the author
• Comments

Next steps from IBM

With the no-charge DB2 Express-C, Zend Core PHP, and Java you can develope advanced Web 2.0 applications quickly that matter.

---

• Try: Download a free trial version of DB2 Express-C, which includes Zend Core PHP and pureXML technology that is ideally suited for managing both XML and relational data and powering a new breed of SOA and Web 2.0 solutions.
• Article: This IBM Redbook shows how to port PHP apps from MySQL to DB2, and includes code samples for creating Zend Core PHP applications.
• Tutorial: In this Mastering Facebook app development tutorial series, you will use Java and PHP in parallel to build a Facebook interface for an online stock trading J2EE application using the Spring framework.
• Buy: DB2 9 for Linux, UNIX and Windows

My developerWorks community

Dig deeper into XML on developerWorks

Rate a product. Write a review.

Write a review for Rational products today!

Special offers