Goodbye World
以下は、Mac OS X 10.4.11 上の Xcode 2.5 で説明しています。BlankWidget で解説したことは繰り返しませんので、そちらを参照してください。Goodbye World は段階的に機能を追加していく形のサンプルです。各段階ごとに説明していきます。
1 Start
1.1 ウィジェット
「1-Start」フォルダ内のウィジェットをインストールすると以下のようになります。
単に「Hello World」という文字列が表示されているだけです。これは HelloWorld と変わりませんが、枠の形と背景の色が違っています。
1.2 ファイル構成
ファイル構成は以下のようになります。
HelloWorld よりは複雑で CSS や JavaScript ファイルが別になっています。ただし、JavaScript は内容が何もありません。情報プロパティリストでは特別なキーは設定されていません。主要 HTML は GoodbyeWorld.html です。Default.png はデフォルト画像で、文字なしの背景部分だけです。このファイルと同じものが images 内にもあります。Icon.png はウィジェットバーに表示されるアイコンです。Default_reverse.png は、Default.png より暗い画像ですが、この段階ではまだ使用しません。
1.3 GoodbyeWorld.html
それでは、主要 HTML ファイルを見てみます。
GoodbyeWorld.html
<html>
<head>
<!-- スタイルシートは別のファイルに維持されたほうがいい。これはウィジェットのデザインを収容する -->
<style type="text/css">
@import "GoodbyeWorld.css";
</style>
<!-- JavaScript ファイルはこのウィジェットに必要な論理を収容する -->
<script type='text/javascript' src='GoodbyeWorld.js' charset='utf-8'/>
</head>
<body>
<!-- 前面 div はウィジェットの主要 UI。これは最初に目に見え、環境設定が表示される時隠される -->
<div>
<img span="backgroundImage" src="Images/Default.png"> <!-- 前面に対する背景 -->
<div id="worldText">Hello, World!</div> <!-- デフォルトテキスト -->
</div>
</body>
</html>
スタイルが CSS ファイルに移されている以外は、HelloWorld と同じです
1.4 GoodbyeWorld.css
つぎにスタイルシートを見てみます。
GoodbyeWorld.css
body {
margin: 0;
}
#worldText {
font: 20px "Lucida Grande";
font-weight: bold;
text-align: center;
color: white;
position: absolute;
top: 47px;
left: 20px;
width: 180px;
}
.backgroundImage {
position: absolute;
top: 0px;
left: 0px;
}
HTML にあった2つの要素に対してスタイルを設定しているだけです。この段階のサンプルは JavaScript がないので、これで説明は終了です。詳細については、BlankWidget と HelloWorld を見てください。
2 With Flip
2.1 ウィジェット
「2-With Flip」フォルダ内のウィジェットは、「1-Start」とほとんど変わりませんが、マウスカーソルを近づけると情報ボタンが表示される所が違っています。。
このボタンをクリックすると、背面が表示されることになります。まだ実際の設定内容はありません。単に「Done（完了）」ボタンがあるだけです。
2.2 ファイル構成
ファイル構成は以下のようになります。
赤で囲んだ部分が追加されたものです。ただし、「images」内の「Default_reverse.png」は、前の段階では使われておらず、実質的にはこの段階からのものです。情報プロパティリストには、BackwardsCompatibleClassLookup キーが追加されています。これは Apple クラスを使うときに互換性を上げるためのものです。これについて、およびアニメーターの説明は、Stretcher を見てください。また AppleButton.js と AppleInfoButton.js については、Fader を見てください。このサンプルの説明では、詳細については触れません。
2.3 GoodbyeWorld.html
それでは、主要 HTML ファイルを見てみます。
GoodbyeWorld.html
<html>
<head>
<!-- スタイルシートは別のファイルに維持されたほうがいい。これはウィジェットのデザインを収容する -->
<style type="text/css">
@import "GoodbyeWorld.css";
</style>
<!-- JavaScript ファイルはこのウィジェットに必要な論理を収容する -->
<script type='text/javascript' src='GoodbyeWorld.js' charset='utf-8'/>
<!-- 10.4.3 より前の互換性: ウィジェットのトップレベルに AppleClasses ディレクトリを含める -->
<script type='text/javascript' src='AppleClasses/AppleButton.js' charset='utf-8'/>
<script type='text/javascript' src='AppleClasses/AppleInfoButton.js' charset='utf-8'/>
<script type='text/javascript' src='AppleClasses/AppleAnimator.js' charset='utf-8'/>
</head>
<!-- onload ハンドラはAppleClassesによる情報ボタンとDoneボタンの提供で必要 -->
<body onload="setup();">
<!-- 前面divはウィジェットの主要UI。これは最初に目に見え、環境設定が表示される時隠される -->
<div id="front">
<img span="backgroundImage" src="Images/Default.png"> <!-- 前面に対する背景 -->
<div id="worldText">Hello, World!</div> <!-- デフォルトテキスト -->
<!-- 以下のdivは情報ボタンを含む、これはマウスが上にあるときウィジェット右下に提示される
onload ハンドラは、アートワークと動作を提供するコンストラクタを含む -->
<div id='infoButton'></div>
</div>
<!-- 背面divは、ウィジェットの環境設定UI。これはスタイルシートで隠されshowPrefs()関数で表示 -->
<div id="back">
<img span="backgroundImage" src="Images/Default_reverse.png">
<!-- 背面に対する背景 -->
<!-- 以下のdivはDoneボタンを収容する。
onload ハンドラは、アートワークと動作を提供するコンストラクタを含む -->
<div id="doneButton"></div>
</div>
</body>
