prettyfaces: simplified jsf navigation, actions, and url-rewriting: lincoln baxter iii

Lincoln Baxter IIIhttp://ocpsoft.com

PrettyFacesSimplified JSF Navigation, Actions, and URL-rewriting.

( At this time, the audience is encouraged to use PDAs, cell phones, and other portable electronic devices... )

#jaxconf #prettyfaces

My Life Story.yawn...

/ PrettyFaces/ background/ basics/ navigation

/ demos/ wrap-up

PrettyFaces is...

URL-rewriting.wtf?

“A URL rewriting extension for Servlet containers, Java EE, with optional tight-integration for JSF and

other frameworks.”

http://example.com/faces/store.jsf

http://example.com/store

URL Parameterization.(p14n)

http://example.com/faces/item.xhtml?item=Z34SD498

http://example.com/store/item/Z34SD498

Page Actions.w0rd!

<action> #{storeBean.loadItem} </action>

Simplified Navigation.Woot.

“store” → http://example.com/store

Non-invasive.Seriously...

And I'll prove it...

/ demos/ wrap-up

The PrettyFaces Story....again?

Initially

a bookmarking extension for JSF 1.2

a feature-rich URL-rewriting solution

Evolved

supports pure Servlet and Java EE

Future

a JSR for URL-rewriting in Java EE

Life is good.:) but...

Why Pretty URLs?

•Build trust

•Enhance user experience

•Self-promote

/ demos/ wrap-up

The Basics.

/ demos/ wrap-up

/ clean/ parameterize/ load

Clean that URL.

Build trust by reducing clutter.

Before:

http://example.com/news.xhtml?p=my-new-post

After:

http://example.com/news/my-new-post/

http://www.llbean.com/webapp/wcs/stores/servlet/CategoryDisplay?categoryId=28&storeId=1&catalogId=1&langId=-1&nav=hp-gndp

Vulnerable!

Cluttered!

Real-life:wtf?

Should have been:

http://llbean.com/kids

<url-mapping><pattern value=”/kids” /><view-id value=”/webapp/wcs/stores/servlet/CategoryDisplay?categoryId=28“ />

</url-mapping>

A fictitious, malicious example:

http://acme.com/store& catCode=ZfSd41& lang=en_US& account=lincolnthree& autoLoginCd=S3fds94Zd03& oneClickPurchase=true& item=veryExpensive& redirectAfter=www.google.com?q=Have+a+nice+day+sucker!

$$$$!!! or... $#@!

Clean that URL.Why do you think people are afraid of buying used cars?

Lack of trust.

Every website is a “car dealership.”

http://www.youtube.com/watch?v=dQw4w9WgXcQ

Trust Me?

http://www.linkedin.com/in/lincolnthreehttp://twitter.com/lincolnthree http://ocpsoft.com/prettyfaces/

Trust Me.

A clean, readable URL:

•Builds trust

•Is self-promoting, benefits SEO

•Reduces vulnerability

/ demos/ wrap-up

Parameterization.(p14n)

/ root / the / user

•Be consistent, always.

•Be general, progress to specific.

•Think hard about using a query string.

•Where you are, what you're looking at.

•In the “request” scope; relevant.

•User accessible!

The URL and p14n are:

http://example.com/storehttp://example.com/store/item/12http://example.com/store/item/12/reviewshttp://example.com/store/item/12/reviews/34

Bad :(http://example.com/store/12/reviews/23/item

Examples:

Good :)

Problem solved.- PrettyFaces -

<url-mapping><pattern value=”/store/item/#{ itemBean.number }” /><view-id value=”/faces/item.xhtml“ >

</url-mapping>

Inject directly.

<url-mapping><pattern value=”/store/item/#{ number }” /><view-id value=”/faces/item.xhtml” />

</url-mapping>

Add a request parameter.

item.xhtml?number=#{...}

<url-mapping><pattern value=”/store/item/#{ number : itemBean.number }” /><view-id value=”/faces/item.xhtml” />

</url-mapping>

/ demos/ wrap-up

Loading your data.

•Eagerly (On construction)

•Lazily (On access)

•Declaratively (On event, or request)

Load declaratively!

Nothing fancy.

<url-mapping><pattern value=”/store/item/#{itemBean.number}” /><view-id value=”/faces/store/view.xhtml” /><action> #{ currentProjectBean.load } </action>

</url-mapping>

You decide.

<url-mapping><pattern value=”/store/item/#{itemBean.number}” /><view-id value=”/faces/store/view.xhtml” /><action phaseId=”RENDER_RESPONSE”>

#{ currentProjectBean.load } </action>

</url-mapping>

Alternatives.

2.0 viewparams

Url RewriteFilter

2.0 eventlisteners

1.x: requiresseam or other

More Configuration

+3 +8 +1+n +4Lines:

pretty-config.xml

= ~4 :)

PrettyFaces

= ~17!

Annotations

@Named@RequestScoped@URLMapping(

id = "barcode", pattern = "/#{ /[0-9]+/ barcodeBean.value }.png",

viewId = "/barcode.jsf")

public class BarcodeBean{ private String value;

@URLAction(phaseId=PhaseId.RENDER_RESPONSE) public void load() throws IOException { // do the work }}

@ViewConfigpublic interface MyAppViewConfig {

static enum Pages {

@ViewPattern("/admin.xhtml") @Admin ADMIN, @ViewPattern("/item.xhtml") @UrlMapping(pattern="/item/#{id}/") @Owner ITEM, @ViewPattern("/*") @FacesRedirect @AccessDeniedView("/denied.xhtml") @LoginView("/login.xhtml") ALL; }}

SeamFaces @ViewConfig

Your own source!

com.ocpsoft.pretty.faces.spi.ConfigurationProvider

The Basics.

•Clean that URL! - build trust, self promote.

•Parameterize logically, in order – root the user

•Load data declaratively (Validate everything)

•You choose the configuration!

/ demos/ wrap-up

History, the oldschool, JSF 1.x.

<navigation-rule> <from-view-id> * </from-view-id> <navigation-case> <from-action> * </from-action> <from-outcome> viewStore </from-outcome> <to-view-id> /faces/store/view.xhtml </to-view-id> <redirect /> </navigation-case></navigation-rule>

<h:commandLink action=”viewStore” value=”Go to store> <f:setPropertyActionListener target=”#{itemBean.name}” value=”prettyfaces” /></h:commandLink>

The newJSF 2.0 way.

<h:link action=”/faces/item.xhtml”> <f:param name=”item” value=”prettyfaces”/></h:link>

<f:metadata> <f:viewParam name=”item” value=”#{itemBean.number}” /></f:metadata>

The prettyway to get around.

That Same Configuration.

<url-mapping id=”viewStore”><pattern value=”/store/item/#{ item : itemBean.number }” /><view-id value=”/faces/item.xhtml” />

</url-mapping>

The Mapping ID:

<pretty:link mappingId=”viewStore”> <f:param value=”prettyfaces”/></pretty:link>

Renders: /store/item/prettyfaces

Go where you want.

private String createItem(){

if(dao.createItem(newitem)){

itemBean.setItem(newitem.getId());return “pretty:viewItem”;

}FacesUtils.addError(“Something went wrong! Try again.”);return “pretty:”;

Take only what you need.from me

Or... do “nothing.”

•Write a normal Java EE / JSF 2.0 application.

•Add PrettyFaces outbound URL-rewriting.

•Request-parameter mapping #{name} is power.

Look familiar?

<h:link outcome=”/item.xhtml”> <f:param name=”item” value=”prettyfaces”/></h:link>

Renders: /store/item/prettyfaces

<url-mapping id=”viewStore”><pattern value=”/item/#{ item }” /><view-id value=”/faces/item.xhtml” />

</url-mapping>

http://example.com/store/item/23

http://example.com/faces/item.xhtml ? item=23

inbound outbound

In summary.

•You do not need to use pretty-navigation or links.

•But they're there if you want them

•PrettyFaces is non-invasive... seriously.

And I'll prove it...

/ demos/ wrap-up

Awesome demos!Yayayayayay!!!

/ demos ? plan for change=true

/ wrap-up

Plan for Change

.xhtml.do.asp.jsp.php.cgi.jsf.rb

/ demos/ wrap-up

PrettyFaces in two minutes.“A masterpiece.” ~non-fictional user.

Add PrettyFaces

via Maven.

<dependency> <groupId>com.ocpsoft</groupId> <artifactId>prettyfaces-jsf2</artifactId> <version>${most-recent-version}</version></dependency>

Yeah this works with pure Servlets, too. I know...

Add PrettyFaces

via Seam Forge.

$ forge git-plugin git://github.com/ocpsoft/prettyfaces-forge-plugin.git

$ setup prettyfaces

$ prettyfaces mapping –pattern {...} --resource {...}

Map something.

Create /WEB-INF/pretty-config.xml

<pretty-config>

<url-mapping id="home"> <pattern value="/home" /> <view-id value="/faces/home.jsf" > </url-mapping>

<url-mapping id="viewComment"> <pattern value="/story/#{myBean.currentStoryId}/#{myBean.commentId}" /> <view-id value="/faces/story/comment.jsf" > </url-mapping>

</pretty-config>

Make it work.

Take action ;)

<pretty-config>

<url-mapping id="home"> <pattern value="/home" /> <view-id value="/faces/home.jsf”> <action> #{homeBean.loadUserLayout} </action> </url-mapping>

<url-mapping id="viewComment"> <pattern value="/story/#{myBean.currentStoryId}/#{myBean.commentId}" /> <view-id value="/faces/story/comment.jsf” /> </url-mapping>

</pretty-config>

Navigate.

../viewComment.jsf

<pretty:link mappingId="comment"> <f:param value="23" /> <f:param value="5" /> Go to Comment. (This is Link Text)</pretty:link>

<h:link outcome="pretty:comment"> <f:param name="sid" value="#{myBean.storyId}" /> <f:param name="cid" value="#{myBean.nextCommentId}" /> View next comment. (This is Link Text)</h:link>

The Site-map.

If this presentation were a website...<pretty-config>

<url-mapping id="home"> <pattern value=”/prettyfaces” /> <view-id value=”faces/home.jsf” /> </url-mapping>

<url-mapping id="levelOne"> <pattern value=”/prettyfaces/#{presBean.levelOne}” /> <view-id value=”/faces/present.jsf” /> </url-mapping>

<url-mapping id="levelTwo"> <pattern value=”/prettyfaces/#{presBean.levelOne}/#{presBean.levelTwo}” /> <view-id value=”/faces/present.jsf” /> </url-mapping>

</pretty-config>

/ demo/ wrap-up

PrettyFaces is...

● URL-rewriting● URL-parameterization● Action-framework for JSF (Servlet soon)● Navigation framework for JSF (Servlet soon)● Extendable, configurable (SPI is growing!)● Waiting for your ideas!

Get Involved!

Get Started

http://ocpsoft.com/prettyfaces/

Get Help

http://ocpsoft.com/support/

Get the code!

http://github.com/ocpsoft/prettyfaces

PrettyFaces is...

“Beautiful Java EE: URL-rewriting for the next generation web-user”

Questions.I've been talking for nearly an hour; please,

somebody say something.

“wtf?”

prettyfaces: simplified jsf navigation, actions, and url-rewriting: lincoln baxter iii

prettyfaces lincoln

p14n lincoln baxter

request lincoln baxter

htt lincoln baxter iiihttp

comkids lincoln baxter

uplincoln baxter

xhtml baxter

comstorelincoln baxter

Technology

rewriting safety’s future rewriting safety’s future

dissecting jsf

javaserver faces, jsf - kth2 jsf, content • jsf...

servlet, java ee, and jsf - · pdf file5.2. * integrating...

how to build a jsf application uit jsf 2.0.3 · last...

hypermedial jsf tools tutorial - build a jsf 2.0 application

jsf security

jsf lifecycle

jsf controller

javaserver faces (jsf)...

jsf tables

jsf 2: introduction and overview - custom training...

jsf project

) jsf-komponenten mit javascript - herbstcampus 2020 · jsf...

jsf meets js (2. ed.) - jsf-komponenten mit javascript

jsf brochure

web jsf overview – internet “101” for egl/jsf...

jsf introduction

jsf on rails ejb jpa jsf adf11g demo1

rewriting rewriting -...