Pageオブジェクト

Pageオブジェクトはそれぞれのページを抽象化したオブジェクトです。Pageオブジェクトは、ページやウィジェットイベントハンドラとウィジェッドのレイアウト情報を持っています。

ページやウィジェットのイベントハンドラでは、thisキーワードはページオブジェクトを指します。

// page1.js
page1_page.prototype.onpageinit = function(event)
{
   console.log('HTML: ' + this.htmlPath);
};

page1_page.prototype.button1_ontap = function(event)
{
   this.heading1.text('Hello World!');
};

図: Pageオブジェクト

ページがロードされるとページオブジェクトが生成され、ページが表示されている間のみページオブジェクトは有効な値を持ちます。他のページから別のページのページオブジェクトのイベントハンドラにアクセスすることはできません。利用可能なメンバオブジェクトを次の表で説明します。

表: メンバーオブジェクト

メンバー	タイプ	説明	使用例
PageID	文字列	ページID	"page1"
jqID	文字列	JQery用のページID	"#page1"
htmlPath	文字列	自動生成されたHTMLのパス	"page/page1.html"
cssPath	文字列	自動生成されたCSSのパス	"page/page1.css"
Obj	文字列	ページのJQueryオブジェクト	$(jqID)

ページの各オブジェクトのメンバ変数としてページのウィジェットにアクセスすることができます。ウィジェットのメンバ変数はjQueryオブジェクトなので、jQueryのAPIを使用することができます。

// page1.js
page1_page.prototype.button1_ontap = function(event)
{
   this.heading1.text('Hello World!');
};

図：ウィジェットオブジェクト

次の表でページの利用可能なイベントを説明します。

表： Pageイベント

イベント	ハンドラ	契機
pagebeforecreate	{page_class}.prototype.onpagebeforecreate	ページが初期化される前
pagecreate	{page_class}.prototype.onpagecreate	ページがDOMに追加された後
pageinit	{page_class}.prototype.onpageinit	ページが初期化された後
pagebeforehide	{page_class}.prototype.onpagebeforehide	ページが隠れる前
pagehide	{page_class}.prototype.onpagehide	ページが隠れた後
pagebeforeshow	{page_class}.prototype.onpagebeforeshow	ページが表示される前
pageshow	{page_class}.prototype.onpageshow	ページが表示された後
pageremove	{page_class}.prototype.onpageremove	ページがDOMから削除される前

次の図は、ページ遷移時のイベントとページのライフサイクルのシーケンスを表しています。現時点では、このシーケンスはjQuery Mobileにおけるページ遷移にも適用されます。

図：Pageイベントのシーケンス

UI Builder[x]を使ってページイベントを追加することができます。

図：Pageイベントハンドラ

図：Pageイベントハンドラのコード

すべてのウィジェットは、独自のいくつかのイベントがあります。Buttonウィジェットのイベントを次の表で説明します。

表: ボタンウィジェットイベンド

イベント	ハンドラ
Tap	{page_class}.prototype.{buttonID}_ontap
Tap hold	{page_class}.prototype.{buttonID}_ontaphold
Swipe	{page_class}.prototype.{buttonID}_onswipe
Swipe left	{page_class}.prototype.{buttonID}_onswipeleft
Swipe right	{page_class}.prototype.{buttonID}_onswiperight