Friday, September 21, 2012
Monday, September 10, 2012
JSF 2.1 Tip of the Day: Using <iframe /> Elements with PrimeFaces
 |
| Carousel and LightBox |
PrimeFaces offers a component called a Light Box (<p:lightBox />) which supports <iframe /> elements directly. You can see an example from the PrimeFaces showcase for how to use it.
I thought I would share a more interesting approach using a <p:caraousel /> object to display multiple <iframe /> elements in a more "sexy" approach.
The cool thing is that the code is really easy to implement!
The code was developed using NetBeans 7.2 and Apache Maven. The code can be downloaded here: iframe-example.zip
code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <h:head> <title><iframe/> exhibition</title> </h:head> <h:body> <h:form id="form1"> <p:lightBox iframe="true"> <h:outputLink value="#{sessionBean.urls[0]}" title="Java Evangelist John Yeary's Blog"> <h:outputText value="Display Blog"/> </h:outputLink> </p:lightBox> <p:carousel id="carousel1" value="#{sessionBean.urls}" var="url"> <f:facet name="header"> Web Pages </f:facet> <p:panel style="width: 600px; height: 800px;"> <iframe src="#{url}" width="550px;" height="775px;" /> </p:panel> </p:carousel> </h:form> </h:body></html> |
Sunday, September 09, 2012
JSF 2.1 Tip of the Day: Progressive Update, or Graceful Degradation with <f:ajax/>
The design is generally called progressive enhancement. This means that the application will work with basic components, but its functionality is further enhanced using JavaScript and CSS. The same side of the coin is also called graceful degradation. To follow the designs, you must take advantage of the component semantics, for example
alt attribute on <img /> tag.The code below shows you two different ways to use <f:ajax /> to enhance a standard <h:selectBooleanCheckbox />. The second example is not as common. There is also a <h:commandButton /> which can be used just in case JavaScript is disabled.
A best practice when considering your design is to make sure that the form will perform the expected behavior prior to adding AJAX. Once the AJAX is enabled, check to make sure that the behavior is still as expected.
Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <h:form> <h:outputText id="output" value="#{indexBean.checked}"/> <!-- Example 1 --> <h:selectBooleanCheckbox value="#{indexBean.checked}"> <f:ajax event="valueChange" render="output"/> </h:selectBooleanCheckbox> <!-- Example 2 --> <f:ajax event="valueChange" render="output"> <h:selectBooleanCheckbox value="#{indexBean.checked}"/> </f:ajax> <h:commandButton value="Click"/></h:form> |
Saturday, September 08, 2012
JSF 2.1 Tip of the Day: Using <f:ajax/> to Update Element Outside A Form
A JSF forum question was asked on how to update a JSF element outside of a <h:form/> element. This is one solution using <f:ajax/>.
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <h:head> <title><f:ajax/> Example</title> </h:head> <h:body> <!-- Outside of a form element --> <h:outputText id="text" value="#{indexBean.checked}" style="font-size: 24px; color: red; font-weight: bolder; font-variant: small-caps; "/> <h:form id="form1" prependId="false"> <f:ajax render="cbox :text"> <h:selectBooleanCheckbox id="cbox" value="#{indexBean.checked}"/> </f:ajax> </h:form> </h:body></html> |
JSF Tip of the Day: JavaScript Execute a Button Once
I saw this question on a NetBeans forum from a new developer.
"How do you disable a button on a page after one click?"I figured since I was going to answer the question anyway, I would publish a quick example of one way to do it.
1 2 3 4 5 6 7 | <script type="text/javascript"> function once() { alert('Hello'); document.getElementById('form4:button1').onclick = null; document.getElementById('form4:button1').value = 'All Done'; }</script> |
1 2 3 | <h:form id="form4"> <h:button id="button1" onclick="once();return false;" value="Run Once!"/></h:form> |
JSF 2.1 Tip of the Day: PrimeFaces 3.4 Advanced Table Example with JPA
 |
| PrimeFaces 3.4 Data Table |
The example was developed using Maven on NetBeans 7.2. The source code can be downloaded from here: advanced-table.zip.
Index.xhtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | <?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h:head> <title>Advanced PrimeFaces Table</title> </h:head> <h:body> <h:form> <p:dataTable value="#{customerManager.customers}" var="customer"> <p:columnGroup type="header"> <p:row> <p:column colspan="12" headerText="Customers"/> </p:row> <p:row> <p:column colspan="5" headerText="Customer Information"/> <p:column colspan="5" headerText="Address"/> <p:column colspan="2" headerText="Financial"/> </p:row> <p:row> <p:column> <f:facet name="header"> <h:outputText value="ID"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="Customer Name"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="Email"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="Phone"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="Fax"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="Address Line 1"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="Address Line 2"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="City"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="State"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="Zip Code"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="Credit Limit"/> </f:facet> </p:column> <p:column> <f:facet name="header"> <h:outputText value="Discount Rate"/> </f:facet> </p:column> </p:row> </p:columnGroup> <p:column id="cid" > #{customer.customerId} </p:column> <p:column id="nid"> #{customer.name} </p:column> <p:column> #{customer.email} </p:column> <p:column> #{customer.phone} </p:column> <p:column> #{customer.fax} </p:column> <p:column> #{customer.addressline1} </p:column> <p:column> #{customer.addressline2} </p:column> <p:column> #{customer.city} </p:column> <p:column> #{customer.state} </p:column> <p:column> #{customer.zip.zipCode} </p:column> <p:column> #{customer.creditLimit} </p:column> <p:column> #{customer.discountCode.rate}% </p:column> <p:columnGroup type="footer"> <p:row> <p:column colspan="10"/> <p:column footerText="$ #{customerManager.creditTotal}" /> <p:column/> </p:row> </p:columnGroup> </p:dataTable> </h:form> </h:body></html> |
Subscribe to:
Posts
(
Atom
)
