Beginning Mac OS X Tiger Dashboard Widget Development (2006)

16

Timbuktu Quick Connect

Timbuktu is a screen-sharing program from Netopia that runs on both Macs and PCs and allows you to control a remote computer from your Macintosh (Figure 16-1). Though Timbuktu is not at feature parity on the two platforms yet, the Mac version includes file exchange, clipboard

exchange, and sending files and messages, and is very scriptable. To connect to another computer, you open the New Connection window in Timbuktu, find the computer to which you want to connect, and then log in to it.

Written by Nick Rogers of Netopia, the Timbuktu Quick Connect widget enables you to jump directly to a connection with a remote computer without having to open the New Connection window in Timbuktu and look for the computer you want to connect to. If you have multiple subnets with a number of computers in each, the Timbuktu Quick Connect widget can save you time because you won’t have to look through the subnets to find the computer and you don’t have to remember the IP to connect to it.

Chapter 16

Figure 16-1

The Interface

The Timbuktu Quick Connect widget interface is straightforward. A prominently displayed text box holds the IP address of the Macintosh to which you want to connect (Figure 16-2). As you type its IP address, you’ll see that the widget types ahead if you’ve connected with that machine before.

Clicking the Connect button or pressing the Return key after you’ve entered the IP address closes Dashboard, brings Timbuktu to the foreground, and prompts you for a name and password for the kind of connection that you are making (Figure 16-3).

242

Timbuktu Quick Connect

Figure 16-2

Figure 16-3

Once you have provided your password and clicked OK, you are logged in to the remote machine.

When you move your cursor over the front of the widget, you see the Information button in the lowerright corner. Clicking it flips the widget over (Figure 16-4) so you can see the preferences, instructions for use, and a copyright notice.

In addition to user configurable preferences, the back side also provides information about how the widget works. The preferences for the connection are the listed Timbuktu services. If the Control radio button is selected, entering the IP address of the remote machine and clicking the Connect button connects you to the remote machine. If the Send radio button is selected, entering the IP address of the remote machine and clicking the Connect button will prompt you for the password and then open a dialog where you can select files or type a message to send to the remote machine (Figure 16-5).

243

Chapter 16

Figure 16-4

Figure 16-5

Timbuktu Quick Connect Internals

You can see the files that make up the Timbuktu Quick Connect widget by Control-clicking or rightclicking the widget and selecting Show Package Contents (Figure 16-6).

244

Timbuktu Quick Connect

Figure 16-6

Like the Amazon Album Art widget, Timbuktu Quick Connect has an AppleScript as part of its bundle.

Info.plist

Because the widget needs to run the tb2connect AppleScript to connect with Timbuktu, the AllowSystem access key is set. This might seem to be unnecessary because the AppleScript is inside of the widget bundle, but the osascript command-line utility in the JavaScript that runs the AppleScript is part of the system. Setting the AllowSystem key gives the widget access to that utility.

<plist version=”1.0”> <dict>

<key>AllowSystem</key>

<true/>

<key>CFBundleIdentifier</key>

<string>com.netopia.timbuktu.pro.widget.quickconnect</string>

<key>CFBundleName</key>

<string>Timbuktu Quick Connect Widget</string> <key>CFBundleDisplayName</key> <string>Timbuktu Quick Connect Widget</string> <key>CFBundleVersion</key> <string>1.0.2</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>CloseBoxInsetX</key> <integer>12</integer> <key>CloseBoxInsetY</key>

245

Chapter 16

<integer>12</integer>

<key>MainHTML</key>

<string>TimbuktuQuickConnect.html</string>

</dict>

</plist>

HTML/CSS

The HTML file contains the usual import of the CSS file and references to the JavaScript files. If you look below the front <div>, you see references to the Timbuktu Quick Connect functions: the checkInput(theKeyPressed), the ipAddressAutoComplete(theKeyPressed), the launchTB2(), and the startTB2Connection().

<html>

<head>

<title>

Timbuktu Quick Connect </title>

<style type=”text/css”>

@import “TimbuktuQuickConnect.css”; </style>

<script type=”text/javascript” src=”TimbuktuQuickConnect.js” charset=”utf- 8”></script>

<script type=”text/javascript” src=”/System/Library/WidgetResources/AppleClasses/AppleButton.js” charset=”utf- 8”></script>

<script type=”text/javascript” src=”/System/Library/WidgetResources/AppleClasses/AppleInfoButton.js” charset=”utf- 8”></script>

<script type=”text/javascript” src=”/System/Library/WidgetResources/AppleClasses/AppleAnimator.js” charset=”utf- 8”></script>

</head>

<body onLoad=”setup();”> <div id=”front”>

<img id=”backgroundImage” src=”Default.png”></img>

<img id=”tb2Icon” src=”tb2icon.png” onClick=”launchTB2();”

onMouseover=”highlightTB2Icon();” onmouseout=”resetTB2Icon();”></img> <div id=”title”>Timbuktu Quick Connect</div>

<div id=”ipAddressFields”> <table cellpadding=”3”>

<tr>

<td class=”ipAddressLabel”> IP Address:

</td>

<td>

<input id=”ipAddress” size=”14” length=”15” onKeyDown=”return

checkInput(event);” onKeyUp=”return ipAddressAutoComplete(event);”> </td>

<td>

<div id=”connectButton”></div> </td>

</tr>

246

Timbuktu Quick Connect

</table>

</div>

<div id=”infoButton”></div> </div>

Clicking the tb2Icon.png, for instance, executes the launchTB2() function, which launches Timbuktu if it isn’t already running. If you look at the Default.png background image, you see that the tb2Icon.png overlays it. This selector in the CSS file sets its height and width to 50 × 50 pixels and positions it on the top and right edges of the Default.png.

#tb2Icon {

position: absolute; top: 0px;

right: 0px; height: 50px; width: 50px;

}

In addition to the launchTB2() function, the checkInput(theKeyPressed), the ipAddressAuto Complete(theKeyPressed), and the findAddress(anAddress) functions support the launchTB2() function. The checkInput(theKeyPressed) function validates the text as you enter it in the text box. The findAddress(anAddress) function tries to find an address from previous connections. The ipAddressAutoComplete(theKeyPressed) function uses the previous IP addresses and tries to autocomplete the address as you enter it.

The back <div> contains the information for the back side of the widget and preferences. The instructions are laid out using a table to create the hanging indent formatting. Each of the service buttons is incorporated as an input type=radio.

<div id=”back”>

<img id=”backgroundImage” src=”Default_reverse.png”></img> <div id=”mainContents”>

<table>

<tr valign=”top”> <td>

<font class=”preferencePaneFontLabel”> Instructions:

</font>

</td>

<td>

<font class=”preferencePaneFontText”>

Enter the IP address of a remote machine in the "IP Address" field on the front of this widget and click the "Connect" button.

</font>

</td>

</tr>

<tr valign=”top”> <td>

<font class=”preferencePaneFontLabel”> Choose the Timbuktu service to start:

</font>

247

Chapter 16

</td>

<td>

<table>

<tr valign=”top”> <td>

<input type=”radio” name=”serviceType” id=”sendButton” value=”send” onClick=”setDefaultService(this.value);”>

<label for=”sendButton” onClick=”selectDefaultService(‘sendButton’);”>

Send </label>

</td>

<td>

<input type=”radio” name=”serviceType” id=”exchangeButton” value=”exchange” onClick=”setDefaultService(this.value);”>

<label for=”exchangeButton” onClick=”selectDefaultService(‘exchangeButton’);”>

Exchange </label>

</td>

</tr>

<tr valign=”top”> <td>

<input type=”radio” name=”serviceType” id=”controlButton” value=”control” onClick=”setDefaultService(this.value);”>

<label for=”controlButton” onClick=”selectDefaultService(‘controlButton’);”>

Control </label>

</td>

<td>

<input type=”radio” name=”serviceType” id=”chatButton” value=”chat” onClick=”setDefaultService(this.value);”>

<label for=”chatButton” onClick=”selectDefaultService(‘chatButton’);”>

Chat </label>

</td>

</tr>

<tr valign=”top”> <td>

<input type=”radio” name=”serviceType” id=”notifyButton” value=”notify” onClick=”setDefaultService(this.value);”>

<label for=”notifyButton” onClick=”selectDefaultService(‘notifyButton’);”>

Notify </label>

</td>

<td>

<input type=”radio” name=”serviceType” id=”intercomButton” value=”intercom” onClick=”setDefaultService(this.value);”>

<label for=”intercomButton” onClick=”selectDefaultService(‘intercomButton’);”>

Intercom

248

Timbuktu Quick Connect

</label>

</td>

</tr>

<tr valign=”top”> <td>

<input type=”radio” name=”serviceType” id=”inviteButton” value=”invite” onClick=”setDefaultService(this.value);”>

<label for=”inviteButton” onClick=”selectDefaultService(‘inviteButton’);”>

Invite </label>

</td>

<td>

<input type=”radio” name=”serviceType” id=”profileButton” value=”profile” onClick=”setDefaultService(this.value);”>

<label for=”profileButton” onClick=”selectDefaultService(‘profileButton’);”>

Profile </label>

</td>

</tr>

</table>

</td>

</tr>

<tr valign=”top”> <td colspan=”2”>

<font class=”preferencePaneCopyright”>

Timbuktu Pro and its icon are copyright Netopia, Inc.

</font>

</td>

</tr>

</table>

</div>

<div id=”doneButton”></div> </div>

</body>

</html>

The different font sizes for the label, the instructions, and the copyright notice on the back are all formatted in the CSS file. Each font style has its own selector.

/* Back elements */

#back { display: none;

}

#mainContents { position: absolute; top: 20px;

left: 20px; bottom: 30px; right: 20px;

249

Chapter 16

}

.preferencePaneCopyright { font: 8px “Lucida Grande”; color: white; font-weight: bold;

}

.preferencePaneFontLabel { font: 10px “Lucida Grande”; color: white;

font-weight: bold;

}

.preferencePaneFontText { font: 10px “Lucida Grande”; color: white;

}

#doneButton { position: absolute; bottom: 20px; right: 17px;

}

The <div id=”mainContents”> in the HTML file is the container for the content on the back side of the widget and is formatted using the mainContents selector in the CSS file.

JavaScript Functionality

The launchTB2() function that runs Timbuktu with a click on its icon uses the widget.openApplication() method and Timbuktu is listed in application identifier format for the defaults domain.

function launchTB2() { widget.openApplication(“com.netopia.timbuktu.pro”);

}

The widget’s main function is the startTB2Connection(), which attempts to connect to Timbuktu whenever you enter an IP address and click the Connect button. The IP address is taken from the text box and passed to the tb2connect.scrpt.

The launchTB2() function called in the middle of this startTB2Connection() function starts Timbuktu if it isn’t already running. This saves time because the application doesn’t have to wait while Timbuktu starts up.

function startTB2Connection() {

var theAddress = document.getElementById(“ipAddress”).value;

if (theAddress.length > 0) {

//Add the address if it is not in the previous connections and a valid

//key was pressed:

if ((findAddress(theAddress) == false) && (validKeyPressed == true)) {

250