Challenge Engineer Life !

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

Semantic UIのデフォルトカラーを変更する

次に同じことをやるときに手順を忘れていると思うので、自分向けのメモ。

Semantic UIのColorを変えたくて、Themingのページを読んだけど、いまいちよくわからず、手を動かしてみました。

まずはSemantic UIのソースをGitHubからクローンします。
github.com

自分の環境はWindows 10でnpmは5.6が入ってました。(古い…)ビルドするのにgulpが必要とのことで次のコマンドでインストールしました。

npm install -g gulp

以下でビルドできました。

cd Semantic-UI
npm install
gulp build

で、Colorの定義を変えるためにSemantic-UI\src\site\globalsのsite.variablesを開きます。

f:id:kikutaro777:20190228164307p:plain

中身は空なので、以下を定義。それぞれ乃木坂46、欅坂46、日向坂46のカラーコードに変更しました。

/*******************************
     User Global Variables
*******************************/
@purple         : #7e1083;
@green          : #a0d468;
@teal           : #7cc8e9;

で、再度ビルドするとdistフォルダにsemantic.min.cssなどが格納されます。

以下のような定義を試すと

f:id:kikutaro777:20190228164424p:plain

<div class="ui container">
    <h1 class="ui header">nogizaka</h1>
    <div class="ui inverted purple segment"></div>

    <h1 class="ui header">keyaki</h1>
    <div class="ui inverted green segment"></div>
        
    <h1 class="ui header">hinata</h1>
    <div class="ui inverted teal segment"></div>
</div>
<link rel="stylesheet" href="css/semantic.min.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/semantic.min.js"></script>

良い感じ。
f:id:kikutaro777:20190228215541p:plain

ちなみに変更前はこんなです。パッと見これでいいじゃんって感じかもしれないですが、ヲタ的には日向坂が許されない。
f:id:kikutaro777:20190228215717p:plain

ホントは新しい色を追加したいのだけど、うまく追加できず…とりあえず既存の色を変えました。

PrimeFacesのGrid CSSが動かなくてハマった

PrimeFacesのバージョン5.1で新しく入った「Grid CSS」では、JSFでも手軽にレスポンシブWebチックなレイアウトができる機能(コンポーネント?)です。

例えば2つのテーブルをpanelGridで横並びに置いてみると、次の表示になります。
f:id:kikutaro777:20141202220721j:plain
Faceletsは次のような定義です(管理Beanは省略)

<p:panel header="画面名">
    <h:panelGrid columns="2">
        <p:dataTable var="actless" value="#{mitsumoriConfigBean.actlessList}">
            <p:column width="30">
                <p:selectBooleanCheckbox />
            </p:column>
            <p:column headerText="女優名">
                <h:outputText value="#{actless}" />
            </p:column>
            </p:dataTable>
                <p:dataTable var="book" value="#{mitsumoriConfigBean.photoBookList}">
            <p:column headerText="写真集名">
                <h:outputText value="#{book}" />
            </p:column>
        </p:dataTable>
    </h:panelGrid>
</p:panel>

この表示でブラウザの横幅を縮めていくと
f:id:kikutaro777:20141202221058j:plain
こんな感じにテーブルの幅が小さくなって横並びのままです。

で、Grid CSSを使うと次のような初期表示から
f:id:kikutaro777:20141202221212j:plain
縮めていくと、あるタイミングで次のように1つ目のテーブルの下にまわりこみます。
f:id:kikutaro777:20141202221243j:plain
Faceletsは次のような感じで、最初のdivにある「ui-grid-responsive」がレスポンシブの指定となります。

<h:outputStylesheet name="grid/grid.css" library="primefaces" />
<p:panel header="画面名">
    <div class="ui-grid ui-grid-responsive">
        <div class="ui-grid-row">
            <div class="ui-grid-col-6">
                <p:dataTable var="actless" value="#{mitsumoriConfigBean.actlessList}">
                    <p:column width="30">
                        <p:selectBooleanCheckbox />
                    </p:column>
                    <p:column headerText="女優名">
                        <h:outputText value="#{actless}" />
                    </p:column>
                </p:dataTable>
            </div>
            <div class="ui-grid-col-6">
                <p:dataTable var="book" value="#{mitsumoriConfigBean.photoBookList}">
                    <p:column headerText="写真集名">
                        <h:outputText value="#{book}" />
                    </p:column>
                </p:dataTable>
            </div>
        </div>
    </div>
</p:panel>

ui-grid-col-6とかいうのは、横幅が12区画に分かれていて、左に6区画、右に6区画といった指定になっています。これは自由に変えられて、4区画と8区画とか、2区画を6個とか色々できます。

そのイメージでPrimeFacesのShowcaseをみるとイメージしやすいかなと。

http://www.primefaces.org/showcase/ui/panel/grid.xhtml

で、当初Showcaseのサンプルをみながら、そのまま書いてたのですが、全く動かず…。

別にエラーになるわけでもないので、全然わからなかったのですが…調べてみたら

安定のStackOverflow(^^;

ということで、上記サンプルのfacelets冒頭に入れたcssの宣言が必要でした。

<h:outputStylesheet name="grid/grid.css" library="primefaces" />

この辺はドキュメントかサンプルにも明示しておいてほしいなぁ…。

PrimeFacesでFontAwesomeを利用する

久しぶりのPrimeFacesネタ(^^;

少し前にPrimeFacesのブログで

FontAwesome with PrimeFaces

というのがありました。私はFaceBookのPrimeFaces Groupで知ったのですが。

FontAwesomeに関しては日本語でも結構記事があったので、そちらを参照下さい。
Twitter BootstrapのアイコンをWebフォントで使えるようにしたもの、というのがわかりやすそうな。

FontAwesome
http://fontawesome.io/


日本語記事

CSSなのでJSFでも普通に使うことができると思うのですが、PrimeFacesの幾つかのコンポーネントが持つ属性「icon」で指定して単純に使えるようにしたもののようです。
jarファイルを参照させて、web.xmlにちょっと設定すれば使えるとのことで試してみました。

しかしながらこれ、最初のPrimeFacesブログを読んだ方はわかると思いますが、PrimeFacesのコミュニティメンバがちょっと作ってみたレベルのものでして…jarを置いてある先がFacebookのグループ用ファイルっていう…(-_-;なぜそうした…。
※すでにFacebook Groupで「mavenに登録してよ」と要望出している人がいたので、そうなることを期待

f:id:kikutaro777:20140122232951j:plain

上記MFontAwesome.jarを落として参照させます。

f:id:kikutaro777:20140122233043j:plain

web.xmlに以下の設定が必要なようです。

<mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>otf</extension>
    <mime-type>font/opentype</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>ttf</extension>     
    <mime-type>application/x-font-ttf</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff</extension>
    <mime-type>application/x-font-woff</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>sgv</extension>
    <mime-type>image/sgv+xml</mime-type>
</mime-mapping>

xhtmlで

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
        <h:outputStylesheet library="awesome" name="css/font-awesome.css" />
    </h:head>
    <h:body>
        <h:form>
            <!-- PrimeFacesのボタン -->
            <p:commandButton value="いいね" icon="fa fa-thumbs-o-up" />
            
            <!-- PrimeFacesのmenuコンポ -->
            <p:menu>
                <p:submenu label="OS">
                    <p:menuitem icon="fa fa-windows" value="Windows"/>
                    <p:menuitem icon="fa fa-linux" value="Linux"/>
                    <p:menuitem icon="fa fa-apple" value="Apple"/>
                </p:submenu>
                <p:submenu label="SNS">
                    <p:menuitem icon="fa fa-facebook" value="Facebook"/>
                    <p:menuitem icon="fa fa-twitter" value="Twitter"/>
                    <p:menuitem icon="fa fa-twitter-square" value="Twitter"/>
                    <p:menuitem icon="fa fa-google-plus" value="Google+"/>
                    <p:menuitem icon="fa fa-google-plus-square" value="Google+"/>
                </p:submenu>
                <p:submenu label="Web Service">
                    <p:menuitem icon="fa fa-github" value="GitHub"/>
                    <p:menuitem icon="fa fa-youtube" value="Youtube"/>
                    <p:menuitem icon="fa fa-flickr" value="Flickr"/>
                </p:submenu>
            </p:menu>
        </h:form>
    </h:body>
</html>

実行すると

f:id:kikutaro777:20140122233500j:plain
わりと良い感じ(^^)簡単だし。

アイコンの種類が豊富なのとベクターなので手軽に拡大もできるのがいいですね。

ちなみにPrimeFacesではデフォルトで使えるiconとしてjQueryUIで用意されているものが使えます。
私はいつもthemerollerのサイトみて確認してしまうのですが

http://jqueryui.com/themeroller/

以下のようなアイコン
f:id:kikutaro777:20140122233606j:plain

しかしjarがFacebook上にしかない今はまだ怪しい感じですね…(^^;サイトか、GitHub/Mavenで公開されることを期待します。

Responsive design sample of JSF #PrimeFaces menu component.

Yesterday, I found this tweet.

I've never thought about collaboration of JSF and Responsive Design until reading this post. It's interesting for me.

So, I tried to make very simple one by using PrimeFaces menu component.
Here is the behavior.

I execute my sample application, firstly the menu component is shown.
f:id:kikutaro777:20131102005051j:plain

Next, I shrink the width of the browser gradually.
At some point, the menu component changes to the menubar component finally.
f:id:kikutaro777:20131102005100j:plain

This behavior is controlled by CSS media queries.
My CSS is here.

@media screen and (min-width : 700px) and (max-width : 1280px){
    .verticalmenu{
        display: none !important;
    }
}

@media screen and (max-width : 700px){
    .horizontalmenu{
        display: none !important;
    }
}

.menuFont{
    font-size: 0.8em;
}

JSF view is simple.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>CRM application sample</title>
    </h:head>
    <h:outputStylesheet library="css" name="responsiveMenu.css" />
    <h:body>
        <h:form styleClass="menuFont">
            <!-- menu component -->
            <p:menu model="#{menuBean.menuModel}" styleClass="horizontalmenu" />
            
            <!-- menubar component -->
            <p:menubar model="#{menuBean.menuModel}" styleClass="verticalmenu"/>
        </h:form>  
    </h:body>
</html>

My backing bean is following.

package jp.co.hoge.mediaqueriessample;

import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;
import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

@Named
@RequestScoped
public class MenuBean implements Serializable{

    //contents of menu
    @Getter @Setter
    private MenuModel menuModel;
    
    @PostConstruct
    public void init(){
        //creating menu
        menuModel = new DefaultMenuModel();
        
        DefaultSubMenu opp = new DefaultSubMenu("Opportunity");
        DefaultMenuItem newOpp = new DefaultMenuItem("New");
        DefaultMenuItem delOpp = new DefaultMenuItem("Delete");
        opp.addElement(newOpp);
        opp.addElement(delOpp);
        
        DefaultSubMenu quote = new DefaultSubMenu("Quote");
        DefaultMenuItem newQuote = new DefaultMenuItem("New");
        DefaultMenuItem delQuote = new DefaultMenuItem("Delete");
        quote.addElement(newQuote);
        quote.addElement(delQuote);
        
        menuModel.addElement(opp);
        menuModel.addElement(quote);
    }
}

One of good points is the menu data uses the same data between menu component and menubar component.
PrimeFaces MenuModel is common for menu type components.

So I don't need to maintain double codes in this case.

I will try more like this.

JSFでもレスポンシブWebをやってみたい!

Twitterで以下の情報が流れてました。

OracleJSFコンポーネントであるADF FacesでレスポンシブWebをやってみた話です。

レスポンシブWebは、Web系の方からすれば常識的なことかもしれないのですが、私が初めて知ったのは「HTML5とか勉強会 ビギナーズ」に参加してデモをみたときでした。
当時のエントリ↓

HTML5とか勉強会 ビギナーズ 第2回へ参加しました #html5j

このあと以下の本を買ってました(^^;けどパラパラ見ただけでした、すみません。

うわっ、すげー、と思いつつ、こういうのってHTML5使わないとダメ(=Java EE的にはEE 7でJSF2.2かぁ)、とか勝手に思ってました(^^;
でも最初のTwitterのリンク先にも書いてありますが、CSS3 Media Queriesを使える環境であればいいんですね。

そんなわけで、JSFでもそういうことやってみようと思って、とりあえず雑なサンプルですが、以下のようなものをJava EE6で作ってみました。

メニューのサンプル

メニューはADFではなく、PrimeFacesのコンポーネントを使ってます。
(こういう例でサードパーティー使うのもあれなんですが、このメニューの例だと後述するメリットがあるので使いました)

実行して表示されると単純にメニューがあるだけなんですが
f:id:kikutaro777:20131101231822j:plain

画面を小さくして(タブレットサイズくらい)するとメニューの表示形式が変わります。
f:id:kikutaro777:20131101231848j:plain

JSFの中身

レスポンシブWebについてはまだ全然勉強していないため、ネットでいくつか見たサンプルを参考に作ってみたレベルです(^^;

CSSで以下を定義しました。

@media screen and (min-width : 700px) and (max-width : 1280px){
    .verticalmenu{
        display: none !important;
    }
}

@media screen and (max-width : 700px){
    .horizontalmenu{
        display: none !important;
    }
}

.menuFont{
    font-size: 0.8em;
}

mediaを2つ定義して、横幅が700pxから1280pxだったら、横のメニューを非表示に、横幅が700px以下だったら縦のメニューを非表示にする感じです。

JSFxhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:outputStylesheet library="css" name="responsiveMenu.css" />
    <h:body>
        <h:form styleClass="menuFont">
            <!-- 縦のメニュー -->
            <p:menu model="#{menuBean.menuModel}" styleClass="horizontalmenu" />
            
            <!-- 横のメニュー -->
            <p:menubar model="#{menuBean.menuModel}" styleClass="verticalmenu"/>
        </h:form>  
    </h:body>
</html>

管理Beanは

package jp.co.hoge.mediaqueriessample;

import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;
import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

@Named
@RequestScoped
public class MenuBean implements Serializable{

    //メニューの中身
    @Getter @Setter
    private MenuModel menuModel;
    
    @PostConstruct
    public void init(){
        //以下、メニューの動的生成
        menuModel = new DefaultMenuModel();
        
        DefaultSubMenu opp = new DefaultSubMenu("商談");
        DefaultMenuItem newOpp = new DefaultMenuItem("新規作成");
        DefaultMenuItem delOpp = new DefaultMenuItem("削除");
        opp.addElement(newOpp);
        opp.addElement(delOpp);
        
        DefaultSubMenu quote = new DefaultSubMenu("見積");
        DefaultMenuItem newQuote = new DefaultMenuItem("新規作成");
        DefaultMenuItem delQuote = new DefaultMenuItem("削除");
        quote.addElement(newQuote);
        quote.addElement(delQuote);
        
        menuModel.addElement(opp);
        menuModel.addElement(quote);
    }
}

メニューの中身はプログラムで生成しているのですが、PrimeFacesのメニュー系コンポーネントでは、どれも同じデータモデル(DefaultMenuModel)を利用します。

なので、メニュー系の中でコンポーネントが変わっても、valueバインディングする値(ここではmenuModel変数)は一緒に使えるメリットがあります(^^)

個人的には、こういうのもっと勉強して、積極的に取り入れていきたい…ですが、こんな素晴らしいCSS Media QueryもIEのバージョンによっては動かない、みたいな情報をちらほらみたので、自分のような業務系エンジニアにとっては辛いところかなぁと…。

未だに「IEは6、最低でも7は保証してください」なんて依頼を聞いたりもするので、なかなか時代の流行についていけない環境だったり…。

まあ、勉強して損はないし、趣味の範囲でもう少し色々やってみよう!

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