JSF подключение css и font-awesome

210

31 мая 2018, 04:00

Всем добрый день. Изучаю JSF, и в ходе построения страницы возникли несколько вопросов,на которые найти какой то правильный ответ не смог.

1) Если в HTML существуют теги header/footer, то в jsf из-за отсутствия тегов header/footer приходится инклудить уже созданные jsf страницы. Каким образом я могу применить стиль из css файла к этой jsf странице, если при работе с HTML я в css файле просто указываю header{...} для тега header? При этом стили из css файла работают для тегов h:panelGroup в этих jsf страницах.

2)Как мне задействовать стили для элементов в блоках h:panelGroup(li,ui и др), потому что стили из css работают только для элементов с styleClass ?

3)Как подключить к jsf странице шрифты font-awesome ? При подключении этих шрифтов на месте иконок пустые квадраты, использую бесплатные иконки.

4)Можно ли создать более менее красивый блок ссылок с помощью nav в jsf или нужно использовать какой то отдельный тег ?

Надеюсь все вопросы понятно изъяснил, всем заранее спасибо.

main.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:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
    <title>Магазин</title>
    <h:outputStylesheet library = "css" name = "normalize.css" />
    <h:outputStylesheet library = "css" name = "960.css" />
    <h:outputStylesheet library = "font-awesome" name="css/fontawesome-all.min.css" />
    <h:outputStylesheet library = "css" name = "style1.css" />
</h:head>
<ui:include src="header.xhtml"/>
<h:body>
    <ui:include src="content.xhtml"/>
</h:body>
<ui:include src="footer.xhtml"/>
</html>

header.xhtml

<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:panelGroup layout="block" id="header" styleClass="header">
    <h:panelGroup layout="block" styleClass = "wrapperHeader">
    <h:panelGroup layout="block" styleClass="logo">
        <img src="image/icon.jpg"/>
    </h:panelGroup>
    <h:panelGroup layout="block" styleClass="phone">
        <p>Интернет магазин</p>
        <p>Телефон:121515132</p>
        <h:panelGroup rendered="#{authBean.loggedIn()}">
            <p>Авторизирован</p>
        </h:panelGroup>
    </h:panelGroup>
    </h:panelGroup>
        <nav id="menu">
        <ul>
            <li><a href="main.xhtml">Главная</a></li>
            <li><a href="main.xhtml">Еще одна ссылка</a>
                <ul class="submenu">
                    <li>
                        <h:link value="link1" outcome="main"/>
                        <h:link value="link2" outcome="main"/>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    </h:panelGroup>
</ui:composition>

footer.xhtml

<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:panelGroup layout="block" id="footer" styleClass="footer">
        <h:panelGroup layout="block" styleClass="container_12">
            <h:panelGroup layout="block" styleClass="grid_12">
                    <ul class="icons">
                        <li><a href="#"><i class="fab fa-vk fa-3x"></i></a></li>
                        <li><a href="#"><i class="fab fa-facebook fa-3x"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter fa-3x"></i></a></li>
                        <li><a href="#"><i class="fab fa-google-plus fa-3x"></i></a></li>
                    </ul>
            </h:panelGroup>
        </h:panelGroup>
            </h:panelGroup>
</ui:composition>

style1.css

.logo, .phone {
float:left;
width: 33%;
}
.wrapperHeader {
background-color: #7c4dff;
overflow: hidden;
}
header{
    box-shadow: 0px 0px 15px 2px #202020;
}
.content{
    min-height: 100%;
}
.phone p{
    color: #fff;
    font-size: 25px;
    margin-top: 20px;
}
nav{
    width:100%;
}
#menu ul{
    padding-top: 0;
    margin:0;
}
#menu ul li{
    list-style: none;
    display: inline-block;
    position: relative;
}
#menu ul li a{
    color: inherit;
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 0 10px;
    line-height: 40px;
}
#menu ul li:hover .submenu {
    display: block;
}

.submenu li:hover {
    background-color: #7c4dff;
    color: #fff;
}

.submenu {
    position: absolute;
    display: none;
    background-color: #fff;
    padding: 0;
    border: 1px solid #e1e1e1;
}
.submenu li{
    min-width: 170px;
}
.text-center{
    text-align: center;
}
.footer{
    background-color: #232323;
    height: 200px;
}
.icons{
    text-align: center;
}
.icons li{
    display: inline-block;
    list-style: none;
    margin: 0 10px;
}
.icons li a{
    color: #fff;
    font-size: 20px;
}
.fa-vk:hover{
    color: #4e729a;
}
.fa-facebook:hover{
    color: #3a5795;
}
.fa-twitter:hover{
    color: #55acee;
}
.fa-google-plus:hover{
    color: #dd4b39;
}

Answer 1

3) В h:outputStylesheet library задумано немного для другого.
Рекомендуется применять так
<h:outputStylesheet name = "css/normalize.css"/>

<h:outputStylesheet name = "font-awesome/css/fontawesome-all.min.css"/>

fontawesome-all.min.css должен быть переделан как-то так

/*!
 *  Font Awesome 4.6.2 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
@font-face {
    font-family: 'FontAwesome';
    src: url("#{resource['font-awesome/webfonts/fontawesome-webfont.eot']}?v=4.6.2");
    src: url("#{resource['font-awesome/webfonts/fontawesome-webfont.eot']}?#iefix&v=4.6.2") format('embedded-opentype'), 
         url("#{resource['font-awesome/webfonts/fontawesome-webfont.woff2']}?v=4.6.2") format('woff2'),
         url("#{resource['font-awesome/webfonts/fontawesome-webfont.woff']}?v=4.6.2") format('woff'),
         url("#{resource['font-awesome/webfonts/fontawesome-webfont.ttf']}?v=4.6.2") format('truetype'),
         url("#{resource['font-awesome/webfonts/fontawesome-webfont.svg']}?v=4.6.2#fontawesomeregular") format('svg');
    font-weight: normal;font-style:normal
}
...

Т.е. сделать так, чтобы JSF мог подставить в fontawesome-all.min.css реальные url-ы шрифтов.
JSF выполняет обработку css, вычисляет EL выражения и подставляет вычесленное значение. Прямо как в xhtml.
Таким не хитрым образом получаются правильные абсолютные url-ы шрифтов.

Ещё желательно как-то прикрутить mime-типы шрифтов. Иначе сервер будет ругаться в лог. Впрочем вред от того, что нет типов для шрифтов, на этом и заканчивается.

1) Про header и footer сам не знаю ничего. Зачем что-то там инклудить не понятно. Но если есть css для hrader и есть header, то сss применяется.

2) Стили вроде применяются везде и всегда.

4) Можно использовать пожалуй все теги. Как используете ul и li. Можно попытаться разработать свои компоненты, которые будут выводить вообще всё, что угодно. Но это трудно.

В общем не понятно чего Вы хотите по пп 1,2 и 4