Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Server Technologies - JavaServer™ Faces Web Applications

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Text and Graphics JSF Components

Figure 26.14 displays a simple form for gathering user input.

Text and Graphics Components


Figure 26.14 displays a simple form for gathering user input. This example uses all the components listed in Fig. 26.13, except Label, which you will see in later examples. All the code in Fig. 26.14 was generated by Netbeans in response to actions performed in De-sign mode. This example does not perform any tasks when the user clicks Register. We ask you to add functionality to this example as an exercise. In successive examples, we demon-strate how to add functionality to many of these JSF components.


Before discussing the JSF components used in this JSP file, we explain the XHTML that creates the layout in Fig. 26.14. As discussed previously, Netbeans uses absolute posi-tioning, so components are rendered wherever they were dropped in the Visual Editor. In this example, in addition to absolute positioning, we use a Grid Panel component (lines 37–61) from the Palette’s Layout component group. The h: prefix indicates that it can be found in the JSF HTML tag library. This component, an object of class HtmlPanelGrid in package javax.faces.component.html, controls the positioning of the components it contains. The Grid Panel component allows the designer to specify the number of columns the grid should contain. Components may then be dropped anywhere inside the panel, and they will automatically be repositioned into evenly spaced columns in the order in which they are dropped. When the number of components exceeds the number of col-umns, the panel moves the additional components to a new row. In this way, the Grid Panel behaves like an XHTML table, and is in fact rendered to the browser as an XHTML table. In this example, we use the Grid Panel to control the positions of the Image and Text Field components in the user information section of the page.


1   <?xml version = "1.0" encoding = "UTF-8" ?>



94  <!-- Fig. 26.14: WebComponents.jsp -->


95  <!-- Registration form that demonstrates JSF components -->


96  <jsp:root version = "1.2"


97        xmlns:f = ""


98        xmlns:h = ""


99        xmlns:jsp = ""


100     xmlns:webuijsf = "">


101       < contentType = "text/html;charset=UTF-8"


102              pageEncoding = "UTF-8" />


103       <f:view>


104       <webuijsf:page binding = "#{WebComponents.page1}" id = "page1">


105              <webuijsf:html binding = "#{WebComponents.html1}" id = "html1">


<webuijsf:head binding = "#{WebComponents.head1}" id = "head1"

16        title      =          "Sample Registration Form">

17        <webuijsf:link binding = "#{WebComponents.link1}"

18        id         =          "link1" url = "/resources/stylesheet.css" />

19        </webuijsf:head>


20        <webuijsf:body binding = "#{WebComponents.body1}" id = "body1"



21        style = "-rave-layout: grid">

22        <webuijsf:form binding = "#{WebComponents.form1}"

23        id = "form1">

24        <webuijsf:staticText binding = "#{WebComponents.header}"

25                    id = "header" style = "font-size: 18px; left: 24px;

26                    top: 24px; position: absolute; width: 264px"

27                    text = "This is a sample registration form" />

28        <webuijsf:staticText

29                    binding = "#{WebComponents.instructions}"

30                    id = "instructions" style = "font-size: 12px;

31                    font-style: italic; left: 24px; top: 48px;

32                    position: absolute"

33                    text = "Please fill in all fields and click Register"/>

34                    <webuijsf:image binding = "#{WebComponents.userImage}"            

35                    id = "userImage" style = "left: 24px; top: 72px;               

36                    position: absolute" url = "/resources/user.JPG" />                    

37                    <h:panelGrid binding = "#{WebComponents.gridPanel}"       

38                    columns = "4" id = "gridPanel" style = "height: 96px;   

39                    left: 24px; top: 96px; position: absolute" 

40                    width = "576">         

41                    <webuijsf:image binding = "#{WebComponents.image1}"

42                    id = "image1" url = "/resources/fname.JPG" />


44                                binding = "#{WebComponents.firstNameTextField}"               

45                                id = "firstNameTextField" />                       

46                                <webuijsf:image binding = "#{WebComponents.image2}"     

47                                id = "image2" url = "/resources/lname.JPG" />  

48                                <webuijsf:textField  

49                                binding = "#{WebComponents.lastNameTextField}"   

50                                id = "lastNameTextField" />           

51                                <webuijsf:image binding = "#{WebComponents.image4}"     

52                                id = "image4" url = "/resources/email.JPG" />    

53                                <webuijsf:textField  

54                                binding = "#{WebComponents.emailTextField}"           

55                                id = "emailTextField" />      

56                                <webuijsf:image binding = "#{WebComponents.image3}"     

57                                id = "image3" url = "/resources/phone.JPG" />  

58                                <webuijsf:textField  

59                                binding = "#{WebComponents.phoneTextField}"         

60                                id = "phoneTextField" />    

61        </h:panelGrid>        

62        <webuijsf:image binding = "#{WebComponents.image5}"     

63                                id = "image5" style = "left: 24px; top: 216px;       

64                                position: absolute"  

65                                url = "/resources/publications.JPG" />    

66        <webuijsf:staticText

67                                binding = "#{WebComponents.publicationLabel}"       

68                                id = "publicationLabel" style = "font-size: 12px;

69                                left: 216px; top: 216px; position: absolute"         

70                                text = "Which book would you like information about?"/>       

71                    <webuijsf:dropDown          

72                                binding = "#{WebComponents.booksDropDown}"       

73                                id = "booksDropDown" items =     

74                                "#{WebComponents.booksDropDownDefaultOptions.options}"       

75                                selected= "#{WebComponents.booksDropDownDefaultOptions.     

76                                selectedValue}" style = "left: 24px; top: 240px;  

77                                position: absolute" />          

78                    <webuijsf:radioButtonGroup         

79                                binding = "#{WebComponents.osRadioGroup}"           

80                                id = "osRadioGroup" items =         

81                                "#{WebComponents.osRadioGroupDefaultOptions.options}"           

82                                selected = "#{WebComponents.osRadioGroupDefaultOptions.        

83                                selectedValue}" style = "left: 24px; top: 336px;  

84                                position: absolute" />          

85                    <webuijsf:button binding =           

86                                "#{WebComponents.registerButton}" id = "registerButton"     

87                                style = "left: 23px; top: 480px; position: absolute;          

88                                width: 100px" text = "Register" /> 

89        <webuijsf:image binding = "#{WebComponents.image6}"     

90                                id = "image6" style = "left: 24px; top: 312px;       

91                                position: absolute" url = "/resources/os.JPG" />

92        <webuijsf:staticText binding = "#{WebComponents.osLabel}"           

93                                id = "osLabel" style = "font-size: 12px; left: 216px;        

94                                top: 312px; position: absolute"     

95                                text = "What operating system are you using?" />        



97        binding = "#{WebComponents.deitelHyperlink}"                      

98        id = "deitelHyperlink" style = "left: 24px; top: 264px;     

99        position: absolute" target = "_blank"                   

100     text = "Click here to learn more about our books"         

101     url = "" />                 

102     </webuijsf:form>


103     </webuijsf:body>


104     </webuijsf:html>


105     </webuijsf:page>


106     </f:view>


107     </jsp:root>

Fig. 26.14 | Registration form that demonstrates JSF components.


Adding a Formatting Component to a Web Page

To create the layout for the User Information section of the form shown in Fig. 26.14, drag a Grid Panel component onto the page. In the Properties window, change the component’s id to gridPanel and set the component’s columns property to 4. The component also has properties to control the cell padding, cell spacing and other elements of the component’s appearance. In this case, accept the defaults for these properties. Now you can simply drag the Images and Text Fields for user information into the Grid Panel. The Grid Panel will manage their spacing and their organization into rows and columns.

Examining Web Components on a Sample Registration Form


Lines 34–36 of Fig. 26.14 define an Image component, an object of class ImageComponent which inserts an image into a web page. The images used in this example are located in this chapter’s examples directory. Images to be displayed on a web page must be placed in the project’s resources folder. To add images to the project, drop an Image component onto the page and click the ellipsis button next to the url property in the Properties win-dow. This opens a dialog in which you can select the image to display. Since no images have been added to the resources folder yet, click the Add File button, locate the image on your computer’s file system and click Add File. This copies the file you selected into the project’s resources directory. Now you can select the image from the list of files in the resources folder and click OK to insert the image into the page.


Lines 37–61 contain an h:panelGrid element representing the Grid Panel compo-nent. Within this element, there are eight Image and Text Field components. Text Fields allow you to obtain text input from the user. For example, lines 43–45 define a Text Field control used to collect the user’s first name. You can label a Text Field by setting its label property, which places text directly above the Text Field. Alternatively, you can label a Text Field by dragging and dropping a Label component onto the page, which allows you to customize the Label’s position and style. In this example, we are using images to indicate the purpose of each Text Field.


The order in which Text Fields are dragged to the page is important, because their JSP tags are added to the JSP file in that order. When a user presses the Tab key to navigate between input fields, they will navigate the fields in the order in which the JSP tags occur in the JSP file. To specify the navigation order, you should drag components onto the page in that order. Alternatively, you can set each input field’s tabIndex property in the Prop-erties window to control the order in which the user will tab through the fields. A compo-nent with a tab index of 1 will be the first in the tab sequence.


Lines 71–77 define a Drop Down List. When a user clicks the drop-down list, it expands and displays a list from which the user can make a selection. This component is an object of class DropDown and is bound to the object booksDropDownDefaultOptions, a SingleSelectOptionsList object that controls the list of options. This object can be con-figured automatically by right clicking the drop-down list in Design mode and selecting Configure Default Options…, which opens the Options Customizer dialog box to add options to the list. Each option consists of a display String that will represent the option in the browser and a value String that will be returned when programmatically retrieving the user’s selection from the drop-down list. Netbeans constructs the SingleSelectOp-tionsList object in the page bean file based on the display-value pairs entered in the Options Customizer dialog box. To view the code that constructs the object, close the dialog box by clicking OK, open the page bean file, and expand the Creator-managed Com-ponent Definition node near the top of the file. The object is constructed in the _init method, which is called from method init the first time the page loads.


Lines 78–84 define a Radio Button Group component of class RadioButtonGroup, which provides a series of radio buttons from which the user can select only one. Like Drop Down List, a Radio Button Group is bound to a SingleSelectOptionList object. Theoptions can be edited by right clicking the component and selecting Configure Default Options…. Also like the drop-down list, the SingleSelectOptionsList is automatically generated by the IDE and placed in the _init method of the page bean class.

Lines 85–88 define a Button component of class Button that triggers an action when clicked. A Button component typically maps to an input XHTML element with attribute type set to submit. As stated earlier, clicking the Register button in this example does not do anything.


The Hyperlink component (lines 96–101) of class Hyperlink adds a link to a web page. The url property of this component specifies the resource ( in this case) that is requested when a user clicks the hyperlink. Setting the target property to _blank specifies that the requested web page should open in a new browser window. By default, Hyperlink components cause pages to open in the same browser window.


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Copyright © 2018-2020; All Rights Reserved. Developed by Therithal info, Chennai.