読者です 読者をやめる 読者になる 読者になる

Challenge Java EE !

Java EEを中心に趣味や仕事における開発メモを書いています。

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

ButterFaces JSF

少し前に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へ
にほんブログ村