PrettyFaces: SEO, Dynamic Parameters, Bookmarks, and Navigation for JSF / JSF2 - As presented at JSFSummit2009 in Orlando Florida. Why should we use PrettyFaces?

1. PrettyFaces Client-facing JSF – Lincoln Baxter, III

3. basics

4. navigation

5. SEO

6. examples

7. PrettyFaces is: Url Rewriting http://example.com/faces/store .jsf http://example.com/ store

8. PrettyFaces is: Url Parameterization http://example.com/store/item/ Z34SD498

9. PrettyFaces is: Declarative Data Loading <action> #{storeBean.loadItem} </action>

10. PrettyFaces is: Simplified Navigation “ viewStore ” -> http://example.com/store

12. basics

13. navigation

14. SEO

15. examples

16. The PrettyFaces Story Lincoln Baxter, III PrettyFaces/PrettyTime Founder of O cpSoft

17. The PrettyFaces Story Lincoln Baxter, III Founder of O cpSoft @lincolnthree http://ocpsoft.com http://scrumshark.com http://ocpsoft.com/prettyfaces http://ocpsoft.com/prettytime

19. Had usability issues, pitfalls

20. Navigation was a pain...

21. No bookmarks? Not entirely true.

22. What about Pretty URLs / SEO?

24. Applied the 80/20 rule

25. Destroyed Thanksgiving 2008

27. Faces-config practically gone

28. Data loading easy & declarative Easy, Bookmarkable JSF

29. :) Life is good

31. Enhance User Experience

32. Self-Promote

34. basics

35. navigation

36. SEO

37. examples

38. Rethinking Navigation The Basics Keep it simple...

40. basics

41. navigation

42. SEO

44. parameterize

45. validate

46. load

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

48. Keep URLs Clean Real Life: Should have been: http://www.llbean.com/webapp/wcs/stores/servlet/CategoryDisplay?categoryId=28&storeId=1&catalogId=1&langId=-1&nav=hp-gndp http://llbean.com/kids http://www.llbean.com/webapp/wcs/stores/servlet/CategoryDisplay? categoryId=28 & storeId=1 & catalogId=1 & langId=-1 & nav=hp-gndp Vulnerable!

49. Keep URLs Clean Why don't more people buy used cars?

50. Keep URLs Clean They don't trust the last owner. They're afraid of getting a bad deal.

52. Trust me. http:// www.linkedin.com/in/lincolnthree http://ocpsoft.com/prettyfaces http://sourceforge.net/projects/resteasy/ http://www.youtube.com/watch?v=ZOU8GIRUd_g

54. Are self-promoting, benefit SEO

55. Reduce vulnerability

56. Root the user

58. basics

59. navigation

60. SEO

62. parameterize

63. validate

64. load

66. Be general, progress to specific

67. Keep the query string optional

69. where I am & what I'm looking at

70. user accessible

72. Problem solved <pretty-config> ... <url-mapping id=”viewProject”> <pattern> / project / #{currentProjectBean.project} </pattern> <view-id>/faces/project/view.xhtml</view-id> </url-mapping> … </pretty-config> PrettyFaces

74. basics

75. navigation

76. SEO

78. parameterize

79. validate

80. load

82. End-users have DIRECT ACCESS

83. Validate everything

84. Validation @FacesValidator(“ projectName ”) public class ProjectNameValidator { public void validate(...) } <url-mapping id=”viewProject”> <pattern value=”/project/#{currentProjectBean.project}”> <validate param=&quot;0&quot; validatorIds=” projectName ... ” /> </pattern> <view-id>/faces/project/view.xhtml</view-id> </url-mapping> pretty-config.xml

85. Validation Yes – pretty:id or empty PrettyFaces Validation Send 404 Is onError handler defined? Handler returned Successfully? Inject values & continue or redirect to “pretty:id” Throw Exception

87. basics

88. navigation

89. SEO

91. parameterize

92. validate

93. load

95. Lazy Loading (On access)

96. Declarative Loading (On event)

98. Enables deterministic behavior

100. Nothing fancy <pretty-config> ... <url-mapping id=”viewProject”> <pattern> /project/#{currentProjectBean.project} </pattern> <view-id>/faces/project/view.xhtml</view-id> <action> #{currentProjectBean.load} </action> </url-mapping> … </pretty-config> PrettyFaces

101. Action Methods RESTORE_VIEW APPLY_REQUEST_VALUES PROCESS_VALIDATION … ANY_PHASE CurrentProjectBean + load() PrettyFaces Action Invocation <action>#{currentProjectBean.load}</action> Trigger Navigation Continue Lifecycle

102. 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

104. Logical Parameter Order – Root the User

105. Validate everything

106. Load data declaratively

108. basics

109. navigation

110. SEO

112. parameterize

113. validate

114. load

115. Rethinking Navigation Rethinking Navigation so many channels, so little time...

117. basics

118. navigation

119. SEO

121. mappingId

122. de-coupling

123. GET

124. History: the old <h:commandLink action=”viewProject” /> <navigation-rule> <from-view-id> * </from-view-id> <navigation-case> <from-action> * </from-action> <from-outcome>viewProject</from-outcome> <to-view-id>/faces/project/view.xhtml</to-view-id> </navigation-case> </navigation-rule>

125. History: the new <h:link outcome=”/view”> <f:param name=”project” value=”prettyfaces”/> </h:link> <f:metadata> <f:viewParam name=”project” value=”...” /> </f:metadata>

127. Conditional evaluation and outcomes

129. How often do we need them? pretty:hospital “ The baby's coming!” “ It might be a late night, Should we get some coffee?” No... “ What if we don't remember This? Let's get a video Camera!” NO! “ Should I pick up my mother?” DRIVE!!

131. basics

132. navigation

133. SEO

135. mappingId

136. de-coupling

137. GET

138. pretty:mappingId private String actionMethod() { if(user.isMember) { return “ pretty:viewProject ”; } return “ pretty:joinProject ”; } < p:link mappingId=” hospital ”> <f:param value=”delivery”/> < /p:link >

139. That Same Configuration The mapping ID <pretty-config> ... <url-mapping id=” viewProject ”> <pattern> /project/ #{currentProjectBean.project} </pattern> <view-id>/faces/project/view.xhtml</view-id> <action> #{currentProjectBean.load} </action> </url-mapping> … </pretty-config> PrettyFaces

140. P14N is a “Scope” “ P14N is a Scope” private String createProject() { if(dao.createProject(project)) { currentProjectBean.setProject( “scrumshark” ); return “pretty:viewProject”; } FacesUtils.addError(“Something went wrong! Try again.”); return null; } project.getName()

142. basics

143. navigation

144. SEO

146. mappingId

147. de-coupling

148. GET

150. JSF2 - Coupling view locations to action methods (what happens when you need to refactor?) Take your pick...

151. But what about coupling? JSF2 /WebContent /faces /project view.xhtml Action Methods <h:link> <h:commandLink> faces-config.xml

152. But what about coupling? PrettyFaces /WebContent /faces /project view.xhtml Action Methods <p:link> <h:commandLink> faces-config.xml pretty:viewProject

154. “You GET what you ask for”

156. basics

157. navigation

158. SEO

160. mappingId

161. de-coupling

162. GET

163. “You GET what you ask for” GET /project/scrumshark Create Project Action #{bean.create} GET /newproject Invoke Navigation “pretty:viewProject” <action> Load Project Data Render Response ?

164. “You GET what you ask for” Option to handle behavior up front, instead of “behind” a submit. GET /project/scrumshark <action> Load Project Data ?

167. Encapsulation, de-coupling from view-location

168. Extension to existing JSF navigation

170. basics

171. navigation

172. SEO

174. mappingId

175. de-coupling

176. GET

177. Search Engine Optimization

179. basics

180. navigation

181. SEO

183. basics

184. change

186. Keywords examples Poor: http://example.com/shop.jsf?catId=23&itemId=Z34FK94SE Partly there: 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

187. Keywords examples <url-mapping id=&quot;viewItem&quot;> <pattern> /shop/#{catBean.item} </pattern> <query-param name=” item ”> {itemBean.itemName} </query-param> <view-id>/faces/shop.jsf</view-id> <action> #{itemBean.load} </action> </url-mapping>

189. Enhance User Experience

190. Self-Promote, SEO

192. basics

193. navigation

194. SEO

196. basics

197. change

198. SEO is all you need False

199. Install Google Analytics http://ocpsoft.com July 2008: 0 Nov 2009: 13,287 views 68% from search

201. Get people to say they believe you

202. Get search engines to believe you both

206. Make sure your external links appear on pages relevant to your content.

208. basics

209. navigation

210. SEO

212. basics

213. change

214. Plan for Change .jsf .jsp .php .do .cgi .asp

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

217. basics

218. navigation

219. SEO

221. basics

222. change

223. Examples what a “view”

224. Setup Add Pretty Filter in web.xml <filter> <filter-name>Pretty Filter</filter-name> <filter-class>com.ocpsoft.pretty.PrettyFilter</filter-class> </filter> <filter-mapping> <filter-name>Pretty Filter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> </filter-mapping>

225. Map your first pages Create /WEB-INF/pretty-config.xml <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> /home </pattern> <view-id> /faces/home.jsf </view-id> </url-mapping> <url-mapping id=&quot;viewComment&quot;> <pattern value=”/story/#{myBean.currentStoryId}/#{myBean.commentId}” /> <view-id>/faces/story/comment.jsf</view-id> </url-mapping> </pretty-config>

226. Add some actions Take action ;) <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> /home </pattern> <view-id> /faces/home.jsf </view-id> <action> #{homeBean.loadUserLayout} </action> </url-mapping> <url-mapping id=&quot;viewComment&quot;> <pattern value=”/story/#{myBean.currentStoryId}/#{myBean.commentId}” /> <view-id>/faces/story/comment.jsf</view-id> <action> #{myBean.load} </action> </url-mapping> </pretty-config>

227. Validate (2.0.x series only) <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> /home </pattern> <view-id> /faces/home.jsf </view-id> <action> #{homeBean.loadUserLayout} </action> </url-mapping> <url-mapping id=&quot;viewComment&quot;> <pattern value=”/story/#{myBean.currentStoryId}/#{myBean.commentId}”> <validate param=”0” validatorIds=”integerValidator” /> <validate param=”1” validatorIds=”integerValidator” /> </pattern> <view-id>/faces/story/comment.jsf</view-id> <action>#{myBean.load}</action> </url-mapping> </pretty-config>

228. Navigate viewComment.xhtml <%@ 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> <pretty:link mappingId=&quot;comment&quot;> <f:param value=&quot;#{myBean.storyId}&quot; /> <f:param value=&quot;#{myBean.nextCommentId}&quot; /> View next comment. (This is Link Text) </pretty:link>

229. The SiteMap 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>

230. Questions? Lincoln Baxter, III Founder of O cpSoft @lincolnthree http://ocpsoft.com http://scrumshark.com http://ocpsoft.com/prettyfaces http://ocpsoft.com/prettytime