軽量でモダンなコンポーネントライブラリ ButterFaces

少し前にJSFのSpec LeadでもあるEd Burnsさんが以下つぶやいていました。

Check out ButterFaces, a new framework built on top of @jsf_spec: < http://t.co/tqm4NueGVf >.

— edburns (@edburns) 2015, 5月 26

JSFって下火な面もあって(盛り上がったことないだろ、というツッコミは置いておいて…)、さらにリッチコンポーネントライブラリに関しては、PrimeFacesが一人勝ちという状態なので、新しいコンポーネントライブラリが出てたことにびっくりしました。

www.butterfaces.org

2014年くらいからあるっぽいです。

デザイン的にはTwitter Bootstrapをベースとして、jQueryやHTML5の利点を取り入れたライブラリのようです。

ということで、少し触ってみました。

PrimeFacesになさそうなコンポをいくつか使ってみました。

ビューは次のような定義です。

<h:form>
    <b:text label="ラベルー" value="#{butterFacesBean.value}" placeholder="hoge" />
    <b:commandLink value="送信" styleClass="btn btn-primary" action="#{butterFacesBean.commandLinkBtnAction()}"/>
    <b:tags value="#{butterFacesBean.tagsValue}" />

    <b:modalPanel id="mdl" cancelButtonText="cancel">
        <b:text value="hoge" />
    </b:modalPanel>

    <span onclick="butter.modal.open('mdl')">dialog</span>

    <b:textArea value="#{butterFacesBean.textArea}" expandable="true" />
</h:form>

前々からPinterestの検索テキストみたいなの欲しかったんで、tagsコンポはいいなーと。
textAreaもexpandableみたいな属性があって面白いです。

依存性は1つでmavenのpom.xmlでは次の定義をするだけです。

<dependency>
    <groupId>de.larmic.butterfaces</groupId>
    <artifactId>components-mojarra</artifactId>
    <version>1.8.1</version>
</dependency>

サイトのほうみるとcomponentsというartifactId(下の定義)が先に紹介されてますが、これだけだとテキストやボタンといった基本コンポーネントが使えませんでした。

<dependency>
    <groupId>de.larmic.butterfaces</groupId>
    <artifactId>components</artifactId>
    <version>1.8.1</version>
</dependency>

よくみるとコンポーネント紹介のところに「only mojarra version」とあります。

基本コンポが使えないので、components-mojarraバージョンを使うのが普通じゃないのかな…と。

あと、HTML5はパススルーじゃなくて、普通に属性として定義されていました。

Showcaseでは属性を変えて色々試せるので、何ができるか、PrimeFacesのShowcaseよりちょっと良いかも。

あ、ちなみにタイトルはサイトの英語から持ってきていますので、軽量でモダンかどうかは実際もっと使ってみないとホントかわからんです。