Now browsing the archives for the 'XUL Widgets' category.

スピンボタン (xul:spinbuttons)

7月21日のトランクビルドにて Bug 155053 – Make the spinbuttons a real widget がFixされ、XULのスピンボタンが実装された。使い方はいたって簡単。 spinbuttons 要素に onup, ondown イベントハンドラを設定することで、△ボタンや▽ボタンの動作を設定できる。

<textbox value="0" />
<spinbuttons onup="this.previousSibling.value++;"
             ondown="this.previousSibling.value--;" />

また、 increaseDisabled, decreaseDisabled プロパティをセットすることで△ボタンや▽ボタンを無効にすることができる。
詳しくは: chrome://global/content/bindings/spinbuttons.xml

xul:spinbuttons

TOP

ツリーセルのインライン編集 (xul:tree editable=”true”)

7月13日のトランクビルドにて Bug 201499 – Tree widgets should support editable content within hierarchical data structures (inline edit) がFixされ、ツリーセルのインライン編集が可能になった。 xul:tree 要素の editable 属性を true にしてツリーセルをダブルクリックすると、テキストボックスが出現してツリーセルの文字列を編集できる。 InternetExplorer のお気に入りを「名前を変更」したときの動作に近い。
ただし現時点で最新の Minefield のナイトリービルドで試したところ、ダブルクリックしてテキストボックスが一瞬現れた後またすぐに元に戻ってしまう。本来の動作としては、テキストボックスが現れた後、その中の文字列が選択状態になるはずだが、選択状態にする処理によって編集状態が終了してしまうようだ。動作を確認するためには chrome://global/content/bindings/tree.xml を一部修正する必要があった。また、他にも編集中にツリーのカラム幅を変えてもテキストボックスの幅は変わらなかったり、いくつか問題があるようだ。

editable tree

TOP

autoCheck=”false” と autocheck=”false”

XULの button および toolbarbutton 要素に対して type=”checkbox” 属性を指定すると、オンオフ可能なチェックボックス型ボタンとなる。通常、ユーザがマウスまたはキー操作でボタンをクリックすると、自動的にチェック状態が変化してチェックマークが反転される。チェック状態の変化に伴って何か処理を行うのであればこれで問題ないが、何らかの条件付でチェック状態を変化させたいような状況もありうる。そのような場合は button および toolbarbutton 要素に対して autoCheck=”false” 属性を指定して、自動的にチェック状態変化させないようにすればよい。その代わり、スクリプトで checked プロパティを反転させ、チェック状態を変化させるのである。

<script type="application/x-javascript"><![CDATA[
function checkStateHandler(aEvent)
{
    var target = aEvent.originalTarget;
    // 条件付きで checked プロパティを反転させる
    if ( (new Date()).getSeconds() % 2 == 0 )
    {
        target.checked = !target.checked;
        alert("checked property = " + target.checked);
    }
}
]]></script>

<!--チェックボックス型ボタン-->
<button type="checkbox"
    autoCheck="false"
    label="button"
    oncommand="checkStateHandler(event);" />

<!--チェックボックス型ツールバーボタン-->
<toolbarbutton type="checkbox"
    autoCheck="false"
    label="toolbarbutton"
    oncommand="checkStateHandler(event);" />

一方、XULの menuitem 要素に対して type=”checkbox” 属性を指定すると、オンオフ可能なチェックボックス型メニューアイテムとなる。また、 type=”radio” を指定すると、兄弟関係にあるすべての menuitem からひとつだけ選択可能なラジオボタン型メニューアイテムとなる。これらについても同様に、条件付きでチェック状態を変化させたい場合はどうすればよいか。これらの要素で自動的にチェック状態を変化させるには、 autocheck=”false” 属性を指定してやればよい(先述した autoCheck と異なり、c が小文字であることに注意)。また、スクリプトから手動でチェック状態を切り替える際には、先述のように checked プロパティを反転させる代わりに、 checked 属性を反転させる。

<script type="application/x-javascript"><![CDATA[
function checkStateHandler2(aEvent)
{
    var target = aEvent.originalTarget;
    // 条件付きで checked 属性を反転させる
    if ( (new Date()).getSeconds() % 2 == 0 )
    {
        target.setAttribute("checked", !(target.getAttribute("checked") == "true"));
        alert("checked attribute = " + target.getAttribute("checked"));
    }
}
]]></script>

<toolbarbutton type="menu" label="menu">
    <menupopup>
        <!--チェックボックス型メニューアイテム-->
        <menuitem type="checkbox"
            autocheck="false"
            label="menuitem (checkbox)"
            oncommand="checkStateHandler2(event);" />
        <!--ラジオボタン型メニューアイテム-->
        <menuitem type="radio"
            autocheck="false"
            label="menuitem (radio)"
            oncommand="checkStateHandler2(event);" />
    </menupopup>
</toolbarbutton>

なお、XULの checkbox 要素および type=”checkbox” とした listitem 要素については、 autoCheck / autocheck 属性は存在しない。

リファレンス:
XUL:toolbarbutton – MDC
XUL:menuitem – MDC

TOP