Struts is an open-source web application that the Apache software foundation develops. It helps in the development of Java EE web applications. It uses and extends the Java servlet API to encourage developers to adopt a model–view–controller architecture.
We can use various themes and templates in our application. Struts 2 provides various types of options to us when it comes to themes and templates. We can also create new themes, modify existing themes and do much more.
Existing terms, themes and descriptions
Three of the most used terms and their descriptions are as follows:
S.No
Terms & Description
1.
TAG: A small block of code executed from within freemaker, JSP or velocity
2.
TEMPLATE: A piece of code, usually written in freeMarker, to be rendered by certain tags (HTML tags)
3.
THEME: A group of templates packaged together to provide same functionality
Whenever the struts 2 tag is used in our webpage, the framework generates HTML code. Which is with a preconfigured layout and style. It comes with three built-in themes:
S.No.
Themes & Description
1.
SIMPLE Theme: A simple design without any gimmicks. The HTML input element, for instance, is rendered using the text field tag without any formatting or functionality, such as a label, validation, error reporting, or other formatting.
2.
XHTML Theme: This is Struts 2's default theme, and it includes all of the essentials that the simple theme does, as well as various features such as a label for each of the HTML, standard two-column table layout for the HTML, validation and error reporting, and so on.
3.
CSS_XHTML Theme: This theme includes all of the fundamental elements of the simple theme as well as numerous features such as a standard two-column CSS-based layout, the use of <div> for the HTML struts tags, and Labels for each of the HTML struts tags that are positioned according to the CSS stylesheet.
If we don't select a theme, then by default, the XHTML theme will be selected.
The struts 2 tag below:
<s:textfield name = "name" label = "Name" />
Generates the following HTML markup
<tr>
<td class="tdLabel">
<label for = "empinfo_name" class="label">Name:</label>
</td>
<td>
<input type = "text" name = "name" value = "" id = "empinfo_name"/>
</td>
</tr>
Here, empinfo is action name in the struts.xml file.
Selecting Themes
Struts 2 gives us the option to select the themes using various tags, or you can specify by any of the methods the theme you want to use:
Theme attribute on the specific tag
Theme attribute on a tag’s surrounding form the tag
The page-scoped attribute "theme"
The request-scoped attribute "theme"
The session-scoped attribute "theme"
The application-scoped attribute "theme"
The struts.ui.theme property in the struts.properties (defaults of xhtml).
If you want to utilise distinct themes for different tags, use the syntax below to declare them at the tag level
<s:textfield name = "name" label = "Name" theme="xhtml"/>
As it is not possible to use themes on per tag basis, we can specify the rule in the struts.properties by using the following tags:
# Standard UI theme
struts.ui.theme = xhtml
# Directory where theme template resides
struts.ui.templateDir = template
# Sets the default template type. Either ftl, vm, or jsp
struts.ui.templateSuffix = ftl
How does a Theme work?
For any theme, the struts tag has an associated template such as s:textfield → text.ftl etc.
These templates are zipped in struts2-core.xy.z.jar file. These template files, keep a pre-defined HTML layout for each tag. Using Struts tags and accompanying templates, the Struts 2 framework creates final HTML markup code.
Struts 2 tags + Associated template file = Final HTML markup code.
The default templates are written in FreeMarker and contain the .ftl extension. Templates can also be designed by using JSP or velocity and can set the configuration in struts.properties using struts.ui.templateSuffix and struts.ui.templateDir.
Creating new themes
The easiest way to create a new theme is to pick any existing theme and make the modifications according to our needs.
Firstly we create a folder called temp in WebContent/WEBINF/classes and a sub-folder with newtheme(The name of our theme). For example, WebContent/WEB-INF/classes/template/newtheme.
Now we can start to build templates from scratch, or the templates can be copied from the Struts2 distribution and later modified according to the needs of the user.
Now, it's time to modify the default template xhtml to learn the process. Copy content from struts2-core-x.y.z.jar/template/xhtml to the specified theme directory and make the modification to WebContent/WEBINF/classes/template/mytheme/control.ftl file. We open control.ftl, we will see the lines below.
Changing control.ftl to have the following content:
<table style = "border:1px solid black;">
If we look at form.ftl, we can see that control.ftl is utilized in this file. However, form.ftl is referring to this file from the xhtml theme. So let us alter it as follows:
After saving the above changes, we create the file in WebContent/WEB-INF/classes/struts.properties with the following content:
# Customised them
struts.ui.theme = mytheme
# Directory where theme template resides
struts.ui.templateDir = template
# Sets the template type to ftl.
struts.ui.templateSuffix = ftl
After that, right-click on the project name and select Export > WAR File to generate a WAR file. After that, place this WAR in tomcat's webapps directory. Finally, launch tomcat and navigate to http://localhost:8080/HelloWorldStruts2. This will result in the screen shown below.
We can see a border around the form component since we changed our theme after copying it from the xhtml theme.w
We hope you have understood everything about struts 2 themes & templates.edited.🙌
Frequently Asked Questions
What is Struts Framework? and its Components?
The online application development framework known as struts offers a good framework for creating web apps. Servlets, JSPs, custom tags, and message resources are all incorporated within the struts framework.
Why do we use Struts?
Because struts are built on the model, view, and controller (MVC) architecture, which separates business logic, design, and controller, the code is easier to write, maintain, and read.
Which is the default theme of Struts 2?
XHTML theme is the default theme of Struts 2.
What is a simple theme?
A simple design without any gimmicks. The HTML input element, for instance, is rendered using the textfield tag without any formatting or functionality, such as a label, validation, error reporting, or other formatting.
What is CSS_XHTML Theme?
This theme includes all of the fundamental elements of the simple theme as well as numerous features such as a standard two-column CSS-based layout, the use of <div> for the HTML struts tags, and labels for each of the HTML struts tags that are positioned according to the CSS stylesheet.
Conclusion
In this blog, we have extensively discussed the themes and templates in struts. We learned about the types of themes, which was followed by selecting themes and how the themes work. In the end, we saw how to create a new theme. And in the end, we discussed some of the frequently asked questions related to this. For further knowledge, you can check Struts 2 annotations types and Struts 2 form tags from our Coding Ninjas Studio.
305+ registered