Dashboard Programming Topics: ウィジェットのリサイズ

ウィジェットは、内容に合わせてリサイズできます。内容の拡大縮小がきちんと行われる場合や、表示する詳細の量が変わる場合、ウィジェットをリサイズするのが妥当であることがあります。決まった寸法にリサイズすることも（たとえば、「詳細情報」モードなど）、ライブリサイズが可能なようにリサイズコントロールを提供することも可能です。

In this section:

リサイズメソッド

ウィジェットのリサイズ方法は2つあります。相対リサイズと絶対リサイズの2つです。

ウィジェットを現在のサイズを基準に相対的にリサイズするには、window.resizeBy(width, height)メソッドを使います。このメソッドは、ウィジェットの現在のサイズを取得し、widthパラメータと heightパラメータに指定された値を加算します。負の値を指定してウィジェットのサイズを縮小することもできます。

ウィジェットをリサイズするもう1つの方法は、ウィジェットがなるべき絶対サイズを指定する方法です。それには、window.resizeTo(width, height)メソッドを使います。

ライブリサイズ

ライブリサイズとは、ウィジェットのサイズと内容をユーザの好みに合わせて変更できることを意味します。ライブリサイズは、絶対に必要という場合に限って使うようにしてください。ウィジェットの内容を固定の単純なユーザインターフェイスに表示できるのであれば、そうしてください。

ライブリサイズを可能にするには、リサイズコントロールと、そのコントロールがクリックされたときに動作するイベントハンドラを用意する必要があります。

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

また、リサイズコントロールは、スタイルシートの中でCSSを使ってウィジェットの右下角に配置します。

#resize {

    position:absolute;

    top: 208px;

    right: 2px;

    -apple-dashboard-region: dashboard-region(control rectangle);

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();

このコードの3つの関数は、ドラッグ中に発生する各マウスイベントを処理します。まず、リサイズコントロールがクリックされるとmouseDownが呼び出されます。この関数は、クリックの最初の位置をlastPosに記録し、マウスの移動とマウスクリックの終了を処理する2つのハンドラを登録します。

次に、マウスが任意の距離を移動するたびに、mouseMoveが呼び出されます。リストに示したコードには何の制約もありません。つまり、ユーザがウィジェットをいくらでも大きくしたり小さくしたりできます。ウィジェットにサイズの制約がある場合は、ここに追加します。

最後に、マウスのクリックが終了するとmouseUpが呼び出されます。ハンドラとして登録されている自身とmouseMove関数の登録を解除します。登録を解除しなければ、これらの関数は引き続きマウス移動やクリック終了のたびに呼び出されます。

閉じるボックスの調節

ウィジェットのリサイズの方法と方向によっては、ウィジェットの閉じるボックスの位置を調節しなければならないことがあります。setCloseBoxOffsetメソッドを使用すればこれを実現できます。

widget.setCloseBoxOffset(x,y);

メソッドに対して指定するx座標とy座標は、ウィジェットの左上角を原点とする相対座標です。したがって、値が0,0の場合、閉じるボックスの中心は、まさにウィジェットウインドウの左上角に配置されます。xとyの値は100を超えることはできません。




	Get information on Apple products. Visit the Apple Store online or at retail locations. 1-800-MY-APPLE Copyright © 2007 Apple Inc. All rights reserved. \| Terms of use \| Privacy Notice