piu.md

Piu JavaScript リファレンス

Copyright 2017-2023 Moddable Tech, Inc.
改訂： 2023年8月31日

このドキュメントについて

Piu は、マイクロコントローラ上で実行するように設計されたユーザー インターフェイス フレームワークです。Piu のプログラミング インターフェイスは、アプリケーションのコンテンツ階層、外観、動作、フローを定義するグローバル コンストラクター、関数、およびオブジェクトの JavaScript API です。このドキュメントでは、Piu API を定義するオブジェクトと重要な関連概念について詳しく説明します。

Table of Contents

• 継承階層
• 重要な概念の紹介
  • コンテンツ階層と外観
  • 振る舞いとフロー
• グローバルプロパティ
  • ビルトインプロパティ
  • プロパティの追加
• プロパティの説明
  • Anchor
  • Color
  • Coordinates
  • Duration, Fraction, Interval, Loop, and Time
  • Font
  • Tiles
  • Variant, Variants, State, and States
• Piuオブジェクトリファレンス
  • Applicationオブジェクト
  • Behaviorオブジェクト
  • Columnオブジェクト
  • Containerオブジェクト
  • Contentオブジェクト
  • Dieオブジェクト
  • Imageオブジェクト
  • Labelオブジェクト
  • Layoutオブジェクト
  • Portオブジェクト
  • Rowオブジェクト
  • Scrollerオブジェクト
  • Shapeオブジェクト
  • Skinオブジェクト
  • Soundオブジェクト
  • Styleオブジェクト
  • Textオブジェクト
  • Textureオブジェクト
  • Timelineオブジェクト
  • Transitionオブジェクト

継承階層

図1は、このドキュメントで説明するオブジェクトの継承階層をまとめたものです。

図1. Piu 継承階層

Piu アプリケーションのコンテキストにおけるこれらのオブジェクト間の基本的な関係は次のとおりです。

• ユーザーインターフェースのグラフィカル部分はすべてcontentオブジェクトです。
• skin、style、texture オブジェクトは、content オブジェクトの外観 (色、フォントなど) をカスタマイズします。
• behaviorオブジェクトはイベントを処理するためにcontentオブジェクトにバインドされます。
• timeline および transition オブジェクトは content オブジェクトをアニメーション化します。

重要な概念の紹介

このセクションでは、Piu アプリケーションに関連する重要な概念について説明し、このドキュメントの残りの部分で使用されるいくつかの用語を定義します。

コンテンツ階層と外観

Piu アプリケーションのグラフィカル ユーザー インターフェイス要素は、content オブジェクトの階層で構成されています。基本構造は次のとおりです。

• applicationオブジェクトはコンテンツ階層のルートである
• containerオブジェクトはコンテンツ階層のブランチである
• contentオブジェクトはコンテンツ階層のリーフである

アプリケーションはコンストラクタを使用して content オブジェクトと container オブジェクトを定義します。これらのオブジェクトは、add、insert、および replace 関数を使用してコンテンツ階層にアタッチされ、remove および replace 関数を使用してコンテンツ階層から削除されます。 これらのプロパティの説明については、Containerオブジェクト セクションの Functions を参照してください。

BoundコンテンツとUnboundコンテンツ

コンテンツ階層にアタッチされていないコンテンツはunbound コンテンツと呼ばれ、コンテンツ階層にアタッチされているコンテンツはbound コンテンツと呼ばれます。コンテンツ階層の一部であるオブジェクトのみが画面に表示されます。

unbound コンテンツはレイアウトには参加しません。測定も調整も行われないため、位置とサイズは「未定義」となり、変更できません。

let content = new Content();
let before = content.position;	// undefined
application.add(content);
let after = content.position;	// {x: 160, y:120} (assuming the application is 320x240)

制約

オブジェクトの座標は、その位置とサイズに対する暗黙的な制約を定義します。

たとえば、中央揃えのコンテンツや、サイズ/位置がコンテナのサイズ/位置に依存するコンテンツは移動できません。

// Cannot move
let centeredContent = new Content(null, {
	width: 10, height: 10
});
let dependentOnContainerContent = new Content(null, {
    top: 0, left: 0, bottom: 100, right: 100,
});

// Can move
let unconstrainedContent = new Content(null, {
    top: 0, left: 0, height: 100, width: 100
});

MeasureとFit

Measured size

すべてのコンテンツには measured width と measured height があり、これらはコンテンツ自体によって計算されたデフォルトの幅と高さです。 たとえば、次のcontentオブジェクトのmeasured widthは 100 になります。

let sampleContent = new Content(null, {
	width: 100
});

次のcontentにはデフォルトの幅がないため、measured widthは0になります。

let sampleContent = new Content(null, {
	left: 0, right: 0
});

contentオブジェクトのcoordinatesプロパティは、contentのmeasured sizeを反映します。 このプロパティはいつでも変更できます。

sampleContent.coordinates = {
	left: 0,
	width: 100,
	top: 0,
	height: 100
};

Fitted size

すべてのコンテンツには fitted width と fitted height もあり、これらはコンテナによって計算されたコンテンツの有効な幅と高さです。

left 座標と right 座標の両方が定義されている場合、コンテンツはコンテナとともに水平方向に伸縮し、コンテンツのfitted widthはコンテナのfitted widthに依存します。 同様に、top座標とbottom座標の両方が定義されている場合、コンテンツはコンテナに合わせて垂直方向に伸縮し、コンテンツのfitted heightはコンテナのfitted heightに依存します。 たとえば、ここでのsampleContentオブジェクトのfitted widthとfitted heightは両方とも 100 になります。

let sampleContent = new Content(null, {
	left: 0, right: 0
});
let sampleContainer = new Container(null, {
	height: 100, width: 100,
	contents: [
		sampleContent
	]
});

left座標またはright座標 (両方ではない) が定義されている場合、またはleftもrightも定義されていない場合、fitted widthはmeasured widthと等しくなります。 同様に、top座標またはbottom座標 (両方ではない) が定義されている場合、またはtopもbottomも定義されていない場合、fitted heightはmeasured heightと等しくなります。 たとえば、ここでのsampleContentオブジェクトのfitted widthとfitted heightは両方とも 50 になります。

let sampleContent = new Content(null, {
	left: 0, top: 0, width: 50, height: 50
});
let sampleContainer = new Container(null, {
	height: 100, width: 100,
	contents: [
		sampleContent
	]
});

contentオブジェクトのwidthプロパティとheightプロパティは、コンテンツのfitted sizeを反映します。 コンテンツのmeasured widthとmeasured heightは、コンテンツの作成直後に利用可能になります。 fitted widthとfitted heightは、onDisplayingイベントがトリガーされるまで利用できません。

let sampleContent = new Content(null, {
	left: 0, right: 0, top: 0, height: 50,
	Behavior: class extends Behavior {
		onCreate(content) {
			let measuredHeight = content.coordinates.height; // 50
			let measuredWidth = content.coordinates.width; // undefined
			let fittedWidth = content.width; // undefined
			let fittedHeight = content.height; // 50
		}
		onDisplaying(content) {
			let fittedWidth = content.width; // 320 (assuming the application is 320x240)
			let fittedHeight = content.height; // 50
		}
	}
});
application.add(sampleContent)

テンプレート

テンプレート は、コンテンツをインスタンス化し、コンテンツ階層を構築するために必要なスクリプト コードを削減するツールです。テンプレートは、似ているものの、いくつかのわずかに異なるプロパティを持つオブジェクトを作成するためによく使用されます。

たとえば、次の画面を考えてみましょう。

テンプレートを使用しないこれらの画面のコードは、不必要に繰り返しになります。ここでの screen1 と screen2 の唯一の違いは、ヘッダーの背景色と文字列です。

let screen1 = new Column(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "blue" }), style: sampleStyle,
	contents: [
		Label(null, {
			top: 0, height: 40, left: 0, right: 0,
			string: "Screen 1"
		}),
		Content(null, {
			top: 0, bottom: 0, left: 0, right: 0,
			skin: new Skin({ fill: "white" })
		}),
	]
});

let screen2 = new Column(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "red" }), style: sampleStyle,
	contents: [
		Label(null, {
			top: 0, height: 40, left: 0, right: 0,
			string: "Screen 2"
		}),
		Content(null, {
			top: 0, bottom: 0, left: 0, right: 0,
			skin: new Skin({ fill: "white" })
		}),
	]
});

テンプレートを使用すると、2 つの画面の定義に必要なコードの量が大幅に削減されます。

let BasicScreen = Column.template($ => ({
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: $.headerColor }), style: sampleStyle,
	contents: [
		Label(null, {
			top: 0, height: 40, left: 0, right: 0,
			string: $.title
		}),
		Content(null, {
			top: 0, bottom: 0, left: 0, right: 0,
			skin: new Skin({ fill: "white" })
		}),
	]
}));

let screen1 = new BasicScreen({ title: "Screen 1", headerColor: "blue" });
let screen2 = new BasicScreen({ title: "Screen 2", headerColor: "red" });

上の例で見られるように、コンストラクタには 1 つのパラメーター $ があり、アプリケーションはこれを使用してデータをテンプレートに渡します。データには任意のプロトタイプが含まれる場合があります。多くの場合、これは文字列、数値、または JSON オブジェクトです。属性内で、contentオブジェクトとcontainerオブジェクトは$を使用してデータ プロパティにアクセスします。 $ パラメータは、データまたはインスタンス化データと呼ばれます。

ほとんどの Piu オブジェクトの template 関数は、コンストラクターと template 関数を返します。唯一の例外は、単にコンストラクターを返す Skin オブジェクトと Texture オブジェクトです。これらの template 関数を使用すると、コンストラクターをさらに特殊化できます。以下の例では、HeaderWithBehavior インスタンスは、アクティブで動作することに加えて、BasicHeader インスタンスのすべてのプロパティを持ちます。

let headerStyle = new Style({ font:"600 28px Open Sans", color: "white", horizontal: "left" });
let headerSkin = new Skin({ fill: "blue" });
let BasicHeader = Label.template($ => ({
	top: 0, height: 40, left: 0, right: 0,
	skin: headerSkin, style: headerStyle, string: $
}));

class HeaderBehavior extends Behavior {
	onTouchEnded(header) {
		trace("Header tapped\n");
	}
}
let HeaderWithBehavior = BasicHeader.template($ => ({
	active: true, Behavior: HeaderBehavior
}));

振る舞いとフロー

イベント

Piu は イベント をアプリケーションのコンテンツ階層に配信し、content オブジェクトはイベントに応答する関数を含むbehaviorオブジェクトを参照できます。 Piu はイベントを広範囲に使用します。

contentオブジェクトがイベントを受け取ると、その behaviorオブジェクトがそのイベントに応答する対応する関数を (プロトタイプ チェーン内で直接的または間接的に) 持っているかどうかをチェックします。存在する場合、content オブジェクトは関数を呼び出し、それ自体を最初のパラメーターとして渡します。そうでない場合は、何も起こりません。

低レベルのイベント

Piu は、幅広いターゲット デバイスで役立つ低レベルのイベントを定義します。たとえば、onTouchBeganとonTouchEndedは、タッチ スクリーンを備えたターゲット デバイスに役立ちます。

高レベルのイベント

アプリケーションは独自の高レベルのイベントを定義することもできます。一般的なイベント伝播パターンを効率的に実装するために、コンテンツには delegate、distribute、bubble、firstThat、および lastThat プロパティがあります。これらのプロパティの説明については、Contentオブジェクト セクションの Functions を参照してください。

アニメーション

時間ベースのアニメーション動作を作成するには、複数の方法があります。 1 つの方法は、このドキュメントの Duration, Fraction, Interval, Loop, and Time セクションで説明されているように、content オブジェクトをクロックとして使用することです。 この方法は、イベントに応じて単一のコンテンツをアニメーション化する場合 (たとえば、タッチ フィードバックを表示する場合) や、単一のコンテンツを長時間アニメーション化する場合などによく使用されます。

複数のコンテンツやプロパティをアニメーション化する複雑な動作を作成する最も簡単な方法は、timeline オブジェクトを使用することです。timeline オブジェクトは、一連のトゥイーンアニメーションのシーケンスと実行のメカニズムを提供するため、複数のコンテンツ オブジェクトの段階的なアニメーション (画面のグラフィック要素の切り替えなど) に最適な方法です。詳細については、このドキュメントの Timelineオブジェクト セクションを参照してください。

Piu の transition オブジェクトは、画面間を移動したり、コンテンツ オブジェクトを入れ替えたりする単純なアニメーションに最適です。多くの場合、コンテンツを追加または削除することで、コンテンツ階層を変更します。timeline オブジェクトと同様にオブジェクトのプロパティを変更することもできますが、アニメーションのシーケンスを作成するのはより複雑です。詳細については、このドキュメントの Transitionオブジェクト セクションを参照してください。

Easing方程式

コンテンツ オブジェクトのプロパティを線形に変更するアニメーションは、見た目がぎこちないことがよくあります。Easing方程式を使用することは、より自然に感じられるアニメーションを実装するための一般的な方法です。

Piu は、JavaScript の Math オブジェクトを Robert Penner のオープンソースのEasing方程式で拡張します (Robert Penner の Programming Macromedia Flash MX のEasingセクションを参照してください)。ソース コードは piuTransition.c にあります。

これらのEasing方程式の Piu 実装はすべて、単一の引数 (範囲 [0, 1] の number) を取ります。戻り値は範囲 [0, 1] の number で、入力をEasingされた出力にマッピングします。これらの方程式は、あらゆる種類のアニメーションで広く使用されています。一般的には、content オブジェクトの fraction プロパティまたは transition オブジェクトの onStep 関数の fraction 引数をマッピングするために使用され、多くの timeline オブジェクト関数の引数としても使用されます。

グローバルプロパティ

Piu グローバル オブジェクトのプロパティは、アプリケーション内のどこでも使用できます。

ビルトインプロパティ

• Source code: xsGlobal.c

trace(string)

Arguments	Type	Description
string	string	The string to trace

ホストされたアプリケーションの仮想マシンで指定された文字列をトレースします。

Note: 改行 ("\n") もトレースされるまで、文字列はトレースされません。

trace("Hello world\n");

let sampleVariable = 2;
trace(`sampleVariable value is: ${sampleVariable}\n`);    // "sampleVariable value is 2"

---

プロパティの追加

グローバル オブジェクトのプロパティを設定することで、プロパティを追加できます。

global.application = new Application(null, {
	displayListLength: 2048, commandListLength: 2048
});
export default global.application;

プロパティの説明

このセクションでは、以降の Piu オブジェクト リファレンス セクション全体で参照される特定のプロパティについて説明します。

Anchor

各 content オブジェクトには、オプションの anchor プロパティを設定できます。テンプレートがインスタンス化されると、作成された content オブジェクトへの参照がインスタンス化データのプロパティに割り当てられます。プロパティの識別子は anchor プロパティの値です。

アンカーを使用すると、アプリケーションは、テンプレートからインスタンス化されたコンテンツ階層内の特定のコンテンツとcontainerに直接アクセスできます。これにより、アプリケーションの実行中に変更するオブジェクトへのアクセスが容易になります。たとえば、文字列のラベルを変更したり、ボタンを無効にしたり、テーブルの列に行を追加したりできます。

let sampleStyle = new Style({ font:"600 28px Open Sans", color: "white" });
let SampleContent = Label.template($ => ({
	anchor: "ANCHORED_CONTENT", top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: $.color }), style: sampleStyle,
	string: $.title
}));
let SampleContainer = Container.template($ => ({
	active: true, top: 0, bottom: 0, left: 0, right: 0,
	contents: [
		new SampleContent($)
	],
	Behavior: class extends Behavior {
		onCreate(container, data) {
			this.data = data;
		}
		onTouchEnded(container) {
			this.data["ANCHORED_CONTENT"].string = "Hello!"
		}
	}
}));
application.add(new SampleContainer({ title: "Tap to update", color: "blue" }));

Color

color パラメータは、skin および style コンストラクタの辞書に渡すことができます。

色を指定するには、CSS 名 (レベル 2) または 16 進表記 ("#RGB"、"#RGBA"、"#RRGGBB"、"#RRGGBBAA") を使用できます。

const whiteSkin = new Skin({ fill:"white" });
const redSkin = new Skin({ fill:"#F00" });
const halfRedSkin = new Skin({ fill:"#F008" });
const greenSkin = new Skin({ fill:"#00FF00" });
const halfGreenSkin = new Skin({ fill:"#00FF0088" });

アルファ チャネルで色を指定するには、単なる 16 進数 0xRRGGBBAA を使用することもできます。

const blueSkin = new Skin({ fill:0x0000FFFF });
const halfBlueSkin = new Skin({ fill:0x0000FF88 });

このような 16 進数を構築するために、Piu は CSS 関数表記に似た関数をエクスポートします。

import { rgb, rgba, hsl, hsla } from "piu/All";
const yellowSkin = new Skin({ fill:rgb(255, 255, 0) });
const halfYellowSkin = new Skin({ fill:rgba(255, 255, 0, 0.5) });
const cyanSkin = new Skin({ fill:hsl(180, 1, 0.5) });
const halfCyanSkin = new Skin({ fill:hsla(180, 1, 0.5, 0.5) });

辞書では、色は単一の色、または 2、3、または 4 色の配列になります。skin オブジェクトと style オブジェクトは、それらを使用する content オブジェクトの状態に基づいて色をブレンドします。詳細については、Variant, Variants, State, and States を参照してください。

Coordinates

すべての content オブジェクトには coordinates プロパティがあります。coordinates プロパティは、left、width、right、top、height、および bottom プロパティを持つオブジェクトで、これらはすべて undefined にすることができます。コンテンツの座標は、containerと previous および next プロパティ (同じcontainer内の他の content オブジェクト) に対する相対的な位置とサイズを決定します。

コンテンツのcontainerが application、container、scroller、または layout オブジェクトの場合:

• top、bottom、left、right 座標はすべてcontainerに対する相対座標です。
• width、left、right 座標がすべて指定されている場合、left と right 座標は無視されます。
• left と right の両方が指定されていない場合、コンテンツは指定された幅（指定されていない場合は幅 0）でcontainer内で水平方向に中央揃えされます。
• height、top、bottom 座標がすべて指定されている場合、top と bottom 座標は無視されます。
• top と bottom の両方が指定されていない場合、コンテンツは指定された高さ（指定されていない場合は高さ 0）でcontainer内で垂直方向に中央揃えされます。

コンテンツのcontainerが column オブジェクトの場合:

• top と bottom の座標は、previous と next プロパティを基準とします
• left と right の座標は、containerを基準とします
• width、left、right の座標がすべて指定されている場合、left と right の座標は無視されます

コンテンツのcontainerが row オブジェクトの場合:

• left と right の座標は、previous と next プロパティを基準とします
• top と bottom の座標は、containerを基準とします
• height、top、bottom の座標がすべて指定されている場合、top と bottom の座標は無視されます

Duration, Fraction, Interval, Loop, and Time

コンテンツ階層内のすべてのコンテンツは、duration、fraction、interval、および time プロパティを使用して時間ベースのアニメーション動作を制御するクロックとして使用できます。

• duration プロパティはアニメーションの継続時間で、ミリ秒単位で表されます。
• time プロパティはコンテンツのクロックの現在の時刻を提供します。
• fraction プロパティは、コンテンツの継続時間に対するクロックの現在の時刻の比率です。
• interval プロパティはアニメーションのフレーム間の時間 (フレーム レート) で、ミリ秒単位で表されます。

コンテンツの start および stop 関数は、クロックの実行を制御します。現在の時刻が期間に達すると、クロックは自動的に停止します。コンテンツの loop プロパティが true に設定されている場合、クロックはリスタートします。

クロックが実行中の場合、そのコンテンツの onTimeChanged 関数は、コンテンツの interval プロパティで指定された間隔でトリガーされます。コンテンツの時間がその継続時間（duration）と等しくなると、onFinished 関数がトリガーされます。

let animatedContent = new Content(null, {
	height: 100, width: 100, loop: true,
	skin: new Skin({ fill: ["red", "yellow", "blue"] }),
	Behavior: class extends Behavior {
		onCreate(content) {
			this.startAnimation(content);
		}
		startAnimation(content) {
			content.duration = 3000;
			content.time = 0;
			content.start();
		}
		onTimeChanged(content) {
			content.state = content.fraction*2;
		}
	}
});
application.add(animatedContent);

Time-based animation

interval プロパティは、オブジェクトのクロックに必要なフレーム レートを設定しますが、アプリケーションが過負荷になっている場合は正確ではない可能性があることに注意してください。たとえば、コンテンツの interval が 2 で duration が 100 の場合、onFinished イベントがトリガーされる前に onTimeChanged イベントが正確に 50 回トリガーされると想定するのは安全ではありません。したがって、アプリケーションでは fraction プロパティまたは time プロパティを使用して、アニメーションに表示するフレームを決定することをお勧めします。

たとえば、タップすると両方向に 10 ピクセル拡大および縮小するボタンの 2 つの実装について考えてみましょう。

次の実装は、onFinished の前に onTimeChanged が正確に 20 回トリガーされることを前提としているため、推奨されません。ほとんどの場合は機能しますが、コンテンツが元のサイズに縮小される前に onFinished イベントがトリガーされる可能性があります。

class ExpandingBehavior extends Behavior {
	onTouchEnded(content) {
		this.index = 0;
		content.interval = 5;
		content.duration = 100;
		content.time = 0;
		content.start();
	}
	onTimeChanged(content) {
		this.index++;
		if (this.index < 10) content.sizeBy(1, 1);
		else content.sizeBy(-1, -1);
	}
}

let expandingButton = new Content(null, {
	active: true, height: 50, width: 100,
	skin: new Skin({ fill: "blue" }),
	Behavior: ExpandingBehavior
});

次の実装は、描画されるフレームの数について想定せず、onFinished が呼び出されたときにコンテンツが正しいサイズに縮小されることを保証するため、より優れています。

class ExpandingBehavior extends Behavior {
	onTouchEnded(content) {
		this.startingSize = { h: content.height, w: content.width };
		content.interval = 5;
		content.duration = 100;
		content.time = 0;
		content.start();
	}
	onTimeChanged(content) {
		let startingSize = this.startingSize;
		let fraction = content.fraction;
		if (fraction > 0.5) fraction = 1-fraction;
		fraction *= 20;
		content.height = startingSize.h + fraction;
		content.width = startingSize.w + fraction;
	}
	onFinished(content) {
		let startingSize = this.startingSize;
		content.height = startingSize.h;
		content.width = startingSize.w;
	}
}

let expandingButton = new Content(null, {
	active: true, height: 50, width: 100,
	skin: new Skin({ fill: "blue" }),
	Behavior: ExpandingBehavior
});

Font

font パラメータを style コンストラクタの辞書に渡す必要があります。

Piu はビットマップ フォントを使用します。メトリックはバイナリ FNT ファイルによって提供され、グリフは PNG ファイルによって提供されます。

フォントはアセットであり、マニフェストのリソースで定義する必要があります。フォントには、デフォルトのターゲット、または -alpha または -color 疑似ターゲットを使用します。

バイナリ FNT ファイル形式は、AngelCode によって定義され、Windows 用の BMFont ジェネレーターもリリースされました。Mac では、たとえば Glyph Designer または bmGlyph を使用して、このようなファイルを生成できます。

1 つのビットマップ フォントは、1 つのスタイル、1 つの太さ、1 つの伸縮、1 つのサイズ、1 つのファミリに対応します。バリエーションごとに別々のビットマップ フォントが必要になります。

Style コンストラクタは、辞書の font プロパティを使用してフォントを検索します。font プロパティをバイナリ FNT ファイルの名前に設定するだけです。

const popStyle = new Style({ font:"popFont" });

popStyle オブジェクトは、アセット内の popFont.fnt ファイルを使用します。

ルックアップは、スタイルを使用する label または text オブジェクトが表示されている包含​​階層にバインドされているとき、または Style.prototype.measure メソッドが呼び出されたときにのみ行われます。

Cascading Styles

スタイルをカスケードするには、CSS フォント ショートカット に似たものを使用することをお勧めします。アプリケーションでフォントを定義するこの方法を使用する場合は、上記のようにフォント名だけを使用してアプリケーション内の他のフォントを定義しないでください。

const style = new Style({ font:"italic bold 16px Open Sans" });

Piu では、フォント プロパティには次の順序で 5 つのオプション部分があります:

1. style: italic | normal | inherit
2. weight: 100 | ultralight | 200 | thin | 300 | light | 400 | normal | 500 | medium | 600 | semibold | 700 | bold | 800 | heavy | 900 | black | lighter | bolder | inherit
3. stretch: condensed | normal | inherit
4. size: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | [1-9][0-9]+px | [1-9][0-9]+% | inherit
5. family: the rest of the font property if any.

inherit 値はデフォルト値であり、フォント プロパティの曖昧さを解消する場合にのみ役立ちます。デフォルトでは、content オブジェクトのスタイルは、その container オブジェクトのスタイルを継承します。

すべての部分はオプションであり、個別にカスケードされます。したがって、たとえば、アプリケーションに汎用スタイルを定義し、そのコンテンツに特定のスタイルを定義できます：

const appStyle = new Style({ font:"16px Fira Sans" });
const menuStyle = new Style({ font:"bold" });

スタイルは、それを使用する label または text オブジェクトが、表示されるコンテンツ階層にバインドされている場合にのみカスケードされます。

Piu がアセット内の対応するビットマップ フォント ファイルを見つけるには、一般的な方法に基づいて次の規則を採用する必要があります：

• the family, without spaces,
• -,
• the capitalized name of the stretch, if not normal,
• the capitalized name of the computed weight, if not normal,
• the capitalized name of the style, if not normal,
• Regular, if the stretch, the computed weight and the style are all normal,
• -,
• the computed size in pixels without units.

ここで、style は OpenSans-BoldItalic-16.fnt を検索し、appStyle は FiraSans-Regular-16.fnt を検索し、menuStyle は FiraSans-Bold-16.fnt を検索します。

Tiles

アプリケーションは、tiles プロパティを使用してスキンをタイル化できます。タイルのサイズは、次のように左、右、上、下の値によって決まります。：

• tiles プロパティが未定義の場合、またはその left、right、top、および bottom の値がすべて未定義の場合、スキンはアイコンなどの単なる画像になります。
• left または right の値のみが定義されている場合、スキンは水平方向の 3 部構成のパターンになります。左部分はコンテンツの左側に描画され、右部分はコンテンツの右側に描画され、中央部分はコンテンツの中央を埋めるために繰り返されます。
• top または bottom 値のみが定義されている場合、スキンは垂直の 3 部パターンになります。上部はコンテンツの上部に描画され、下部はコンテンツの下部に描画され、中央部分はコンテンツの中央を埋めるために繰り返されます。
• それ以外の場合、スキンは 9 つの部分からなるパターンになります。コーナー部分はコンテンツの対応するコーナーに描画され、サイド部分はサイドに繰り返され、中央部分は中央を埋めるために繰り返されます。left、right、top、bottom の値をすべて 0 に定義して、スキンでコンテンツを塗りつぶすことができます。

タイリング スキンを使用すると、さまざまなサイズのコンテンツ オブジェクトで 1 つのアセットを共有できます。次の例では、30 x 30 ピクセルの背景を使用して任意のサイズのコンテンツを塗りつぶします。

let roundedRectangleTexture = new Texture("roundedRectangle.png");
let roundedRectangleSkin = new Skin({
	texture: roundedRectangleTexture,
	x: 0, y: 0, width: 30, height: 30,
	tiles: { left: 5, right: 5, top: 5, bottom: 5 }
});

let sampleStyle = new Style({ font:"600 28px Open Sans", color: "white" });

let smallText = new Label(null, {
	skin: roundedRectangleSkin, top: 20, left: 20, height: 30, width: 30,
	style: sampleStyle, string: "Hi"
});
let bigText = new Text(null, {
	skin: roundedRectangleSkin, top: 70, left: 20, height: 120, width: 100,
	style: sampleStyle, string: "This is a long string"
});

application.add(smallText);
application.add(bigText);

Variant, Variants, State, and States

アプリケーションでは、content オブジェクトの state プロパティと variant プロパティを使用して外観を更新することがよくあります。これらは動的に変更できるため、たとえば content オブジェクトをアニメーション化したり、タッチ イベントに視覚的なフィードバックを提供したりするために使用できます。

Colored skins and styles

state プロパティの一般的な使用方法は、コンテンツの色を更新することです。このドキュメントの Color section で説明されているように、skin または style オブジェクトの fill プロパティは色の配列にすることができます。skin を使用する content オブジェクトの state プロパティは、配列のインデックスを決定します。状態が整数でない場合は、周囲の状態の色がブレンドされます。

let multiColoredSkin = new Skin({ fill: ["black", "white", "red"] });
let blackContent = new Content(null, {
	top: 20, left: 20, width: 80, height: 80,
	skin: multiColoredSkin, state: 0,
});
let redContent = new Content(null, {
	top: 20, left: 120, width: 80, height: 80,
	skin: multiColoredSkin, state: 2
});
let grayContent = new Content(null, {
	top: 20, left: 220, width: 80, height: 80,
	skin: multiColoredSkin, state: 0.5
});
application.add(blackContent);
application.add(redContent);
application.add(grayContent);

Reusing textures

多くの場合、複数のアイコンやその他のユーザー インターフェイス要素を 1 つのイメージに保存すると便利です。skin コンストラクタのディクショナリで states プロパティと variants プロパティを指定すると、同じテクスチャの異なるセクションを参照できます。これにより、アプリケーションが類似したイメージを参照して複数のスキンを作成する必要がなくなります。

スキンの states プロパティと variants プロパティは、テクスチャ内の単一要素のサイズを定義するために使用される数値です。states プロパティは状態間の垂直オフセットを表し、variants プロパティはバリアント間の水平オフセットを表します。次の例は、1 つの画像に 10 個の 28x28 ピクセルのアイコンと、アプリケーションが各アイコンを個別に参照できるようにする skin を含むアセットの例です。

const wiFiStripTexture = new Texture({ path:"wifi-strip.png" });
const wiFiSkin = new Skin({
	texture: wiFiStripTexture,
	width: 28, height: 28,
	states: 28, variants: 28
});

texture オブジェクトの states プロパティと variants プロパティは、content オブジェクトの state プロパティと variant プロパティと関連していますが、混同しないでください。content オブジェクトの state と variant プロパティは、skin のどの領域をレンダリングするかを選択するために使用されます。次の図は、最後の例の skin オブジェクトのさまざまな部分を参照するために content が使用する state プロパティと variant プロパティを視覚化したものです。

content の state と variant はいつでも更新できます。これは多くの場合、イベントがトリガーされたときに行われます。

let WiFiStatusIcon = Content.template($ => ({
    skin: wiFiSkin, state: $.passwordProtected, variant: 0,
    interval: 500, duration: 2500, loop: true,
    active: true,
    Behavior: class extends Behavior {
    	onDisplaying(content) {
    		content.start();
    	}
        onTimeChanged(content) {
        	let variant = content.variant;
        	variant++;
        	if (variant > 4) variant = 0;
        	content.variant = variant;
        }
    }
}));
application.add(new WiFiStatusIcon({ passwordProtected: false }, { top: 20, right: 20 }));
application.add(new WiFiStatusIcon({ passwordProtected: true }, { top: 58, right: 20 }));

Piuオブジェクトリファレンス

このセクションでは、Piu API を定義するオブジェクトの詳細について説明します。各オブジェクトについて、関連する場合は次の情報が提示されます。:

• Source Code: オブジェクトのソースコードへのリンク

• Relevant Examples: オブジェクトの使用方法を示すサンプルアプリへのリンク

• コンストラクタの説明: オブジェクトのコンストラクタの説明

• Dictionary: オブジェクトの辞書ベースのコンストラクタに渡される辞書に関する追加情報が必要な場合に存在します。辞書に含まれる可能性があるプロパティについて説明します。辞書パラメーターは、作成されたインスタンスで同じ名前を持つプロパティを設定します (特に指定がない限り)。

• プロトタイプの説明: このオブジェクトのプロトタイプが継承するプロトタイプと、このオブジェクトのプロトタイプに固有のプロパティと機能の説明

• Events: オブジェクトがトリガーするイベントの説明

完全な JavaScript プログラミング インターフェイスについては、piuAll.js を参照してください。

Applicationオブジェクト

• Source code: piuApplication.c
• Relevant Examples: all

すべての Piu アプリケーションは、コンテンツ階層のルートに application オブジェクトを持っている必要があります。他のすべての content オブジェクトは、画面に表示されるように application に追加する必要があります。

デフォルトのオブジェクトはないので、自分で作成してメイン モジュールにエクスポートする必要があります。

export default new Application();

あるいは、application オブジェクトを返す関数をエクスポートすることもできます。

export default function() {
	return new Application();
}

コンストラクタの説明

Application([behaviorData, dictionary])

Arguments	Type	Description
behaviorData	*	このコンテナの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Container.prototype から継承するオブジェクトである application インスタンスを返します。

export default new Application(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "blue" }),
});

Application.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Application.prototype のインスタンスを作成する関数であるコンストラクターを返します。戻り値の prototype プロパティは Application.prototype です。戻り値には template 関数も提供されます。

// Taken from the balls example app

...

let BallApplication = Application.template($ => ({
	skin:backgroundSkin,
	contents: [
		Content(6, { left:0, top:0, skin:ballSkin, variant:0, Behavior: BallBehavior } ),
		Content(5, { right:0, top:0, skin:ballSkin, variant:1, Behavior: BallBehavior } ),
		Content(4, { right:0, bottom:0, skin:ballSkin, variant:2, Behavior: BallBehavior } ),
		Content(3, { left:0, bottom:0, skin:ballSkin, variant:3, Behavior: BallBehavior } ),
	]
}));

export default new BallApplication(null, { displayListLength:4096, touchCount:0 });

Dictionary

container オブジェクトの場合と同じです (Containerオブジェクト セクションの Dictionary を参照)。さらに次のプロパティを含みます。

Parameter	Type	Description
commandListLength	number	Piu 描画操作を保持するために使用されるコマンド リスト バッファのサイズ (バイト単位)
displayListLength	number	Poco レンダリング エンジンを使用するターゲットのディスプレイ リスト バッファのサイズ (バイト単位)
touchCount	number	同時にトリガーできるタッチイベントの数

プロトタイプの説明

プロトタイプは Container.prototype から継承します。

Behaviorオブジェクト

• Source code: piuBehavior.c
• Relevant Examples: balls, drag

behavior オブジェクトには、content オブジェクトによってトリガーされるイベントに対応する関数が含まれています。content オブジェクトは、その動作がイベントの名前を持つ関数プロパティを所有または継承しているかどうかを確認し、そうである場合は、その関数を呼び出し、最初のパラメータとして自身を渡します。

コンストラクタの説明

アプリケーションは、Behavior.prototype から継承し、構築時に content オブジェクトに割り当てた behavior オブジェクトの独自のコンストラクタを定義します。content オブジェクトが構築されると、割り当てられた動作クラスのインスタンスが作成され、動作の onCreate イベントがトリガーされます。この関数はデフォルトでは何も行いません。たとえば、動作はこれを使用してプロパティを初期化できます。

class SampleBehavior extends Behavior {
	onCreate(content, data) {
		this.name = data.name;
	}
	onTouchEnded(content) {
		trace(`Name is: ${this.name}\n`);	// "Name is: Moddable"
	}
}

let sampleContent = new Content({ name: "Moddable" }, {
    active: true, height: 100, width: 100,
    skin: new Skin({fill: "blue"}),
    Behavior: SampleBehavior
});
application.add(sampleContent);

プロトタイプの説明

プロトタイプは Object.prototype から継承します。

Columnオブジェクト

• Source code: piuColumn.c
• Relevant Examples: keyboard, weather

column オブジェクトは、その内容を垂直に配置する container オブジェクトです。

コンストラクタの説明

Column([behaviorData, dictionary])

Arguments	Type	Description
behaviorData	*	このコンテンツの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。辞書は content オブジェクトの場合と同じです。コンテンツ オブジェクト の 辞書 セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Column .prototype から継承したオブジェクトである column インスタンスを返します。

let ColoredSquare = Content.template($ => ({
	left: 0, right: 0, top: 0, bottom: 0,
	skin: new Skin({ fill: $ })
}));

let sampleColumn = new Column(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	contents: [
		new ColoredSquare("red"),
		new ColoredSquare("blue"),
		new ColoredSquare("black"),
	]
});
application.add(sampleColumn);

Column.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Column.prototype のインスタンスを作成する関数であるコンストラクターを返します。戻り値の prototype プロパティは Column.prototype です。戻り値には template 関数も提供されます。

let ColoredSquare = Content.template($ => ({
	left: 0, right: 0, top: 0, bottom: 0,
	skin: new Skin({ fill: $ })
}));

let SampleColumn = Column.template($ => ({
	top: 0, bottom: 0, left: 0, right: 0,
	contents: [
		new ColoredSquare($.firstColor),
		new ColoredSquare($.secondColor),
	],
}));
application.add(new SampleColumn({ firstColor:"red", secondColor:"blue" }));

プロトタイプの説明

プロトタイプは Container.prototype から継承します。

Events

container オブジェクトの場合と同じです (Containerオブジェクト セクションの Events を参照してください)

Containerオブジェクト

• Source code: piuContainer.c
• Relevant Examples: drag, transitions

container オブジェクトは、他の content オブジェクトを含むことができる content オブジェクトです。コンテナでは、content オブジェクトは双方向連結リストに格納されます。content オブジェクトには、content プロパティを使用してインデックスまたは名前でアクセスすることもできます (例: container.content(0) または container.content("foo"))。

コンストラクタの説明

Container([behaviorData, dictionary])

Arguments	Type	Description
behaviorData	*	このコンテナの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Container.prototype から継承するオブジェクトである container インスタンスを返します。

let ColoredSquare = Content.template($ => ({
	height: 100, width: 100,
	skin: new Skin({ fill: $ })
}));

let sampleContainer = new Container(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	contents: [
		new ColoredSquare("blue", { left: 0, top: 0 }),
		new ColoredSquare("red", { right: 0, top: 50 }),
		new ColoredSquare("black", { left: 100, bottom: 0 }),
	]
})
application.add(sampleContainer);

Container.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Container.prototype のインスタンスを作成する関数であるコンストラクタを返します。戻り値の prototype プロパティは Container.prototype です。戻り値には template 関数も提供されます。

let ColoredSquare = Content.template($ => ({
	height: 100, width: 100,
	skin: new Skin({ fill: $ })
}));

let SampleContainer = Container.template($ => ({
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: $.backgroundColor }),
	contents: [
		new ColoredSquare( $.squareColor ),
	]
}));
application.add(new SampleContainer({ backgroundColor: "white", squareColor: "blue" }));

Dictionary

content オブジェクトの場合と同じです (コンテンツ オブジェクト セクションの 辞書 を参照)。さらに次のプロパティを含みます。

Parameter	Type	Description
clip	boolean	true の場合、このコンテナはその内容をクリップします。

プロトタイプの説明

プロトタイプは Content.prototype から継承します。

プロパティ

content オブジェクトの場合と同じです (コンテンツ オブジェクト セクションの プロパティ を参照)。さらに次のプロパティを含みます。

Name	Type	Default Value	Read Only	Description
clip	boolean	false		true の場合、このコンテナはその内容をクリップします。
first	object		✓	このコンテナの最初の content オブジェクト、またはこのコンテナが空の場合は null
last	object		✓	このコンテナ内の最後の content オブジェクト、またはこのコンテナが空の場合は null
length	number		✓	このコンテナ内のcontentオブジェクトの数
transitioning	boolean	false	✓	true の場合、このコンテナは transition オブジェクトを実行しています。

Functions

add(content)

Argument	Type	Description
content	content	追加する content オブジェクト。バインドされていない必要があります。つまり、そのコンテナは null である必要があります。

指定された content オブジェクトをこのコンテナに追加します。content オブジェクトは、このコンテナ内の最後の content オブジェクトになります。

let ColoredSquare = Content.template($ => ({
	height: 100, width: 100,
	skin: new Skin({ fill: $ })
}));
let sampleContainer = new Container(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
});

sampleContainer.add(new ColoredSquare("black", {bottom: 10, left: 15}));
sampleContainer.add(new ColoredSquare("blue", {left: 100}));
sampleContainer.add(new ColoredSquare("green", {top: 10, left: 10}));
application.add(sampleContainer);

---

content(at)

Argument	Type	Description
at	number or string	アクセスしたいcontentオブジェクトのindexまたはnameプロパティ

指定された content オブジェクトを返します。指定された index または name を持つコンテンツがこのコンテナにない場合は undefined を返します。

let sampleContainer = new Container(null, {
	contents: [
		new Content(null, { name: "Moddable" }),
		new Content(),
	]
});
let namedContent = sampleContainer.content("Moddable");
let unnamedContent = sampleContainer.content(1);
let nonexistentContent = sampleContainer.content("Nonexistent");	// undefined

---

empty([start, stop])

Argument	Type	Description
start	number	開始インデックス
stop	number	停止インデックス（デフォルトではthis.length）

このコンテナから、インデックス start から始まり、インデックス stop で終わる content オブジェクトを削除します。start または stop が 0 未満の場合、それは this.length からのオフセットです。

let ColoredSquare = Content.template($ => ({
	height: 100, width: 100,
	skin: new Skin({ fill: $ })
}));

let sampleContainer = new Container(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	contents: [
		new ColoredSquare("blue", { top: 0, left:0 }),
		new ColoredSquare("red", { top: 0, right: 0 })
	]
});

sampleContainer.empty();
application.add(sampleContainer);

---

firstThat(id [, ...])

Argument	Type	Description
id	string	トリガーするイベントの名前
...	*	0個以上の追加パラメータ

このコンテナ内のすべての content オブジェクトが id の値で指定されたイベントをトリガーします。トラバーサルの順序は最初から最後までです。分散イベントが true を返すと、トラバーサルは停止します。分散イベントの最初のパラメータは、このコンテナではなく、イベントをトリガーする content オブジェクトであることに注意してください。イベントの追加パラメータ (存在する場合) は、firstThat 関数の追加パラメータです。

class SampleBehavior extends Behavior {
	sampleEvent(content) {
		trace(content.name+" triggered\n");
		return true;
	}
}

let sampleContainer = new Container(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	contents: [
		Content(null, { name: "firstContent" }),
		Content(null, { name: "secondContent", Behavior: SampleBehavior }),
		Content(null, { name: "thirdContent", Behavior: SampleBehavior }),
	],
	Behavior: class extends Behavior {
		onDisplaying(container) {
			container.firstThat("sampleEvent");	// "secondContent triggered" will be traced here
		}
	}
});
application.add(sampleContainer);

---

insert(content, before)

Argument	Type	Description
content	content	挿入する content オブジェクト。そのコンテナは null である必要があります。
before	object	挿入する前の content オブジェクト。そのコンテナはこのコンテナである必要があります。

パラメータで指定されたとおりに、このコンテナ内の別のオブジェクトの前に 1 つの content オブジェクトを挿入します。

let ColoredSquare = Content.template($ => ({
    height: 100, width: 100,
    skin: new Skin({ fill: $ })
}));

let sampleContainer = new Container(null, {
    top: 0, bottom: 0, left: 0, right: 0,
    skin: new Skin({ fill: "white" }),
    contents: [
        new ColoredSquare("blue", { top: 0, left:0 }),
    ]
});
let redSquare = new ColoredSquare("red", { top: 20, left: 20, });
sampleContainer.insert(redSquare, sampleContainer.first);
application.add(sampleContainer);

---

lastThat(id [, ...])

Argument	Type	Description
id	string	トリガーするイベントの名前
...	*	0個以上の追加パラメータ

このコンテナ内のすべての content オブジェクトが id の値で指定されたイベントをトリガーします。トラバーサルの順序は最後から最初です。分散イベントが true を返すと、トラバーサルは停止します。分散イベントの最初のパラメータは、このコンテナではなく、イベントをトリガーする content オブジェクトであることに注意してください。イベントの追加パラメータ (存在する場合) は、lastThat 関数の追加パラメータです。

class SampleBehavior extends Behavior {
	sampleEvent(content) {
		trace(content.name+" triggered\n");
		return true;
	}
}

let sampleContainer = new Container(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	contents: [
		Content(null, { name: "firstContent" }),
		Content(null, { name: "secondContent", Behavior: SampleBehavior }),
		Content(null, { name: "thirdContent", Behavior: SampleBehavior }),
	],
	Behavior: class extends Behavior {
		onDisplaying(container) {
			container.lastThat("sampleEvent");	// "thirdContent triggered" will be traced here
		}
	}
});
application.add(sampleContainer);

---

remove(content)

Argument	Type	Description
content	content	削除する content オブジェクト。そのコンテナはこのコンテナである必要があります。

指定された content オブジェクトをこのコンテナから削除します

let ColoredSquare = Content.template($ => ({
	height: 100, width: 100,
	skin: new Skin({ fill: $ })
}));

let redSquare = new ColoredSquare("red");
let blueSquare = new ColoredSquare("blue");

let sampleContainer = new Container(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	contents: [
		redSquare,
		blueSquare,
	],
});
sampleContainer.remove(redSquare);
application.add(sampleContainer);

---

replace(content, by)

Argument	Type	Description
content	content	置き換える content オブジェクト。そのコンテナはこのコンテナである必要があります。
by	content	置換する content オブジェクト。バインドされていない必要があります。つまり、そのコンテナは null である必要があります。

パラメータで指定されたとおりに、コンテナ内の content オブジェクトを別のオブジェクトに置き換えます。

let ColoredSquare = Content.template($ => ({
	height: 100, width: 100,
	skin: new Skin({ fill: $ })
}));

let redSquare = new ColoredSquare("red");
let blueSquare = new ColoredSquare("blue");

let sampleContainer = new Container(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	contents: [
		blueSquare,
	],
});
sampleContainer.replace(blueSquare, redSquare);
application.add(sampleContainer);

---

run(transition [, ...])

Argument	Type	Description
transition	transition	実行するtransitionオブジェクト
...	*	0個以上の追加パラメータ

このコンテナで指定された transition オブジェクトを実行し、遷移の期間中そのオブジェクトをこのコンテナにバインドします。追加のパラメータは、transition オブジェクトの onBegin 関数と onEnd 関数に渡されます。コンテナは、遷移が開始する前に onTransitionBeginning イベントをトリガーし、遷移が終了した後に onTransitionEnded イベントをトリガーします。

import CombTransition from "piu/CombTransition";
class SwitchScreenBehavior extends Behavior {
	onCreate(content, data) {
		this.data = data;
	}
	onTouchEnded(content) {
		let data = this.data;
		let transition = new CombTransition(250, Math.quadEaseOut, "horizontal", 4);
		let nextScreen = new ColoredScreen({ color: data.nextColor, nextColor: data.color })
		application.run(transition, application.first, nextScreen);
	}
}
let ColoredScreen = Container.template($ => ({
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: $.color }),
	contents: [
		Content($, {
			active: true, height: 100, width: 100,
			skin: new Skin({ fill: $.nextColor }),
			Behavior: SwitchScreenBehavior
		})
	]
}));
application.add(new ColoredScreen({ color: "red", nextColor: "blue" }));

---

swap(content0, content1)

Argument	Type	Description
content0, content1	content	交換する content オブジェクト。両方のオブジェクトのコンテナはこのコンテナである必要があります。

このコンテナ内の指定された content オブジェクトを交換します。

let ColoredSquare = Content.template($ => ({
    height: 100, width: 100,
    skin: new Skin({ fill: $ })
}));

let sampleContainer = new Container(null, {
    active: true, top: 0, bottom: 0, left: 0, right: 0,
    skin: new Skin({ fill: "white" }),
    contents: [
        new ColoredSquare("blue", { top: 0, left:0 }),
        new ColoredSquare("red", { top: 50, left:50 }),
    ],
    Behavior: class extends Behavior {
    	onTouchEnded(container) {
    		container.swap(container.first, container.last);
    	}
    }
});
application.add(sampleContainer);

---

Events

content オブジェクトの場合と同じです (Contentオブジェクト セクションの Events を参照)。さらに次のプロパティを含みます。

onTransitionBeginning(container)

Argument	Type	Description
container	container	イベントをトリガーしたcontainerオブジェクト

このイベントは、指定された container オブジェクト内で transition オブジェクトが開始されたときにトリガーされます。

---

onTransitionEnded(container)

Argument	Type	Description
container	container	イベントをトリガーしたcontainerオブジェクト

このイベントは、transition オブジェクトが指定された container オブジェクト内で終了したときにトリガーされます。

---

Contentオブジェクト

• Source code: piuContent.c
• Relevant Examples: balls, love-js

アプリケーションは、ボタン、アイコン、スライダー、スイッチ、タブなどのユーザー インターフェイスのグラフィカル部分に content オブジェクトを使用します。

コンストラクタの説明

Content([behaviorData, dictionary])

Argument	Type	Description
behaviorData	*	このコンテンツの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Content.prototype から継承したオブジェクトである content インスタンスを返します。

let sampleContent = new Content("Hello", {
	top: 0, right: 50, height: 100, width: 100,
	skin: new Skin({fill: "blue"}),
	Behavior: class extends Behavior {
		onCreate(content, data) {
			trace(`${data}\n`);		// Prints "Hello" to console
		}
	}
})
application.add(sampleContent);

Content.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Content.prototype のインスタンスを作成する関数であるコンストラクターを返します。戻り値の prototype プロパティは Content.prototype です。戻り値には template 関数も提供されます。

let SampleContent = Content.template($ => ({
	height: 100, width: 100,
	skin: new Skin({fill: $.color}),
	Behavior: class extends Behavior {
		onCreate(content, data) {
			trace(`This box is ${data.color}\n`);		// Prints "This box is red" to console
		}
	}
}));
application.add(new SampleContent({color: "red"}, {top: 0, right: 50}));
application.add(new SampleContent({color: "blue"}));

Dictionary

Parameter	Type	Description
active	boolean	true の場合、このコンテンツはタッチ可能であり、つまりタッチ イベントがトリガーされます。
anchor	string	インスタンス化データ内に作成されたcontentオブジェクトへの参照であるアンカーを作成します。
backgroundTouch	boolean	true の場合、このコンテナはそのコンテンツが受信したすべてのタッチ イベントを受信します。つまり、そのコンテンツの 1 つがタッチされたときにタッチ イベントがトリガーされます。
Behavior	function	Behavior.prototype のインスタンスを作成する関数。通常は Behavior クラスを継承するクラスです。このコンテンツは、この behavior のインスタンスを作成し、その behavior パラメータを作成されたインスタンスに設定し、onCreate メソッドをトリガーします。
bottom	number	このコンテンツの bottom 座標（ピクセル単位）（作成されたインスタンスの coordinates プロパティで bottom を設定）。
duration	number	このコンテンツの継続時間（ミリ秒単位）。このコンテンツは、クロックが実行され、その時間が継続時間と等しいときに onFinished イベントをトリガーします。
exclusiveTouch	boolean	true の場合、このコンテンツは常にタッチをキャプチャします。つまり、このコンテンツの onTouchDown で captureTouch が暗黙的に呼び出されます。exclusiveTouch を true に設定することは、すべてのタッチ ID の onTouchDown イベントに応答して captureTouch を呼び出すことと同じです。
fraction	number	このコンテンツの割合、つまりその時間と継続時間の比率。
height	number	このコンテンツの高さ（ピクセル単位）（作成されたインスタンスの coordinates プロパティで height を設定）。
interval	number	このコンテンツのクロックのティック間の時間、つまり、クロックの実行中にコンテンツの動作の onTimeChanged イベントをトリガーする間隔 (ミリ秒数)。
left	number	このコンテンツの left 座標（ピクセル単位）（作成されたインスタンスの coordinates プロパティで left を設定）。
loop	boolean	true の場合、このコンテンツは、その時間が継続時間と等しくなったときにクロックを再開します。
multipleTouch	boolean	true の場合、このコンテンツは複数のタッチを処理します。
name	string	このコンテンツの名前。
right	number	このコンテンツの right 座標（ピクセル単位）（作成されたインスタンスの coordinates プロパティで right を設定）。
skin	skin	このコンテンツのスキン。
Skin	function	Skin.prototype のインスタンスを作成する関数。このコンテンツは、この skin のインスタンスを作成し、その skin パラメータを作成されたインスタンスに設定します。
state	number	このコンテンツの状態。このコンテンツのスキンが状態を定義している場合、状態を設定すると、このコンテンツの外観が変わります。
style	style	このコンテンツのスタイル。
Style	function	Style.prototype のインスタンスを作成する関数。このコンテンツは、この style のインスタンスを作成し、その style パラメータを作成されたインスタンスに設定します。
time	number	このコンテンツの時間（ミリ秒単位）。時間を設定すると、このコンテンツは onTimeChanged イベントをトリガーします。
top	number	このコンテンツの top 座標（ピクセル単位）（作成されたインスタンスの coordinates プロパティで top を設定）。
variant	number	このコンテンツのバリアント。このコンテンツのスキンがバリアントを定義している場合、バリアントを設定すると、このコンテンツの外観が変わります。
visible	boolean	true の場合、このコンテンツは表示されます。
width	number	このコンテンツの幅（ピクセル単位）（作成されたインスタンスの coordinates プロパティで width を設定）。

プロトタイプの説明

プロトタイプは Object.prototype から継承します。

プロパティ

Name	Type	Default Value	Read Only	Description
active	boolean	false		true の場合、このコンテンツはタッチ可能であり、つまりタッチ イベントがトリガーされます。
anchor	string	インスタンス化データ内でこのコンテンツ オブジェクトを参照するプロパティの識別子
backgroundTouch	boolean	false		true の場合、このコンテナはそのコンテンツが受信したすべてのタッチ イベントを受信します。つまり、そのコンテンツの 1 つがタッチされたときにタッチ イベントがトリガーされます。
behavior	object	null		このコンテンツの behavior オブジェクトまたは null。このコンテンツがイベントをトリガーすると、その動作の対応する関数プロパティ（存在する場合）が呼び出されます。
bounds	object			このコンテンツのグローバル位置とサイズは、ピクセル単位で指定された x、y、width、および height 数値プロパティを持つオブジェクトとして表されます。このコンテンツがバインドされていない場合、ゲッターは undefined を返し、セッターは無視されます。
container	object		✓	このコンテンツのコンテナ。このコンテンツがバインドされていない場合、つまりコンテナがない場合は null になります。
coordinates	object			このコンテンツの座標。left、width、right、top、height、または bottom 数値プロパティ（ピクセル単位で指定）を持つオブジェクト、またはコンストラクタに座標が渡されなかった場合は空のオブジェクト
duration	number	0		このコンテンツの継続時間（ミリ秒単位）。このコンテンツは、クロックが実行され、その時間が継続時間と等しいときに onFinished イベントをトリガーします。
exclusiveTouch	boolean	false		true の場合、このコンテンツは常にタッチをキャプチャします。つまり、このコンテンツの onTouchDown で captureTouch が暗黙的に呼び出されます。exclusiveTouch を true に設定することは、すべてのタッチ ID の onTouchDown イベントに応答して captureTouch を呼び出すことと同じです。
fraction	number	undefined		このコンテンツの割合、つまり、その時間とその継続時間の比率です。継続時間が 0 の場合、ゲッターは undefined を返し、セッターは無視されます。このコンテンツの割合が設定されると、onTimeChanged イベントがトリガーされます。
height	number			このコンテンツの高さ（ピクセル単位）
index	number		✓	コンテナ内のこのコンテンツのインデックス。このコンテンツがバインドされていない場合は -1 になります。
interval	number	1		このコンテンツのクロックのティック間の時間、つまり、クロックの実行中にコンテンツの動作の onTimeChanged イベントをトリガーする間隔 (ミリ秒数)。
loop	boolean	false		true の場合、このコンテンツは、その時間が継続時間と等しくなったときにクロックを再開します。
multipleTouch	boolean	false		true の場合、このコンテンツは複数のタッチを処理します。
name	string			このコンテンツの名前。
next	object		✓	このコンテンツのコンテナの次の content オブジェクト。このコンテンツがこのコンテンツのコンテナの最後の content オブジェクトである場合、またはこのコンテンツにコンテナがない場合は null になります。
offset	object			このコンテンツのローカル位置は、ピクセル単位で指定された x および y 数値プロパティを持つオブジェクトとして表されます。このコンテンツがバインドされていない場合、ゲッターは undefined を返し、セッターは無視されます。
position	object			このコンテンツのグローバル位置は、ピクセル単位で指定された x および y 数値プロパティを持つオブジェクトです。このコンテンツがバインドされていない場合、ゲッターは undefined を返し、セッターは無視されます。
previous	object		✓	このコンテンツのコンテナ内の前の content オブジェクト。このコンテンツがこのコンテンツのコンテナの最初の content オブジェクトである場合、またはこのコンテンツにコンテナがない場合は null になります。
running	boolean		✓	true の場合、このコンテンツのクロックは実行中です。
size	object			このコンテンツのサイズは、ピクセル単位で指定された width および height 数値プロパティを持つオブジェクトとして表されます。
skin	skin	null		このコンテンツのスキンまたは null。
state	number	0		このコンテンツの状態。このコンテンツのスキンが状態を定義している場合、状態を設定すると、このコンテンツの外観が変わります。
style	style	null		このコンテンツのスタイルまたは null
time	number	0		このコンテンツの時間（ミリ秒単位）。時間を設定すると、このコンテンツは onTimeChanged イベントをトリガーします。
variant	number	0		このコンテンツのバリアント。このコンテンツのスキンがバリアントを定義している場合、バリアントを設定すると、このコンテンツの外観が変わります。
visible	boolean	true		true の場合、このコンテンツは表示されます。
width	number			このコンテンツの幅（ピクセル単位）。
x	number			このコンテンツのグローバル x 位置。このコンテンツがバインドされていない場合、ゲッターは undefined を返し、セッターは無視されます。
y	number			このコンテンツのグローバル y 位置。このコンテンツがバインドされていない場合、ゲッターは undefined を返し、セッターは無視されます。

Functions

bubble(id [, ...])

Argument	Type	Description
id	string	トリガーするイベントの名前
...	*	0個以上の追加パラメータ

このコンテンツと、コンテンツ階層の上位にあるすべての container オブジェクトが、id の値で指定されたイベントをトリガーします。バブルされたイベントが true を返すと、バブリングは停止します。バブルされたイベントの最初のパラメータは、このコンテンツではなく、イベントをトリガーする container オブジェクトであることに注意してください。バブルされたイベントの追加パラメータ (ある場合) は、bubble 関数の追加パラメータです。

let NamedContainer = Container.template($ => ({
	name: $.name, active: true, top: 20, bottom: 20, left: 20, right: 20,
	skin: new Skin({ fill: $.color }),
	Behavior: class extends Behavior {
		printName(container) {
			trace(`${container.name} triggered\n`);
		}
		onTouchEnded(container) {
			trace("\n");
			container.bubble("printName");
		}
	}
}));
let outerContainer = new NamedContainer({ name: "outerContainer", color: "red" });
let middleContainer = new NamedContainer({ name: "middleContainer", color: "blue" });
let innerContainer = new NamedContainer({ name: "innerContainer", color: "black" });
outerContainer.add(middleContainer);
middleContainer.add(innerContainer);
application.add(outerContainer);

---

captureTouch(id, x, y, ticks)

Argument	Type	Description
id	number	タッチの識別子
x, y	number	タッチのグローバル位置（ピクセル単位）
ticks	number	タッチのグローバルタイム

このコンテンツは id という名前のタッチをキャプチャします。つまり、このコンテンツのみが、そのタッチに関連する残りの onTouchMoved イベントと onTouchEnded イベントをトリガーします。キャプチャされたタッチに関連する他の content オブジェクトは、captureTouch 関数が呼び出されたときに onTouchCancelled イベントをトリガーします。

class BlueBehavior extends Behavior {
    onTouchBegan(content, id, x, y, ticks) {
    	trace("Blue touch began\n");
        content.captureTouch(id, x, y, ticks);		// With this line, the redContainer behavior's onTouchCancelled method is called; without this line, its onTouchBegan and onTouchEnded methods would be called
    }
    onTouchEnded(content, id, x, y, ticks) {
    	trace("Blue touch ended\n");
    }
}
let blueCapturingContent = new Content(null, {
    active: true, top: 25, left: 25, height: 50, width: 50,
    skin: new Skin({fill: "blue"}),
    Behavior: BlueBehavior
});

class RedBehavior extends Behavior {
    onTouchBegan(content, id, x, y, ticks) {
        trace("Red touch began\n");
    }
    onTouchCancelled(content) {
    	trace("Red touch cancelled\n");
    }
    onTouchEnded(content, id, x, y, ticks) {
    	trace("Red touch ended\n");
    }
}
let redContainer = new Container(null, {
    active: true, backgroundTouch: true,
    top: 0, left: 0, height: 100, width: 100,
    skin: new Skin({fill: "red"}),
    contents: [
    	blueCapturingContent
    ],
    Behavior: RedBehavior
});

application.add(redContainer);

---

defer(id [, ...])

Argument	Type	Description
id	string	トリガーするイベントの名前
...	*	0個以上の追加パラメータ

defer 関数は delegate 関数に似ています。どちらもこのコンテンツによって id の値で指定されたイベントがトリガーされます。違いはタイミングにあります。delegate 関数はイベントをすぐに送信しますが、defer 関数はイベントをポストします。イベントは、メイン イベント ループの次の反復でトリガーされます。

遅延イベントの最初のパラメータはこのコンテンツです。遅延イベントの追加パラメータ (存在する場合) は、defer 関数の追加パラメータです。

---

delegate(id [, ...])

Argument	Type	Description
id	string	トリガーするイベントの名前
...	*	0個以上の追加パラメータ

このコンテンツにより、id の値で指定されたイベントがトリガーされます。移譲されたイベントの最初のパラメータはこのコンテンツです。移譲されたイベントの追加パラメータ (存在する場合) は、delegate 関数の追加パラメータです。

let NamedContainer = Container.template($ => ({
	name: $.name, active: true, top: 20, bottom: 20, left: 20, right: 20,
	skin: new Skin({ fill: $.color }),
	Behavior: class extends Behavior {
		printName(container) {
			trace(`${container.name} triggered\n`);
		}
		onTouchEnded(container) {
			trace("\n");
			container.delegate("printName");
		}
	}
}));
let outerContainer = new NamedContainer({ name: "outerContainer", color: "blue" });
let middleContainer = new NamedContainer({ name: "middleContainer", color: "black" });
let innerContainer = new NamedContainer({ name: "innerContainer", color: "red" });
outerContainer.add(middleContainer);
middleContainer.add(innerContainer);
application.add(outerContainer);

---

focus()

このコンテンツにフォーカスを当てて、キーボード イベントをトリガーします。一度にフォーカスされるコンテンツ オブジェクトは 1 つだけです。

---

distribute(id [, ...])

Argument	Type	Description
id	string	イベント名
...	*

このコンテナと、コンテンツ階層の下位にあるすべての content オブジェクトが、id の値で指定されたイベントをトリガーします。トラバーサルの順序は深さ優先です。トリガーされたイベント処理関数の 1 つが true を返すと、トラバーサルは停止します。分散イベントの最初のパラメーターは、このコンテナではなく、イベントをトリガーする content オブジェクトであることに注意してください。イベントの追加パラメーター (存在する場合) は、distribute 関数の追加パラメーターです。

let NamedContainer = Container.template($ => ({
	name: $.name, active: true, top: 20, bottom: 20, left: 20, right: 20,
	skin: new Skin({ fill: $.color }),
	Behavior: class extends Behavior {
		printName(container) {
			trace(`${container.name} triggered\n`);
		}
		onTouchEnded(container) {
			trace("\n");
			container.distribute("printName");
		}
	}
}));
let outerContainer = new NamedContainer({ name: "outerContainer", color: "red" });
let middleContainer = new NamedContainer({ name: "middleContainer", color: "blue" });
let innerContainer = new NamedContainer({ name: "innerContainer", color: "black" });
outerContainer.add(middleContainer);
middleContainer.add(innerContainer);
application.add(outerContainer);

---

hit(x, y)

Argument	Type	Description
x, y	number	テストするグローバル位置（ピクセル単位）

このコンテンツがアクティブで、バインドされていて、位置を含んでいる場合はこのコンテンツを返し、そうでない場合は undefined を返します。このコンテンツが container インスタンスである場合、コンテンツまたはそれ自体がアクティブで、バインドされていて、位置を含んでいる場合はそのコンテンツの 1 つまたはそれ自体を返し、そうでない場合は undefined を返します。

この関数は、コンテンツが測定され、適合された後にのみ使用する必要があることに注意してください。それ以外の場合は、常に undefined が返されます。

let sampleContent = new Content(null, {
    active: true, top: 0, left: 0, height: 100, width: 100,
    skin: new Skin({fill: "blue"}),
    Behavior: class extends Behavior {
        onDisplaying(content) {
			let x = content == content.hit(10, 10);		// true
			let y = content.hit(200, 200);			// undefined
        }
    }
});

---

measure()

このコンテンツの測定サイズを、width および height パラメータを持つオブジェクトとして返します。

Example 1:

let sampleContent = new Content(null, {
    top: 0, left: 0, height: 100, width: 100,
    skin: new Skin({fill: "blue"})
});
application.add(sampleContent);

let measuredSize = sampleContent.measure(); 	// {height: 100, width: 100}
let fittedHeight = sampleContent.height;		// 100
let fittedWidth = sampleContent.width;			// 100

Example 2:

let sampleContent = new Content(null, {
    top: 0, bottom: 0, left: 0, right: 0,
    skin: new Skin({fill: "blue"})
});
application.add(sampleContent);

let measuredSize = sampleContent.measure(); 	// {height: 0, width: 0}
let fittedHeight = sampleContent.height;		// 320 (assuming running on 240x320 screen)
let fittedWidth = sampleContent.width;			// 240 (assuming running on 240x320 screen)

---

moveBy(x, y)

Argument	Type	Description
x, y	number	このコンテンツを移動する差分（ピクセル単位）

このコンテンツをパラメータで指定されたとおりに移動します。コンテンツの座標によって位置が制約される場合、moveBy 関数は対応する水平または垂直の差分を無視します。

let unconstrainedContent = new Content(null, {
    top: 0, left: 0, height: 100, width: 100,
    skin: new Skin({fill: "blue"}),
});
application.add(unconstrainedContent);
unconstrainedContent.moveBy(100,100);	// Moves unconstrainedContent 100 pixels in the x and y directions

let constrainedContent = new Content(null, {
    top: 0, left: 0, bottom: 140, right: 220,
    skin: new Skin({fill: "red"}),
});
application.add(constrainedContent);
constrainedContent.moveBy(100,100);	// Does nothing

---

sizeBy(width, height)

Argument	Type	Description
width, height	number	このコンテンツのサイズを決定するための差分（ピクセル単位）

このコンテンツのサイズをパラメータで指定されたとおりに変更します。このコンテンツの座標によってサイズが制限される場合、sizeBy 関数は対応する水平または垂直の差分を無視します。

let unconstrainedContent = new Content(null, {
    top: 0, left: 0, height: 100, width: 100,
    skin: new Skin({fill: "blue"}),
})
application.add(unconstrainedContent);
unconstrainedContent.sizeBy(100,100);	// Makes unconstrainedContent 100 pixels wider and taller

let constrainedContent = new Content(null, {
    top: 0, left: 0, bottom: 140, right: 220,
    skin: new Skin({fill: "red"}),
})
application.add(constrainedContent);
constrainedContent.sizeBy(100,100);	// Does nothing

---

start()

このコンテンツのクロックを開始します。

class SampleBehavior extends Behavior {
	onDisplaying(content) {
		this.index = 0;
		content.interval = 750;
		content.time = 0;
		content.start();
	}
	onTimeChanged(content) {
		let state = content.state + 1;
		if (state > 3) state = 0;
		content.state = state;
	}
}
let sampleContent = new Content(null, {
	height: 100, width: 100,
	skin: new Skin({fill: ["red", "orange", "yellow", "green"]}),
	Behavior: SampleBehavior
});
application.add(sampleContent);

---

stop()

このコンテンツのクロックを停止します。

class SampleBehavior extends Behavior {
	onDisplaying(content) {
		this.index = 0;
		content.interval = 750;
		content.time = 0;
		content.start();
	}
	onTimeChanged(content) {
		content.state = !content.state;
	}
	onTouchBegan(content) {
		content.stop();
	}
	onTouchEnded(content) {
		content.start();
	}
}
let sampleContent = new Content(null, {
	active: true, height: 100, width: 100,
	skin: new Skin({ fill: ["blue", "white"]}),
	Behavior: SampleBehavior
});
application.add(sampleContent);

Events

次の標準イベントは、content オブジェクトによってトリガーされます。

onCreate(content, data, context)

Argument	Type	Description
content	content	イベントをトリガーしたcontentオブジェクト
data, context	object	動作を参照または含むcontentオブジェクトのコンストラクタのパラメータ

このイベントは、コンテンツが構築されたときにトリガーされます。

---

onDisplaying(content)

Argument	Type	Description
content	content	イベントをトリガーしたcontentオブジェクト

このイベントは、指定された content オブジェクトがコンテンツ階層に追加され、測定および調整された後、ユーザーに表示される前にトリガーされます。これは、座標が計算された後にオブジェクトが受け取る最初のイベントです。

---

onFinished(content)

Argument	Type	Description
content	content	イベントをトリガーしたcontentオブジェクト

このイベントは、指定された content オブジェクトが実行中で、その時間が継続時間と等しいときにトリガーされます。

---

onTimeChanged(content)

Argument	Type	Description
content	content	イベントをトリガーしたcontentオブジェクト

このイベントは、指定された content オブジェクトの時刻が変更されたときにトリガーされます。

---

onTouchBegan(content, id, x, y, ticks)

onTouchCancelled(content, id)

onTouchEnded(content, id, x, y, ticks)

onTouchMoved(content, id, x, y, ticks)

Argument	Type	Description
content	content	イベントをトリガーしたcontentオブジェクト
id	number	タッチの識別子
x, y	number	イベントのグローバル座標（ピクセル単位）
ticks	number	イベントのグローバル時間

これらのイベントは、指定された content オブジェクトがアクティブでタッチされたときにトリガーされます。

Dieオブジェクト

• Source code: piuDie.c
• Relevant Examples: cards

die オブジェクトは、コンテンツを領域で「ダイカット」して、無効化および更新する領域を最小限に抑えることができる layout オブジェクトです。これは、フレームごとにすべての画面ピクセルを更新できない制約のあるデバイスでアニメーションやトランジションを作成する場合に便利です。

dieオブジェクトは2つの領域を維持する:

• 利用可能な操作が構築する作業領域、
• die オブジェクトの内容を切り取るクリップ領域

両方の領域は最初は空です。

コンストラクタの説明

Die([behaviorData, dictionary])

Argument	Type	Description
behaviorData	*	このダイスの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。辞書は content オブジェクトの場合と同じです。Contentオブジェクト の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Die.prototype. から継承したオブジェクトである die インスタンスを返します。

let sampleDie = new Die(null, {
    left:0, right:0, top:0, bottom:0,
    Behavior: class extends Behavior {
        onDisplaying(die) {
            die.or(40, 40, die.width-80, die.height-80)
                .cut();
        }
    },
    contents: [
        new Content(null, {
            left:0, right:0, top:0, bottom:0,
            skin: new Skin({ fill: "white" }),
        }),
    ]
});

let sampleScreenWithDie = new Container(null, {
    left:0, right:0, top:0, bottom:0,
    contents: [
    	Content(null, {
    		top: 0, bottom: 120, left: 0, right: 0,
    		skin: new Skin({ fill: "blue" }),
    	}),
    	Content(null, {
    		top: 120, bottom: 0, left: 0, right: 0,
    		skin: new Skin({ fill: "black" }),
    	}),
    	sampleDie
    ]
});
application.add(sampleScreenWithDie);

Die.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Die.prototype のインスタンスを作成する関数であるコンストラクタを返します。戻り値の prototype プロパティは Die.prototype です。戻り値には template 関数も提供されます。

let SampleDie = Die.template($ => ({
    left:0, right:0, top:0, bottom:0,
    Behavior: class extends Behavior {
        onDisplaying(die) {
            die.or(40, 40, die.width-80, die.height-80)
                .cut();
        }
    },
    contents: [
        new Content(null, {
            left:0, right:0, top:0, bottom:0,
            skin: new Skin({ fill: "white" }),
        }),
    ]
}));

let sampleScreenWithDie = new Container(null, {
    left:0, right:0, top:0, bottom:0,
    contents: [
    	Content(null, {
    		top: 0, bottom: 0, left: 0, right: 0,
    		skin: new Skin({ fill: "blue" }),
    	}),
    	Row(null, {
    		top: 0, bottom: 0, left: 0, right: 0,
    		contents: [
    			SampleDie(),
    			SampleDie(),
    		]
    	})
    ]
});
application.add(sampleScreenWithDie);

プロトタイプの説明

Prototypeは Layout.prototype から継承します。

Functions

layout オブジェクトの場合と同じです（LayoutオブジェクトのセクションのFunctionsを参照）。さらに:

and(x, y, width, height)

Argument	Type	Description
x, y, width, height	number	ピクセル単位のローカル矩形

四角形を作業領域と交差させて this を返します。

let sampleContainer = new Container(null, {
    left:0, right:0, top:0, bottom:0, skin: new Skin({ fill: "blue" }),
    contents: [
        Die($, {
            left:0, right:0, top:0, bottom:0,
            Behavior: class extends Behavior {
                onDisplaying(die) {
                    die.fill()
                    	.and(10, 10, 50, 50)
                    	.cut();
                }
            },
            contents: [
                new Content(null, {
                	left:0, right:0, top:0, bottom:0,
                	skin: new Skin({ fill: "white" }),
                }),
            ]
        }),
    ]
});
application.add(sampleContainer);

---

attach(content)

Argument	Type	Description
content	content	アタッチするcontentオブジェクト

コンテンツのコンテナ内の指定された content オブジェクトをこの die オブジェクトに置き換え、content オブジェクトをこの die オブジェクトに追加することで、die オブジェクトをコンテンツ階層にバインドします。

let whiteScreen = new Content(null, {
	left:0, right:0, top:0, bottom:0,
	skin: new Skin({ fill: "white" }),
    Behavior: class extends Behavior {
    	onDisplaying(content) {
    		application.insert(blueScreen, content);
    		let die = this.die = new Die();
    		die.attach(content);
    		die.or(0, 0, die.width, die.height/4)
    		die.or(0, die.height/2, die.width, die.height/4)
    			.cut();
    	}
    }
});
let blueScreen = new Content(null, {
	left:0, right:0, top:0, bottom:0,
	skin: new Skin({ fill: "blue" }),
});
application.add(whiteScreen);

---

cut()

作業領域を現在の領域にコピーし、作業領域とクリップ領域の違いのみを無効にします。

---

detach()

この die オブジェクトから最初の content オブジェクトを削除し、そのコンテナ内のこの die オブジェクトを削除した content オブジェクトに置き換えることで、この die オブジェクトをコンテンツ階層からアンバインドします。

let whiteScreen = new Content(null, {
	active: true, left:0, right:0, top:0, bottom:0,
	skin: new Skin({ fill: "white" }),
	Behavior: class extends Behavior {
    	onTouchBegan(content) {
    		application.add(blueScreen);
    		let die = this.die = new Die();
    		die.attach(blueScreen);
    		die.or(0, 0, die.width, die.height/4)
    		die.or(0, die.height/2, die.width, die.height/4)
    			.cut();
    	}
    	onTouchEnded(content) {
    		let die = this.die;
    		die.detach();
    		application.remove(blueScreen)
    	}
	}
});
let blueScreen = new Content(null, {
	active: true, left:0, right:0, top:0, bottom:0,
	skin: new Skin({ fill: "blue" }),
});
application.add(whiteScreen);

---

empty()

作業領域を空にして this を返します。

---

fill()

作業領域をこの die オブジェクトの境界に設定し、this を返します。

---

or(x, y, width, height)

Argument	Type	Description
x, y, width, height	number	ピクセル単位のローカル矩形

四角形と作業領域を包括的に結合し、this を返します。

let sampleContainer = new Container(null, {
    left:0, right:0, top:0, bottom:0, skin: new Skin({ fill: "red" }),
    contents: [
        Die($, {
            left:0, right:0, top:0, bottom:0,
            Behavior: class extends Behavior {
                onDisplaying(die) {
                    die.or(10, 10, 50, 50)
                    die.or(80, 80, 100, 100)
                    	.cut();
                }
            },
            contents: [
                new Content(null, {
                	left:0, right:0, top:0, bottom:0,
                	skin: new Skin({ fill: "white" }),
                }),
            ]
        }),
    ]
});
application.add(sampleContainer);

---

set(x, y, width, height)

Argument	Type	Description
x, y, width, height	number	ピクセル単位のローカル矩形

作業領域を四角形に設定し、this を返します。

let sampleContainer = new Container(null, {
    left:0, right:0, top:0, bottom:0, skin: new Skin({ fill: "blue" }),
    contents: [
        Die($, {
            left:0, right:0, top:0, bottom:0,
            Behavior: class extends Behavior {
                onDisplaying(die) {
                    die.set(50, 50, 220, 140)
                    	.cut();
                }
            },
            contents: [
                new Content(null, {
                	left:0, right:0, top:0, bottom:0,
                	skin: new Skin({ fill: "white" }),
                }),
            ]
        }),
    ]
});
application.add(sampleContainer);

---

sub(x, y, width, height)

Argument	Type	Description
x, y, width, height	number	ピクセル単位のローカル矩形

作業領域から四角形を減算し、this を返します。

let sampleContainer = new Container(null, {
    left:0, right:0, top:0, bottom:0, skin: new Skin({ fill: "blue" }),
    contents: [
        Die($, {
            left:0, right:0, top:0, bottom:0,
            Behavior: class extends Behavior {
                onDisplaying(die) {
                    die.fill()
                    	.sub(0, 0, 50, 50)
                    	.sub(100, 0, 50, 50)
                    	.sub(200, 0, 50, 50)
                    	.cut();
                }
            },
            contents: [
                new Content(null, {
                	left:0, right:0, top:0, bottom:0,
                	skin: new Skin({ fill: "white" }),
                }),
            ]
        }),
    ]
});
application.add(sampleContainer);

---

xor(x, y, width, height)

Argument	Type	Description
x, y, width, height	number	ピクセル単位のローカル矩形

作業領域と四角形を排他的に結合し、this を返します。

let sampleContainer = new Container(null, {
    left:0, right:0, top:0, bottom:0, skin: new Skin({ fill: "blue" }),
    contents: [
        Die($, {
            left:0, right:0, top:0, bottom:0,
            Behavior: class extends Behavior {
                onDisplaying(die) {
                    die.set(0, 0, die.width/2, die.height)
                    	.xor(50, 50, die.width-100, die.height-100)
                    	.cut();
                }
            },
            contents: [
                new Content(null, {
                	left:0, right:0, top:0, bottom:0,
                	skin: new Skin({ fill: "white" }),
                }),
            ]
        }),
    ]
});
application.add(sampleContainer);

Imageオブジェクト

• Source code: piuImage.c
• Relevant Examples: images

image オブジェクトは、画像を表示する content オブジェクトです。

画像アセットは、GIF、JPEG、PNG ファイル、または JPEG および PNG ファイルのフォルダーです。images の例では、サポートされているすべてのタイプの例が示されています。

アセットはマニフェストのリソースで定義する必要があります。JPEG ファイルと PNG ファイルの品質は 1 ～ 100 の値に設定できます。数値が大きいほど品質が高くなります。

"resources":{
	"*-image(100)": [
		"$(MODDABLE)/examples/assets/images/screen1",
	],
	"*-image(40)": [
		"$(MODDABLE)/examples/assets/images/screen2",
	]
},

フォルダー内の画像は、1 つのアニメーション画像のフレームとして使用されます。フレーム レートはフォルダーの名前によって決まります。たとえば、サンプル画像フォルダー の fish.15fps フォルダーは、アプリケーションに 1 秒あたり 15 フレームで実行するように指示します。マニフェストでは、パスから .15fps が削除されます。

"resources":{
	"*-image": [
		"$(MODDABLE)/examples/assets/images/fish",
	],
}

GIF のフレーム レートはファイル自体に設定されており、アプリケーションでは変更できません。

サポートされているすべての画像タイプは、.cs 拡張子を持つ単一のリソースに圧縮されます。これらは、アプリケーションのスクリプト コードで参照する必要があるファイルです。たとえば、上記のアセットを使用して image オブジェクトを作成するには、アプリケーションはパス "screen1.cs"、"screen2.cs"、および "street.cs" を使用します。

コンストラクタの説明

Image([behaviorData, dictionary])

Argument	Type	Description
behaviorData	*	この画像の behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Image.prototype から継承したオブジェクトである image インスタンスを返します。

let sampleImage = new Image(null, ({
	path: "screen1.cs"
}));
application.add(sampleImage);

この例では、サンプル画像フォルダ の screen1.png を使用します。

Image.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Image.prototype のインスタンスを作成する関数であるコンストラクタを返します。戻り値の prototype プロパティは Image.prototype です。戻り値には template 関数も提供されます。

class ImageBehavior extends Behavior {
	onDisplaying(image) {
		image.start();
	}
}
let SampleImage = Image.template($ => ({
	path: $, loop: true, Behavior:ImageBehavior,
}));
application.add(new SampleImage("street.cs"));

この例では the example images folderの street.gif を使用します。

Dictionary

contentオブジェクトの場合と同じです（ContentオブジェクトのセクションのDictionaryを参照してください）。さらに:

Parameter	Type	Description
path	string	画像ファイルの URL。ファイル URL である必要があります。

プロトタイプの説明

プロトタイプは Content.prototype から継承します。

プロパティ

Name	Type	Default Value	Read Only	Description
frameCount	number		✓	この画像に含まれるフレームの総数
frameIndex	number			現在のフレームのインデックス

Labelオブジェクト

• Source code: piuLabel.c
• Relevant Examples: cards, keyboard

label オブジェクトは、単一のスタイルで 1 行に文字列をレンダリングする content オブジェクトです。文字列が label オブジェクトの境界に収まらない場合は切り捨てられます。

コンストラクタの説明

Label([behaviorData, dictionary])

Argument	Type	Description
behaviorData	*	このラベルの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Label.prototype から継承したオブジェクトである label インスタンスを返します。

let sampleStyle = new Style({ font:"600 28px Open Sans", color: "blue" });
let sampleLabel = new Label(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	style: sampleStyle, string: "Hello, World!"
});
application.add(sampleLabel)

Label.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Label.prototype のインスタンスを作成する関数であるコンストラクタを返します。戻り値の prototype プロパティは Label.prototype です。戻り値には template 関数も提供されます。

let blueStyle = new Style({ font:"600 28px Open Sans", color: "blue" });
let redStyle = new Style({ font:"600 28px Open Sans", color: "red" });
let SampleLabel = Label.template($ => ({
	style: $.style, string: $.string,
	skin: new Skin({ fill: "white" }),
}));
application.add(new SampleLabel({ string: "Hello, World!", style: blueStyle }, { top: 0, left: 0 }));
application.add(new SampleLabel({ string: "Hello, World!", style: redStyle }, { bottom: 0, right: 0 }));

Dictionary

contentオブジェクトの場合と同じです（ContentオブジェクトのセクションのDictionaryを参照してください）。さらに:

Parameter	Type	Description
string	string	このラベルの文字列

プロトタイプの説明

プロトタイプは Content.prototype から継承します。

プロパティ

Name	Type	Default Value	Read Only	Description
string	string			このラベルの文字列

Layoutオブジェクト

• Source code: piuLayout.c
• Relevant Examples: N/A

layout オブジェクトは、その動作においてその内容の配置とサイズ設定をスクリプトに移譲する container オブジェクトです。

幅が測定されると、layout オブジェクトは onMeasureHorizo​​ntally イベントをトリガーし、この動作によって layout オブジェクトの測定された幅またはそのコンテンツの座標を変更できます。

高さが測定されると、layout オブジェクトは onMeasureVertically イベントをトリガーし、動作によって layout オブジェクトの測定された高さまたはそのコンテンツの座標を変更できます。

コンストラクタの説明

Layout([behaviorData, dictionary])

Argument	Type	Description
behaviorData	*	このレイアウトの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。辞書は content オブジェクトの場合と同じです。Contentオブジェクト の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Layout.prototype/ から継承したオブジェクトである layout インスタンスを返します。

let ColoredSquare = Content.template($ => ({
	height: 0, width: 0,
	skin: new Skin({ fill: $ }),
}));

let sampleLayout = new Layout(null, {
	height: application.height, width: application.width,
	skin: new Skin({fill: "black"}),
	contents: [
		new ColoredSquare("red", {top: 0, left: 0}),
		new ColoredSquare("yellow", {top: 0, right: 0}),
		new ColoredSquare("green", {bottom: 0, left: 0}),
		new ColoredSquare("blue", {bottom: 0, right: 0}),
	],
	Behavior: class extends Behavior {
		onMeasureHorizontally(layout, width) {
			let squareWidth = width/2;
			let square = layout.first;
			while (square) {
				square.sizeBy(squareWidth, 0);
				square = square.next;
			}
			return width;
		}
		onMeasureVertically(layout, height) {
			let squareHeight = height/2;
			let square = layout.first;
			while (square) {
				square.sizeBy(0, squareHeight);
				square = square.next;
			}
			return height;
		}
	}
});
application.add(sampleLayout);

Layout.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Layout.prototype のインスタンスを作成する関数であるコンストラクターを返します。戻り値の prototype プロパティは Layout.prototype です。戻り値には template 関数も提供されます。

let ColoredSquare = Content.template($ => ({
	height: 0, width: 0,
	skin: new Skin({ fill: $ }),
}));

let SampleLayout = Layout.template($ => ({
	contents: [
		new ColoredSquare("red", {top: 0, left: 0}),
		new ColoredSquare("yellow", {top: 0, right: 0}),
		new ColoredSquare("green", {bottom: 0, left: 0}),
		new ColoredSquare("blue", {bottom: 0, right: 0}),
	],
	Behavior: class extends Behavior {
		onMeasureHorizontally(layout, width) {
			let squareWidth = width/2;
			let square = layout.first;
			while (square) {
				square.sizeBy(squareWidth, 0);
				square = square.next;
			}
			return width;
		}
		onMeasureVertically(layout, height) {
			let squareHeight = height/2;
			let square = layout.first;
			while (square) {
				square.sizeBy(0, squareHeight);
				square = square.next;
			}
			return height;
		}
	}
}));
application.add(new SampleLayout(null, {top: 0, width: 100, left: 0, height: 100}));
application.add(new SampleLayout(null, {bottom: 0, width: 200, right: 0, height: 100}));

プロトタイプの説明

プロトタイプは Container.prototype から継承します。

Events

container オブジェクトの場合と同じです (Containerオブジェクト セクションの Events を参照)。さらに次のプロパティを含みます。:

onFitHorizontally(layout, width)

Argument	Type	Description
layout	object	イベントをトリガーした layout オブジェクト
width	number	layout オブジェクトのフィットした幅（ピクセル単位）

このイベントは、layout オブジェクトの fitted width が計算されたときにトリガーされます。これがトリガーされると、behaviorはそのコンテンツの座標を変更できます。layout オブジェクトの適合幅をピクセル単位で返します。

---

onFitVertically(layout, height)

Argument	Type	Description
layout	object	イベントをトリガーした layout オブジェクト
height	number	layout オブジェクトのフィットした高さ（ピクセル単位）

このイベントは、layout オブジェクトの fitted height が計算されたときにトリガーされます。これがトリガーされると、behaviorはそのコンテンツの座標を変更できます。layout オブジェクトの高さをピクセル単位で返します。

---

onMeasureHorizontally(layout, width)

Argument	Type	Description
layout	object	イベントをトリガーした layout オブジェクト
width	number	layout オブジェクトの測定された幅（ピクセル単位）

このイベントは、layout オブジェクトの measured width が計算されたときにトリガーされます。layout オブジェクトの測定された幅をピクセル単位で返します。

---

onMeasureVertically(layout, height)

Argument	Type	Description
layout	object	イベントをトリガーした layout オブジェクト
height	number	layout オブジェクトの測定された高さ（ピクセル単位）

このイベントは、layout オブジェクトの measured height が計算されたときにトリガーされます。layout オブジェクトの測定された高さをピクセル単位で返します。

---

Portオブジェクト

• Source code: piuPort.c
• Relevant Examples: countdown, list, spinner

port オブジェクトは、単純な Piu グラフィック コマンドを使用して描画する動作で、描画をスクリプトに移譲する content オブジェクトです。

port オブジェクトには、すべての描画に影響するClip Rectangle (最初は port オブジェクトの境界) があります。

コンストラクタの説明

Port([behaviorData, dictionary])

Argument	Type	Description
behaviorData	*	このコンテンツの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。辞書は content オブジェクトの場合と同じです。Contentオブジェクト の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Port.prototype から継承したオブジェクトである port インスタンスを返します。

let samplePort = new Port(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	Behavior: class extends Behavior {
		onDraw(port) {
			port.fillColor("blue", 50, 50, port.width-100, port.height-100);
		}
	}
})
application.add(samplePort);

Port.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Port.prototype のインスタンスを作成する関数であるコンストラクタを返します。戻り値の prototype プロパティは Port.prototype です。戻り値には template 関数も提供されます。

let SamplePort = Port.template($ => ({
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	Behavior: class extends Behavior {
		onCreate(port, data) {
			this.colors = data;
		}
		onDraw(port) {
			let colors = this.colors;
			let x = 0, y = 0;
			for (let i = 0; i < colors.length; i++) {
				port.fillColor(colors[i], x, y, 75, 75);
				x += 35;
				y += 35;
			}
		}
	}
}));
application.add(new SamplePort(["blue", "red", "black"]));

プロトタイプの説明

プロトタイプは Content.prototype から継承します。

Functions

drawContent(x, y, width, height)

Argument	Type	Description
x, y, width, height	number	描画する領域のローカル位置とサイズ（ピクセル単位）

指定された位置にこのポートのスキンを描画します

let heartSkin = new Skin({
	texture: new Texture("heart.png"),
	color: "red",
	x: 0, y: 0, width: 60, height: 60,
});

let sampleStyle = new Style({ font:"600 28px Open Sans", color: ["red", "yellow", "green", "blue"] });
let samplePort = new Port(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: heartSkin,
	Behavior: class extends Behavior {
		onDraw(port) {
			let size = 60;
			port.drawContent(0, 0, size, size);
			port.drawContent(port.width-size, 0, size, size);
			port.drawContent(0, port.height-size, size, size);
			port.drawContent(port.width-size, port.height-size, size, size);
		}
	}
});
application.add(samplePort);

---

drawLabel(string, x, y, width, height)

Argument	Type	Description
string	string	描画する文字列
x, y, width, height	number	描画する領域のローカル位置とサイズ（ピクセル単位）

このポートのスタイルで、labelインスタンスと同じように文字列を描画します。

let sampleStyle = new Style({ font:"600 28px Open Sans", color: "red" });
let samplePort = new Port(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }), style: sampleStyle,
	Behavior: class extends Behavior {
		onDraw(port) {
			let string = "Hello, World!";
			let size = sampleStyle.measure(string);
			port.drawLabel(string, port.width-size.width, port.height-size.height, size.width, size.height);
		}
	}
})
application.add(samplePort);

---

drawSkin(skin, x, y, width, height [, variant, state])

Argument	Type	Description
skin	skin	描画するスキン
x, y, width, height	number	描画する領域のローカル位置とサイズ（ピクセル単位）
variant	number	描画するスキンのバリアント。指定されたスキンがバリアントを定義している場合、バリアントを設定すると外観が変わります。
state	number	描画するスキンの状態。指定されたスキンが状態を定義している場合、状態を設定すると外観が変わります。

状態、バリアント、位置を指定して、content インスタンスと同じようにスキンを描画します。

let heartSkin = new Skin({
	texture: new Texture("heart.png"),
	color: ["red", "blue"],
	x: 0, y: 0, width: 60, height: 60,
});

let samplePort = new Port(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	Behavior: class extends Behavior {
		onDraw(port) {
			port.drawSkin(heartSkin, 20, 20, 60, 60, 0, 1);
		}
	}
})
application.add(samplePort);

---

drawString(string, style, color, x, y, width, height)

Argument	Type	Description
string	string	描画する文字列
style	style	文字列を描画するために使用するスタイル
color	string	文字列を描画する色。このドキュメントのColorセクションで指定された形式の文字列です。
x, y, width, height	number	描画する領域のローカル位置とサイズ（ピクセル単位）

指定されたスタイル、色、位置を使用して、label インスタンスと同じように文字列を描画します。

let sampleStyle = new Style({ font:"600 28px Open Sans"});

let samplePort = new Port(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	Behavior: class extends Behavior {
		onDraw(port) {
			port.drawString("Hello, World!", sampleStyle, "blue", 0, 0, port.width, port.height);
		}
	}
});
application.add(samplePort);

---

drawStyle(string, style, x, y, w, h [, ellipsis, state])

Argument	Type	Description
string	string	描画する文字列
style	style	文字列を描画するために使用するスタイル
x, y, width, height	number	描画する領域のローカル位置とサイズ（ピクセル単位）
ellipsis	boolean	true の場合、文字列は指定された境界に収まるように切り捨てられます。 false の場合、指定された境界を超えていても文字列全体が描画されます。
state	number	描画するスタイルの状態。指定されたスタイルに複数の塗りつぶし色がある場合は、状態を設定することで使用する色が選択されます。

指定されたスタイル、位置、状態で文字列を描画します。

let sampleStyle = new Style({ font:"600 28px Open Sans", color: ["red", "yellow", "green", "blue"] });
let samplePort = new Port(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	Behavior: class extends Behavior {
		onDraw(port) {
			let string = "Hello, World!";
			let size = sampleStyle.measure(string);
			let w = size.width;
			let h = size.height;
			port.drawStyle(string, sampleStyle, 20, 10, w, h, true, 0);
			port.drawStyle(string, sampleStyle, 20, h+10, w, h, true, 1);
			port.drawStyle(string, sampleStyle, 20, h*2+10, w-10, h, false, 2);	// Not truncated
			port.drawStyle(string, sampleStyle, 20, h*3+10, w-10, h, true, 3);	// Truncated
		}
	}
});
application.add(samplePort);

---

drawTexture(texture, color, x, y, sx, sy, sw, sh)

Argument	Type	Description
texture	texture	描画するテクスチャ
color	string	テクスチャにアルファ ビットマップのみが含まれている場合、ビットマップをカラー化するために color プロパティの値が使用されます。このドキュメントの Color セクションで指定されている形式の文字列である必要があります。
x, y	number	描画する領域のローカル位置とサイズ（ピクセル単位）
sx, sy, sw, sh	number	ソース領域 - ピクセルをコピーする領域の位置とサイズ (ピクセル単位)。デフォルトは画像全体です。

テクスチャによって参照されるイメージを描画します。

let ballTexture = new Texture("balls.png");
let alphaHeartTexture = new Texture("heart.png");

let samplePort = new Port(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	Behavior: class extends Behavior {
		onDraw(port) {
			port.drawTexture(ballTexture, "black", 0, 0, 0, 0, 30, 30);
			port.drawTexture(alphaHeartTexture, "red", 0, 30, 0, 0, 60, 60);
			port.drawTexture(alphaHeartTexture, "blue", 0, 90, 0, 0, 60, 60);
		}
	}
})
application.add(samplePort);

---

fillColor(color, x, y, width, height)

Argument	Type	Description
color	string	画像を描画する色。このドキュメントのColorセクションで指定された形式の文字列です。
x, y, width, height	number	塗りつぶす領域のローカル位置とサイズ（ピクセル単位）

指定された色で領域を塗りつぶします。

let samplePort = new Port(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	Behavior: class extends Behavior {
		onDraw(port) {
			port.fillColor("red", 0, 0, port.width/2, port.height);
			port.fillColor("blue", port.width/2, 0, port.width/2, port.height);
		}
	}
})
application.add(samplePort);

---

fillTexture(texture, color, x, y, width, height, sx, sy, sw, sh)

Argument	Type	Description
texture	texture	塗りつぶしに使用する画像
x, y, width, height	number	コピー先領域 - ピクセルをコピーする領域のローカル位置とサイズ（ピクセル単位）
sx, sy, sw, sh	number	ソース領域 - ピクセルをコピーする領域の位置とサイズ (ピクセル単位)。

領域を画像で塗りつぶします。画像のソース領域が繰り返され、目的の領域がカバーされます。

let alphaHeartTexture = new Texture("heart.png");

let samplePort = new Port(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	Behavior: class extends Behavior {
		onDraw(port) {
			let w = port.width, h = port.height;
			port.fillTexture(alphaHeartTexture, "red", 0, 0, w, h/2, 0, 0, 60, 60);
			port.fillTexture(alphaHeartTexture, "blue", 0, h/2, w, h/2, 0, 0, 60, 60);
		}
	}
})
application.add(samplePort);

---

invalidate([x, y, width, height])

Argument	Type	Description
x, y, width, height	number	無効化する領域のローカル位置とサイズ（ピクセル単位）

このポートの指定された領域 (領域が指定されていない場合はポート全体) を無効にして、onDraw イベントをトリガーします。

let samplePort = new Port(null, {
	active: true, top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	Behavior: class extends Behavior {
		onCreate(port) {
			this.color = "blue";
		}
		onDraw(port) {
			port.fillColor(this.color, 0, 0, port.width, port.height);
		}
		onTouchEnded(port) {
			this.color = (this.color == "blue")? "red" : "blue";
			port.invalidate();
		}
	}
})
application.add(samplePort);

---

measureString(string, style)

Argument	Type	Description
string	string	測定する文字列
style	style	文字列を測定するときに使用するスタイル

指定されたスタイルで、labelインスタンスと同じように文字列を測定します。

let sampleStyle = new Style({ font:"600 28px Open Sans"});
let samplePort = new Port(null, {
	active: true, top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	Behavior: class extends Behavior {
		onCreate(port) {
			this.index = 0;
			this.strings = ["H", "He", "Hel", "Hell", "Hello"];
		}
		onDraw(port) {
			let string = this.strings[this.index];
			let stringWidth = port.measureString(string, sampleStyle).width;
			port.drawString(string, sampleStyle, "blue", (port.width-stringWidth)/2, 0, stringWidth, 30);
		}
		onTouchEnded(port) {
			this.index++;
			if (this.index == this.strings.length) this.index = 0;
			port.invalidate();
		}
	}
})
application.add(samplePort);

---

popClip()

このポートのクリップ矩形スタックから現在のクリップ矩形を復元します

---

pushClip([x, y, width, height])

Argument	Type	Description
x, y, width, height	number	クリップ矩形のローカル位置とサイズ

指定されたクリップ矩形をこのポートのクリップ矩形スタックに保存します

let alphaHeartTexture = new Texture("heart.png");
let samplePort = new Port(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	Behavior: class extends Behavior {
		onDraw(port) {
			port.fillTexture(alphaHeartTexture, "blue", 0, 0, port.width, port.height, 0, 0, 60, 60);
			port.pushClip(0, 0, 200, 100);
			port.fillTexture(alphaHeartTexture, "red", 0, 0, port.width, port.height, 0, 0, 60, 60);
			port.popClip();
		}
	}
})
application.add(samplePort);

---

Events

Same as for content object (see Events in the section Contentオブジェクト), plus:

content オブジェクトの場合と同じです (Contentオブジェクト セクションの Events を参照)。さらに次のプロパティを含みます。

onDraw(port, x, y, width, height)

Argument	Type	Description
port	port	イベントをトリガーしたportオブジェクト
x, y, width, height	number	描画する領域のローカル位置とサイズ（ピクセル単位）

このイベントは、指定された port オブジェクトが領域を更新する必要があるとき (無効化されているとき) にトリガーされます。

Rowオブジェクト

• Source code: piuRow.c
• Relevant Examples: N/A

row オブジェクトは、その内容を水平に配置する container オブジェクトです。

コンストラクタの説明

Row([behaviorData, dictionary])

Argument	Type	Description
behaviorData	*	このコンテンツの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。辞書は content オブジェクトの場合と同じです。Contentオブジェクト の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Row.prototype から継承したオブジェクトである row インスタンスを返します。

let sampleRow = new Row(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	contents: [
		new ColoredSquare("red"),
		new ColoredSquare("blue"),
		new ColoredSquare("black"),
	]
});
application.add(sampleRow);

Row.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Row.prototype のインスタンスを作成する関数であるコンストラクタを返します。戻り値の prototype プロパティは Row.prototype です。戻り値には template 関数も提供されます。

let ColoredSquare = Content.template($ => ({
	left: 0, right: 0, top: 0, bottom: 0,
	skin: new Skin({ fill: $ })
}));

let SampleRow = Row.template($ => ({
	top: 0, bottom: 0, left: 0, right: 0,
	contents: [
		new ColoredSquare($.firstColor),
		new ColoredSquare($.secondColor),
	],
}));
application.add(new SampleRow({ firstColor:"red", secondColor:"blue" }));

プロトタイプの説明

プロトタイプは Container.prototype から継承します。

Events

container オブジェクトの場合と同じです (Containerオブジェクト セクションの Events を参照してください)

Scrollerオブジェクト

• Source code: piuScroller.c
• Relevant Examples: scroller, list

scroller オブジェクトは、最初の content オブジェクトを水平方向および垂直方向にスクロールする container オブジェクトです。

コンストラクタの説明

Scroller([behaviorData, dictionary])

Argument	Type	Description
behaviorData	*	このコンテンツの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Scroller.prototype から継承したオブジェクトである scroller インスタンスを返します。

import { VerticalScrollerBehavior } from "scroller";	// See "scroller.js" from the scroller example

let sampleStyle = new Style({ font:"600 28px Open Sans", color: "white" });
let scrollerSample = new Scroller(null, {
	left: 0, right: 0, top: 0, bottom: 0,
	style: sampleStyle, skin: new Skin({ fill: "blue" }),
	active: true, backgroundTouch: true, clip: true,
	Behavior: VerticalScrollerBehavior,
	contents:[
		Text(null, {
			left: 0, right: 0, top: 0,
			blocks: [
				{spans: [
					"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
					"Pellentesque a massa et massa rutrum maximus non quis tellus.",
					"Fusce quis eros quis leo sodales vehicula. Praesent pretium massa vel ornare pharetra."
				]}
			]
		}),
	],
});
application.add(scrollerSample);

Scroller.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Scroller.prototype のインスタンスを作成する関数であるコンストラクタを返します。戻り値の prototype プロパティは Scroller.prototype です。戻り値には template 関数も提供されます。

import { VerticalScrollerBehavior } from "scroller";	// See "scroller.js" from the scroller example

let sampleStyle = new Style({ font:"600 28px Open Sans", color: "white" });
let ScrollerSample = Scroller.template($ => ({
	left: 0, right: 0, top: 0, bottom: 0, skin: new Skin({ fill: "black" }),
	active: true, backgroundTouch: true, clip: true,
	Behavior: VerticalScrollerBehavior,
	contents:[
		Text(null, {
			left: 0, top: 0, right: 0,
			string: "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.",
		}),
	],
}));
let screenWithScrollerSample = new Column(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	style: sampleStyle,
	contents: [
		Text(null, {
			top: 0, height: 40, left: 0, right: 0,
			skin: new Skin({ fill: "blue" }),
			string: "Scroller Example"
		}),
		new ScrollerSample(),
	]
});
application.add(screenWithScrollerSample);

Dictionary

container オブジェクトの場合と同じです (Containerオブジェクト セクションの Dictionary を参照)。さらに次のプロパティを含みます。

Parameter	Type	Definition
loop	boolean	trueの場合、このスクロールバーは最初のcontentオブジェクトをループします。

プロトタイプの説明

プロトタイプは Container.prototype から継承します。

プロパティ

Name	Type	Default Value	Read Only	Description
constraint	object		✓	このスクローラーの制約されたスクロール オフセット (x および y 数値プロパティを持つオブジェクト)。このスクローラーが追跡しているときのスクロール オフセットは、制約されたスクロール オフセットとは異なる場合があります。
loop	boolean	false		true の場合、このコンテンツは、その時間が継続時間と等しくなったときにクロックを再開します。
scroll	object			このスクロールバーのスクロール オフセット。ピクセル単位で指定された x および y 数値プロパティを持つオブジェクトとして表されます。
tracking	boolean	false		true の場合、このスクローラーは追跡しています。追跡中、スクローラーはスクロール オフセットを制限しません。

Functions

reveal(bounds)

Argument	Type	Description
bounds	object	表示する領域のローカル位置とサイズ。ピクセル単位で指定された x、y、width、height プロパティを持つオブジェクトとして指定します。

このスクローラーをスクロールして指定された領域を表示します

class SampleScrollerBehavior extends Behavior {
	onDisplaying(scroller) {
		let bounds = scroller.bounds;
		bounds.y = scroller.first.last.y;
		scroller.reveal(bounds);
	}
}
let sampleStyle = new Style({ font:"600 28px Open Sans", color: "white" });
let ScrollerItem = Label.template($ => ({
	left: 20, right: 20, bottom: 90, height: 30,
	style: sampleStyle, string: "Item" + $
}));
let scrollerSample = new Scroller(null, {
	left: 0, right: 0, top: 0, bottom: 0,
	skin: new Skin({ fill: "black" }),
	Behavior: SampleScrollerBehavior,
	contents:[
		Column(null, {
			top: 0, left: 0,
			contents: [
				ScrollerItem(1),
				ScrollerItem(2),
				ScrollerItem(3),
				ScrollerItem(4),
				ScrollerItem(5),
			]
		})
	],
});
application.add(scrollerSample);

---

scrollBy(dx, dy)

Argument	Type	Description
dx, dy	number	このスクローラーをスクロールするデルタ（ピクセル単位）

このスクロールバーのスクロールオフセットにデルタを追加します

class SampleScrollerBehavior extends Behavior {
	onDisplaying(scroller) {
		this.halfway = scroller.y + scroller.height/2;
	}
	onTouchEnded(scroller, id, x, y, ticks) {
		scroller.scrollBy(0, y-this.halfway);
	}
}

let ColoredSquare = Content.template($ => ({
	left: 20, right: 20, top: 20, height: 80,
	skin: new Skin({ fill: $ })
}));
let scrollerSample = new Scroller(null, {
	left: 0, right: 0, top: 0, bottom: 0,
	skin: new Skin({ fill: "black" }),
	active: true, backgroundTouch: true, clip: true,
	Behavior: SampleScrollerBehavior,
	contents:[
		Column(null, {
			active: true, top: 0, left: 0, right: 0,
			contents: [
				ColoredSquare("red"),
				ColoredSquare("orange"),
				ColoredSquare("yellow"),
				ColoredSquare("green"),
				ColoredSquare("blue"),
				ColoredSquare("purple"),
			]
		})
	],
});
application.add(scrollerSample);

---

scrollTo(x, y)

Argument	Type	Description
x, y	number	このスクローラーをスクロールするオフセット（ピクセル単位）

このスクロールバーのスクロールオフセットを変更します

let ColoredSquare = Content.template($ => ({
	active: true, top: 20, width: 80, height: 80,
	skin: new Skin({ fill: $ }),
	Behavior: class extends Behavior {
		onDisplaying(content) {
			this.x = content.x - 40;
			this.y = content.y - 40;
		}
		onTouchEnded(content) {
			let scroller = content.container.container;
			scroller.scrollTo(this.x, this.y);
		}
	}
}));
let scrollerSample = new Scroller(null, {
	left: 0, right: 0, top: 0, bottom: 0,
	skin: new Skin({ fill: "black" }),
	contents:[
		Column(null, {
			top: 0, left: 0,
			contents: [
				ColoredSquare("red", {left: 0}),
				ColoredSquare("orange", {left: 40}),
				ColoredSquare("yellow", {left: 80}),
				ColoredSquare("green", {left: 120}),
				ColoredSquare("blue", {left: 160}),
				ColoredSquare("purple", {left: 200}),
			]
		})
	],
});
application.add(scrollerSample);

---

Events

container オブジェクトの場合と同じです (Containerオブジェクト セクションの Events を参照)。さらに次のプロパティを含みます。

onScrolled(scroller)

Argument	Type	Description
scroller	scroller	イベントをトリガーした scroller オブジェクト

このイベントは、指定された scroller オブジェクトがスクロールしたときにトリガーされます。

スクローラーによってトリガーされると、このイベントはスクローラーのすべてのコンテンツによってもトリガーされます。これにより、たとえばスクロールバーの実装が容易になります。

Skinオブジェクト

• Source code: piuSkin.c
• Relevant Examples: balls, cards, drag

skin オブジェクトは content オブジェクトの外観を定義します。texture オブジェクトの一部を使用して content オブジェクトを描画または塗りつぶしたり、色を使用して content オブジェクトを塗りつぶしたりストロークしたりできます。

コンストラクタの説明

Skin([dictionary])

Argument	Type	Description
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Skin.prototype から継承したオブジェクトである skin インスタンスを返します。

// Texture skin
let ballTexture = new Texture("balls.png");
let ballSkin = new Skin({ texture:ballTexture, x:0, y:0, width:30, height:30, variants:30 });
let ballContent = new Content(null, {
	top: 0, left: 0,
	skin: ballSkin
});
application.add(ballContent);

// Color skin
let borderedSkin = new Skin({ fill: "black", stroke: "blue", borders: { left: 5, right: 5, top: 5, bottom: 5}})
let borderedContent = new Content(null, {
	top: 50, left: 0, height: 50, width: 50,
	skin: borderedSkin
});
application.add(borderedContent);

Skin.template([dictionary])

Arguments	Type	Description
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Skin.prototype のインスタンスを作成する関数であるコンストラクターを返します。戻り値の prototype プロパティは Skin.prototype です。

// Texture skin
let ballTexture = new Texture("balls.png");
let BallSkin = Skin.template({ texture:ballTexture, x:0, y:0, width:30, height:30, variants:30 });
let ballContent = new Content(null, {
	top: 0, right: 0, variant: 2,
		Skin: BallSkin		// Note the capital "S" in "Skin"
});
application.add(ballContent);

// Color skin
let BorderedSkin = Skin.template({ fill: "black", stroke: "red", borders: { left: 5, right: 5, top: 5, bottom: 5}})
let borderedContent = new Content(null, {
	top: 50, right: 0, height: 50, width: 50,
	skin: new BorderedSkin()	// Note the lowercase "S" in "Skin"
});
application.add(borderedContent);

Dictionary

辞書に texture または Texture プロパティがある場合、コンストラクタはテクスチャ スキンを返します。それ以外の場合は、コンストラクタはカラー スキンを返します。

Texture skins only

Parameter	Type	Description
bottom	number	スキンの下部タイル (作成されたインスタンスの bottom パラメータと、作成されたインスタンスの tiles プロパティの bottom を設定します)
color	string or array	テクスチャにアルファ ビットマップのみが含まれている場合、ビットマップをカラー化するために color プロパティの値が使用されます。このドキュメントの Color セクションで指定されている形式の文字列または文字列の配列である必要があります。
left	number	スキンの左タイル（作成されたインスタンスの left パラメータと、作成されたインスタンスの tiles プロパティの left を設定します）
right	number	スキンの右タイル (作成されたインスタンスの right パラメータと、作成されたインスタンスの tiles プロパティの right を設定します)
states	number	このスキンの状態間の垂直オフセット（ピクセル単位）
texture	texture	このスキンのテクスチャ
Texture	function	Texture.prototype のインスタンスを作成する関数。このスキンは、この texture のインスタンスを作成し、作成されたインスタンスに texture パラメータを設定します。
tiles	object	このスキンのタイルは、ピクセル単位で指定された left、right、top、または bottom 数値プロパティを持つオブジェクトです。詳細については、Tiles を参照してください。
top	number	スキンのトップタイル（作成されたインスタンスの top パラメータと、作成されたインスタンスの tiles プロパティの top を設定します）
variants	number	このスキンのバリアント間の水平オフセット（ピクセル単位）
x, y, width, height	number	抽出する texture オブジェクトの部分 (ピクセル単位) (作成されたインスタンスの bounds、width、および height プロパティを設定します)

Color skins only

Parameter	Type	Description
borders	object	content オブジェクトを囲む境界線。ピクセル単位で指定された left、right、top、または bottom 数値プロパティを持つオブジェクトです。デフォルトでは境界線はありません。
fill	string or array	content オブジェクトを塗りつぶす色。このドキュメントの Color セクションで指定された形式の文字列または文字列の array として指定します。
stroke	string or array	このスキンのストロークの色。このドキュメントのColorセクションで指定された形式の文字列または文字列の配列です。

プロトタイプの説明

プロトタイプは Object.prototype から継承します。

プロパティ

skin オブジェクトのすべてのプロパティは読み取り専用ですが、コンテンツ オブジェクトのスタイルはいつでも変更できます。

Texture Skins

Name	Type	Default Value	Description
bottom	number	0	スキンの下部タイル
color	string		テクスチャにアルファ ビットマップのみが含まれている場合、ビットマップをカラー化するために color プロパティの値が使用されます。このドキュメントの Color セクションで指定されている形式の文字列または文字列の配列である必要があります。
bounds	object		texture オブジェクトから抽出する部分。x、y、width、height の数値プロパティを持つオブジェクトとして、ピクセル単位で指定します。
height	number		このスキンの高さ（ピクセル単位）
left	number	0	スキンの左タイル
right	number	0	スキンの右タイル
states	number	undefined	このスキンの状態間の垂直オフセット（ピクセル単位）
texture	texture		このスキンのテクスチャ
tiles	object	undefined	このスキンのタイルは、ピクセル単位で指定された left、right、top、bottom 数値プロパティを持つオブジェクトとして表されます。
top	number	0	スキンのトップタイル
variants	number	undefined	このスキンのバリエーション間の水平オフセット（ピクセル単位）
width	number		このスキンの幅（ピクセル単位）

Color Skins

Name	Type	Default Value	Description
borders	object	{left: 0, right: 0, top: 0, bottom: 0}	このスキンの境界は、ピクセル単位で指定された left、right、top、bottom 数値プロパティを持つオブジェクトとして表されます。
fill	object		このスキンの塗りつぶし色は、このドキュメントの Color セクションで指定された形式の文字列の 配列 です。 スキンを使用する content オブジェクトの state プロパティによって配列のインデックスが決まります。state が整数でない場合は、周囲の状態の色がブレンドされます。配列ではなく 1 つの文字列として指定された場合は、1 つの項目を持つ配列として扱われます。デフォルトの塗りつぶし色は transparent です。
stroke	object		このスキンのストロークの色は、このドキュメントの Color セクションで指定された形式の文字列の 配列 です。 スキンを使用する content オブジェクトの state プロパティによって配列のインデックスが決まります。state が整数でない場合は、周囲の状態の色がブレンドされます。配列ではなく 1 つの文字列として指定された場合は、1 つの項目を持つ配列として扱われます。デフォルトのストロークの色は transparent です。

---

Soundオブジェクト

• Source code: piuSound.c
• Relevant Examples: sound

Sound オブジェクトは、AudioOut class を使用してオーディオを再生します。オーディオ リソースの全体または一部を 1 回または繰り返し再生するために使用できます。Sound オブジェクトは、ユーザーの操作に対する音声フィードバックを提供するために短いサウンドを再生するように設計されています。その他のオーディオ再生のニーズには、AudioOut クラスを直接使用してください。

コンストラクタの説明

再生されるオーディオ リソースごとに、Sound クラスの個別のインスタンスが作成されます。

Sound(dictionary)

Argument	Type	Description
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが効果を持ち、他のパラメータは無視されます。

Sound.prototype から継承したオブジェクトである sound インスタンスを返します。

let sampleSound = new Sound({ path: "piano.wav" });

Dictionary

Parameter	Type	Description
path	string	オーディオを含むリソースの名前。
offset	number	再生を開始するオーディオのサンプル数。指定しない場合は、最初のサンプルから再生が始まります。
size	number	再生するサンプルの数。指定しない場合は、オーディオ リソースの最後まで再生が続行されます。

プロトタイプの説明

プロトタイプは Object.prototype から継承します。

プロパティ

すべてのプロパティは静的です。bitsPerSample、numChannels、および sampleRate プロパティのデフォルト値は、AudioOut モジュールの構成を反映します。

Name	Type	Default Value	Read Only	Description
bitsPerSample	number		✓	オーディオ再生のビット数 (8 または 16)。
numChannels	number		✓	オーディオ再生のチャンネル数。
sampleRate	number		✓	オーディオ再生の 1 秒あたりのサンプル数。
volume	number	1		音量。値の範囲は、無音の場合は 0、最大音量の場合は 1 です。

Functions

static close()

再生中のサウンドをすべて停止し、Sound オブジェクトによって使用される AudioOut インスタンスを閉じます。Sound クラスのインスタンスはこの呼び出しによって閉じられたり、その他の影響を受けたりすることはありません。

Sound.close();

---

play([stream, repeat, callback])

Argument	Type	Description
stream	number	サウンドを再生するストリーム。デフォルトは 0 です。
repeat	number	サウンドを繰り返す回数。デフォルトは 1 です。サウンドを無期限に繰り返すには、repeat プロパティを Infinity に設定します。
callback	function	オーディオ リソースの再生が完了した後に呼び出すオプションのコールバック関数。

指定されたストリームでオーディオ サンプルを repeat 回再生します。callback パラメータが指定されている場合は、オーディオの再生が完了した後に呼び出されます。

// Play sampleSound once
sampleSound.play();

// Play sampleSound 5 times
sampleSound.play(0, 5);

// Play sampleSound once and print to the console when finished
sampleSound.play(0, 1, () => {
	trace("Sound finished\n");
});

---

Styleオブジェクト

• Source code: piuStyle.c
• Relevant Examples: text

style オブジェクトは、label オブジェクトと text オブジェクト内の文字列の外観を定義します。スタイルは、それを含むオブジェクトのスタイルから継承できます。詳細については、以下の Cascading Styles セクションを参照してください。

コンストラクタの説明

Style(dictionary)

Argument	Type	Description
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Style.prototype から継承したオブジェクトである style インスタンスを返します。

let sampleStyle = new Style({ font:"600 28px Open Sans", color: "blue" });
let sampleLabel = new Label(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	style: sampleStyle, string: "Hello, World!"
});
application.add(sampleLabel)

Style.template(dictionary)

Argument	Type	Description
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Style.prototype のインスタンスを作成する関数であるコンストラクタを返します。戻り値の prototype プロパティは Style です。戻り値には template 関数も提供されます。

let RedStyle = Style.template({ font:"600 28px Open Sans", color: "red" });
let BlueStyle = Style.template({ font:"600 28px Open Sans", color: "blue" });
let sampleLabel = new Label(null, {
	top: 0, height:30, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	Style: RedStyle, string: "Hello, World!"	// Note the capital "S" in "Style"
});
let sampleLabel2 = new Label(null, {
	top: 30, height: 30, left: 0, right: 0,
	skin: new Skin({ fill: "white" }),
	style: new BlueStyle, string: "Hello, World!"	// Note the lowercase "s" in "style"
});
application.add(sampleLabel);
application.add(sampleLabel2);

Dictionary

Text styles only

Parameter	Type	Description
bottom	number	このスタイルの下余白 (ピクセル単位) (作成されたインスタンスの bottom プロパティと、作成されたインスタンスの margins プロパティの bottom を設定します)
leading	number	このスタイルの行の高さ、または「リーディング」 (ブロックの行間の距離) (ピクセル単位)。0 または指定されていない場合は、自動的に計算されます。行が重なっていても距離を強制するには、負の値を使用します。
left	number	このスタイルの左余白 (ピクセル単位) (作成されたインスタンスの left プロパティと、作成されたインスタンスの margins プロパティの left を設定します)
right	number	このスタイルの右余白 (ピクセル単位) (作成されたインスタンスの right プロパティと、作成されたインスタンスの margins プロパティの right を設定します)

Label styles only

Parameter	Type	Description
vertical	string	このスタイルの垂直方向の配置は、top、middle（デフォルト）、bottom のいずれかです。

Text and Label styles

Parameter	Type	Description
color	string or array	このスタイルの色。このドキュメントの Color セクションで指定された形式の文字列または文字列の array として表されます
font	string	このスタイルのフォント。このドキュメントの Cascading Styles セクションで指定された形式の文字列として表されます (作成されたインスタンスの style、weight、stretch、size、および family プロパティを設定します)
horizo​​ntal	string	このスタイルの水平方向の配置。left、center (デフォルト)、right、または justify として表されます
top	number	このスタイルの上余白。ピクセル単位 (作成されたインスタンスの top プロパティと、作成されたインスタンスの margins プロパティの top を設定します)

プロトタイプの説明

プロトタイプは Object.prototype から継承します。

プロパティ

style オブジェクトのすべてのプロパティは読み取り専用ですが、コンテンツ オブジェクトのスタイルはいつでも変更できます。

Name	Type	Default Value	Description
bottom	number	0	このスタイルの下余白
color	object	undefined	このスタイルの色 (文字列の配列)。色が指定されていない場合は undefined。スタイルを使用する content オブジェクトの state プロパティによって配列のインデックスが決まります。state が整数でない場合は、周囲の状態の色がブレンドされます。
family	string		このスタイルのフォント ファミリ
horizo​​ntal	string		このスタイルの水平方向の配置 (left、center (デフォルト)、right、または justify)
leading	number		このスタイルの行の高さ (または「leading」)。ブロックの行間の距離 (ピクセル単位)。0 または指定されていない場合は、自動的に計算されます
left	number	0	このスタイルの左余白
margins	object		このスタイルの余白。left、right、top、bottom の数値プロパティを持つオブジェクトとして、ピクセル単位で指定します
right	number	0	このスタイルの右余白
size	string		このスタイルのフォント サイズ (ピクセル単位)。
stretch	string		このスタイルのストレッチ
top	number	0	このスタイルの上余白
vertical	string		このスタイルの垂直方向の配置。 top、middle (デフォルト)、または bottom として、ピクセル単位で指定します
weight	number		このスタイルのフォントの太さ

Functions

measure(string)

Argument	Type	Description
string	string	計測する文字列

このスタイル（およびこのスタイルが content オブジェクトにアタッチされている場合は継承されたスタイル）でレンダリングされた文字列のサイズを計算し、ピクセル単位で指定された width および height プロパティを持つ object として返します。

let normalStyle = new Style({ font:"600 28px Open Sans", color: "black" });
let size = normalStyle.measure("Moddable");	// {"width":134,"height":38}

---

Textオブジェクト

• Source code: piuText.c
• Relevant Examples: text

text オブジェクトは、複数のスタイルで複数行の文字列をレンダリングする content オブジェクトです。text オブジェクトの文字列を変更する方法は 2 つあります。アプリケーションでは通常、特定の text オブジェクトに対してこれらの方法の 1 つだけを使用します。

1. string プロパティを設定します。これにより、文字列全体が置き換えられます。
2. begin 関数と end 関数の呼び出しの間に、ブロックとスパンを使用して文字列を構築します。これにより、文字列に文字が追加されます。この方法では、各スパンに異なるスタイルを設定できるため、最も制御性が向上します。

コンストラクタの説明

Text([behaviorData, dictionary])

Argument	Type	Description
behaviorData	*	このコンテンツの behavior の onCreate 関数に渡されるパラメータ。これは、null や任意のパラメータを持つ辞書を含む、任意のタイプのオブジェクトにすることができます。
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Text.prototype から継承したオブジェクトである text インスタンスを返します。

let sampleStyle = new Style({ font:"600 28px Open Sans"});
let redStyle = new Style({ color: "red" });
let blueStyle = new Style({ color: "blue" });

let sampleText = new Text(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({fill: "white"}),
	style: sampleStyle,
	blocks: [
		{ spans: [
			" Lorem ipsum dolor sit amet, ",
			{ style: redStyle, spans: "consectetur adipiscing elit." },
		]},
		{ style: blueStyle, spans: "In dignissim hendrerit ultricies." }
	]
});
application.add(sampleText);

Text.template(anonymous)

Arguments	Type	Description
anonymous	function	生成されるインスタンスを初期化するためのプロパティを持つオブジェクトを返す関数

Text.prototype のインスタンスを作成する関数であるコンストラクタを返します。戻り値の prototype プロパティは Text.prototype です。戻り値には template 関数も提供されます。

let sampleStyle = new Style({ font:"600 28px Open Sans"});
let redStyle = new Style({ color: "red", horizontal: "left" });
let blueStyle = new Style({ color: "blue", horizontal: "right" });

let SampleText = Text.template($ => ({
	top: 50, bottom: 50, left: 50, right: 50,
	skin: new Skin({fill: "white"}),
	style: $.baseStyle,
	blocks: [
		{ style: redStyle, spans: $.redText },
		{ style: blueStyle, spans: $.blueText }
	]
}));
application.add(new SampleText({ baseStyle: sampleStyle, redText: "Red!", blueText: "Blue!" }));

Dictionary

content オブジェクトの場合と同じです (Contentオブジェクト セクションの Dictionary を参照)。さらに次のプロパティを含みます。

Parameter	Type	Description
blocks	array	ブロックの配列。ブロックは次のプロパティを持つオブジェクトです: - behavior: オブジェクトまたは null (デフォルト)。このテキストがアクティブでブロックに触れると、ブロックはその動作の対応する関数プロパティを呼び出します。 - style: style インスタンスまたは null (デフォルト)。 - spans: string またはスパンの array。 ブロックと同様に、スパンは behavior、style、および spans プロパティを持つオブジェクトです。
string	string	このテキストの文字列。この文字列を設定すると、このテキストのスタイルを使用する 1 つのスパンを含む 1 つのブロックが作成されます。

プロトタイプの説明

プロトタイプは Content.prototype から継承します。

プロパティ

Name	Type	Read Only	Description
blocks	array		このテキストのブロック
string	string		このテキストの文字列。この文字列を設定すると、このテキストのスタイルを使用する 1 つのスパンを含む 1 つのブロックが作成されます。

Functions

以下のすべての関数を使用するサンプルコードについては、text exampleを参照してください。

begin()

ブロックとスパンを使用して、このテキストの文字列とスタイルを定義するプロセスを開始します。文字列は空にリセットされます。begin 関数は、beginBlock または beginSpan の前に呼び出す必要があります。文字列とスタイルを定義した後、end を呼び出します。

---

beginBlock([style, behavior])

Argument	Type	Description
style	style	ブロックのスタイル
behavior	object	ブロックの動作

新しいブロックを作成して開きます。begin 関数は、対応する end なしですでに呼び出されている必要があります。別のブロックがすでに開いていることはできません。

---

beginSpan(style [, behavior])

Argument	Type	Description
style	style	スパンのスタイル
behavior	object	スパンの動作

新しいスパンを作成して開きます。開いているブロックがなければなりません。別の開いているスパンは存在できません。

---

concat(string)

Argument	Type	Description
string	string	連結する文字列

指定された文字列をこのテキストに連結します。オープンなスパンが必要です。

---

end()

ブロックとスパンを使用してこのテキストの文字列とスタイルを構築するプロセスを完了します。begin の後で、このテキストを測定、フィット、またはレンダリングする前に呼び出す必要があります。

---

endBlock()

開いているブロックを閉じる

---

endSpan()

開いているスパンを閉じる

---

Events

content オブジェクトの場合と同じです (Contentオブジェクト セクションの Events を参照してください)。

Textureオブジェクト

• Source code: piuTexture.c
• Relevant Examples: balls, cards

texture オブジェクトは、画像ファイルを参照するアセットです。アプリケーションは、skin オブジェクトの定義に texture オブジェクトを使用します。

コンストラクタの説明

Texture(path)

Argument	Type	Description
path	string	画像ファイルの URL。ファイル URL である必要があります。

Object.prototype から継承したオブジェクトである texture インスタンスを返します。

const logoTexture = new Texture("logo.png");
const logoSkin = new Skin({ texture: logoTexture, x: 0, y: 0, width: 100, height: 20 });

Texture(dictionary)

Argument	Type	Description
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Object.prototype から継承したオブジェクトである texture インスタンスを返します。

const logoTexture = new Texture({ path: "logo.png" });
const logoSkin = new Skin({ texture: logoTexture, x: 0, y: 0, width: 100, height: 20 });

Texture.template(dictionary)

Argument	Type	Description
dictionary	object	戻り値を初期化するプロパティを持つオブジェクト。以下の Dictionary セクションで指定されたパラメータのみが有効になり、他のパラメータは無視されます。

Texture.prototype のインスタンスを作成する関数であるコンストラクタを返します。戻り値の prototype プロパティは Texture.prototype です。

const LogoTexture = Texture.template({ path: "logo.png" });
// Note the capital "T" in "Texture" below
const LogoSkin = Skin.template({ Texture: LogoTexture, x: 0, y: 0, width: 100, height: 20, color: "white" });

const AnotherLogoTexture = Texture.template({ path: "logo.png" });
// Note the lowercase "t" in "texture" below
const AnotherLogoSkin = Skin.template({ texture: new AnotherLogoTexture(), x: 0, y: 0, width: 100, height: 20, color: "white" });

Dictionary

Parameter	Type	Description
path	string	画像ファイルの URL。ファイル URL である必要があります。

プロトタイプの説明

プロトタイプは Object.prototype から継承します。

プロパティ

Name	Type	Read Only	Description
height	number	✓	このテクスチャの高さ（物理ピクセル単位）
width	number	✓	このテクスチャの幅（物理ピクセル単位）

Timelineオブジェクト

• Source code: piuTimeline.js
• Relevant Examples: timeline, easing-equations

timeline オブジェクトは、一連のトゥイーンの順序付けと実行を行うメカニズムを提供します。これは、Piu 画面と他のアニメーション間の遷移を管理するのに役立ちます。

トゥイーンは、ターゲット オブジェクトと、プロパティと値のリストを指定するオブジェクトを取り込むことで機能します。トゥイーンが特定の割合に設定されると、ターゲット オブジェクトの適切なプロパティが、初期値と宛先値の間の値で更新されます。この動作の詳細は、トゥイーンのタイプ (以下で説明するように、「on」、「from」、または「to」) と、トゥイーンに使用されるイージング関数によって決まります。

アプリケーションは、タイムライン内の特定のポイントをシークすることで、タイムライン内のすべてのトゥイーンを一度に管理します。これは通常、content オブジェクトの onTimeChanged 関数によって実行されます。

Piu Timeline の実装は、GreenSock によって開発された TimelineLite class developed by GreenSock に基づいています。

Timeline クラスを使用するには、アプリケーションにインポートする必要があることに注意してください。

import Timeline from "piu/Timeline";`

コンストラクタの説明

Timeline()

Timeline クラスのインスタンスであるタイムライン オブジェクトを返します。

let timeline = new Timeline();

プロトタイプの説明

プロパティ

Name	Type	Default Value	Read Only	Description
duration	number			このタイムラインが開始してから完了するまでにかかる時間 (ミリ秒)。
fraction	number			このタイムラインの完了した割合を 0 から 1 までの小数で表します。割合を設定することは、seekTo(fraction *duration) を呼び出すことと同じです。
time	number			タイムラインが完了した時間（ミリ秒単位）。これを直接変更しないでください。代わりに seekTo(time) を使用してください。

Functions

from(target, fromProperties, duration, [easing, delay])

Argument	Type	Description
target	object	タイムラインによってプロパティがトゥイーンされるオブジェクト。
fromProperties	object	このオブジェクトのキーは、タイムラインによってトゥイーンされる target オブジェクトのプロパティです。その値は、トゥイーンの開始時に target オブジェクトのプロパティが持つ開始値です。
duration	number	トゥイーンの継続時間（ミリ秒）。
easing	number	トゥイーンに使用するイージング関数。null が指定された場合、トゥイーンでは線形イージング関数が使用されます。
delay	number	タイムラインの前のトゥイーンが完了してから、このトゥイーンを開始するまでのミリ秒数。この数値が負の場合、前のトゥイーンが完了する前にトゥイーンが開始されます。期間が指定されていない場合、前のトゥイーンの完了後すぐにトゥイーンが開始されます。

タイムラインに「from トゥイーン」を追加します。「from トゥイーン」は、target オブジェクトのプロパティを、toProperties オブジェクトで指定された値から target オブジェクトの元の値に duration ミリ秒かけて変更します。

このタイムラインを返します。複数の to、from、および on 呼び出しを連鎖させるのに役立ちます。

let sampleStyle = new Style({ font: "600 28px Open Sans", color: ["blue", "white"] });
let sampleColumn = new Column(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }), style: sampleStyle,
	contents: [
		Label(null, { top: 90, height: 28, left: 80, string: "Hello", state: 0 }),
		Label(null, { top: 2, height: 28, left: 80, string: "Moddable", state: 0 }),
	],
	Behavior: class extends Behavior {
		onDisplaying(column) {
			let timeline = this.timeline = new Timeline();
			timeline.from(column.first, { x: -column.first.width, state: 1 }, 1000, Math.quadEaseOut, 0)
				.from(column.last, { x: application.width, state: 1 }, 800, Math.quadEaseOut, -800);
			column.duration = timeline.duration;
			timeline.seekTo(0);
			column.time = 0;
			column.start();
		}
		onTimeChanged(column) {
			this.timeline.seekTo(column.time);
		}
	}
});
application.add(sampleColumn);

on(target, onProperties, duration, easing, delay, when)

Argument	Type	Description
target	object	タイムラインによってプロパティがトゥイーンされるオブジェクト。
onProperties	object	このオブジェクトのキーは、タイムラインによってトゥイーンされる target オブジェクトのプロパティです。その値は、タイムラインの継続時間中にトゥイーンが遷移する値の配列です。
duration	number	トゥイーンの継続時間（ミリ秒）。
easing	number	トゥイーンに使用するイージング関数。null が指定された場合、トゥイーンでは線形イージング関数が使用されます。
delay	number	タイムラインの前のトゥイーンが完了してから、このトゥイーンを開始するまでのミリ秒数。この数値が負の場合、前のトゥイーンが完了する前にトゥイーンが開始されます。期間が指定されていない場合、前のトゥイーンの完了後すぐにトゥイーンが開始されます。

タイムラインに「on トゥイーン」を追加します。「on トゥイーンは、onProperties オブジェクト内の配列で指定された一連のステップを通じて、duration ミリ秒にわたって target オブジェクトの値をイージングします。

このタイムラインを返します。複数の to、from、および on 呼び出しを連鎖させるのに役立ちます。

let sampleContainer = new Container(null, {
	top: 0, bottom: 0, left: 0, right: 0, skin: new Skin({ fill: "white" }),
	contents: [
		Content(null, { top: 0, height: 50, left: 0, width: 50, skin: new Skin({ fill: ["blue", "red"] }) })
	],
	Behavior: class extends Behavior {
		onDisplaying(container) {
			this.startAnimation(container);
		}
		startAnimation(container) {
			let timeline = this.timeline = new Timeline();
			let l=0, r=150, b=150, t=0;
			timeline.on(container.first, { x: [l, r, r, l, l], y: [t, t, b, b, t], state: [0, 1] }, 1000, Math.quadEaseInOut, 500);
			container.duration = timeline.duration;
			timeline.seekTo(0);
			container.time = 0;
			container.start();
		}
		onTimeChanged(container) {
			let time = container.time;
			if (this.reverse) time = container.duration - time;
			this.timeline.seekTo(time);
		}
		onFinished(container) {
			this.reverse = !this.reverse;
			this.startAnimation(container);
		}
	}
});
application.add(sampleContainer);

seekTo(time)

Argument	Type	Description
time	number	タイムライン内でシークする位置。

このタイムラインのトゥイーンを指定された時間にジャンプさせます。これにより、トゥイーンのターゲット オブジェクトのプロパティが設定されます。

to(target, toProperties, duration, [easing, delay])

Argument	Type	Description
target	object	タイムラインによってプロパティがトゥイーンされるオブジェクト。
toProperties	object	このオブジェクトのキーは、タイムラインによってトゥイーンされる target オブジェクトのプロパティです。その値は、トゥイーンが完了したときに target オブジェクトのプロパティが持つ宛先値です。
duration	number	トゥイーンの継続時間（ミリ秒）。
easing	number	トゥイーンに使用するイージング関数。null が指定された場合、トゥイーンでは線形イージング関数が使用されます。
delay	number	タイムラインの前のトゥイーンが完了してから、このトゥイーンを開始するまでのミリ秒数。この数値が負の場合、前のトゥイーンが完了する前にトゥイーンが開始されます。期間が指定されていない場合、前のトゥイーンの完了後すぐにトゥイーンが開始されます。

タイムラインに「to トゥイーン」を追加します。「to トゥイーン」は、target オブジェクトのプロパティを、duration ミリ秒にわたって現在の値から toProperties オブジェクトで指定された目的の値にイージングします。

このタイムラインを返します。複数の to、from、および on 呼び出しを連鎖させるのに役立ちます。

let sampleStyle = new Style({ font: "600 28px Open Sans", color: ["blue", "white"] });
let sampleColumn = new Column(null, {
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: "white" }), style: sampleStyle,
	contents: [
		Label(null, { top: 90, height: 28, left: 80, string: "Hello", state: 0 }),
		Label(null, { top: 2, height: 28, left: 80, string: "Moddable", state: 0 }),
	],
	Behavior: class extends Behavior {
		onDisplaying(column) {
			let timeline = this.timeline = new Timeline();
			timeline.to(column.first, { x: -column.first.width, state: 1 }, 1000, Math.quadEaseOut, 1000)
				.to(column.last, { x: application.width, state: 1 }, 800, Math.quadEaseOut, -800);
			column.duration = timeline.duration;
			timeline.seekTo(0);
			column.time = 0;
			column.start();
		}
		onTimeChanged(column) {
			this.timeline.seekTo(column.time);
		}
	}
});
application.add(sampleColumn);

Transitionオブジェクト

• Source code: piuTransition.c
• Relevant Examples: N/A

transition オブジェクトは、コンテンツ階層の変更をアニメーション化するために使用されます。

コンストラクタの説明

アプリケーションは、Transition.prototype から継承し、onBegin、onEnd、および onStep 関数をオーバーライドする transition オブジェクトの独自のコンストラクターを定義します。

class BasicLeftToRightTransition extends Transition {
	constructor(duration) {
		super(duration);
	}
	onBegin(container, current, next) {
		container.add(next);
		this.die = new Die();
		this.die.attach(next);
		this.width = container.width;
		this.height = container.height;
	}
	onStep(fraction) {
		fraction = Math.quadEaseOut(fraction);
		let left = 0, right =  Math.round(this.width * fraction);
		this.die.set(left, 0, right - left, this.height);
		this.die.cut();
	}
	onEnd(container, current, next) {
		this.die.detach();
		container.remove(current);
	}
}

Container オブジェクトは、transition オブジェクトのインスタンスを run 関数のパラメータとして使用します。

class SwitchScreenBehavior extends Behavior {
	onCreate(content, data) {
		this.data = data;
	}
	onTouchEnded(content) {
		let data = this.data;
		let transition = new BasicLeftToRightTransition(1000);
		let nextScreen = new ColoredScreen({ color: data.nextColor, nextColor: data.color })
		application.run(transition, application.first, nextScreen);
	}
}
let ColoredScreen = Container.template($ => ({
	top: 0, bottom: 0, left: 0, right: 0,
	skin: new Skin({ fill: $.color }),
	contents: [
		Content($, {
			active: true, height: 100, width: 100,
			skin: new Skin({ fill: $.nextColor }),
			Behavior: SwitchScreenBehavior
		})
	]
}));
application.add(new ColoredScreen({ color: "red", nextColor: "blue" }));

プロトタイプの説明

プロトタイプは Object.prototype から継承します。

プロパティ

Name	Type	Default Value	Read Only	Description
duration	number	250		遷移の継続時間（ミリ秒単位）

Functions

onBegin(container [, ...])

Argument	Type	Description
container	container	遷移を実行しているcontainerオブジェクト
...	*	0個以上の追加パラメータ

この遷移が開始するときに呼び出されます。追加パラメータは、この遷移を指定された container オブジェクトにバインドする run 関数の呼び出しの追加パラメータです。

---

onEnd(container [, ...])

Argument	Type	Description
container	container	遷移を実行しているcontainerオブジェクト
...	*	0個以上の追加パラメータ

この遷移が終了したときに呼び出されます。追加パラメータは、この遷移を指定された container オブジェクトにバインドする run 関数の呼び出しの追加パラメータです。

---

onStep(fraction)

Argument	Type	Description
fraction	number	経過時間とこの遷移の継続時間の比率（0 から 1 まで（両端を含む）の数値）

この遷移の実行中に呼び出されます。少なくとも 2 回 (fraction パラメータは 0 と 1)、最大でディスプレイのリフレッシュ レート (たとえば 1 秒あたり 60 回) で呼び出されます。