Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

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

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

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

www.butterfaces.org

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

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

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

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

f:id:kikutaro777:20150603220244g:plain

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

<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」とあります。

f:id:kikutaro777:20150603214759j:plain

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

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

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

f:id:kikutaro777:20150603221616g:plain

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

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村