Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
JSF
3.
ui: param tag
4.
Passing Parameter to Section of a Template
4.1.
Create parameter : common.xhtml
4.2.
Using parameter : header.XHTML
5.
Parameter to Template
5.1.
Create parameter : home.xhtml
5.2.
Using parameter : common.xhtml
6.
Sample code
6.1.
header.XHTML
6.2.
common.XHTML
6.3.
home.xhtml
7.
Output
8.
Frequently Asked Questions
8.1.
What are tags?
8.2.
What is f param JSF?
8.3.
What is UI Param JSF?
8.4.
What is XHTML?
8.5.
What is the need for modular DTDs?
9.
Conclusion
Last Updated: Mar 27, 2024
Easy

JSF Parameters

Author Muskan Sharma
0 upvote

Introduction

Hey Ninjas!!

Have you ever got stuck while developing a web application where you have to manage a common part of many pages? It will only increase the complexity of doing the same process on the same page. To solve this, JSF provides Facelets tags, which help make a common layout. In this blog, you'll learn about one of the Facelets tags, the Parameter Tag.

Let's begin our journey to learn more about JSF Parameter Tag.

                                           

                                                                                                                                                                       
 

First, let's have a look at what JSF is.

JSF

The Java standard technology for creating component-based, event-oriented web interfaces is called JavaServer Faces (JSF). JSF permits server-side data and functionality access, just like JavaServer Pages (JSP). JSF is an XML document representing formal components in a logical tree, unlike JSP, which is just an HTML page with server-side capabilities. JSF components are supported by Java objects, separate from HTML, and possess all of Java's features, including the ability to access distant APIs and databases

ui: param tag

We can pass parameters to a template file or an included file using the UI: param tag.

Now let's learn!!

how How to pass a parameter or parameters to different template sections

How to pass different template parameters.

Passing Parameter to Section of a Template

Create parameter : common.xhtml

The UI: include tag should have an argument. If you want to define a parameter that will contain a value and be sent to the Header section, use the UI: param tag.

<ui:insert name = "header" >
   <ui:include src = "/templates/header.xhtml" >
      <ui:param name = "defaultHeader" value = "c=Coding Ninjas" />
   </ui:include>
</ui:insert> 

Using parameter : header.XHTML

<ui:composition>  
   <h1>#{defaultHeader}</h1>
</ui:composition>

Parameter to Template

Create parameter : home.xhtml

To the UI: composition tag, add a parameter. To define a parameter containing a value to be sent to a template, use the UI: param tag.

<ui:composition template = "templates/common.xhtml">
   <ui:param name = "title" value = "Hey" />
</ui:composition>

Using parameter : common.xhtml

<h:body> 
   <h2>#{title}</h2>
</h:body>

Sample code

header.XHTML

<?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">


<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   
   <body>
      <ui:composition> 
         <h1>#{defaultHeader}</h1>
      </ui:composition>
   </body>
</html>

common.XHTML

<?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">


<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets"> 
   
   <h:head></h:head>
   <h:body>
      <h2>#{title}</h2>
      
      <div style = "border-width:2px; border-color:green; border-style:solid;">
         <ui:insert name = "header" >
            <ui:include src = "/templates/header.xhtml" >
               <ui:param name = "defaultHeader" value = "Coding Ninjas” />
            </ui:include>
         </ui:insert> 
      </div>
      <br/>
      
      <div style = "border-width:2px; border-color:black; border-style:solid;">
         <ui:insert name = "content" >
            <ui:include src = "/templates/contents.xhtml" />
         </ui:insert>    
      </div>
      <br/>
      
      <div style = "border-width:2px; border-color:red; border-style:solid;">
         <ui:insert name = "footer" >
            <ui:include src = "/templates/footer.xhtml" />
         </ui:insert>
      </div>
   
   </h:body>
</html>

home.xhtml

<?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">


<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   
   <h:body>
      <ui:composition template = "templates/common.xhtml">
         <ui:param name = "title" value = "Hey" />
         
         <ui:define name = "content"> 
            <br/><br/>
             <h:link value = “ Page 1" outcome = "page1" />
             <h:link value = "Page 2" outcome = "page2" /> 
            <br/><br/>
         </ui:define>
      </ui:composition>
   </h:body>
</html>

Output

Frequently Asked Questions

What are tags?

HTML tags function similarly to keywords in that they specify how a web browser will format and present text. A web browser can distinguish between HTML material and plain content with the use of tags.

What is f param JSF?

You can give a parameter to a component using the "f: param" tag in JSF. However, the functionality of the tag relies on the type of component to which it is attached.

What is UI Param JSF?

We can give arguments to a template file or an included file using the UI: param tag.

What is XHTML?

EXtensible HyperText Markup Language (XHTML).To make HTML more adaptable and extendable so that it could interact with other data types, XHTML was created (such as XML).

What is the need for modular DTDs?

The deployment of new deployments is made simple using modular DTD. XHTML is only partially supported by an application. A portion of XHTML is all that is needed, for instance, for Internet TV and mobile devices.

Conclusion

Finally, you've concluded this article. 

Congratulations!! You learned about ui: param tag in JSF in this blog. You studied the tag, its properties, and a sample program.

After reading these, are you eager to read more articles on the subject of JSF? Don't worry; Coding Ninjas will take care of everything.

Check out the awesome content on the Coding Ninjas Website:

JSF 

JSF architecture

JSF Application Events

Please see our Code studio guided routes to learn more about DSA, Competitive Programming, JavaScript, System Design, and other topics. Also, enroll in our courses and use the accessible sample tests and problems. For placement preparations, have a look at the interview experiences and interview bundle.

Thank you

Do upvote our blog to help other ninjas grow. Happy Coding!

Live masterclass