2006-05-30

■

id:brazilさんにSpryエントリのRSSフィードバックアップをいただいたので（ありがとうございました！）、復元しておきます。

2006-05-30

PDF出力機能

Processing

授業のためにひさしぶりにProcessingを触った。

ちょっと前からprocessingにpdfライブラリが標準搭載されて、そんなにややこしいことしなくてもベクトルデータを出力できるようになってなかなかよい感じ。

import processing.pdf.*;

size(600,600, PDF, "test.pdf");
for(int i=0 ; i < 100 ; i++) {
    fill(random(256), random(256), random(256));
    ellipse(random(600), random(600), 100, 100);
}
exit();

てかんじで書くだけで、画面じゃなくてpdfファイルにちゃんとベクトルデータで出力される。これは便利。

2006-05-30

「Spry Data Set and Dynamic Region Overview」を読む

Spry

Adobe Labs - Spry Data Set and Dynamic Region Overview

XML Data Sets

Spryのデータセットについて。リモート/ローカルのxmlをデータセットに変換する。

var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo");

みたいなかんじで。

データの変更を監視して通知することができる。

var myObserver = new Object;
myObserver.onDataChanged = function(dataSet, notificationType)
{
        alert("Received notification: " + notificationType);
};
dsPhotos.addDataChangedObserver("myObserverName", addDataChangedObserver);

みたいな。

Dynamic Regions

Spryでデータセットのにあわせて特定領域のHTMLドキュメントを動的に生成して表示する仕組みを「Dynamic Regions」と呼ぶ。

タグに"spryregion"というプロパティを入れてデータセットの名前を書くと、そのタグ内でデータセットのデータを参照できる。

<ul spryregion="dsPhotos">
    <li>{dsPhotos::path}</li>
</ul>

"spryrepeat"アトリビュートで反復表示もできる。

<div spryregion="dsPhotos">
    <ul>
        <li spryrepeat="dsPhotos">{@path}</li>
    </ul>
</div>

条件付きとか

<div spryregion="dsPhotos">
    <ul>
        <li spryrepeat="dsPhotos" sprytest="'{@path}'.search(/^s/) != -1;">{@path}</li>
    </ul>
</div>

制御構文とか

<div spryregion="dsPhotos">
    <ul class="spryrepeat">
        <li spryif="'{@path}'.search(/^s/) != -1;">{@path}</li>
    </ul>
</div>

<div spryregion="dsPhotos">
    <div sprychoose="sprychoose">
        <div sprywhen="'{@path}' == 'surf.gif'">{@path}</div>
        <div sprywhen="'{@path}' == 'undefined'">Path was not defined.</div>
        <div sprydefault="sprydefault">Unexpected value for path!</div>
    </div>
</div>

Master/Detail Relationships

When working with data, many applications/web pages use a Master/Detail display pattern. The basic idea is that you have one region of the page, called the master that drives the display of another region, the detail. Typically, the master region displays an abbreviated form of a set of records, and the detail region displays more information about the current record.

masterが変更されるとdetailが同期するというよくあるパターンを実現する

<span spryregion="dsEmployees">
<select spryrepeatchildren="dsEmployees" onchange="dsEmployees.setCurrentRow(this.value)">
        <option spryif="{ds_RowNumber} == 0" value="{ds_RowID}" selected="selected">{username}</option>
        <option spryif="{ds_RowNumber} != 0" value="{ds_RowID}">{username}</option>
</select>
</span>
<span sprydetailregion="dsEmployees">{@id} - {firstname} {lastname} - {phone} </span>

とか

Behavior Attributes

インタラクティブな振る舞いを与える。

spryhover
spryselect

.myHoverClass {
    background-color: yellow;
}

<div spryregion="dsEmployees">
    <ul>
        <li spryrepeat="dsEmployees" spryhover="myHoverClass">{username}</li>
    </ul>
</div>

2006-05-30

SpryEffects.js

Spry

エフェクトライブラリ。よくあるものな感じ。

Spry.Effects.getElement
Spry.Effects.getStyleProp
Spry.Effects.Animator
- Spry.Effects.Animator.prototype.setOptions
- Spry.Effects.Animator.prototype.start
- Spry.Effects.Animator.prototype.stop
- Spry.Effects.Animator.prototype.stepAnimation
- Spry.Effects.Animator.prototype.animate
Spry.Effects.Move
- Spry.Effects.Move.prototype
- Spry.Effects.Move.prototype.constructor
- Spry.Effects.Move.prototype.animate
Spry.Effects.Size
- Spry.Effects.Size.prototype
- Spry.Effects.Size.prototype.constructor
- Spry.Effects.Size.prototype.animate
Spry.Effects.Opacity
Spry.Effects.Opacity.prototype
- Spry.Effects.Opacity.prototype.constructor
- Spry.Effects.Opacity.prototype.animate
Spry.Effects.cssColors

// CSS Color Keywords:
Spry.Effects.cssColors = [];
Spry.Effects.cssColors["maroon"] = "#800000";
Spry.Effects.cssColors["red"] = "#ff0000";
Spry.Effects.cssColors["orange"] = "#ffA500";
...

なるほろ。