71
PRIMEFACES Çağatay Çivici [email protected]

Introducing Prime Faces En

Embed Size (px)

Citation preview

Page 2: Introducing Prime Faces En

Ç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: Introducing Prime Faces En

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: Introducing Prime Faces En

JSFJoint Strike Fighter

Crew: 1

Page 5: Introducing Prime Faces En

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: Introducing Prime Faces En

Apache MyFacesJSF 1.1 ve 1.2 implementationTomahawk

TrinidadTobago

Portlet Bridge RIOrchestraExtVAL

Page 7: Introducing Prime Faces En

JSF ToolsNetbeansJBoss ToolsMyEclipseEclipse WTPJDeveloperIBM RADIDEAMacromedia Dreamweaver

Page 8: Introducing Prime Faces En

Component LibrariesMyFaces TomahawkMyFaces TrinidadMyFaces TobagoJBoss RichFacesIceFacesQuipukitNetAdvantageWebGalileo

Page 9: Introducing Prime Faces En

PrimeFacesOpen Source

Rich Components

Easy AJAX

XML Free JSF

Detailed Documentation

Not a framework

Page 10: Introducing Prime Faces En

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: Introducing Prime Faces En

Turkish SupportTurkish Docs (160 + sayfa)

Turkish enabled components

Turkish support forum

Page 12: Introducing Prime Faces En

PrimeFaces ModulesUI Components

Optimus

FacesTrace

Mutually Exclusive modules

Page 13: Introducing Prime Faces En

Installation1) Download

2) Logging ve SLF4J

3) Resource Servlet

4) JSP or Facelets Taglib

5) p:resources

Let’s ROCK!

Page 14: Introducing Prime Faces En

Manuel DownloadGoogle code page:

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

Page 15: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

TaglibJSP Taglib

Facelets Namespace

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

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

Page 18: Introducing Prime Faces En

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: Introducing Prime Faces En

UI ComponentsRich components

Easy AJAX

Flash chart components

Unobstrusive Javascript

Yahoo UI, Prototype, Scriptaculous

Page 20: Introducing Prime Faces En

Rich ComponentsUIAjax DataTable

AccordionPanel DialogAutoComplete Editor

Button ImageCropperCalendar MenuCaptcha PanelCarousel PollCharts Resizable

ColorPicker SliderConfirmDialog Tabview

Tooltip Tree

Page 21: Introducing Prime Faces En

Easy AJAXPartial Page Rendering - PPR

Declarative AJAX

Page 22: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

GraphsChart components (Pie, Line, Column and more)

Interactive

Live data display

Page 28: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

Live Data

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

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

Page 31: Introducing Prime Faces En

Skinning

Before After

Page 32: Introducing Prime Faces En

UI Components DEMO

Page 33: Introducing Prime Faces En

Javascript and PrimeFacesYUI, Prototype, Scriptaculous

PrimeFaces Namespace and Javascript API

PrimeFaces.widget.*

PrimeFaces.ajax.*

Unobstrusive Javascript

Page 34: Introducing Prime Faces En

PrimeFaces.widget.*PrimeFaces widgets

Example: PrimeFaces.widget.Editor

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

</script>

Page 35: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

OptimusNon rendering goodies

Guice integration

Validators

XML-free JSF

PDF and Excel export

Security Extensions and AOP

Page 38: Introducing Prime Faces En

Google Guice IntegrationGuice based JSF beans

@Controller for <managed-bean />

Dependency Injection

Aspect Oriented Programming

Page 39: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

Controllernamescope

RequestSessionApplicationView

startup: Initiate on application startup

Page 42: Introducing Prime Faces En

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: Introducing Prime Faces En

Dependency Injection

CreateUseruserDAO

UserDAO

UserDAOJPA

implements

Page 44: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

ViewScopePage scope

Between request and session scope

Create()

Create()

Create()

create.xhtml

Create() Create()Req

View

Sess.

create.xhtmlcreate.xhtml

Page 52: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

ExporterHTML DataTable

Page 58: Introducing Prime Faces En

PDF Renderer

playerDetail.jsf playerDetail.jsf?asPDF=true

Page 59: Introducing Prime Faces En

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: Introducing Prime Faces En

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: Introducing Prime Faces En

FacesTraceDebug and Training tools

Lifecycle visualizer

Parameters (Request, Session vs)

FacesMessages

DHTML Component Tree

Log4J support

Page 62: Introducing Prime Faces En

LifeCycle Visualizer

Page 63: Introducing Prime Faces En

FacesTrace DEMO

Page 65: Introducing Prime Faces En

Documentation

WIKIAPI ve TAG Docs

Referance Guide (160 + pages)

Page 66: Introducing Prime Faces En

Support and HelpCommunity forum

Enterprise support

Page 67: Introducing Prime Faces En

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

Page 68: Introducing Prime Faces En

Issue Tracker

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

Page 69: Introducing Prime Faces En

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

Page 70: Introducing Prime Faces En

Coming SoonJSF 2.0 compatibilty

PrimeFaces 1.0

Drag-Drop components

Flash based fileupload

Conversation Scope

More transaction management

More JPA support