Cocoa Break!

以下は、Mac OS X 10.4.11 上の Xcode 2.5 で説明しています。このウィジェットは、BlankWidgetで解説したことは繰り返しませんので、そちらを参照してください。

1　ウィジェット

Command: というラベルの付いたフィールドにコマンド名を入れて、下の「Which」ボタンを押せば、そのコマンドのパスを表示します。これはコマンド行ツールの which を使って行われています。

2　ファイル構成

Default.png は、黒色の背景部分だけの画像です。Background.png も同じです。Button.png と Button_down.png は同じに見えますが、白い背景にコピーしてみれば、Button.png のほうが少しだけ明るいことがわかります。

Info.plist は、BlankWidget とほぼ同じキーですが、widget オブジェクトの system メソッドでコマンド行ツールを使うため、AllowSystem キーが TRUE に設定されていることに注意してください。主要 HTML ファイルは、Which.html に指定されています。

3　Which.html

それでは、主要 HTML ファイルを見てみます（空行は除去して詰めています）。

Which.html

<html> <style type="text/css"> @import "Which.css"; </style> <script type='text/javascript' src='Which.js' /> </head> <body>  <img src="Images/Background.png">  <span class="commandLabel">Command:</span> <input type="text" value="which" id="inputText"></textarea>  <span class="resultLabel">Path:</span> <input type="text" id="outputText" value="/usr/bin/which" readonly></textarea>  <span id="theButton" onmousedown='which();' onmouseup='buttonUpOut();' onmouseout='buttonUpOut();'> <img id="doButton" src="Images/Button.png"> <span id="doButtonText">Which</span> </span> </body> </html>

構造は簡単です。まず背景画像があり、「Command:」ラベルと inputText という id 属性をもつ入力用の input 要素があります。その次に、「Path:」というラベルと outputText という id をもつ出力用の input 要素があります。次に theButton という id 属性をもつボタン全体の span 要素があり、そのなかに doButton という id をもつ画像と、doButtonText という id をもつ span 要素があります。

ボタン部分には複数のハンドラが定義されています。onmouseDown はマウスがクリックされたとき、onmouseup はマウスが離されたとき、 onmouseout がマウスが外に出たとき呼ばれる関数です。

4　Which.css

Which.css

... #inputText { ... border-width: 0px; border-color: transparent; background-color: transparent; -apple-dashboard-region: dashboard-region(control rectangle); } .commandLabel { ... text-shadow: black 0px -1px 0px; ...} #outputText { ... -apple-dashboard-region: dashboard-region(control rectangle); } .... #doButton { ... -apple-dashboard-region: dashboard-region(control rectangle); } ...

通常設定されているような文字属性や位置などのプロパティなどは ... で省略しています。サンプル内のファイルを見てください。入力フィールドは境界線の幅が 0 px になっていて、境界線の色が透明で、背景色も透明に指定されています。また、このフィールドに長方形領域が設定されています。ラベルには影が指定されていることに注意してください。出力フィールドも長方形領域が設定されています。また、ボタン部分も領域が設定されています。

この CSS における領域の定義は、基本的にウィジェットのドラッグを防ぐ目的で設定されています。入力用テキストはクリック開始をドラッグでなく、テキスト入力開始と受けとり、また出力用はコピーのための選択開始と受けとります。そして、ボタンはボタン動作を開始することになります。これを指定していないと、Dashboard によってウィジェットドラッグの時の自動処理の対象にされてしまいます。

5　Which.js

このファイルで定義されている関数は、2 つだけです。これらは主要 HTML ファイルからハンドラによって呼ばれます。まずボタンがクリックされ、コマンド行ツールが実行される時の関数を見てみます。

Which.js > which

// 関数which()はアクションボタンが押された時に呼ばれる // 指定されたコマンドに対して which を呼び出すため widget.system の同期呼び出しを使う // これは結果のテキストフィールドにメッセージの結果を置く function which() { document.getElementById("doButton").src = "Images/Button_down.png"; document.getElementById("outputText").value = widget.system ("/usr/bin/which " + document.getElementById("inputText").value, null).outputString; }

まず、doButton という id 属性をもつの画像の src 属性を Button_down というより暗いものに置き換えます。それから、outputText という id 属性をもつ要素の値にコマンド行呼び出しの出力文字列を代入しています。inputText という id 属性をもつ要素の値を取得して、それをコマンド文字列につなげていることに注意してください。引数をもつコマンド行ツールは、このようにして、実行時に引数を設定できます。

つぎは、ボタンが離された時、マウスが外に出たときに呼ばれる関数を見てみます。

Which.js > buttonUpOut

// アクションボタンがクリックされ、マウスが出たり、離れれたとき、 // アクティブでないバージョンのボタンと置き換える必要がある function buttonUpOut() { document.getElementById("doButton").src = "Images/Button.png"; }

単に doButton という id 属性をもつものの src 属性を設定しなおしているだけです。

画像だけを見てみれば、より暗い画像に変更した後で、より明るい画像になっていますが、これは背景が黒なので逆転します。

黒色の背景に合成してみれば、見ためと同様に、クリック時により明るくなっていることがわかります。

6　まとめ

このサンプルでは、Uptime サンプルで示されたコマンド行ツールの同期使用に、さらに引数をもつ場合に対する対応を示しています。非同期の例については、Voices サンプルを見てください。

Which

目次：

1 ウィジェット

2 ファイル構成

3 Which.html

4 Which.css