J2EE is already the perfect solution for complex business/enterprise systems, and JSF2.x is the perfect chance to reach out to the consumer and small business market. JSF is easier to use than it's ever been before, but small businesses have different needs than larger companies and corporations. PrettyFaces is for all projects, small and large; this presentation explains why "pretty, bookmark-able URLs" are important for client-facing applications, addressing SEO optimization, and creating clean, consistent, intuitive client interactions on the web.

1. Beautiful Java EE... #{ yes we can, with PrettyFaces }

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

4. Senior Software Engineer – JBoss, by Red Hat – Seam Team

5. Expert Group Member (jcp.org) of JavaServer Faces and #{EL.next}

6. Open-source advocate (addict)

7. Founder of http://ocpsoft.com/

8. Creator of PrettyFaces & PrettyTime utilities for Java EE & Java

9. http://seamframework.org

10. http://jboss.org

12. basics

13. navigation

14. SEO

15. examples

16. PrettyFaces is...

17. URL-rewriting. wtf?

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

19. URL Parameterization. (p14n)

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

21. Page Actions. w0rd!

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

23. Simplified Navigation. Woot.

24. “ store ” -> http://example.com /store

25. Non-invasive. Seriously...

27. basics

28. navigation

29. SEO

30. examples

31. The PrettyFaces Story. ...again?

32. Entrepreneurship.

33. Failure.

35. JSP

36. JSF 1.x

37. JSF 2.0

39. Good separation between M & V of MVC

40. Had usability issues, pitfalls

41. Navigation was a pain...

42. No bookmarks? Not entirely true.

43. What about Pretty URLs / SEO?

45. Applied the 80/20 rule

46. Destroyed Thanksgiving 2008

48. Faces-config.xml practically gone

49. Data loading easy & declarative “ Beautiful Java EE”

50. Life is good. :)

52. Enhance user experience

53. Self-promote

55. basics

56. navigation

57. SEO

58. examples

59. The Basics.

61. basics

62. navigation

63. SEO

65. parameterize

66. load

67. Clean that URL.

68. Before: http://example.com/news.xhtml?p=my-new-post After: http://example.com/news/my-new-post/ Build trust by reducing clutter.

69. http://www.llbean.com/webapp/wcs/stores/servlet/CategoryDisplay?categoryId=28&storeId=1&catalogId=1&langId=-1&nav=hp-gndp 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? wtf?

71. <url-mapping> <pattern value = ” / kids ” /> <view-id> /faces/store/kidsDepartment.xhtml </view-id> </url-mapping>

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

74. Lack of trust.

75. Every website is a “car dealership.”

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

77. Trust Me. http://www.linkedin.com/in/lincolnthree http://twitter.com/lincolnthree http://ocpsoft.com/prettyfaces/

79. Is self-promoting, benefits SEO

80. Reduces vulnerability

82. basics

83. navigation

84. SEO

86. parameterize

87. load

88. Parameterization. (p14n)

90. Be general, progress to specific.

91. Think hard about using a query string.

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

96. Problem solved. - PrettyFaces -

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

98. <url-mapping> <pattern value = ” /store/item/ #{ number } ” /> <view-id> /faces/store/view.xhtml </view-id> </url-mapping> Add a request parameter. /faces/store/view.xhtml? number = X

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

101. basics

102. navigation

103. SEO

105. parameterize

106. load

108. Lazily (On access)

109. Declaratively (On event, on request)

111. JSF 1.x was not good at this.

112. JSF 2 helps some...

113. Nothing fancy. <url-mapping> <pattern> /store/item/#{itemBean.number} </pattern> <view-id> /faces/store/view.xhtml </view-id> <action> #{ itemBean.load } </action> </url-mapping>

114. Alternatives. More Configuration +3 +8 +1+n +4 Lines: = ~4 :) PrettyFaces = ~17! 2.0 view params Url Rewrite Filter 2.0 event listeners 1.x: requires seam or other pretty-config.xml

115. There... are... FOUR... lights ! <url-mapping> <pattern> /store/item/#{itemBean.number} </pattern> <view-id> /faces/store/view.xhtml </view-id> <action> #{ itemBean.load } </action> </url-mapping> lines.

117. Parameterize logically, in order – root the user

118. Load data declaratively

119. Validate everything

121. basics

122. navigation

123. SEO

124. examples

125. History, the old school, JSF 1.x.

126. < 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 > </ navigation-case > </ navigation-rule > < h:commandLink action = ”viewStore” value=”Go to store > <f:setPropertyActionListener target = ”#{itemBean.name}” value = ”prettyfaces” /> </h:commandLink>

127. The new JSF 2.0 way.

128. < h:link outcome = ”/faces/store/view” > < f:param name = ”item” value = ”prettyfaces” /> </ h:link > < f:metadata > < f:viewParam name = ”item” value = ”#{itemBean.number}” /> </ f:metadata > Renders: /faces/store/view.xhtml?item=prettyfaces

129. The pretty way.

130. That Same Configuration. <url-mapping id=” viewStore ”> <pattern value=” /store/item/ #{ item : itemBean.number } ” / > <view-id> /faces/project/view.xhtml </view-id> </url-mapping> The Mapping ID: < h:link action = ”pretty: viewStore ” > < f:param name= ”item” value = ”23” /> </ h:link > Renders: /store/item/23

131. P14N is a “Scope” private String createItem() { if(dao.createItem(newitem)) { itemBean.setItem( newitem.getId() ); return “ pretty:viewItem ”; } Utils.addError(“Something went wrong! Try again.”); return null; }

133. Add PrettyFaces outbound URL-rewriting.

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

135. That Same Configuration. <url-mapping id=” viewStore ”> <pattern value=” /store/item/ #{ item : itemBean.number } ” / > <view-id> /faces/project/view.xhtml </view-id> </url-mapping> < h:link action = ”/faces/store/view” > < f:param name = ” item ” value = ”23” /> </ h:link > Outbound URL-rewriting! Renders: /store/item/23

137. But it's there if you want it ;)

138. PrettyFaces provides non-invasive URL-rewriting. PrettyFaces A diagram.

140. basics

141. navigation

142. SEO

143. examples

147. Credibility - get other sites to say they believe it

148. Context - make sure the links are relevant

152. Keywords PUT KEYWORDS IN THE URL #1 Self-promoting Links

153. Poor: http://example.com/shop.jsf?catId=23& itemId=Z34FK94SE Better use of keywords, lacks cleanliness: http://example.com/shop .jsf?cat= books&item=how-to-start-a-web-store Perfect: http://example.com/shop/ books ?item= how-to-start-a-web-store Self-promoting Links

154. Example: <url-mapping id=&quot;viewItem&quot;> <pattern value=” /shop/#{ itemBean.category } ” /> <query-param name=” item ”> #{ itemBean.name } </query-param> <view-id> /faces/store.jsf </view-id> <action> #{ itemBean.load } </action> </url-mapping>

156. Enhance user experience

157. Self-promote, enable SEO

159. http://ocpsoft.com July 2008: 0 Nov 2009: 13,287 visits March 2010: 27,172 visits 66% from search Install Google Analytics.

161. basics

162. navigation

163. SEO ? plan for change

164. examples

165. Plan for Change. .jsf .jsp .php .do .cgi .asp /

166. Clean up your URLs. Technology changes... be agnostic. /

168. basics

169. navigation

170. SEO

171. examples

173. Add PrettyFaces via Maven . < dependency > < groupId > com.ocpsoft </ groupId > < artifactId > ocpsoft-pretty-faces </ artifactId > < version > ${most-recent-version} </ version > </ dependency >

174. Map something. Create /WEB-INF/pretty-config.xml < pretty-config xmlns= &quot;http://ocpsoft.com/prettyfaces/2.0.4&quot; xmlns:xsi= &quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation= &quot;http://ocpsoft.com/prettyfaces/2.0.4 http://ocpsoft.com/xml/ns/prettyfaces/ocpsoft-pretty-faces-2.0.4.xsd&quot; > <!-- Begin Mappings --> < url-mapping id = &quot;home&quot; > < pattern value = &quot;/home&quot; /> < view-id > /faces/home.jsf </ view-id > </ url-mapping > < url-mapping id = &quot;viewComment&quot; > < pattern value = &quot;/story/#{myBean.currentStoryId}/#{myBean.commentId}&quot; /> < view-id > /faces/story/comment.jsf </ view-id > </ url-mapping > </ pretty-config >

175. Make it work. Take action ;) < pretty-config xmlns= &quot;http://ocpsoft.com/prettyfaces/2.0.4&quot; xmlns:xsi= &quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation= &quot;http://ocpsoft.com/prettyfaces/2.0.4 http://ocpsoft.com/xml/ns/prettyfaces/ocpsoft-pretty-faces-2.0.4.xsd&quot; > <!-- Begin Mappings --> < url-mapping id = &quot;home&quot; > < pattern value = &quot;/home&quot; /> < view-id > /faces/home.jsf </ view-id > <action> #{ homeBean.loadUserLayout } </action> </ url-mapping > < url-mapping id = &quot;viewComment&quot; > < pattern value = &quot;/story/#{myBean.currentStoryId}/#{myBean.commentId}&quot; /> < view-id > /faces/story/comment.jsf </ view-id > </ url-mapping > </ pretty-config >

176. I almost forgot. Custom URL-rewriting! < pretty-config xmlns= &quot;http://ocpsoft.com/prettyfaces/2.0.4&quot; xmlns:xsi= &quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation= &quot;http://ocpsoft.com/prettyfaces/2.0.4 http://ocpsoft.com/xml/ns/prettyfaces/ocpsoft-pretty-faces-2.0.4.xsd&quot; > <!-- Begin RewriteRules --> < rewrite trailingSlash = &quot;append&quot; /> < rewrite toCase = &quot;lowercase&quot; /> < rewrite match = &quot;^/good_news/(+)/$&quot; url = &quot;http://ocpsoft.com/$1/&quot; redirect = &quot;301&quot; outbound = &quot;false&quot; /> </ pretty-config >

177. Navigate. ../viewComment.jsf < % @ taglib prefix=&quot;pretty&quot; uri =&quot;http://ocpsoft.com/prettyfaces&quot; % > < pretty:link mappingId = &quot;comment&quot; > < f:param value = &quot;23&quot; /> < f:param value = &quot;5&quot; /> Go to Comment. (This is Link Text) </ pretty:link > <h :link outcome = &quot;pretty:comment&quot; > < f:param name = &quot;sid&quot; value = &quot;#{myBean.storyId}&quot; /> < f:param name = &quot;cid&quot; value = &quot;#{myBean.nextCommentId}&quot; /> View next comment. (This is Link Text) </h :link >

178. The Site-map. If this presentation were a website... < pretty-config xmlns= &quot;http://ocpsoft.com/prettyfaces-xsd&quot; xmlns:xsi= &quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation= &quot;http://ocpsoft.com/prettyfaces-xsd http://ocpsoft.com/xml/ns/prettyfaces/pretty-1.0.xsd&quot; > < url-mapping id = &quot;home&quot; > < pattern > /prettyfaces </ pattern > < view-id > /faces/home.jsf </ view-id > </ url-mapping > < url-mapping id = &quot;levelOne&quot; > < pattern > /prettyfaces/#{presBean.levelOne} </ pattern > < view-id > /faces/present.jsf </ view-id > </ url-mapping > < url-mapping id = &quot;levelTwo&quot; > < pattern > /prettyfaces/#{presBean.levelOne}/#{presBean.levelTwo} </ pattern > < view-id > /faces/present.jsf </ view-id > </ url-mapping > </ pretty-config >

180. basics

181. navigation

182. SEO

183. examples