2013 Marty Hall

Customized Java EE Training: http://courses.coreservlets.com/

J ava, J SF 2, PrimeFaces, Servlets, J SP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
JSF 2.0 Composite Components
Part IV Wrapping JavaScript GUIs
Originals of Slides and Source Code for Examples:
http://www.coreservlets.com/JSF-Tutorial/jsf2/
2013 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
J ava, J SF 2, PrimeFaces, Servlets, J SP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
For live training on JSF 2 and/or PrimeFaces,
see http://courses.coreservlets.com/
or email [email protected].
Taught by the author of Core Servlets and J SP, More Servlets
and J SP, and this tutorial. Available at public venues, or
customized versions can be held on-site at your organization.
Courses developed and taught by Marty Hall
J SF 2, PrimeFaces, servlets/J SP, Ajax, jQuery, Android development, J ava 6 or 7 programming, custom mix of topics
Courses available in any state or country. Maryland/DC area companies can also choose afternoon/evening courses.
Courses developed and taught by coreservlets.com experts (edited by Marty)
Spring, Hibernate/J PA, GWT, Hadoop, SOAP-based and RESTful Web Services
Contact [email protected] for details
Topics in This Section
Loading JavaScript libraries
Wrapping up a jQuery-UI element as a JSF2
component
Finding the real HTML id
Escaping colons in JavaScript
Passing arguments to the JavaScript
5
2013 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
J ava, J SF 2, PrimeFaces, Servlets, J SP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Review: Input
Components
Input Components
Idea
A composite component that will go inside h:form and be
used to gather input from the user
Features
Must be associated with a bean value
Use type attribute to enforce the type of the value
Often has its own style sheet
Load with h:outputStylesheet
May need to assemble final value out of submitted pieces
May need to call component setter methods based on
attribute values
May have embedded Ajax behavior
May be built out of a rich J avaScript GUI element
7
2013 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
J ava, J SF 2, PrimeFaces, Servlets, J SP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Wrapping Up GUI
Elements from
JavaScript Libraries
Wrapping Up JavaScript GUI
Elements: Idea
Motivation
If you need a rich GUI element (slider, popup calendar,
etc.) that is not already part of your J SF library
Options
Look at existing component libraries
PrimeFaces, RichFaces, IceFaces, OpenFaces,
Tomahawk, Trinidad, etc.
Use an element from jQuery UI, Ext/J S, Dojo, YUI etc.
But wrap it up so that it can be used like a normal J SF
component.
9
Wrapping Up JavaScript GUI
Elements: Steps
Load the core JavaScript library
Use h:outputScript with target="head"
Load your own JavaScript file
Again, use h:outputScript.
To avoid name conflicts, use namespaces for functions
Covered in next section
Designate the input element of interest
By class, if all input elements will be treated the same
Covered in this section
By id, if you will pass custom arguments to each element
Must compute real HTML ID and handle the fact that J SF ids contain
colons. Covered in next section.
Convert values
Use standard converter (e.g., f:convertDateTime)
Make your own converter
Implement Converter, override getAsObject & getAsString
10
Example: Popup Calendar
(Date Picker) from jQuery UI
Load jQuery and jQuery UI
<h:outputStylesheet name="jquery-ui.css" library="css/jquery-ui"/>
<h:outputScript name="jquery.js" library="scripts" target="head"/>
<h:outputScript name="jquery-ui.js" library="scripts" target="head"/>
Load custom JavaScript file
<h:outputScript name="jquery-ui-setup.js" library="scripts" target="head"/>
Give custom CSS class to h:inputText
<h:inputText styleClass="date" >
In setup file for on load: $(".date").datepicker();
Use Date/Time converter
<h:inputText styleClass="date" value="#{cc.attrs.value}">
<f:convertDateTimepattern="MM/dd/yyyy"/>
</h:inputText>
11
Component File
<composite:interface>
<composite:attribute name="value" type="java.util.Date"/>
</composite:interface>
<composite:implementation>
<h:outputStylesheet name="jquery-ui.css"
library="css/jquery-ui"/>
<h:outputScript name="jquery.js" library="scripts"
target="head"/>
<h:outputScript name="jquery-ui.js" library="scripts"
target="head"/>
<h:outputScript name="jquery-ui-setup.js" library="scripts"
target="head"/>
<h:inputText styleClass="date" value="#{cc.attrs.value}">
<f:convertDateTime pattern="MM/dd/yyyy"/>
</h:inputText>
</composite:implementation>
12
Custom JavaScript File
$(function() {
$(".date").datepicker();
});
13
In jQuery, $(function() {}) is like a smart
window.onload function. It is smart in the sense
that it does not overwrite existing onload
functions, and it runs after the DOMis parsed
but potentially before images are loaded. jQuery
and jQuery UI are covered in separate sections
in the Ajax/jQuery tutorial at coreservlets.com.
This means to find all HTML elements (textfields,
in this case) that have class=date and turn
theminto date pickers (i.e., textfields that contain
dates and pop up calendars when you click in
them).
Example Usage:
Reservations at the JSF Resort
Idea
Same as previous: let user make a hotel reservation.
But, use a jQuery date picker (popup calendar) instead of three
separate select menus
Managed Bean
Extends previous example, two changes:
setStartDate and setEndDate add one day to the date, since days
of month in SimpleDateFormat start at 0, not 1
Adds a 2 to the end of the return value, since results page uses a
different managed bean
Page that uses component
Same as last example: collects name, checkindate, and checkout
date.
Results page
Same as previous example except for managed bean name
14
Managed Bean (First Half)
@ManagedBean
public class ResortBean2 extends ResortBean {
@Override
public void setStartDate(Date startDate) {
super.setStartDate(DateUtils.nextDay(startDate));
}
@Override
public void setEndDate(Date endDate) {
super.setEndDate(DateUtils.nextDay(endDate));
}
15
Managed Bean (Second Half)
@Override
public String register() {
String returnValue = super.register();
if (returnValue != null) {
returnValue = returnValue + "2";
}
return(returnValue);
}
}
16
Facelets Page that Uses
Component
...
<h:form id="registrationForm">
<h2>Register for the JSF Resort</h2>
<utils:inputName2 value="#{resortBean2}"
firstNamePrompt="First (Given) Name"
lastNamePrompt="Last (Family) Name"/>
<b>Start date:</b>
<utils:inputDate4 value="#{resortBean2.startDate}"/><br/>
<b>End date:</b>
<utils:inputDate4 value="#{resortBean2.endDate}"
id="checkoutDate"/>
<h:message for="registrationForm:checkoutDate"
styleClass="error"/><br/>
<h:commandButton action="#{resortBean2.register}"
value="Register"/><p/>
</h:form>
...
17
Result: Page that Uses
Component
18
Original (blank) form
After clicking in the top
(start date) field
Result: Results Page
19
2013 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
J ava, J SF 2, PrimeFaces, Servlets, J SP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Passing Arguments to
JavaScript
Passing Arguments to
JavaScript
Motivation
Rather than making all date pickers look the same, you
may want to collect component attributes (start date, end
date, number of months to display, etc.) and pass those
values to the underlying J avaScript.
Issues
You need to find the real HTML id
Concatenate #{cc.clientId}with a colon and the id used in
component file
In jQuery, you must escape the colons
Colons have special meaning in jQuery selector patterns,
so you must replace each : with \\: before using the
string as a jQuery selector
21
Passing Arguments:
Code Summary
JavaScript code
var coreservlets={};
coreservlets.escapeColons=function(string) {
return(string.replace(/:/g, "\\:"));
};
coreservlets.jQueryIdString=function(fieldId) {
return("#" +coreservlets.escapeColons(fieldId));
};
Composite component
<h:inputText value="#{cc.attrs.value}" id="date">
<script type="text/javascript">
$(function() {
var fieldId=coreservlets.jQueryIdString("#{cc.clientId}" +":date");
$(fieldId).datepicker({ });
});
</script> 22
Options for jQuery UI GUI
Elements
Without options
$("some-selector").somemethod();
E.g., $("textfield-id").datepicker();
With options
$("some-selector").somemethod({ option1: value1,
option1: value2,

optionN: valueN});
Warnings
Dont forget the curly braces
Misspelled option names are ignored no error message
No trailing comma after the last option
23
Main Options for
datepicker({})
defaultDate (default: today)
Initially selected date
changeMonth, changeYear (default: false)
Should jQuery include a dropdown list to let you choose
the month or year?
dayNames (default SundaySaturday)
monthNames (default JanuaryDecember)
Names to use for the days and months. For other
languages. There are also various options for short
versions of days.
numberOfMonths (default: 1)
How many months to show at a time
24
Component File:
Interface Section
<composite:interface>
<composite:attribute name="value" type="java.util.Date"/>
<composite:attribute name="changeMonth" default="false"/>
<composite:attribute name="changeYear" default="false"/>
<composite:attribute name="numberOfMonths" default="1"/>
</composite:interface>
25
Component File:
Implementation Section
<composite:implementation>
<h:outputStylesheet name="jquery-ui.css" library="css/jquery-ui"/>
<h:outputScript name="jquery.js" library="scripts" target="head"/>
<h:outputScript name="jquery-ui.js" library="scripts" target="head"/>
<h:outputScript name="jquery-ui-setup.js" library="scripts" target="head"/>
<h:inputText value="#{cc.attrs.value}" id="date">
<f:convertDateTime pattern="MM/dd/yyyy"/>
</h:inputText>
<script type="text/javascript">
$(function() {
var fieldId = coreservlets.jQueryIdString("#{cc.clientId}" + ":date");
$(fieldId).datepicker({ changeMonth: #{cc.attrs.changeMonth},
changeYear: #{cc.attrs.changeYear},
numberOfMonths: #{cc.attrs.numberOfMonths}});
});
</script>
</composite:implementation>
26
Custom JavaScript File
var coreservlets = {};
coreservlets.escapeColons = function(string) {
return(string.replace(/:/g, "\\:"));
};
coreservlets.jQueryIdString = function(fieldId) {
return("#" + coreservlets.escapeColons(fieldId));
};
27
This sets up an empty object to use as a namespace,
to reduce the chance of name conflicts. The functions
will be properties in that object. This is similar syntax
to static methods in Java. See the coreservlets.com
JavaScript tutorial for details on this technique.
Given "foo:bar:baz", returns "foo\:bar\:baz". For use
in inputDate5, where each input element has its own
id, but the id will contain ":" due to the JSF
conventions. In jQuery, if you have <... id="foo:bar"/>,
you cannot do $("#foo:bar") because ":" has special
meaning. So, you must do $("#foo\:bar") instead.
Given "foo:date", returns "#foo\:date". That is, prepends "#" on the
front, then escapes colons. This yields an escaped version of the
CSS id selector string that can be used by jQuery.
Example Usage:
Reservations at the JSF Resort
Idea
Same as previous: let user make a hotel reservation.
But, pass options to the datepicker function
Managed Bean
Unchanged from previous example
Page that uses component
Same as last example: collects name, checkindate, and
checkout date.
But, supplies attributes that customize the number of months
shown and whether a month or year menu is shown
Results page
Unchanged from previous example
28
Facelets Page that Uses
Component
...
<h:form id="registrationForm">
<h2>Register for the JSF Resort</h2>
<utils:inputName2 value="#{resortBean2}"
firstNamePrompt="First (Given) Name"
lastNamePrompt="Last (Family) Name"/>
<b>Start date:</b>
<utils:inputDate5 value="#{resortBean2.startDate}"/><br/>
<b>End date:</b>
<utils:inputDate5 value="#{resortBean2.endDate}"
changeMonth="true" changeYear="true"
numberOfMonths="2" id="checkoutDate"/>
<h:message for="registrationForm:checkoutDate"
styleClass="error"/><br/>
<h:commandButton action="#{resortBean2.register}"
value="Register"/><p/>
</h:form>
... 29
Result: Page that Uses
Component
30
Default date picker.
Date picker with number of months
displayed set to 2, and month/year
menus enabled.
Result: Results Page
31
2013 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
J ava, J SF 2, PrimeFaces, Servlets, J SP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Wrap-Up
Summary
Basics
Load J avaScript via h:outputScript with target="head"
Passing arguments to JavaScript
Find real (HTML) id with
"#{cc.clientId}" +":local-id"
Replace colons with "\\:"
Pass result to jQuery $ function
Caution
Consider using existing component libraries (e.g.,
PrimeFaces, RichFaces) before wrapping your own
components
33
2013 Marty Hall
Customized Java EE Training: http://courses.coreservlets.com/
J ava, J SF 2, PrimeFaces, Servlets, J SP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Questions?
JSF2, PrimeFaces, Java7, Ajax, jQuery, Hadoop, RESTful WebServices, Android, Spring, Hibernate, Servlets, JSP, GWT, andother JavaEEtraining.
AlsoseeJSF2tutorial andPrimeFaces tutorial.