So-net無料ブログ作成
検索選択

Dashboardウィジェット ブログトップ
前の10件 | -

ウィジェットのリサイズ Part 8 [Dashboardウィジェット]

さて、やっと書いたコードのところまで実行されるようになったのはいいんですが、動きが変です。

どう変かと言うと、マウスを右下方向にドラッグしてもウィジェットの背景のサイズはそのまま、テキストエディタの部分だけがサイズはそのままでマウスの動きに追従して右下に動いてくると言う感じです。

とりあえず、思いつくのは2点。

・ウィジェットのベースがリサイズに対応していないのでは?
・テキストエディタのウィジェットベースの端からの位置指定ができていない。

まず、ウィジェットのサイズがそのままなのは、ウィジェットのベース(灰色の部分)が固定の画像でサイズ拡大に対応していないんじゃないか?と言う意味です。サイズを変更するには、ウィジェットの土台となっている部分のウィンドウがマウスに追従して大きくなる必要があります。が、最初にウィジェットの構成について見ていたときに懸念してたんですが、この土台は固定サイズの画像(Default.png)をそのまま利用していたと思います。今回デフォルトのテンプレートを利用しているので、こちらでも同様に固定サイズの画像になっていて、そもそも土台自体のサイズ変更はできないんじゃないかな~とぼんやり思いはじめました。そういえば、リサイズマークもマウスに追従してないような気も・・。

後者はテキストエディタの土台との位置関係です。Dashcodeを使い始めた時の記事で、「インスペクタ」で設定する「自動サイズ調整」のバネマークがどういう意味なんか良くわかってませんでしたが、まさにここの設定がうまくいっていないんだと思いますね。

*

さて、まずは土台です。こちらの記事を読み直してみると「Default.png」は基本的には「ウィジェットのロード中に表示される画像」で、「動作中の背景としても使用可」と言う感じのようです。今は、ロード中、動作中ともに同じ画像ファイルを利用している様で(←要確認!)、リサイズを実現するためには根本的にこれを変えないといけないような気もしますね。

背景に画像を使うのでわかるように、ダッシュボードには「ウィンドウ」と言う土台が無いようなので、自分で土台の拡大描画をする必要があるのでしょうか?その場合は、Canvasを使ってJavascriptで描画することになりますか・・。もしくは、テキストボックスの様に自動でサイズを拡張してくれるライブラリを土台として使うことになるんでしょうか・・?後者の方が楽そうですけど、それが可能なのかどうかを調べないとだめですね・・・。

以前見た「Resizer」のサンプルを再度Dashcodeで見てみました。・・・ウィジェットを構成する部品が9個に分割されていますね・・。左上、上部中央、右上、中央左、中央、中央右、左下、下部中央、右下と言う感じです。リサイズマークをドラッグしたら、それに応じて、端に位置する各部品を移動させるとともに、各部中央に位置する部品のサイズを変更すると言う感じですかね・・。めんどそうですねぇ。


さてさて。

ウィジェットのリサイズ Part 7 [Dashboardウィジェット]

スイスイ行くと思ってたんですが、予想外に予想外の動作をされてしまいました・・・。

と言う事で、何が悪いのか探して行きます。現象としては、onmousedownイベントがドラッグした際は来なくて、クリックしたときは来ていると言う状況です。前者の場合はイベントが最初にリサイズマークに発生しているのではなく、他の要素に掴まえられて、破棄されていて、後者の場合はそうはなっていないと言うような感じになるんでしょうか?でも、onmousedownイベントはマウスボタンを押した時に最初に発生するイベントのはずなので、そんなことも考えにくいんですけどね・・・。

とりあえず、ソースを追っていくことにします。まず、「main.html」。リサイズマークの追加で追加された箇所は下記の通りだと思われます。

main.html
<img src="Images/resize.png" id="resize" apple-part="com.apple.Dashcode.part.image" onmousedown="resizeMouseDown(event)">


で、CSSに追加されたと思われるのは、下記の通り。

main.css
#resize {
    height: 12px;
    position: absolute;
    right: auto;
    bottom: auto;
    margin-top: 0px;
    width: 14px;
    top: 350px;
    left: 250px;
}


ここサンプルとは微妙に違いますね。まあ、全く同じと言うのも無さげなんですが、どこかが影響してるんでしょうか・・?

みたところ、何となくHTMLファイルの方は問題なさそうな気がします。ちょっと気になる点もなきにしもあらずなんですけどね。一方、CSSのサンプルにある「-apple-dashboard-region:」の行が気になります。最初に見かけたときは、とりあえずほっておいたんですが、仕方がないので、ちょっと調べて見ます。

ここによると、なんか「ドラッグの際にウィジェットが動くのを抑制する」と書いてあるような気がします。と言うことで、これをそのまま追加してみることにします。(これの書式が良くわからないんですが、どっかに仕様はないんでしょうか・・?)

main.css
#resize {
    height: 12px;
    position: absolute;
    right: auto;
    bottom: auto;
    margin-top: 0px;
    width: 14px;
    top: 350px;
    left: 250px;
    -apple-dashboard-region: dashboard-region(control rectangle);
}


これで実行したところ、ブレークに来ました!と言う事で、ブレークを外して、も一度実行したところ・・・。ちゃんと(と言うか、一応)反応はしていますが、なんか動きが変です・・・。


つづく(T_T)。

ウィジェットのリサイズ Part 6 [Dashboardウィジェット]

さて、大体何をしてるのかが分かった気がするので、ちゃっちゃ〜とコードを書き込んで行きました。

それで、実行!リサイズのマークを右下にドラッグして、リサイズ!と行きましたが、反応ありません・・・。と言うか、マウスに合わせてウィジェットが右下に移動してしまいます・・・。

ちなみに、追加したソースはこちらで追加した様にビヘイビアを追加。ただし、ハンドラの名前は「resizeMouseDown」に変えました。で、グローバル変数(と言うのか良くわかってないんですが・・)は取りあえず、その「resizeMouseDown」のすぐ上に書いたので、追加したソースは下記の様な感じです。

main.js
var growboxInset;

function resizeMouseDown(event)
{
	document.addEventListener("mousemove", resizeMouseMove, true);
	document.addEventListener("mouseup", resizeMouseUp, true);
 
	growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};
 
	event.stopPropagation();
	event.preventDefault();
}


function resizeMouseMove(event)
{
    var x = event.x + growboxInset.x;
    var y = event.y + growboxInset.y;
 
    document.getElementById("resize").style.top = (y-12);
    window.resizeTo(x,y);
 
    event.stopPropagation();
    event.preventDefault();
}
 
 
function resizeMouseUp(event)
{
    document.removeEventListener("mousemove", resizeMouseMove, true);
    document.removeEventListener("mouseup", resizeMouseUp, true);
 
    event.stopPropagation();
    event.preventDefault();
}


さて、見た目、何も起きていないので、何が起こっているのかさっぱり分かりません。なので、取りあえず、「resizeMouseDown」の先頭の行にブレークを張ることにしました。「main.js」のウィンドウで該当位置にカーソルを持って行き、メニューからブレークポイントを設定。

ブレークポイント.png
前途多難


で、実行&リサイズ!としてみたところ、ブレークしません・・。う〜ん、設定の仕方が間違えとんかなぁ・・・。とも思いましたが、なにげにリサイズマークをクリックしてみたところ・・。ブレーク来ました。

ブレーク.png
止まった・・


なんじゃそりゃ?・・・う〜ん、ちゃっちゃと終わらせたいんですけどねぇ・・。


つづく。

ウィジェットのリサイズ Part 5 [Dashboardウィジェット]

さて、だらだらと続けていますが、こちらの記事のソースの理解を続けます。

まずは「mouseMove」関数から。大体はこちらの記事で見てしまっているんですが、一つだけ見ていなかった下記の関数呼び出し。

document.getElementById("resize").style.top = (y-12);


document.getElementById("resize")」までで「resize」と言うIDを持つ要素を取得している様ですね。これは、今、作成しているウィジェットでは、ここで追加したリサイズ用のグラフィックになるはずです。

その要素の「style.top」と言う要素に値を設定しています。「style」は「要素内のstyle属性に相当するオブジェクトを返す」との事。「top」は「要素のトップマージンの端と子要素の上端の距離」だそうです。要するに作成中のウィジェットで考えるとリサイズマークのアイコンのトップ位置を指定すると言う事ですかね。ここ「12」と言う固定値を引き算していますが、自分で使ってるアイコンのサイズに変更する必要がありますね。

最後は「mouseUp」関数について。目新しいのは下記の呼び出しです。

document.removeEventListener("mousemove", mouseMove, true);
document.removeEventListener("mouseup", mouseUp, true);


これは、こちらの記事で取り上げた「addEventListener」などの逆バージョンですね。マウスのボタンが離されたので、「mouseDown」以外のイベントリスナーを解除と言う感じですかね。


以上で大体コードは理解できた気がします。

*

OpenOffice.orgが動いているからJavaが入っているはず、と言うのは私の認識違いだった様です。全ての機能を動かす訳ではない場合、特にJavaは必要ないとの事独自にインストールを試みている方もおられます。

また、gccに関しては、開発に必要な全ての要素がそろっている訳ではない様です。


ウィジェットのリサイズ Part 4 [Dashboardウィジェット]

さて、遅々として進んでませんが、最近、気になる物が出てきたので、とっとと片付けたくなってきました。

さて、こちらの記事のソースに戻ります。下の式が何をしているのか、前回の記事でわかりましたので、その意味を見て行きたいと思います。

growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};


まず、「window.innerWidth」。名前からわかりそうですが、こちらによると、ウィンドウとかフレームとかの幅をピクセル単位で表している様です。スクロールバーがあればそれも含むとの事。Dashboradウィジェットの場合は、ウィジェット本体の横幅になるんですかね。そこから「event.x」を引いていますが、「event.x」って何?何となく、mousedownが発生した時のマウスの位置だとは思うんですが、基点が良くわかりません。で、調べてみましたが、eventの説明のところに「event.x」の説明がありません・・・。ちなみに、こことかここによると、マウスのX座標である事はまあいいのですが、どうも微妙に基点が違う様な気がします。他のページでは、ブラウザ毎にまちまちな感じだと示唆している様な気もしますね・・。Dashboardと言うか、Safariの仕様がどうなのかが見つけられないんですが、ソースから推測する事にします・・。

さて、ソースを見直しますが、まず「mouseDown」関数では上でも引用した通り、次の通りに利用されています。が、この式だけでは何の事かわかりませんね。

growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};


で、「mouseMove」関数の中でgrowboxInsetと一緒に下記の通りに利用されています。

var x = event.x + growboxInset.x;
var y = event.y + growboxInset.y;

document.getElementById("resize").style.top = (y-12);
window.resizeTo(x,y);


「window.resizeTo」関数の仕様を見つけられないのですが、関数名とここの解説から、おそらく指定したサイズにウィンドウをリサイズするのが役目でしょう。つまり、ここで定義されている「x」はリサイズ後のウィンドウの横幅になりますね。つまり、「event.x + growboxInset.x」がリサイズ後の横幅ですね。「growboxInset.x」は元のウィンドウの横幅からmousedownが発生した時のマウスの座標を示しています。と言う事で、「event.x」の基点がどこかはともかく、マウスの移動量を元のウィンドウの横幅に加えた物が新しいウィンドウの横幅になっていると言う事で、「event.x」の基点がどこなんかは良くわかりませんね・・・。ま、ええか。

「growboxInset」は元のウィンドウにマウスの初期位置を仕込んだ物と理解しておきます。

それはさておき、「mouseDown」関数は続いて、下記を実行しています。

event.stopPropagation();
event.preventDefault();


event.stopPropagation」はこのイベントの伝搬を止めるとの事。JavaScriptのイベントの配信の仕組みが良くわかっていないのですが、これをやっておかないと、この要素の親(もしくは子)の要素にさらにイベントが配信されると言う事ですかね。ま、それは追々わかって来るでしょう。

で、「event.preventDefault」は「イベントがキャンセル可能である場合キャンセルし、規定のアクションを発生させない」らしいです。なるほど。こちらにある入力フィールドで小文字以外をはじくと言うサンプルが分かりやすいですかね。既存の部品に対して、機能を拡張したいときに使うイメージでしょうか。ただ、今見ているリサイズの例では不要な気もしますが、どうなんでしょう?


とりあえず、「mouseDown」関数については以上です。


【参考】
WebKit DOM Reference - Mac OS X Reference Library
Gecko DOM Reference - mozilla <delevoper center/>
JavaScriptリファレンス
イベントオブジェクトまとめ - Archiva
マウスの座標を取得する - Ajaxを勉強しよう
ウィンドウの大きさを変更する - Knave Web講座

ウィジェットのリサイズ Part 3 [Dashboardウィジェット]

前回の推測が正しいのかどうかも良くわかっていない状況ですが、気にはしつつも先に進んでいくことにします。

まず、以前参照したこちらの記事に載っているサンプルコードの中身を見ておきます。

気になるのは、いきなりグローバル変数(growboxInset)が宣言されています。何となく思ったんですが、JavaScript って、HTMLファイルを一つのスコープの範囲の様に考えればいいんですかね? その範囲内でスコープが設定されているのか?

ま、それは置いておいて、まず「mouseDown()」関数の中を見ていきます。気になったのは、下記の点。

  • 引数の「event」とそのメソッドについて
  • オブジェクト「document」とそのメソッドについて
  • オブジェクト「window」とそのメソッドについて


ちなみにオブジェクトって自分で定義できるんですね。クラスと言う形は取らない様ですが、直にオブジェクトを定義していける様です。HTMLのイベントとこのオブジェクトのメソッドを結びつければいいのかと思いましたが、それだとメンバ変数はクラス変数の様な扱いになりそうですね・・。と思ったら、継承もできる様なので、それで部品毎に微妙な違いを記述することができますか・・。

と、脱線しましたが、上記の疑問について調べていきたいと思います。アップルのドキュメントでは、余り細かいことが書いていない様なので、検索したところ、オブジェクトの階層構造をまとめてくれているページがありました。ここの「window」と「document」についてはわかるかな〜と思いましたが、サンプルコードで利用しているメソッドが書かれていません。ウィジェット用にJavaScriptが拡張されてるんでしょうか・・?

仕方が無いので、再びアップルのドキュメントで「WebKit DOM Programming Topics」を読んでいましたら、Using the Document Object Model From JavaScriptと言うトピックでMozillaの「Gecko DOM Reference」と言う文書を参照していました。ちらちら〜っと見た感じ、ここの「window」と「document」と「event」の説明でいけそうです。

まずは、「mouseDown」で最初に実行されている「document.addEventListener」について。サンプルでは、次の様に呼ばれています。

document.addEventListener("mousemove", mouseMove, true); document.addEventListener("mouseup", mouseUp, true);


さて、説明を見ようと思ったら、「Adds an event listener to the document.」との説明以外何もないです・・。ま、名前からしてそれは想像つくんですけどね・・と言う感じです。仕方がないので他を探してみると「element.addEventListener」の説明がありました。引数も同じ様なので、おそらく機能も同じだと思われます。ここでは、「mousemove」と「mouseup」と言うイベントに対し、イベントのハンドラ関数を定義しているみたいですね。最後の「true」が設定されているところは「useCapture」と言うパラメータの様ですが、説明を読んでもいまいち良くわかりません。ほっときます。

それはさておき、「mousedown」が起きた時点で、その後のマウスのイベントを取得するためのハンドラを定義しています。わざわざ動的にハンドラを定義しているので、逆に「mouseup」が起きたら削除するのかなと思ったら、やっぱりしていました。「mouseUp」関数の中です。

document.removeEventListener("mousemove", mouseMove, true); document.removeEventListener("mouseup", mouseUp, true);


ちなみに、マウス関連のイベントはこちらで定義されている様です。

clickmousedownとmouseupが同じ位置で行われた場合に発生する。シーケンスとしては、mousedown→mouseup→clickと言う感じ。複数回同じ位置でクリックが発生した場合は、detailと言う要素が発生毎にインクリメントされるとのこと。
mousedownポインティングデバイスのボタンが押下された時に発生。
mouseupポインティングデバイスのボタンが離されたときに発生。
mouseoverポインティングデバイスが要素上に来たときに発生。
mousemoveポインティングデバイスが要素上を動いているときに発生。
mouseoutポインティングデバイスが要素上から出て行ったときに発生。


「mouseDown」関数に戻ります。次は、冒頭に定義されていた「growboxInset」と言う変数に何かを代入しています。

growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};


・・・式の意味が分かりません。growboxInsetを参照している箇所を見てみると、「{}」で構造体を示し、各要素「x」と「y」に「window.innerWidth - event.x」と「window.innerHeight - event.y」を設定しているのでは?と思われます。


ん〜、ちょっと長くなってきたので、次回へつづく。


【参考】
JavaScript入門 - 初心者のためのホームページ作り
Gecko DOM Reference
WebKit DOM Programming Topics
Document Object Model (DOM) Level 2 Events Specification Version 1.0


ウィジェットバンドル内のソース構成 [Dashboardウィジェット]

ウィジェットのリサイズの続きですが、コードを書く段階まできたので、おそらくここのサンプルコードを転記すれば実現できるのだと思われますが、まず、現在のコードがどうなっているのかが全然把握できていないので、ちょっと、コードを眺めてみることにします。

ウィジェットバンドルのルート(と言っていいのかわからないんですが・・)にある関連ソースは「main.html」「main.js」です。

0905_initial_files.png
現在のファイルリスト


「main.js」の方に今回書き始めるイベントの関数が存在するんですが、ここにはイベント処理の関数が並んでいる様です。JavaScript自体がまだ良くわかっていないのと、ソースのスコープとかわかってないことだらけなので、まずこのソースがどのような位置づけにあるのか確認するため、「main.html」から見ることにします。

「main.html」では、下記のJavaScriptコードが読み込まれていました。

AppleAnimator.js(1)
AppleButton.js
AppleInfoButton.js
localizedStrings.js(2)
utilities.js(3)
setup.js
Text.js
InfoButton.js
GlassButton.js
main.js(4)
PopupButton.js(5)
Button.js


(1)のファイルは「file:///System/Library/WidgetResources/AppleClasses/」の様にフルパスで読み込まれています。これは全てのバージョンのMacOS Xに存在しているんですかね。ウィジェットバンドル内には含まれない様ですね。

(2)のファイルは参照パスが書かれていないのですが、ウィジェットバンドルのルートにはソースが存在しません。ん〜、と思って、ファイルリストを眺めていたら「ja.lproj」と言うフォルダがありますね。こちらでも触れましたが、MacOS X のアプリは基本的に文字列はリソースとして各国語毎に分離されています。このフォルダの中を見てみると(2)のファイルが存在していました。日本語のリソースとしてこちらに保存されている様ですが、参照のルールがわかりませんね。「localizedStrong.js」と言うのは固定のファイル名でこのファイルの場合は自動的に各国語のリソースとしてサブフォルダを参照する仕組みになっているのでしょうか・・?後、ウィジェットバンドル内に英語のリソースが存在していません。英語のリソースは必須かと思ってたんですが、もしかしたら、そうでもないのかもしれません。この辺り、追々見ていきたいですね。

(3)(5)のファイルはウィジェットバンドル内「Parts/」フォルダから読み込んでいます。なぜ、2カ所に分かれているのかと思いましたが、(5)の方は単純に後から私が追加したリソース(プルダウンメニューとボタン)のためのファイルですね。中をちゃんとは見てませんが、これらは「main.js」と同様、イベントハンドラを追加していくファイルの様です。

で、(4)が今回、コードを書き足す予定のファイルですね。これもウィジェットバンドルのルートに存在する様です。

ここで、疑問が出てきました。(5)のファイルもイベントハンドラを記述していくファイルだとしたら、ボタンなどなので、こちらでもマウスが押される様なイベントは発生すると思われます。前回のウィンドウリサイズ用のハンドラはDashcode上でイベントを追加しましたが、「main.js」を見たところ、追加したイベントハンドラ(mouseDown)は、特にクラスなどでくくられている訳でもなく、また、オブジェクトとの関連づけは単純に<img>要素内で関数との結びつきが定義されているのみです。ファイル(main.js)との結びつきは読み取れません。これって、「mouseDown」みたいに一般的な関数名でいいんでしょうか? もしかして、オブジェクト毎に区別できる様な名前付けをしないといけないんですかね・・? JavaScriptって、ソースのスコープは全体にフラットなの・・?

ソースを見ていてもわからないので、試しに削除ボタン「delButton」に「mouseDown」イベントを追加しようとしてみましたら、同じ「main.js」の「mouseDown」関数に結びついてしまいました・・・。う〜ん、やっぱり全体的にフラットなんか・・、というか全てグローバルな関数なの??

後、上の方で書いた「(5)のファイルにイベントハンドラを書く様です」って言うのは間違いですね・・・。


う〜ん。良くわからないので、その前提でイベントハンドラの名前を付けることにします。つづく。

ウィジェットのリサイズ Part 2 [Dashboardウィジェット]

前回サンプルの「Resizer」で追加されているオブジェクトを自分のプロジェクトに追加するには、どうすればいいか? と悩んでおりましたが、普通にライブラリのウィンドウなどを眺めていても、該当するオブジェクトはありませんでした。

仕方が無いので、メニューを眺めていたところ、「ファイル」→「ファイルを追加...」と言う項目がありました。

0905_menu_file_add.png
これかな?


先週の記事で読んだサンプルコードを見てみると、リサイズ用のイメージは「/System/Library/WidgetResources/resize.png」にあると言うことがわかっています。と言うことで、上の写真のメニューからこのファイルを追加してみました。すると、Dashcodeのウィンドウの左下にファイルが無事追加されました。

0905_resize_add.png
resize.pngが追加されています


と言うか、いつの間にかこのスペースが「ファイル」と言う項目に変わってました。いつ変わったか、認識してません・・。こちらの記事の通り最初は「ワークフローステップ」という項目だったんですが・・・。追加した時に変わったんかな・・?

ま、それはどうでもいいので、さっそくこの「resize.png」をウィジェットの右下に配置しました。infoボタンは邪魔なので少し左側に動かします。

0905_put_resize_png.png
パーツはそろいました


これで、パーツはひとそろい配置できました。横のパーツリストのところに要素が追加されましたが、「img」と言う名前になっていたので、「resize」に名前を変更しておきました。

0905_rename_img.png
サンプルの「Resizer」に倣った


resizeアイコンを右クリックすると、コンテクストメニューに「イベント」と言うのがあったので、ここから、前回の記事のサンプルコード(HTML)に書かれていた「onmousedown」を選択。

0905_add_mousedown_event.png
いろいろイベントがあります


すると、「ビヘイビアを追加」と言うダイアログが出てきたので、ハンドラの名前を前回のサンプルコード(HTML/JavaScript)に書かれていたハンドラの名前「mouseDown」に設定。

0905_make_mousedown_handler.png
ビヘイビアって・・・


「追加」を押すと、下にソースコードが出てきました。

0905_show_source_view.png
ようやくコード出現!


「ここにコードを挿入」と書かれているので、コードを書いていきましょう!・・・と言うことでつづく。


※「ビヘイビアを追加」は直訳なんですかね・・? 普通に「ハンドラを追加」でいいと思いますが・・・。

nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:資格・学び

ウィジェットのリサイズ [Dashboardウィジェット]

前回の記事ではウィジェットのリサイズやり方が良くわからなかったので、Dashboard Programming Topicsの該当箇所を見てみました。

ユーザによるウィジェットのリサイズを実現する方法はだいたい次の通りの様です。

  1. リサイズ用のグラフィックをHTMLファイル上に記述して、
  2. CSSファイルでウィジェットの右下に配置して、
  3. JavaScriptファイルに1.のグラフィックでマウスが押下された時の処理を書く。


サンプルが示されていましたので、一応、こちらに転載します。それぞれ、以下のような感じです。

1. リサイズ用のグラフィックはシステムでデフォルトで用意されている様です。それを指定して、CSS用のidと言うアトリビュートとJavaScript用にonmousedownアトリビュートを設定している様です。

<img id='resize' src='/System/Library/WidgetResources/resize.png' onmousedown='mouseDown(event);'/>


2. CSSファイルに先ほどの<img>要素で指定されたセレクタの定義を書きます。位置は固定値が書かれていますが、これはウィジェットのデフォルトサイズに依存すると思います。最後の定義はあからさまにDashboard専用のキーワードですね。何かわかりませんが、必要になったら調べることにして、ここでは気にしないことにしときます。

#resize {
    position:absolute;
    top: 208px;
    right: 2px;
    -apple-dashboard-region: dashboard-region(control rectangle);
}


3. で、最後にJavaScriptのコードですこれも1.の<img>要素で指定されているmouseDown()関数の中身を記述しています。mouseDown()〜mouseUp()までで一連の動作となっていますね。見てると面白いところもあるんですが、ここでは、そういうものとしておいておきます。

var growboxInset;

function mouseDown(event)
{
    document.addEventListener("mousemove", mouseMove, true);
    document.addEventListener("mouseup", mouseUp, true);
 
    growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};
 
    event.stopPropagation();
    event.preventDefault();
}

 
function mouseMove(event)
{
    var x = event.x + growboxInset.x;
    var y = event.y + growboxInset.y;
 
    document.getElementById("resize").style.top = (y-12);
    window.resizeTo(x,y);
 
    event.stopPropagation();
    event.preventDefault();
}
 
function mouseUp(event)
{
    document.removeEventListener("mousemove", mouseMove, true);
    document.removeEventListener("mouseup", mouseUp, true);
 
    event.stopPropagation();
    event.preventDefault();
}


さて、実現方法はいいんですが、こんな基本的な動作はDashcode内にデフォルトで用意しておいてほしいんですが、無いんでしょうかね・・?

今読んでたページの先頭の方に「Resizer」と言うサンプルプロジェクトが紹介されているので、それをDashcodeで見てみました。すると、どうもリサイズのマーク自体は何かのオブジェクトとして登録されている様です(下の画像では見にくいですが・・)。

0905_resize_icon.png
何かのオブジェクトとして登録されてます


「ライブラリ」のウィンドウでは、このresizeにあたるオブジェクトはありませんでした。でも、サンプルでは、一応Dashcode でそれを構成要素として認識している様なので、何らかの方法で Dashcode にオブジェクトを追加する方法がある。もしくは、手で HTML とかに記述してから Dashcode で読み込むとそれを認識する。のいずれかだと思われます。

・・前者だといいんですけどね。つづく。


【参考】
Resizing Widgets - Dashboard Programming Topics


Dashcode を使ってみる [Dashboardウィジェット]

そろそろ、基本的な項目はおさえられたであろうと思われることと、ようやく読むだけと言う行為に飽きてきたので、Dashcode を使ってみようと思います。既に忘れられているかもしれませんが、目標はメモ帳なので、いきなりそこを目指してみます。

取りあえず、起動。



まずは、テンプレートの選択を促されます。Webアプリケーション用のテンプレートも用意されています。Dashboard用のテンプレートは10種。でも、メモ帳に使えそうなテンプレートは無いので、白紙の「カスタムテンプレート」を選択しました。

0905_first_screen.png
「こんにちは!」はいらない・・


ウィンドウ右側の部分にアプリケーションの見た目が表示されています。アプリケーションの本体とその左上にクローズボタン、右下に「info button」。そして中央上方に「こんにちは!」のラベル(?)が貼られています。そして、ウィンドウ左側の下に「ワークフローステップ」と言うのが表示されています。チュートリアルっぽい内容で、これに従えばいい様です。まず最初に表示されているのが「レイアウトインターフェース(必要)」と言う項目です。「ライブラリの項目をキャンパスにドラッグし、インスペクタで項目のプロパティを変更します。」と書かれています。

アプリケーション本体は「キャンパス」と言う様ですね。まず、キャンパスの「こんにちは!」はいらないので削除。マウスで選択して「delete」キーを押したら消えました。ところで、ウィンドウ左側上方に「front」と「back」と言う項目があります。それぞれ、アプリケーションの表面と裏面に貼付けられている部品が表示される様です。この削除の操作で「front」配下に表示されていた「helloText」と言う項目が消えました。これ、たぶんコードで参照されるクラス名か何かになっている様ですね。

さて、「ライブラリの項目をキャンパスにドラッグ」せよとのことです。メモ帳の構成要素として今思いつくのは下記の通り。



ページをめくるボタンが必要かどうか悩みましたが、プルダウンで選択できるので、取りあえずつけないことにします。後で欲しくなったら、追加することにしましょう。「ライブラリ」のウィンドウはチュートリアルからか、メニューの「ウィンドウ」→「ライブラリを表示」で表示ができます。

0905_library_window.png
部品の選択


部品を貼って、左のアイテムリスト内で名前を変更します。編集領域は「textarea」のまま、プルダウンメニューを「selectMenu」、新規作成ボタンを「newButton」、削除ボタンを「delButton」としました。またここで、「ファイル」→「別名で保存」で「memo.dcproj」と名前を付けて保存しときました。

0905_put_parts.png
見た目は完成


次に「インスペクタ」を表示してみます。こちらもチュートリアルからか、メニューの「ウィンドウ」→「インスペクタを表示」から。まずは「textarea」から。変える必要があるのかどうかがわからない項目は、とりあえずスルーします。ものさしの様なアイコンの項目で「自動サイズ調整」と言う項目がありました。ウィンドウのサイズは自由に変更できる様にしたいので、伸び縮みさせたいところをバネマークにします。

dashcode_inspector.png
実はバネマークの意味がまだ分かってません


ここで、動作を見てみるためにウィンドウ左上の「実行」ボタンを押して、実行してみましたところ、普通にデスクトップ上で実行できました。これは便利ですね。

さて、先ほどの伸び縮みを確認するため、ウィンドウのサイズを変えようとしたところ、ウィンドウのサイズが変えられませんね・・。何か設定が必要そうです。

先ほどの「ワークフローステップ」を眺めてみたところ「属性を設定」とあります。何かウィジェットの設定ができる様です。「ウィジェットの属性」を見てみました。

0905_widget_propaties.png
ない・・


・・・残念ながらそれらしい属性はありませんね。それより「こんにちは!」がリソースとして残ってるみたいです。後、「ウィジェット識別子」と言うのが「名称未設定」になっているので、それも決める必要がありそうです。


・・・う〜ん、つづく。


【参考】
Introduction to Dashcode User Guide

前の10件 | - Dashboardウィジェット ブログトップ
ブログを作る(無料) powered by So-netブログ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。