Javaで軽快に使える「軽量フレームワーク」特集
～アプレットベースのRIAフレームワーク「Apache Pivot」（3）

第15回

ロールアップ

　階層的にコンテンツを表示する場合、内容を折りたたんでおく「Rollup」が便利です。これは「heading」と「content」プロパティを持っており、headingに用意したコンポーネントをクリックすると、content内のコンポーネントが表示・非表示されます。以下に利用例を挙げます。

<BoxPane orientation="vertical" styles="{fill:true}">
    <Rollup>
        <heading>
            <Label styles="{font:'serif bold 14'}" text="First"/>
        </heading>
        <content>
            <Label styles="{font:'serif bold 18', color:'#0000FF'}"
                text="最初の表示"/>
        </content>
    </Rollup>
    <Rollup>
        <heading>
            <Label styles="{font:'serif bold 14'}" text="Second"/>
        </heading>
        <content>
            <Label styles="{font:'serif bold 18', color:'#FF0000'}"
                text="次の表示"/>
        </content>
    </Rollup>
</BoxPane>

図11　ロールアップ。headingのテキストをクリックすると内容がON/OFFされる。

イメージの表示

　用意したイメージを表示するためのコンポーネントも用意されています。これは「ImageView」というものです。「image」プロパティが用意されており、ここにイメージのパスを指定します。例えば、クラスと同じ場所（jp.tuyano.pivot内）に「image1.jpg」というファイルを用意し、これを表示するならば、次のようにimageを指定します。

<ImageView image="jp/tuyano/pivot/image1.jpg" />

図12　ImageViewでは、imageで指定したイメージファイルを読み込み表示する。

イメージにエフェクトをかける

　ImageViewでは、表示するイメージに簡単にエフェクトをかけることができます。「decorators」というプロパティがあり、これにオブジェクトを追加することでエフェクトがかけられるのです。実際に、簡単なサンプルを挙げておきましょう。以下は、wtkx:id="image1"として用意したImageViewのイメージにブロワー・エフェクトをかけるサンプルです。

ImageView image1 = (ImageView)serializer.get("image1");
image1.getDecorators().add(new BlurDecorator(10));

図13　イメージにブロワーのエフェクトをかけて表示する。

　getDecoratorsでは、「DecoratorSequence」というオブジェクトが設定されています。これはエフェクトであるDecoratorオブジェクトを管理するコレクションです。これに、addメソッドを使ってDecoratorを追加していきます。

　ここでは「BlurDecorator」クラスのインスタンスを追加していますが、これがブロワーのエフェクトをかけるためのクラスです。これは引数に、ブロワーのサイズとなるint値を指定してnewします。このBlurDecoratorのようなエフェクト用クラスは、この他にもいろいろと用意されています。主なものを以下にまとめておきましょう。

エフェクト用クラス

クラス	説明
FadeDecorator	透過度を設定するものです。0～1のfloat値を引数に指定します。
GrayscaleDecorator	グレースケールにするものです。引数は不要です。
ReflectionDecorator	イメージの下に反射したように鏡像を表示します（引数なし）。
SaturationDecorator	彩度を調整するものです。引数にfloat値を指定します。
ShadeDecorator	指定した色をシェードするものです。引数に輝度を示すfloat値とColorを指定します。
WatermarkDecorator	テキストやイメージを半透明で背景に合成し敷き詰めるものです。引数に、StringまたはImageを指定します。

　これらのエフェクトは、1つだけでなく同時に複数掛けることも可能です。それぞれ、インスタンスを作成するだけで利用できるものですので、実際にどのような表示になるか試してみると面白いでしょう。