mozilla

リビジョンの比較

XBL の例

Change Revisions

リビジョン 183124:

リビジョン 183124 (編集者: Mgjbot / 編集日時: )

リビジョン 237960:

リビジョン 237960 (編集者: Mgjbot / 編集日時: )

タイトル:
XBL の例
XBL の例
URL スラグ:
XUL_Tutorial/XBL_Example
XUL_Tutorial/XBL_Example
タグ:
XUL, XBL, XUL_Tutorial, Tutorials
XUL, XBL, XUL_Tutorial, Tutorials
内容:

リビジョン 183124
リビジョン 237960
n8      {{template.PreviousNext("XUL Tutorial:XBL Inheritance", "XUn8      {{ PreviousNext("XUL Tutorial:XBL Inheritance", "XUL Tutori
>L Tutorial:Features of a Window")}}>al:Features of a Window") }}
n17      それでは、XBL 要素の完全な例を作ってみることにしましょう。 作成するのは、オブジェクトを<a href="ja/Xn17      それでは、XBL 要素の完全な例を作ってみることにしましょう。 作成するのは、オブジェクトを<a href="ja/X
>UL_Tutorial/Stacks_and_Decks#.E3.83.87.E3.83.83.E3.82.AD">デッキ</a>>UL_Tutorial/Stacks_and_Decks#.E3.83.87.E3.83.83.E3.82.AD">デッキ</a>
>で保持して 1 つずつ表示していくウィジェットです。 下辺付近にナビゲーションボタンを置いて、利用者がオブジェクトを巡回できるよう>で保持して 1 つずつ表示していくウィジェットです。 下辺付近にナビゲーションボタンを置いて、利用者がオブジェクトを巡回できるよう
>にするとともに、 ボタンの間にあるテキストウィジェットで現在のページ番号を表示するようにします。 この要素の中には、ページとしてど>にするとともに、 ボタンの間にあるテキストウィジェットで現在のページ番号を表示するようにします。 この要素の中には、ページとしてど
>んな要素でも置くことが可能ですが、一連の画像を順に表示させるために使用するのがよいと思います。 ここでは、この要素を {{wiki>んな要素でも置くことが可能ですが、一連の画像を順に表示させるために使用するのがよいと思います。 ここでは、この要素を {{ 原語併
>.template('原語併記', [ "スライドショー", "slideshow" ])}} 要素と呼ぶことにします。>("スライドショー", "slideshow") }} 要素と呼ぶことにします。
n23      まず、XBL のコンテントとして必要な要素を決めることにしましょう。 ページの切り替えを行う必要があるので、ページのコn23      まず、XBL のコンテントとして必要な要素を決めることにしましょう。 ページの切り替えを行う必要があるので、ページのコ
>ンテンツを保持するために、<code>{{template.XULElem("deck")}}</code> 要素を利用するのが最>ンテンツを保持するために、<code>{{ XULElem("deck") }}</code> 要素を利用するのが最適だと思います
>適だと思います。 また、ページのコンテンツは XBL ではなく XUL ファイルの側に置く必要がありますが、 それらは{{wiki>。 また、ページのコンテンツは XBL ではなく XUL ファイルの側に置く必要がありますが、 それらは{{ 訳語("デッキ", 
>.template('訳語', [ "デッキ", "deck" ])}}の中に追加する必要があるため、<code>{{templa>"deck") }}の中に追加する必要があるため、<code>{{ XBLElem("children") }}</code> タ
>te.XBLElem("children")}}</code> タグを使う必要がありそうです。 さらに、下辺付近には、前のページに>グを使う必要がありそうです。 さらに、下辺付近には、前のページに戻るためのボタン、現在のページ番号を表示するテキストウィジェット、
>戻るためのボタン、現在のページ番号を表示するテキストウィジェット、次のページに進むボタンを置くことにします。>次のページに進むボタンを置くことにします。
24    </p>
25    <p>24    </p>
26      {{wiki.template('Block-title', [ "例 1" ])}}&nbsp;: {{wiki.t25    <p>
>emplate('Xultu-s', [ "ex_xblex_1.xml" ])}} 
26      {{ Block-title("例 1") }}&nbsp;: {{ Xultu-s("ex_xblex_1.xml"
 >) }}
n45      このバインディングによって、スライドショーのために必要な構造が作成されます。 いくつかの要素には、適切に伸縮が行われるn45      このバインディングによって、スライドショーのために必要な構造が作成されます。 いくつかの要素には、適切に伸縮が行われる
>ように <code>{{template.XULAttr("flex")}}</code> 属性が追加されています。 また、2 つ>ように <code>{{ XULAttr("flex") }}</code> 属性が追加されています。 また、2 つのボタンの <
>のボタンの <code>{{template.XULAttr("label")}}</code> 属性には、 バインドされた要素に>code>{{ XULAttr("label") }}</code> 属性には、 バインドされた要素に設定される 2 つのカスタム
>設定される 2 つのカスタム属性、<code>previoustext</code> と <code>nexttext</code>属性、<code>previoustext</code> と <code>nexttext</code> が継承されます。 これに
>> が継承されます。 これによって、ボタンのラベルの変更が簡単になります。 また、XBL がバインドされた要素の子要素は、<cod>よって、ボタンのラベルの変更が簡単になります。 また、XBL がバインドされた要素の子要素は、<code>{{ XULElem("
>e>{{template.XULElem("deck")}}</code> の中に配置されることになります。 さらに、<code>>deck") }}</code> の中に配置されることになります。 さらに、<code>{{ XULAttr("selectedI
>{{template.XULAttr("selectedIndex")}}</code> が <code>{{template.X>ndex") }}</code> が <code>{{ XULElem("deck") }}</code> に継承されているため、
>ULElem("deck")}}</code> に継承されているため、 XUL 側で最初のページを設定することが可能です。> XUL 側で最初のページを設定することが可能です。
n66      <img alt="画像:xblex1.jpg" src="File:ja/Media_Gallery/Xblex1.n66      <img alt="画像:xblex1.jpg" fileid="2045" src="File:ja/Media_G
>jpg">>allery/Xblex1.jpg">
n69      最初の「Button 1」ボタンは、デッキの最初のページとして使われているものです。 また、<code>{{templn69      最初の「Button 1」ボタンは、デッキの最初のページとして使われているものです。 また、<code>{{ XULE
>ate.XULElem("label")}}</code> ウィジェットは <code>value</code> が指定されていな>lem("label") }}</code> ウィジェットは <code>value</code> が指定されていないため表示され
>いため表示されていません。 この値は、後で自動計算されるようにするため、設定せずに置いてあります。>ていません。 この値は、後で自動計算されるようにするため、設定せずに置いてあります。
n75      次は、現在のページを保持するためのプロパティを追加します。 このカスタムプロパティの値を取得する場合、 デッキから現在n75      次は、現在のページを保持するためのプロパティを追加します。 このカスタムプロパティの値を取得する場合、 デッキから現在
>表示されているページの番号を保持している <code>{{template.XULAttr("selectedIndex")}}<>表示されているページの番号を保持している <code>{{ XULAttr("selectedIndex") }}</code> 
>/code> 属性の値を取得する必要があります。 同様に、このプロパティを設定する場合は、デッキの <code>{{templat>属性の値を取得する必要があります。 同様に、このプロパティを設定する場合は、デッキの <code>{{ XULAttr("sele
>e.XULAttr("selectedIndex")}}</code> 属性を変更する必要があり、 加えて現在のページ番号を表示し>ctedIndex") }}</code> 属性を変更する必要があり、 加えて現在のページ番号を表示しているテキストウィジェットに
>ているテキストウィジェットについても更新する必要があります。>ついても更新する必要があります。
n83      <code>page</code> プロパティの値を取得する場合、 まず匿名コンテント配列の最初の要素を参照します。 n83      <code>page</code> プロパティの値を取得する場合、 まず匿名コンテント配列の最初の要素を参照します。 
>得られる要素は垂直ボックスなので、デッキを取得するためには、このボックスの最初の子ノードを取得する必要があります。 なお、ボックス>得られる要素は垂直ボックスなので、デッキを取得するためには、このボックスの最初の子ノードを取得する必要があります。 なお、ボックス
>から見れば、デッキは匿名ではないため、匿名コンテント配列は使用しません。 最後に、デッキの <code>{{template.XU>から見れば、デッキは匿名ではないため、匿名コンテント配列は使用しません。 最後に、デッキの <code>{{ XULAttr("s
>LAttr("selectedIndex")}}</code> 属性を取得して返します。 また、<code>page</code>>electedIndex") }}</code> 属性を取得して返します。 また、<code>page</code> を設定するた
> を設定するためには、後で定義する <code>setPage()</code> メソッドを呼び出します。>めには、後で定義する <code>setPage()</code> メソッドを呼び出します。
84    </p>
85    <p>84    </p>
85    <p>
86      また、Previous ボタンと Next ボタンには、ボタンが押されたときにページを変更するための、<code>{{86      また、Previous ボタンと Next ボタンには、ボタンが押されたときにページを変更するための、<code>{{
>template.XULAttr("oncommand")}}</code> ハンドラを追加する必要があります。 都合よく、たった> XULAttr("oncommand") }}</code> ハンドラを追加する必要があります。 都合よく、たった今追加したカス
>今追加したカスタムプロパティの <code>page</code> を使えば、ページを変更することが可能です。>タムプロパティの <code>page</code> を使えば、ページを変更することが可能です。
n96      <code>page</code> プロパティは、{{wiki.template('訳語', [ "外枠", "outn96      <code>page</code> プロパティは、{{ 訳語("外枠", "outer") }}の XUL 要素だけに
>er" ])}}の XUL 要素だけに存在するため、取得するためには <code><a href="ja/DOM/element.>存在するため、取得するためには <code><a href="ja/DOM/element.parentNode">parentN
>parentNode">parentNode</a></code> プロパティを使う必要があります。 最初の <code><a h>ode</a></code> プロパティを使う必要があります。 最初の <code><a href="ja/DOM/element
>ref="ja/DOM/element.parentNode">parentNode</a></code> は、ボタンの親である水>.parentNode">parentNode</a></code> は、ボタンの親である水平ボックスを返し、2 つめはその親であ
>平ボックスを返し、2 つめはその親である垂直ボックスを返します。 そして、最後の <code><a href="ja/DOM/el>る垂直ボックスを返します。 そして、最後の <code><a href="ja/DOM/element.parentNode">p
>ement.parentNode">parentNode</a></code> が、その親の外枠のボックスを返します。 返された >arentNode</a></code> が、その親の外枠のボックスを返します。 返された <code>page</code> プ
><code>page</code> プロパティは、インクリメント (++ 演算)、またはデクリメント (-- 演算) されます。 >ロパティは、インクリメント (++ 演算)、またはデクリメント (-- 演算) されます。 これにより、値を取得するために <co
>これにより、値を取得するために <code>onget</code> スクリプトが呼び出され、 その値に 1 の加算または減算を行>de>onget</code> スクリプトが呼び出され、 その値に 1 の加算または減算を行った後、値を設定するために <code
>った後、値を設定するために <code>onset</code> ハンドラが呼び出されることになります。>>onset</code> ハンドラが呼び出されることになります。
n102      続いては、<code>setPage</code> メソッドの定義にかかります。 このメソッドは、パラメータを 1 つn102      続いては、<code>setPage</code> メソッドの定義にかかります。 このメソッドは、パラメータを 1 つ
>取り、そこに設定するページ番号を渡します。 また、このメソッドでは、ページが範囲外ではないことの確認と、デッキの <code>{{>取り、そこに設定するページ番号を渡します。 また、このメソッドでは、ページが範囲外ではないことの確認と、デッキの <code>{{
>template.XULAttr("selectedIndex")}}</code> 属性の設定、及びテキストウィジェットの <c> XULAttr("selectedIndex") }}</code> 属性の設定、及びテキストウィジェットの <code>{{ 
>ode>{{template.XULAttr("label")}}</code> 属性の変更を行う必要があります。>XULAttr("label") }}</code> 属性の変更を行う必要があります。
n164      スライドショーを最初に表示したときから、ページ番号が正しく表示されるようにするためには、 コンストラクタを作成して、ラn164      スライドショーを最初に表示したときから、ページ番号が正しく表示されるようにするためには、 コンストラクタを作成して、ラ
>ベル要素を初期化しておく必要があります。 ページ番号を設定するためには、先述のメソッドと類似のコードを使用します。 下記の <co>ベル要素を初期化しておく必要があります。 ページ番号を設定するためには、先述のメソッドと類似のコードを使用します。 下記の <co
>de>this.page</code> による参照は <code>page</code> プロパティの <code>onget</>de>this.page</code> による参照は <code>page</code> プロパティの <code>onget</
>code> スクリプトを呼び出し、 メソッドのときとは逆に、<code>{{template.XULAttr("selectedI>code> スクリプトを呼び出し、 メソッドのときとは逆に、<code>{{ XULAttr("selectedIndex") }
>ndex")}}</code> 属性を初期ページを取得するために使用します。>}</code> 属性を初期ページを取得するために使用します。
n186      {{wiki.template('Block-title', [ "Example 2" ])}}&nbsp;: {{n186      {{ Block-title("Example 2") }}&nbsp;: {{ Xultu-s("ex_xblex_
>wiki.template('Xultu-s', [ "ex_xblex_2.xml" ])}}>2.xml") }}
t241      {{template.PreviousNext("XUL Tutorial:XBL Inheritance", "XUt241      {{ PreviousNext("XUL Tutorial:XBL Inheritance", "XUL Tutori
>L Tutorial:Features of a Window")}}>al:Features of a Window") }}
242    </p>
242    </p>{{ wiki.languages( { "en": "en/XUL_Tutorial/XBL_Example",243    <div class="noinclude"></div>{{ languages( { "en": "en/XUL_Tu
> "pl": "pl/Kurs_XUL/Przyk\u0142ad_XBL" } ) }}>torial/XBL_Example", "fr": "fr/Tutoriel_XUL/Exemple_XBL", "pl": "
 >pl/Kurs_XUL/Przyk\u0142ad_XBL" } ) }}

前に戻る