Bu sayfada Adminfaces (
github.com/adminfaces/admin-template) ile Tomcat 9 üzerinde çalışacak bir web yönetim ekranı yaratılmaktadır.
Öncelikle bir web projesi yaratılmalı. Tomcat 9 üzerinde JSF 2.3 projesi yapıp çalıştırmak için şu sayfadan yararlanabilirsiniz :
www.fibiler.com/JSF-2.3-ve-Tomcat-9-ile-Web-Projesi-Yaratmak_Ipucu_147338 Bu sayfadaki işlemleri yaptıktan sonra tekrar buradan devam etmelisiniz.
Bu sayfadaki gibi projeniniz çalıştığından emin olduktan sonra Adminfaces ile web projesi yapabiliriz. Adminfaces Primefaces ve Omnifaces'e bağımlılığı bulunmaktadır. Maven'de dependency'leri eklediğinizde bunlar da eklenecektir. Ancak biz Omnifaces'in son versiyonunu kullanıyoruz. Bağımlılıklar aşağıdaki gibi olmalı :
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.0</version>
</dependency>
<dependency>
<groupId>javax.faces</groupId>
<artifactId>javax.faces-api</artifactId>
<version>2.3</version>
</dependency>
<dependency>
<groupId>org.glassfish</groupId>
<artifactId>javax.faces</artifactId>
<version>2.3.9</version>
</dependency>
<dependency>
<groupId>javax.enterprise</groupId>
<artifactId>cdi-api</artifactId>
<version>2.0</version>
</dependency>
<dependency>
<groupId>org.jboss.weld.servlet</groupId>
<artifactId>weld-servlet</artifactId>
<version>2.4.8.Final</version>
</dependency>
<dependency>
<groupId>com.github.adminfaces</groupId>
<artifactId>admin-template</artifactId>
<version>1.0.2</version>
</dependency>
<dependency>
<groupId>org.omnifaces</groupId>
<artifactId>omnifaces</artifactId>
<version>3.6.1</version>
</dependency>
<dependency>
<groupId>javax.ejb</groupId>
<artifactId>javax.ejb-api</artifactId>
<version>3.2.2</version>
</dependency>
<!-- API do JPA e EJB para o Admin Template (View de OptimisticLockException)
TODO: Fork para depender apenas de Servlet/JSF -->
<dependency>
<groupId>org.hibernate.javax.persistence</groupId>
<artifactId>hibernate-jpa-2.0-api</artifactId>
<version>1.0.1.Final</version>
</dependency>
JSF 2.3 artık CDI ile çalışmasından dolayı cdi-api ve weld-servlet de eklenmelidir.
javax.ejb-api nin eklenmesinin sebebi aşağıdaki hata alınması :
Caused by: java.lang.NoClassDefFoundError: javax/ejb/EJBException
Benzer şekilde hibernate-jpa-2.0-api nin eklenmesinin sebebi de :
java.lang.ClassNotFoundException: javax.persistence.OptimisticLockException
hatanın alınması. Bu nedenle bu iki api eklenmiştir.
Bağımlıkları ekledikten sonra resources klasörüne admin-config.properties dosyası eklenir :
admin.indexPage=index.xhtml
admin.renderControlSidebar=true
admin.controlSidebar.showOnMobile=true
admin.dateFormat=dd.MM.yyyy HH:mm
WebContent içine resources klasörü altına da css klasörü açıp starter.css ekleyelim. Bu stil sayfaların biçimli gözükmesi için gerekli :
.sidebar-form {
border-radius: 3px;
border: 1px solid #374850;
margin: 10px 10px;
}
.sidebar-form, .sidebar-menu>li.header {
overflow: hidden;
text-overflow: clip;
}
#userImage {
float: left;
width: 25px;
height: 25px;
border-radius: 50%;
margin-right: 10px;
margin-top: -2px;
}
ul.dropdown-menu > li.user-header {
height: auto!important;
}
a.dropdown-toggle {
background-color: #3c8dbc!important;
}
a#logout {
color: #3c8dbc!important;
background: transparent;
}
@media (max-width: 768px) {
body .control-sidebar {
padding-top:100px;
}
}
WebContent içine includes klasörü açalım ve içine top-bar.xhtml dosyası yaratalım. Bu sayfaların üstünde devamlı kalacak olan bar sayfasıdır. Daha sonra özelleştirebilirsiniz :
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<style type="text/css">
#layout-menu_menu {
z-index: 9997!important;
}
#layout-menu_menu span.ui-menuitem-text {
margin-left: 2px;
}
</style>
<ul class="nav navbar-nav">
<li class="hidden-xs">
<h:form prependId="false">
<p:menuButton value="Layout" style="margin:10px 10px 0 0 " id="layout-menu">
<p:menuitem value="Left menu (default)" disabled="#{layoutMB.leftMenuTemplate}" onclick="toggleTemplate();return false" ajax="false" icon="fa fa-list-ul"/>
<p:menuitem value="Top menu" disabled="#{not layoutMB.leftMenuTemplate}" onclick="toggleTemplate();return false" ajax="false" icon="fa fa-credit-card"/>
</p:menuButton>
</h:form>
</li>
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<pe:gravatar id="userImage"
value="nonexisting"/>
<span class="hidden-xs">#{logonMB.currentUser}</span>
</a>
<ul class="dropdown-menu">
<li class="user-header">
<div class="hidden-xs">
<pe:gravatar style="border-radius: 50%"
value="rmpestano@gmail.com"/>
</div>
<p>
#{logonMB.currentUser}
<small>Subtitle</small>
</p>
</li>
<li class="user-footer">
<h:form prependId="false">
<div class="pull-left">
<p:commandLink styleClass="btn btn-danger" value="Change password"/>
</div>
<div class="pull-right">
<p:commandLink id="logout" action="#{logoutMB.doLogout}" title="Logoff">
<i class="fa fa-sign-out fa-2x"></i>
</p:commandLink>
</div>
</h:form>
</li>
</ul>
</li>
<li>
<a id="layout-setup" href="#" class="#{adminConfig.controlSidebar.showOnMobile ? '':'hidden-sm hidden-xs'}" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>
</ul>
</ui:composition>
Artık tüm sayfalar için gerekli olan template sayfasını oluşturabiliriz. Bunun için WEB-INF içine templates dizini açıp içine template.xhtml i ekleyelim :
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
template="/admin.xhtml">
<ui:define name="head">
<title>Admin Starter</title>
<h:outputStylesheet library="css" name="starter.css"/>
</ui:define>
<ui:define name="logo-lg">
Fibiler Test
</ui:define>
<ui:define name="logo-mini">
Admin
</ui:define>
<ui:define name="menu">
<ul class="sidebar-menu">
<li>
<p:link href="/index.xhtml" onclick="clearBreadCrumbs()">
<i class="fa fa-home"></i>
<span>Ana Sayfa</span>
</p:link>
</li>
<li class="header">
Genel
</li>
<li>
<p:link href="/car-list.xhtml">
<i class="fa fa-car"></i>
<span>Üyeler</span>
</p:link>
</li>
</ul>
</ui:define>
<ui:define name="top-menu">
<ui:include src="/includes/top-bar.xhtml"/>
</ui:define>
<ui:define name="footer">
<a target="_blank"
href="https://github.com/adminfaces/">
Copyright (C) 2017 - AdminFaces
</a>
<div class="pull-right hidden-xs" style="color: gray">
<i>1.0.0</i>
</div>
</ui:define>
</ui:composition>
Artık tüm sayfalarda ortak olacak yapı belirlenmiş olur. Test sayfası ekleyelim ve adını index.xhtml verelim :
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
template="/WEB-INF/templates/template.xhtml">
<ui:define name="title">
<h:outputText value="#{helloBean.messageTitle}"></h:outputText>
</ui:define>
<ui:define name="description">
Yönetim Ekranı
</ui:define>
<ui:define name="body">
<h:outputText value="#{helloBean.messageBody}"></h:outputText>
</ui:define>
</ui:composition>
Test sayfasında aşağıdaki bean kullanılacak :
import javax.inject.Named;
@Named
public class HelloBean {
private String messageTitle="Merhaba Adminfaces + JSF 2.3";
private String messageBody="Bu sayfa Adminfaces + JSF 2.3 "
+ "+ CDI 1.2 + Primafaces 7.0 + weld-servlet 2.4.8 ile yapilmistir";
public String getMessageTitle() {
return messageTitle;
}
public void setMessageTitle(String messageTitle) {
this.messageTitle = messageTitle;
}
public String getMessageBody() {
return messageBody;
}
public void setMessageBody(String messageBody) {
this.messageBody = messageBody;
}
}
Artık proje hazırdır. Tomcat 9 üzerinde çalıştırdığımızda aşağıdaki gibi görülecektir :
.
