tag:blogger.com,1999:blog-17108703278098836452024-02-20T14:08:44.254-08:00Java Server Faces best practicesAnonymoushttp://www.blogger.com/profile/04976060545064618062noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-1710870327809883645.post-25448593211335851722015-06-01T10:44:00.001-07:002015-06-01T10:44:34.106-07:00Single Page Application: Single Page Application<a href="http://singlepageapplication-spa.blogspot.com/2015/06/blog-post.html?spref=bl">Single Page Application: Single Page Application</a>Anonymoushttp://www.blogger.com/profile/04976060545064618062noreply@blogger.com1tag:blogger.com,1999:blog-1710870327809883645.post-7696752488956238042010-06-05T04:53:00.001-07:002015-06-01T07:12:32.506-07:00<p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">While working on a Java™Server Faces (JSF) project for last 3+ years, I had the opportunity to use Facelets. What I most liked about Facelets was that it let create reusable composition components. Its really great advantage of converting a simple JSP into reusable component. I personally think if we don’t use Facelets with JSF, we might not get the most out of the JSF.</span></font></p> <p><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">There might be serious problem from performance perspective, because of mismatch</span></font> between <font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;">JSP and JSF development. I would recommend to go through</span></font> <b><span style="font-weight: bold;">“</span></b><b><font face="Arial" size="1"><span style="font-size: 9pt; font-family: Arial; font-weight: bold;">Improving JSF by Dumping JSP</span></font></b><b><font face="Arial"><span style="font-family: Arial; font-weight: bold;">” </span></font></b><span class="MsoHyperlink"><u><font color="blue" face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;"><a rel="nofollow" target="_blank" href="http://onjava.com/lpt/a/4919">http<font size="3"><span style="font-size: 12pt;">://</span></font>onjava<font size="3"><span style="font-size: 12pt;">.com/lpt/a/</span></font>4919</a></span></font></u></span><b><font face="Arial"><span style="font-family: Arial; font-weight: bold;"> </span></font></b><font face="Arial"><span style="font-family: Arial;">by </span></font><font face="Arial" size="2"><span style="font-size: 10pt; font-family: Arial;"><a rel="nofollow" target="_blank" href="http://onjava.com/pub/au/138">Hans<font size="3"><span style="font-size: 12pt;"> </span></font>Bergsten</a></span></font><font face="Arial"><span style="font-family: Arial;">, author of </span></font><span class="MsoHyperlink"><u><font color="blue" size="2"><span style="font-size: 10pt;"><a rel="nofollow" target="_blank" href="http://www.oreilly.com/catalog/jsvrfaces/">JavaServer<font face="Arial" size="3"><span style="font-size: 12pt; font-family: Arial;"> </span></font>Faces</a></span></font></u></span><font face="Arial"><span style="font-family: Arial;">.</span></font></p> <p class="MsoNormal" style="line-height: 150%;"><font face="Times New Roman" size="3"><span style="font-size: 12pt; line-height: 150%;">JSF is a stateful UI component based framework. To maintain the state of components, JSF has to create and maintain a tree for the components in the server. The situation would be worst if screen is very complex and having too many UI elements (JSF component). If these trees are not controlled there could be memory leakage and excess consumption of memory by JSF Component tree only. JSF is very easy to use and implement in any project. But the framework is very complex and if we don’t understand the complexity, there could be serious issue in development/maintainers and in performance and scalability. So I would recommend have at least some experts in JSF who can work on optimization of usage of JSF in the project. There could be different area where we need to be very careful while using JSF.</span></font></p> <ol style="margin-top: 0in;" start="1" type="1"><li class="MsoNormal" style="margin-top: 0in; margin-bottom: 0.0001pt; text-align: justify;"><b><font face="Times New Roman" size="3"><span style="font-size: 12pt; font-weight: bold;">Short component Id</span></font></b></li></ol> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><font face="Times New Roman" size="3"><span style="font-size: 12pt; line-height: 150%;">When a HTML page is being rendered by JSF, a client IDs is being generated as the HTML ID. This client ID is the ID of the component itself prefixed with IDs that are inherited from a hierarchy of naming components that contain this component. All such IDs are separated by colons to form the client component ID, example</span></font></p> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><font face="Times New Roman" size="3"><span style="font-size: 12pt; line-height: 150%;">id="Form:tabs:0:datatable:0:_id283"</span></font></p> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><font face="Times New Roman" size="3"><span style="font-size: 12pt; line-height: 150%;">Because these prefixes are being used repeatedly in the HTML pages, the network traffic can be reduced by shortening this prefixes. This will reduce the amount of data to be transferred. For examples:</span></font></p> <ol style="margin-top: 0in;" start="2" type="1"><li class="MsoNormal" style="margin-top: 0in; margin-bottom: 0.0001pt; text-align: justify;"><b><font face="Times New Roman" size="3"><span style="font-size: 12pt; font-weight: bold;">Facelets for dynamic includes</span></font></b></li></ol> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><font face="Times New Roman" size="3"><span style="font-size: 12pt; line-height: 150%;">Facelets integration has a great feature called 'dynamic' includes, which allows the developer to conditionally control what tag content is compiled into the JSF component tree. <ui:include src=”#{..}”/> can be used to dynamically include different content into the page depending on a bean property. </span></font></p> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><font face="Times New Roman" size="3"><span style="font-size: 12pt; line-height: 150%;">If this technique is not used, all tag content will be compiled into the component tree. The advantage of using the dynamic Facelets include mechanism is that the resulting JSF component tree can be made much smaller, consuming less server-side memory. Minimizing the size of the JSF component tree can have a large effect on server-side memory consumption as the JSF component tree usually accounts for the majority of memory consumed in an application.</span></font></p> <ol style="margin-top: 0in;" start="3" type="1"><li class="MsoNormal" style="margin-top: 0in; margin-bottom: 0.0001pt; text-align: justify;"><a rel="nofollow" name="_Toc251692874"><b><font face="Times New Roman" size="3"><span style="font-size: 12pt; font-weight: bold;">Avoid component bindings</span></font></b></a><b><span style="font-weight: bold;"></span></b></li></ol> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><font face="Times New Roman" size="3"><span style="font-size: 12pt; line-height: 150%;">Component binding, easy and sometimes useful represents anti-pattern in JSF development, as it couples the view to the model in the application. </span></font></p> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><font face="Times New Roman" size="3"><span style="font-size: 12pt; line-height: 150%;">There are several things to consider when using component bindings. First, component bindings make it very difficult to refactor JSF pages. As the components are tied to the model, a change to the page may directly affect the model, and/or also require changes to the managed bean used for the binding.</span></font></p> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><font face="Times New Roman" size="3"><span style="font-size: 12pt; line-height: 150%;">The use of component bindings may also have the negative side-effect of possibly causing <span style="border-bottom: 2px dotted rgb(54, 99, 136); cursor: pointer;" class="yshortcuts" id="lw_1275738702_0">memory leaks</span> with component tree management with Facelets and JSF.</span></font></p> <ol style="margin-top: 0in;" start="4" type="1"><li class="MsoNormal" style="margin-top: 0in; margin-bottom: 0.0001pt; text-align: justify;"><b><font face="Times New Roman" size="3"><span style="font-size: 12pt; font-weight: bold;">Avoid using JSF components for static value.</span></font></b></li></ol> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><font face="Times New Roman" size="3"><span style="font-size: 12pt; line-height: 150%;">Using pure <span class="yshortcuts" id="lw_1275738702_1">HTML elements</span> for any static value will reduce the length of the element id. The size of tree will be reduced a lot.</span></font></p>Anonymoushttp://www.blogger.com/profile/04976060545064618062noreply@blogger.com0tag:blogger.com,1999:blog-1710870327809883645.post-91057011982849503162010-06-05T04:53:00.000-07:002010-06-05T04:58:18.866-07:00Java Server Faces best practices<p><span style=";font-family:Arial;font-size:85%;" ><span style=";font-family:Arial;font-size:10pt;" >While working on a Java™Server Faces (JSF) project for last 3+ years, I had the opportunity to use Facelets. What I most liked about Facelets was that it let create reusable composition components. Its really great advantage of converting a simple JSP into reusable component. I personally think if we don’t use Facelets with JSF, we might not get the most out of the JSF.</span></span></p> <p><span style=";font-family:Arial;font-size:85%;" ><span style=";font-family:Arial;font-size:10pt;" >There might be serious problem from performance perspective, because of mismatch</span></span> between <span style=";font-family:Arial;font-size:85%;" ><span style=";font-family:Arial;font-size:10pt;" >JSP and JSF development. I would recommend to go through</span></span> <b><span style="font-weight: bold;">“</span></b><b><span style=";font-family:Arial;font-size:78%;" ><span style="font-weight: bold;font-family:Arial;font-size:9pt;" >Improving JSF by Dumping JSP</span></span></b><b><span style="font-family:Arial;"><span style="font-weight: bold;font-family:Arial;" >” </span></span></b><span class="MsoHyperlink"><u><span style=";font-family:Arial;font-size:85%;color:blue;" ><span style=";font-family:Arial;font-size:10pt;" ><a rel="nofollow" target="_blank" href="http://onjava.com/lpt/a/4919">http<span style="font-size:100%;"><span style="font-size:12pt;">://</span></span>onjava<span style="font-size:100%;"><span style="font-size:12pt;">.com/lpt/a/</span></span>4919</a></span></span></u></span><b><span style="font-family:Arial;"><span style="font-weight: bold;font-family:Arial;" > </span></span></b><span style="font-family:Arial;"><span style="font-family:Arial;">by </span></span><span style=";font-family:Arial;font-size:85%;" ><span style=";font-family:Arial;font-size:10pt;" ><a rel="nofollow" target="_blank" href="http://onjava.com/pub/au/138">Hans<span style="font-size:100%;"><span style="font-size:12pt;"> </span></span>Bergsten</a></span></span><span style="font-family:Arial;"><span style="font-family:Arial;">, author of </span></span><span class="MsoHyperlink"><u><span style=";font-size:85%;color:blue;" ><span style="font-size:10pt;"><a rel="nofollow" target="_blank" href="http://www.oreilly.com/catalog/jsvrfaces/">JavaServer<span style=";font-family:Arial;font-size:100%;" ><span style=";font-family:Arial;font-size:12pt;" > </span></span>Faces</a></span></span></u></span><span style="font-family:Arial;"><span style="font-family:Arial;">.</span></span></p> <p class="MsoNormal" style="line-height: 150%;"><span style=";font-family:Times New Roman;font-size:100%;" ><span style="line-height: 150%;font-size:12pt;" >JSF is a stateful UI component based framework. To maintain the state of components, JSF has to create and maintain a tree for the components in the server. The situation would be worst if screen is very complex and having too many UI elements (JSF component). If these trees are not controlled there could be memory leakage and excess consumption of memory by JSF Component tree only. JSF is very easy to use and implement in any project. But the framework is very complex and if we don’t understand the complexity, there could be serious issue in development/maintainers and in performance and scalability. So I would recommend have at least some experts in JSF who can work on optimization of usage of JSF in the project. There could be different area where we need to be very careful while using JSF.</span></span></p> <ol style="margin-top: 0in;" start="1" type="1"><li class="MsoNormal" style="margin-top: 0in; margin-bottom: 0.0001pt; text-align: justify;"><b><span style=";font-family:Times New Roman;font-size:100%;" ><span style="font-weight: bold;font-size:12pt;" >Short component Id</span></span></b></li></ol> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><span style=";font-family:Times New Roman;font-size:100%;" ><span style="line-height: 150%;font-size:12pt;" >When a HTML page is being rendered by JSF, a client IDs is being generated as the HTML ID. This client ID is the ID of the component itself prefixed with IDs that are inherited from a hierarchy of naming components that contain this component. All such IDs are separated by colons to form the client component ID, example</span></span></p> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><span style=";font-family:Times New Roman;font-size:100%;" ><span style="line-height: 150%;font-size:12pt;" >id="Form:tabs:0:datatable:0:_id283"</span></span></p> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><span style=";font-family:Times New Roman;font-size:100%;" ><span style="line-height: 150%;font-size:12pt;" >Because these prefixes are being used repeatedly in the HTML pages, the network traffic can be reduced by shortening this prefixes. This will reduce the amount of data to be transferred. For examples:</span></span></p> <ol style="margin-top: 0in;" start="2" type="1"><li class="MsoNormal" style="margin-top: 0in; margin-bottom: 0.0001pt; text-align: justify;"><b><span style=";font-family:Times New Roman;font-size:100%;" ><span style="font-weight: bold;font-size:12pt;" >Facelets for dynamic includes</span></span></b></li></ol> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><span style=";font-family:Times New Roman;font-size:100%;" ><span style="line-height: 150%;font-size:12pt;" >Facelets integration has a great feature called 'dynamic' includes, which allows the developer to conditionally control what tag content is compiled into the JSF component tree. <ui:include src="%E2%80%9D#%7B..%7D%E2%80%9D/"> can be used to dynamically include different content into the page depending on a bean property. </ui:include></span></span></p> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><span style=";font-family:Times New Roman;font-size:100%;" ><span style="line-height: 150%;font-size:12pt;" >If this technique is not used, all tag content will be compiled into the component tree. The advantage of using the dynamic Facelets include mechanism is that the resulting JSF component tree can be made much smaller, consuming less server-side memory. Minimizing the size of the JSF component tree can have a large effect on server-side memory consumption as the JSF component tree usually accounts for the majority of memory consumed in an application.</span></span></p> <ol style="margin-top: 0in;" start="3" type="1"><li class="MsoNormal" style="margin-top: 0in; margin-bottom: 0.0001pt; text-align: justify;"><a rel="nofollow" name="_Toc251692874"><b><span style=";font-family:Times New Roman;font-size:100%;" ><span style="font-weight: bold;font-size:12pt;" >Avoid component bindings</span></span></b></a><b><span style="font-weight: bold;"></span></b></li></ol> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><span style=";font-family:Times New Roman;font-size:100%;" ><span style="line-height: 150%;font-size:12pt;" >Component binding, easy and sometimes useful represents anti-pattern in JSF development, as it couples the view to the model in the application. </span></span></p> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><span style=";font-family:Times New Roman;font-size:100%;" ><span style="line-height: 150%;font-size:12pt;" >There are several things to consider when using component bindings. First, component bindings make it very difficult to refactor JSF pages. As the components are tied to the model, a change to the page may directly affect the model, and/or also require changes to the managed bean used for the binding.</span></span></p> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><span style=";font-family:Times New Roman;font-size:100%;" ><span style="line-height: 150%;font-size:12pt;" >The use of component bindings may also have the negative side-effect of possibly causing <span style="border-bottom: 2px dotted rgb(54, 99, 136); cursor: pointer;" class="yshortcuts" id="lw_1275738702_0">memory leaks</span> with component tree management with Facelets and JSF.</span></span></p> <ol style="margin-top: 0in;" start="4" type="1"><li class="MsoNormal" style="margin-top: 0in; margin-bottom: 0.0001pt; text-align: justify;"><b><span style=";font-family:Times New Roman;font-size:100%;" ><span style="font-weight: bold;font-size:12pt;" >Avoid using JSF components for static value.</span></span></b></li></ol> <p class="MsoNormal" style="margin-left: 0.75in; line-height: 150%;"><span style=";font-family:Times New Roman;font-size:100%;" ><span style="line-height: 150%;font-size:12pt;" >Using pure <span class="yshortcuts" id="lw_1275738702_1">HTML elements</span> for any static value will reduce the length of the element id. The size of tree will be reduced a lot.</span></span></p>Anonymoushttp://www.blogger.com/profile/04976060545064618062noreply@blogger.com0tag:blogger.com,1999:blog-1710870327809883645.post-10539096208211210402010-05-31T07:31:00.000-07:002010-05-31T07:42:50.267-07:00ICEFaces for next generation web application<p class="MsoNormal" style="text-align: justify;"><span class="blog-entry"><span style=";font-family:Arial;font-size:85%;" ><span style=";font-family:Arial;font-size:10pt;" >Hi All, my name is Mohammed Meraj; I have more than 9 years of experience in JAVA-J2EE platform. I have been working on JSF for more than 3.5 years.</span></span></span><span style=";font-family:Arial;font-size:85%;" ><span style=";font-family:Arial;font-size:10pt;" ><br /> <br /> <span class="blog-entry"><b><span style="font-weight: bold;">JSF </span></b>is one of the fastest growing and stable UI component based framework and <b><span style="font-weight: bold;">ICEFaces </span></b>has contributed a lot to make JSF Component more rich and easy to use in complex projects. I had started using ICEFaces since 1.6.1 (2007) version.</span><br /> <span class="blog-entry">I really appreciate the kind of improvement done in the ICEFaces by ICEsoft guys. Honestly when I had started using <b><span style="font-weight: bold;">ICEFaces</span></b>, it had lots of issues and struggle a lot (one fact could be due to new in JSF for me). But when you compare now, we can see a lot of differences in all respects whether its richness of UI components, performance efficient. Etc. most important thing is than even <b><span style="font-weight: bold;">ICEFaces </span></b>is open source, ICEsoft is constantly working to improve stable the <b><span style="font-weight: bold;">ICEFaces </span></b>component.</span><br /> <br /> <span class="blog-entry">I will share my experience with ICEFaces and ICEsoft for only selected area which was challenging in our projects. Rest detail; we can find in <a rel="nofollow" target="_blank" href="http://icefaces.org/"><span class="yshortcuts" id="lw_1275316875_0">http://icefaces.org.</span></a></span><br /> <br /><span class="blog-entry"><b><span style="font-weight: bold;">Ajax</span></b></span><span class="blog-entry"><b><span style="font-weight: bold;"> Based UI Components:</span></b> IceFaces provides a rich web presentation environment for Java Server Faces (JSF) applications that enhances the standard JSF framework and lifecycle with AJAX-based interactive features. Recently ICEFaces have introduced composite components which have lot of real world rich component that can be easily fulfilling complex requirement.</span><br /> <br /> <span class="blog-entry"><b><span style="font-weight: bold;">For standard component please visit:</span></b> <a rel="nofollow" target="_blank" href="http://component-showcase.icefaces.org/component-showcase/showcase.iface"><span class="yshortcuts" id="lw_1275316875_1">http://component-showcase.icefaces.org/component-showcase/sh owcase.iface</span></a></span><br /> <br /> <span class="blog-entry"><b><span style="font-weight: bold;">For composite component please visit: </span></b><a rel="nofollow" target="_blank" href="http://composite-component-showcase.icefaces.org/icefaces-composite-comps-showcase/showcase.iface"><span class="yshortcuts" id="lw_1275316875_2">http://composite-component-showcase.icefaces.org/icefaces-co mposite-comps-showcase/showcase.iface</span></a></span><br /> <br /> <br /> <span class="blog-entry"><b><span style="font-weight: bold;">Direct-2-DOM (D2D):</span></b> I like the most about ICEFaces is about D2D rendering. Let me explain a bit about Direct-2-DOM (D2D) rendering. ICEfaces employs a technique called 'Direct-2-DOM' rendering, or D2D for short, to achieve smooth incremental page updates to the browser. ICEfaces stores a copy of the DOM, which represents the browser presentation state in a <span class="yshortcuts" id="lw_1275316875_3">tree structure</span>, on the server. When the user interacts with the page, an Ajax call may be made to the server, resulting in a change to the application state, which in turn will cause the page to be re-rendered on the server. Once the page is re-rendered on the server, and before the response is sent back to the browser, ICEfaces differs the old and new DOM trees to create a DOM update, which comprises the essential changes to the page which need to be sent back to the browser. These DOM updates, when received by the browser, are then evaluated and the browser DOM is reconstructed and updated with the necessary changes. </span><br /> <br /> <span class="blog-entry">The benefit of D2D in that when ever any field value changed the dependent field update automatically, we don’t need to explicitly refresh the dependent block this saves lot of code and complexity an other important benefit we get is optimized server to client data transfer, only changed data is transfered from server to client.</span><br /> <br /> <span class="blog-entry"><b><span style="font-weight: bold;">Concurrent DOM Views : </span></b>ICEFaces also provide multi window concept (Concurrent DOM Views), where same screen can be access at same time. Let me explain a bit. In our project user can access same module more than once let say user wants open a screen to view some customer detail at the same time user also wants to create new customer detail, this could be easily possible with the help of Concurrent DOM Views concept of ICEFaces.</span><br /> <br /> <br /> <span class="blog-entry"><b><span style="font-weight: bold;">Preventing Double Submit:</span></b> ICEFaces also handled one of the crucial and important requirement is preventing double submit. If this issue is not handled in any of the projects this could be serious issue from business perspective.</span></span></span></p><p class="MsoNormal" style="text-align: justify;"><span style=";font-family:Arial;font-size:85%;" ><span style=";font-family:Arial;font-size:10pt;" ><span style="font-weight: bold;">Ajax Push:</span> For real time notification asynchronously for the application users.<br /> <br /> <span class="blog-entry"><b><span style="font-weight: bold;">Rich Themes:</span></b> ICEFaces also provide rich and standard set of themes e.g. rime, xp and royale.</span><br /> <br /> <span class="blog-entry"><b><span style="font-weight: bold;">Great technical support: </span></b>A lot of forum and experts are there to support you if you stuck any where.</span><br /> <br /> <span class="blog-entry"><b><span style="font-weight: bold;">Dont miss my next blog, on best practices and how to use JSF-ICEFaces in an optimized way from performance, scalability and maintainability perspective.</span></b></span></span></span></p>Anonymoushttp://www.blogger.com/profile/04976060545064618062noreply@blogger.com2