<ul><li>Agenda: </li></ul><ul><li>Goals and desired behavior </li></ul><ul><li>Standard JSF Behavior </li></ul><ul><li>Dis...
<ul><li>Methods of Navigation: </li></ul><ul><li>HTTP Links:  <a href=“/bookmarkable/page/33”>link</a>   </li></ul><ul><li...
1. Client requests /faces/page.jsf 2. Server renders /faces/page.jsf Web Client JSF App Server Before: Client URL:  N/A Cl...
<ul><li>Client submits form to /faces/page.jsf </li></ul>2. Server processes navigation and renders /faces/page2.jsf Befor...
Web Client JSF App Server <ul><li>Client submits form to /faces/page.jsf </li></ul>2. Server processes navigation and send...
1. Client requests /mapped/page 2. Server renders /faces/page.jsf Web Client JSF App Server Before: Client URL:  N/A Clien...
<html> <body> <form action=“/faces/page.jsf”> … </form> </body> </html> /mapped/page Web Client Before: Client URL:  N/A C...
1. Client submits form to /faces/page.jsf 2. Server processes navigation and renders new view Web Client JSF App Server Be...
<ul><li>Pros: </li></ul><ul><li>Only one request/response required to render output </li></ul><ul><li>Simple to implement ...
Web Client JSF App Server Before: Client URL:  /mapped/page Client viewing:  /faces/page.jsf After: Client URL:  /mapped/p...
(E.g.: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Pros / Cons Mapped JSF Navigation: ( With) Redirect URL Rewriting...
<html> <body> <form action=“/mapped/page”> … </form> </body> </html> /mapped/page Web Client Before: Client URL:  /mapped/...
1. Client submits form to /mapped/page 2. Server processes navigation and renders new view Web Client JSF App Server Befor...
<ul><li>Pros: </li></ul><ul><li>URL remains bookmarkable </li></ul><ul><li>URL parameter information is preserved </li></u...
pretty-config.xml <pretty-config> <url-mapping id=“viewProject”> <pattern> /project/#{viewProjectBean.projectId}/ </patter...
PrettyFaces References Mapped JSF Navigation: Proposed Solution
Upcoming SlideShare
Loading in...5
×

Bookmarkable JSF: PrettyFaces

8,640

Published on

An analysis of JSF bookmarking frameworks, and a proposed new solution.

Published in: Technology, Design
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,640
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
96
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Bookmarkable JSF: PrettyFaces

  1. 1. <ul><li>Agenda: </li></ul><ul><li>Goals and desired behavior </li></ul><ul><li>Standard JSF Behavior </li></ul><ul><li>Discussing JBoss Seam, PrettyURLPhaseListener, and RestFaces behavior </li></ul><ul><li>Proposing PrettyFaces </li></ul>An analysis of bookmarking & navigation techniques, and a proposal for a new solution. Making JSF “Pretty” ? ?
  2. 2. <ul><li>Methods of Navigation: </li></ul><ul><li>HTTP Links: <a href=“/bookmarkable/page/33”>link</a> </li></ul><ul><li>HTTP Forms: <form action=“/submit/here”>…</form> </li></ul><ul><li>Server side redirect (From either of the above) </li></ul><ul><li>Goals of our web-framework: </li></ul><ul><li>Achieve bookmarkable URLs </li></ul><ul><li>Minimize traffic and processing required per request </li></ul><ul><li>Minimize response time (faster is better) </li></ul><ul><li>Minimize java code (reduce the need to handle HTTP data manually, let JSF backing beans do the work) </li></ul><ul><li>Make it easy for developers, intuitive </li></ul>Goals and Desired behavior JSF Navigation
  3. 3. 1. Client requests /faces/page.jsf 2. Server renders /faces/page.jsf Web Client JSF App Server Before: Client URL: N/A Client viewing: N/A After: Client URL: /faces/page.jsf Client viewing: /faces/page.jsf Step 1: Initial Request Standard JSF Navigation
  4. 4. <ul><li>Client submits form to /faces/page.jsf </li></ul>2. Server processes navigation and renders /faces/page2.jsf Before: Client URL: /faces/page.jsf Client viewing: /faces/page.jsf After: Client URL: /faces/page.jsf Client viewing: /faces/page2.jsf Web Client JSF App Server Notice: client’s address bar does not match content displayed on the page. Step 2: Form Postback With Validation or Simple Navigation (no redirect) Standard JSF Navigation
  5. 5. Web Client JSF App Server <ul><li>Client submits form to /faces/page.jsf </li></ul>2. Server processes navigation and sends redirect to /faces/page2.jsf Two requests means additional bandwidth, response time, and CPU-utilization. 4. Server renders /faces/page2.jsf 3. Client submits request for /faces/page2.jsf Step 2: Alternate… Form post-back With redirect navigation to preserve view Id Standard JSF Navigation Before: Client URL: /faces/page.jsf Client viewing: /faces/page.jsf After: Client URL: /faces/page2.jsf Client viewing: /faces/page2.jsf
  6. 6. 1. Client requests /mapped/page 2. Server renders /faces/page.jsf Web Client JSF App Server Before: Client URL: N/A Client viewing: N/A After: Client URL: /mapped/page Client viewing: /faces/page.jsf (Eg: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Step 1: Initial Request (Eg: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Mapped JSF Navigation
  7. 7. <html> <body> <form action=“/faces/page.jsf”> … </form> </body> </html> /mapped/page Web Client Before: Client URL: N/A Client viewing: N/A After: Client URL: /mapped/page Client viewing: /faces/page.jsf (Eg: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Rendered Output (Eg: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Mapped JSF Navigation Since JSF does not render the mapped URL, and instead renders the JSF view ID. After form submit, the URL will no longer be bookmarkable, or “pretty.”
  8. 8. 1. Client submits form to /faces/page.jsf 2. Server processes navigation and renders new view Web Client JSF App Server Before: Client URL: /mapped/page Client viewing: /faces/page.jsf After: Client URL: /faces/page.jsf Client viewing: /faces/page.jsf or /faces/page2.jsf (Eg: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Form post-back with validation or navigation (Eg: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Mapped JSF Navigation: ( Without) Redirect URL Rewriting Pattern Notice: On validation, the client’s URL will no longer be the mapped URL, and on navigation the URL will not reflect the current view.
  9. 9. <ul><li>Pros: </li></ul><ul><li>Only one request/response required to render output </li></ul><ul><li>Simple to implement (JSF does it for you) </li></ul><ul><li>Cons: </li></ul><ul><li>URL is no longer bookmarkable </li></ul><ul><li>Physical JSP directory structure and location are exposed to client </li></ul><ul><li>Any parameters parsed out of mapped URL are lost, and must be manually submitted with the form in order to preserve GET URI information </li></ul><ul><ul><li>E.g. A value of: </li></ul></ul><ul><ul><li>/mapped/project/ 24 / </li></ul></ul><ul><ul><li>must now be included in form input data, and either manually mapped to a backing bean, or manually retrieved from request parameter map. </li></ul></ul>(E.g.: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Pros / Cons Mapped JSF Navigation: ( Without) Redirect URL Rewriting Pattern
  10. 10. Web Client JSF App Server Before: Client URL: /mapped/page Client viewing: /faces/page.jsf After: Client URL: /mapped/page Client viewing: /faces/page.jsf (Eg: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Form postback with validation or navigation (Eg: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Mapped JSF Navigation: ( With) Redirect URL Rewriting Pattern <ul><li>Client submits form to /faces/page.jsf </li></ul>2. Server processes navigation and sends redirect to /mapped/page Again, with this solution, we have wasted bandwidth, even if we redisplay the same page. 4. Server renders /mapped/page 3. Client submits request for /mapped/page
  11. 11. (E.g.: PrettyUrlPhaseListener, RestFaces, JBoss Seam, …) Pros / Cons Mapped JSF Navigation: ( With) Redirect URL Rewriting Pattern <ul><li>Pros: </li></ul><ul><li>URL remains bookmarkable </li></ul><ul><li>URL parameter information is preserved </li></ul><ul><li>Cons: </li></ul><ul><li>Physical JSP directory structure and location are still exposed to client in <form action” /faces/exposed/page.jsf ”> </li></ul><ul><li>A second request/response is required </li></ul><ul><ul><li>Increased load on server </li></ul></ul><ul><ul><li>Increased bandwidth </li></ul></ul><ul><ul><li>Increased response time to client </li></ul></ul><ul><li>Difficult to implement </li></ul>
  12. 12. <html> <body> <form action=“/mapped/page”> … </form> </body> </html> /mapped/page Web Client Before: Client URL: /mapped/page Client viewing: /faces/page.jsf After: Client URL: /mapped/page Client viewing: /faces/page.jsf PrettyFaces (Use the mapped URL as the form action) Mapped JSF Navigation: Proposed Solution Using the mapped page URL as the form action, instead of the JSF view ID, and doing conversion on the server, we solve several of our problems.
  13. 13. 1. Client submits form to /mapped/page 2. Server processes navigation and renders new view Web Client JSF App Server Before: Client URL: /mapped/page Client viewing: /faces/page.jsf After: Client URL: /mapped/page Client viewing: /faces/page.jsf or /faces/page2.jsf Notice: The client’s URL will remain correct even after failed validation, or navigation back to the same page. PrettyFaces (Use the mapped URL as the form action) Mapped JSF Navigation: Proposed Solution
  14. 14. <ul><li>Pros: </li></ul><ul><li>URL remains bookmarkable </li></ul><ul><li>URL parameter information is preserved </li></ul><ul><li>Redirect is not required for validation, or in cases where no navigation occurs (client stays on same page) </li></ul><ul><li>Cons: </li></ul><ul><li>Additional configuration </li></ul><ul><li>New framework to learn </li></ul><ul><li>Not compatible with existing frameworks? </li></ul>PrettyFaces (Pros/Cons) Mapped JSF Navigation: Proposed Solution
  15. 15. pretty-config.xml <pretty-config> <url-mapping id=“viewProject”> <pattern> /project/#{viewProjectBean.projectId}/ </pattern> <view-id> #{viewProjectBean.getPrettyTarget} --or-- /faces/viewProject.jspx </view-id> <action method=“#{viewProjectBean.loadData}” /> <post-to-jsf-view /> </url-mapping> </pretty-config> PrettyFaces pretty-config.xml Mapped JSF Navigation: Proposed Solution Prevent manual link generation by using values in mapped EL property to generate dynamic URLs. Specify method(s) to be called after URL params are parsed Allow dynamic specification of view ID, for decoupling of URL from view Enable disabling of pretty-POST
  16. 16. PrettyFaces References Mapped JSF Navigation: Proposed Solution
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×