71

Click here to load reader

Prime Faces 3655

Embed Size (px)

Citation preview

Page 2: Prime Faces 3655

Çağatay ÇiviciApache MyFaces PMC“The Definitive Guide to Apache MyFaces and Facelets” Co-AuthorReference in “Core JSF 2nd Edition” (Sun Core Series)Technical reviewer of “JBoss Seam and Trinidad” and “Apache MyFaces” booksSpeaker in JSFOne, JSFDays, universities and local Java Groups.PrimeFaces founder and project leadKrank CRUD framework team memberTrainer, Consultant, MentorFC Barcelona fanPrime Teknoloji (UK-TURKEY)

Page 3: Prime Faces 3655

Prime TeknolojiConsulting, Training, Software Development

Agile Agile Agile, TDD, Patterns

Java EE, JSF, Spring, Seam, JPA

www.emlakharitam.com

PrimeFaces

www.prime.com.tr

Page 4: Prime Faces 3655

JSFJoint Strike Fighter

Crew: 1

Page 5: Prime Faces 3655

Java Server FacesStandard WEB Framework of JAVA EE

Component Oriented

Event driven

Swing and WEB

Apache MyFaces and Sun Mojarra (RI)

Vendor support (Sun, IBM, Oracle, JBoss, Apache etc)

Page 6: Prime Faces 3655

Apache MyFacesJSF 1.1 ve 1.2 implementationTomahawk

TrinidadTobago

Portlet Bridge RIOrchestraExtVAL

Page 7: Prime Faces 3655

JSF ToolsNetbeansJBoss ToolsMyEclipseEclipse WTPJDeveloperIBM RADIDEAMacromedia Dreamweaver

Page 8: Prime Faces 3655

Component LibrariesMyFaces TomahawkMyFaces TrinidadMyFaces TobagoJBoss RichFacesIceFacesQuipukitNetAdvantageWebGalileo

Page 9: Prime Faces 3655

PrimeFacesOpen Source

Rich Components

Easy AJAX

XML Free JSF

Detailed Documentation

Not a framework

Page 10: Prime Faces 3655

Open Source ModelMay the source be with you

Free :)

Apache Software Foundation Experience

http://code.google.com/p/primefaces/

Turkey and Open Source

Page 11: Prime Faces 3655

Turkish SupportTurkish Docs (160 + sayfa)

Turkish enabled components

Turkish support forum

Page 12: Prime Faces 3655

PrimeFaces ModulesUI Components

Optimus

FacesTrace

Mutually Exclusive modules

Page 13: Prime Faces 3655

Installation1) Download

2) Logging ve SLF4J

3) Resource Servlet

4) JSP or Facelets Taglib

5) p:resources

Let’s ROCK!

Page 14: Prime Faces 3655

Manuel DownloadGoogle code page:

http://code.google.com/p/primefaces/issues/list

Page 15: Prime Faces 3655

Maven Download<repository> <id>prime-repo</id> <name>Prime Technology Maven Repository</name> <url>http://repository.prime.com.tr/</url> <layout>default</layout></repository>

<dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces-ui</artifactId> <version>0.8.1</version></dependency>

Page 16: Prime Faces 3655

Resource ServletServing packed resources (js, css, ...)

<servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class> org.primefaces.ui.resource.ResourceServlet </servlet-class> <load-on-startup>1</load-on-startup></servlet>

<servlet-mapping> <servlet-name>Resource Servlet</servlet-name> <url-pattern>/primefaces_resources/*</url-pattern></servlet-mapping>

Page 17: Prime Faces 3655

TaglibJSP Taglib

Facelets Namespace

<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>

xmlns:p="http://primefaces.prime.com.tr/ui"

Page 18: Prime Faces 3655

JSF Page<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:p="http://primefaces.prime.com.tr/ui">

<head> <p:resources /> </head>

<body> <p:editor /> </body>

</html>

Page 19: Prime Faces 3655

UI ComponentsRich components

Easy AJAX

Flash chart components

Unobstrusive Javascript

Yahoo UI, Prototype, Scriptaculous

Page 20: Prime Faces 3655

Rich ComponentsUIAjax DataTable

AccordionPanel DialogAutoComplete Editor

Button ImageCropperCalendar MenuCaptcha PanelCarousel PollCharts Resizable

ColorPicker SliderConfirmDialog Tabview

Tooltip Tree

Page 21: Prime Faces 3655

Easy AJAXPartial Page Rendering - PPR

Declarative AJAX

Page 22: Prime Faces 3655

Ajax Update<h:form prependId=”false”>

<h:inputText value="#{createUser.name}" /> <p:button value="Save" update="name" async="true"/> <h:outputText id=”name” value="#{createUser.name}" />

</h:form>

Page 23: Prime Faces 3655

Ajax StatusDisplaying Ajax request status

Global Ajax Request indicator

<p:ajaxStatus> <f:facet name="start"> <h:graphicImage value="ajaxloadingbar.gif" /> </f:facet> <f:facet name="complete"> <h:outputText value="User Saved" /> </f:facet></p:ajaxStatus>

Page 24: Prime Faces 3655

AjaxifyEnables ajax on standard JSF components

Trigger on any DOM event

blur, keyup, click, change

<h:inputText value="#{createUser.name}"> <p:ajax event="keyup" update="name" /> </h:inputText> <h:outputText id="name" value="# {createUser.name}" />

Page 25: Prime Faces 3655

Ajaxify RemotingInvoking Java methods with JavaScript

<h:inputText value="#{createUser.name}"> <p:ajax event="blur" update="name"

actionListener="# {createUser.checkUser}"/></h:inputText> <h:outputText id="name" value="# {createUser.name}" />

public void checkUser(ActionEvent actionEvent) { //Check}

Page 26: Prime Faces 3655

Ajax PollingPeriodical Ajax Requests<h:form prependId="false">

<h:outputText id="number" value="# {counter.number}" /> <p:poll frequency="3" actionListener="# {counter.increment}" update="number" /></h:form>

private int number;

public void increment(ActionEvent actionEvent) { number++;}

Page 27: Prime Faces 3655

GraphsChart components (Pie, Line, Column and more)

Interactive

Live data display

Page 28: Prime Faces 3655

Pie Chart Example private List<Sale> sales;

public SaleReport() { sales = new ArrayList<Sale>(); sales.add(new Sale("Brand 1", 540)); sales.add(new Sale("Brand 2", 325)); sales.add(new Sale("Brand 3", 702)); sales.add(new Sale("Brand 4", 421)); }

<p:pieChart value="#{saleReport.sales}" var="sale" categoryField="#{sale.brand}" dataField="#{sale.amount}" />

Page 29: Prime Faces 3655

Interactive ChartsItemSelectEvent

<p:pieChart value="#{salesReport.sales}" var="sale" categoryField="#{sale.brand}" dataField="#{sale.amount}"

itemSelectListener="#{salesReport.selectSeries}" update="info" />

<h:outputText id="info" value="#{salesReport.message}" />

private String message;

public void selectSeries(ItemSelectEvent event) { mesaj = "Item Index: " + event.getItemIndex() + ", Series Index:" + event.getSeriesIndex();}

Page 30: Prime Faces 3655

Live Data

<p:pieChart value="#{votesReport.votes}" var="vote" live="true" refreshInterval="5000"

categoryField="#{vote.candidate}" dataField="#{vote.amount}" />

Page 31: Prime Faces 3655

Skinning

Before After

Page 32: Prime Faces 3655

UI Components DEMO

Page 33: Prime Faces 3655

Javascript and PrimeFacesYUI, Prototype, Scriptaculous

PrimeFaces Namespace and Javascript API

PrimeFaces.widget.*

PrimeFaces.ajax.*

Unobstrusive Javascript

Page 34: Prime Faces 3655

PrimeFaces.widget.*PrimeFaces widgets

Example: PrimeFaces.widget.Editor

<script type=”text/javascript”>var editor = new PrimeFaces.widget.Editor(...);

</script>

Page 35: Prime Faces 3655

PrimeFaces.ajax.*Ajax API

PrimeFaces.ajax.AjaxUtils

PrimeFaces.ajax.AjaxRequest

PrimeFaces.ajax.AjaxResponse

<script type=”text/javascript”>

PrimeFaces.ajax.AjaxRequest(url, config, params);

</script>

Page 36: Prime Faces 3655

Unobstrusive JavascriptVanilla JSF

PrimeFaces

<h:commandbutton value=”Submit” onclick=”alert(‘Barca’)” />

<input type=”submit” name=”_id1” value=”Submit” onclick=”alert(‘Barca’)” />

<p:button value=”Submit” onclick=”alert(‘Barca’)” />

<button type=”submit” name=”_id1” value=”Submit”/>

YAHOO.util.Event.addListener(“_id1”,”click”, function(e) { alert(‘Barca’);}

Page 37: Prime Faces 3655

OptimusNon rendering goodies

Guice integration

Validators

XML-free JSF

PDF and Excel export

Security Extensions and AOP

Page 38: Prime Faces 3655

Google Guice IntegrationGuice based JSF beans

@Controller for <managed-bean />

Dependency Injection

Aspect Oriented Programming

Page 39: Prime Faces 3655

Vanilla JSF 1.x Managed-Beanpackage fc.barcelona;

public class CreateUser {...}

<managed-bean> <managed-bean-name>createUser</managed-bean-name> <managed-bean-class>fc.barcelona.CreateUser</managed-bean-class> <managed-bean-scope>request</managed-bean-scope></managed-bean>

<h:inputText value=”#{createUser.user.name}” />

CreateUser.java

faces-config.xml

createUser.xhtml

Page 40: Prime Faces 3655

Optimus IOCpackage fc.barcelona;

@Controller(name=”createUser”, scope=Scope.REQUEST)public class CreateUser {...}

CreateUser.java

<h:inputText value=”#{createUser.user.name}” />

faces-config.xml

createUser.xhtml

Page 41: Prime Faces 3655

Controllernamescope

RequestSessionApplicationView

startup: Initiate on application startup

Page 42: Prime Faces 3655

Classpath scanningScan specific packages

<context-param> <param-name>optimus.SCAN_PATH</param-name> <param-value>org.sopranos.project.ui</param-value></context-param>

package org.sopranos.project.ui;

@Controller(name=”createUser”, scope=Scope.REQUEST)public class CreateUser {...}

Page 43: Prime Faces 3655

Dependency Injection

CreateUseruserDAO

UserDAO

UserDAOJPA

implements

Page 44: Prime Faces 3655

Dependency Injectionpublic interface UserDAO {

public void save(User user);}

public interface UserDAOJPA implements UserDAO { public void save(User user) { //Persist with JPA, EntityManager.persist(user) }}

public class MainAppModule implements Module{ public void configure(Binder binder) { binder.bind(userDAO.class).to(UserDAOJPA.class).in(Scopes.SINGLETON); }}

<context-param> <param-name>optimus.CONFIG_MODULES</param-name> <param-value>org.sopranos.moviestore.MainAppModule </param-value></context-param>

Page 45: Prime Faces 3655

Simple InjectionNo getter and setter

package fc.barcelona;

//imports

@Controller(name=”createUser”, scope=Scope.REQUEST)public class CreateUser {

@Inject private UserDAO userDAO;

//Other stuff

public String saveUser() { userDAO.save(user); }}

Page 46: Prime Faces 3655

Setter Enjeksiyonupackage fc.barcelona;

//imports

@Controller(name=”createUser”, scope=Scope.REQUEST)public class CreateUser {

private UserDAO userDAO;

@Inject public void setUserDAO(UserDAO userDAO) { this.userDAO = userDAO; }

//Other stuff

public String saveUser() { userDAO.save(user); }}

Page 47: Prime Faces 3655

Constructor Injectionpackage fc.barcelona;

//imports

@Controller(name=”createUser”, scope=Scope.REQUEST)public class CreateUser {

private UserDAO userDAO;

@Inject public CreateUser(UserDAO userDAO) { this.userDAO = userDAO; }

//Other stuff

public String saveUser() { userDAO.save(user); }}

Page 48: Prime Faces 3655

JPA Support<?xml version="1.0" encoding="UTF-8"?>

<persistence-unit name="examplesApplication" transaction-type="RESOURCE_LOCAL"> <provider>org.hibernate.ejb.HibernatePersistence</provider> <class>org.primefaces.examples.domain.Movie</class> <properties> <property name="hibernate.dialect" value="org.hibernate.dialect.HSQLDialect"/> <property name="hibernate.connection.url" value="jdbc:hsqldb:mem:jpabox"/> <property name="hibernate.connection.driver_class" value="org.hsqldb.jdbcDriver"/> <property name="hibernate.connection.username" value="sa"/> <property name="hibernate.connection.password" value=""/> <property name="hibernate.hbm2ddl.auto" value="create"/> <property name="hibernate.show.sql" value="true"/> </properties> </persistence-unit></persistence>

persistence.xml

<filter> <filter-name>Optimus Persistence Filter</filter-name> <filter-class>org.primefaces.optimus.persistence.filter.PersistenceFilter</filter-class> </filter>

//filter mapping to Faces Servlet

web.xml

Page 49: Prime Faces 3655

JPA Support

public interface UserDAOJPA implements UserDAO {

@Inject private EntityManager em;

public void save(User user) { em.persist(user); }}

<context-param> <param-name>optimus.CONFIG_MODULES</param-name> <param-value>org.sopranos.moviestore.MainAppModule, org.primefaces.optimus.persistence.JPAModule </param-value></context-param>

UserDAOJPA.java

web.xml

Page 50: Prime Faces 3655

Transactions public void save(User user) {

try{ em.getTransaction().begin(); em.persist(kullanici); em.getTransaction().commit(); }catch(Exception e){ em.rollbackTransaction(); } }

import org.primefaces.optimus.config.annotations.Transactional;

//...

@Transactionalpublic void save(User user) { em.persist(user);}

UserDAOJPA.java

Page 51: Prime Faces 3655

ViewScopePage scope

Between request and session scope

Create()

Create()

Create()

create.xhtml

Create() Create()Req

View

Sess.

create.xhtmlcreate.xhtml

Page 52: Prime Faces 3655

JSF 1.x NavigationuserDetail

faces-config.xml<navigation-rule> <from-view-id>/userList.xhtml</from-view-id> <navigation-case> <from-outcome>userDetail</from-outcome> <to-view-id>/userDetail.xhtml</to-view-id> </navigation-case></navigation-rule>

<h:commandButton value =”Detail” action=”userDetail” />

userList.xhtml userDetail.xhtml

Page 53: Prime Faces 3655

Optimus Navigation

<h:commandButton value =”Detail” action=”userDetail” />

userDetail

faces-config.xml

<application> <navigation-handler>org.primefaces.optimus.navigationhandler.ViewIdBasedNavigationHandler

</navigation-handler></application>

userList.xhtml userDetail.xhtml

Page 54: Prime Faces 3655

AuthContextUI Security

ifGranted

ifAllGranted

ifAnyGranted

ifNonGranted

<h:commandButton value=”Save” action=”#{createUser.save}” rendered=”#{authContext.ifGranted[‘ROLE_ADMIN’]}” />

<h:outputText value=”Hi #{authContext.username}” />

Page 55: Prime Faces 3655

AOP and @Authorizepackage org.sopranos.project.ui;

@Controller(name=”createUser”, scope=Scope.REQUEST)public class CreateUser {

public String saveUser() { if(isAdmin()) { //... } }}

Method level security

package org.sopranos.project.ui;

@Controller(name=”createUser”, scope=Scope.REQUEST)public class CreateUser {

@Authorize(“ROLE_ADMIN”) public String saveUser() { //... }}

Page 56: Prime Faces 3655

ExporterExports datatable data, Excel or PDF

<p:dataTable id=”users”> ... </p:dataTable>

<h:commandButton value="Export as Excel"> <opt:exportActionListener type="xls" target="users" fileName="users"/></h:commandButton>

<h:commandButton value="Export as PDF"> <opt:exportActionListener type="pdf" target="users" fileName="user"/></h:commandButton>

Page 57: Prime Faces 3655

ExporterHTML DataTable

Page 58: Prime Faces 3655

PDF Renderer

playerDetail.jsf playerDetail.jsf?asPDF=true

Page 59: Prime Faces 3655

Collection ActionListenerList operations without custom java code

<p:dataTable id=”users” value=”#{userList.users}”> ... </p:dataTable>

<h:commandButton value="Export as Excel"> <opt:collectionActionListener value="#{userList.user}" addTo"# {userList.users}" /> </h:commandButton>

Page 60: Prime Faces 3655

ValidatorsRegular Expression Validator

Email Validator

CreditCard Validator

<h:inputText id="txt_sample" value=”#{bla.bla}”> <opt:regexValidator regex="[A-Z][a-zA-Z]*" /></h:inputText>

Page 61: Prime Faces 3655

FacesTraceDebug and Training tools

Lifecycle visualizer

Parameters (Request, Session vs)

FacesMessages

DHTML Component Tree

Log4J support

Page 62: Prime Faces 3655

LifeCycle Visualizer

Page 63: Prime Faces 3655

FacesTrace DEMO

Page 65: Prime Faces 3655

Documentation

WIKIAPI ve TAG Docs

Referance Guide (160 + pages)

Page 66: Prime Faces 3655

Support and HelpCommunity forum

Enterprise support

Page 67: Prime Faces 3655

Forumhttp://primefaces.prime.com.tr/forum/

Page 68: Prime Faces 3655

Issue Tracker

http://code.google.com/p/primefaces/issues/list

Page 69: Prime Faces 3655

Online Demohttp://www.rehberharitam.com/primefaces-examples

Page 70: Prime Faces 3655

Coming SoonJSF 2.0 compatibilty

PrimeFaces 1.0

Drag-Drop components

Flash based fileupload

Conversation Scope

More transaction management

More JPA support