Layout Components www.icefaces.org ICESOFT TECHNOLOGIES INC. - PowerPoint PPT Presentation

Layout Components www.icefaces.org ICESOFT TECHNOLOGIES INC.

Component Naming Schemes • Here is the general naming scheme for ICEfaces component tags: – Layout Components: panel* – Input Components: input* – Output Components: output* – Selection Components: select* www.icefaces.org ICESOFT TECHNOLOGIES INC.

ice:panelGroup • Work horse of the panel components • Renders child components surrounded by a HTML <div></div> • Base container for the following dynamic behaviours – Drag and drop source and target configuration – Draggable container option – Context menu linking – Panel tool tip linking – Effects container • Default CSS class name is icePnlGrp www.icefaces.org ICESOFT TECHNOLOGIES INC.

ice:panelGrid • Convenient wrapper for displaying non-iterative data in an HTML <table/> tag • Child components are each place in a table cell. • New rows are defined by the integer attribute “columns”. Once x number or child component are rendered a new row is started • Default CSS class name applied to the <table /> tag is icePnlGrd. CSS class can be applied to rows and columns • Warning! No functionality for column or row spanning www.icefaces.org ICESOFT TECHNOLOGIES INC.

ice:panelSeries • The panelSeries component provides a mechanism for dynamically generating a series of repeating child- components within a panel • Child components define the rendered layout • Default CSS name applied to the parent <div/> is icePnlSrs • Flexible component iterator -- essentially a dataTable with out the <table /> • Ability to use with an ice:dataPaginator in order to provide pagination of results www.icefaces.org ICESOFT TECHNOLOGIES INC.

ice:panelTabSet • Renders a table driven tabbed user interface. • Comes in two flavours, declarative and iterative • The parent tag <ice:panelTabSet /> contain child tags <ice:panelTab /> in either flavour • Selected tab change event can be optionally configured • Selected tab can also be dynamically changed via a backing bean value • CSS styling for this component is complex but also very flexible www.icefaces.org ICESOFT TECHNOLOGIES INC.

ice:panelCollabsible • This component allows the user to hide content and have it expand when the header is clicked www.icefaces.org ICESOFT TECHNOLOGIES INC.

Other Layout Components • panelPopup – Modal and popup modes, will be covered in Facelet composite components • panelStack – Similar to Swing component of the same name. – Not a good component to use when trying to minimize the weight of the component tree on the server weight of the component tree on the server • Newer Components: – panelDivider, split pain with dynamic divider – panelTooltip, popup container – menuContext, right-click popup context menu www.icefaces.org ICESOFT TECHNOLOGIES INC.

Auto Complete Component www.icefaces.org ICESOFT TECHNOLOGIES INC.

Auto-Complete Component • ice:selectInputText component provides an inputText component enhanced with auto-complete functionality • The component requires developers to implement the matching list search algorithm in their backing bean • The ice:selectInputText component can generate one of two types of lists: – A list of String data – A list of arbitrarily complex child components www.icefaces.org ICESOFT TECHNOLOGIES INC.

Exercise: Overview • The goal of this exercise is to add auto-complete functionality to the city field of the form • When done, the user will be able to select a city from an auto-complete drop-down list, and the city, provinceId, and postalCode fields will be updated automatically www.icefaces.org ICESOFT TECHNOLOGIES INC.

Step 1: Auto-Complete Component • The city field is currently using an ice:inputText component for user entry • Rename ice:inputText with ice:selectInputText for the city field www.icefaces.org ICESOFT TECHNOLOGIES INC.

Step 2: Add valueChangeListener for city • In order to detect that the user has typed in some characters into the city field, we need to add a valueChangeListener • Add the following attribute to the ice:selectInputText component: valueChangeListener="#{applicantForm.cityListener}" • Open ApplicantForm.java in the IDE and paste the following method: public void cityListener(ValueChangeEvent valueChangeEvent) { FacesContext facesContext = FacesContext.getCurrentInstance(); UIViewRoot uiViewRoot = facesContext.getViewRoot(); String cityNameStartsWith = (String)valueChangeEvent.getNewValue(); getCitySupport().filterSelectItems(cityNameStartsWith); City city = getCitySupport().getCityByName(cityNameStartsWith); if (city != null) { UIInput cityInputText = (UIInput) uiViewRoot.findComponent("applicantForm:city"); cityInputText.setSubmittedValue(city.getCityName()); cityInputText.setValue(city.getCityName()); UIInput provinceInputText = (UIInput) uiViewRoot.findComponent("applicantForm:provinceId"); provinceInputText.setSubmittedValue(Long.toString(city.getProvinceId())); provinceInputText.setValue(city.getProvinceId()); UIInput postalCodeInputText = (UIInput) uiViewRoot.findComponent("applicantForm:postalCode"); postalCodeInputText.setSubmittedValue(city.getPostalCode()); postalCodeInputText.setValue(city.getPostalCode()); FacesContextHelper.clearImmediateFacesMessages(facesContext); } } • Note the call to getCityByName() which will eliminate the hard coded value of “Orlando” in the backing bean www.icefaces.org ICESOFT TECHNOLOGIES INC.

Step 3: Add immediate attribute • Normally valueChangeListeners fire during the PROCESS_VALIDATIONS phase of the JSF lifecycle • But in order to avoid seeing extraneous validation failures, we need to add immediate=“true” to the auto-complete component • Open the applicantForm.xhtml file in the IDE • Open the applicantForm.xhtml file in the IDE • Add the following to the ice:selectInputText tag: immediate= " true " www.icefaces.org ICESOFT TECHNOLOGIES INC.

Step 4: Replace valueChangeListener for postalCode • Replace the entire postalCodeListener() method with the following code: public void postalCodeListener(ValueChangeEvent valueChangeEvent) { FacesContext facesContext = FacesContext.getCurrentInstance(); UIViewRoot uiViewRoot = facesContext.getViewRoot(); String newPostalCode = (String) valueChangeEvent.getNewValue(); City city = getCitySupport().getCityByPostalCode(newPostalCode); if (city != null) { UIInput cityInputText = (UIInput) uiViewRoot.findComponent("applicantForm:city"); cityInputText.setSubmittedValue(city.getCityName()); cityInputText.setValue(city.getCityName()); UIInput provinceInputText = (UIInput) uiViewRoot.findComponent("applicantForm:provinceId"); provinceInputText.setSubmittedValue(Long.toString(city.getProvinceId())); provinceInputText.setValue(city.getProvinceId()); UIInput postalCodeInputText = (UIInput) uiViewRoot.findComponent("applicantForm:postalCode"); postalCodeInputText.setSubmittedValue(city.getPostalCode()); postalCodeInputText.setValue(city.getPostalCode()); FacesContextHelper.clearImmediateFacesMessages(facesContext); } } • Note the call to getCityByPostalCode() which will eliminate the hard coded value of “32801” for Orlando in the backing bean – now the code will work with any known postal code www.icefaces.org ICESOFT TECHNOLOGIES INC.

Step 5: Add Select Items • In order to populate the auto-complete list with items: – Add the following “iterator” attributes to the ice:selectInputText component: listVar="city" listValue="#{citySupport.selectItems}" – Add the following f:facet component as a child of the ice:selectInputText component: <f:facet name="selectInputText"> <f:facet name="selectInputText"> <ice:panelGrid columns="2"> <ice:outputText id="autoCompleteCity" value="#{city.cityName}" /> <ice:outputText id="autoCompletePostalCode" value="#{city.postalCode}" /> </ice:panelGrid> </f:facet> www.icefaces.org ICESOFT TECHNOLOGIES INC.

Step 6: Add City Transfer Object • Create a new Java class: – training.jobapplication.transfer.City • Add the following properties: private long cityId; private long provinceId; private String cityName; private String postalCode; • Generate getters/setters for each property • Add the following constructor: • Add the following constructor: public City(long cityId, long provinceId, String cityName, String postalCode) { this.cityId = cityId; this.provinceId = provinceId; this.cityName = cityName; this.postalCode = postalCode; } www.icefaces.org ICESOFT TECHNOLOGIES INC.

Step 7: Remove Obsolete Injection • Open the ApplicantForm.java file in the IDE • Remove the following line, because we don’t need it anymore: private ProvinceSupport provinceSupport; • Remove the corresponding getProvinceSupport() and setProvinceSupport() method, because we don’t need it anymore either • Open the faces-config.xml file in the IDE • Remove the managed-property that injects the provinceSupport into • Remove the managed-property that injects the provinceSupport into the applicantForm backing bean: <managed-property> <property-name>provinceSupport</property-name> <value>#{provinceSupport}</value> </managed-property> www.icefaces.org ICESOFT TECHNOLOGIES INC.