XULの画面にFlowLayoutPanelを表示する

はじめに

Mozilla Thunderbird（サンダーバード） のアドオン画面は Version 68 現在も XUL で記載しますが、.NET Framework でいう FlowLayoutPanel（-- dobon.net さんのページ）のような、子要素を折り返し表示可能に並べるコンテナを表示するコードを共有します。子要素には、ラベル (label) のほか画像 (image) なども、さらに複数種類の要素を混在させても使用できます。

コード

その1 : box style="display:block;"

Box要素は、子要素を縦（垂直）または横（水平）方向に並べて、必要に応じて折り返して表示可能です。

sample.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

<dialog id="sample"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="サンプル"
>

<box style="display:block;">
    <label value="とんかつソース" />
    <label value="サラミ" />
    <label value="チーズ" />
    <label value="とんかつソース" />
    <label value="やさいサラダ" />
    <label value="テリヤキバーガー" />
    <label value="めんたい" />
    <label value="たこ焼" />
    <label value="コーンポタージュ" />
    <label value="なっとう" />
    <label value="チョコレート" />
</box>

</dialog>

その2 : description

Description要素も、子要素を横（水平）方向に並べて、必要に応じて折り返して表示可能です。

sample.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

<dialog id="sample"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="サンプル"
>

<description>
    <label value="とんかつソース" />
    <label value="サラミ" />
    <label value="チーズ" />
    <label value="とんかつソース" />
    <label value="やさいサラダ" />
    <label value="テリヤキバーガー" />
    <label value="めんたい" />
    <label value="たこ焼" />
    <label value="コーンポタージュ" />
    <label value="なっとう" />
    <label value="チョコレート" />
</description>

</dialog>

ご参考

• How to achieve flow layout in XUL? - Stack Over Flow 本稿は殆どこちらの日本語版紹介記事みたいなものです