Search code examples
jspstruts2materialize

how to use struts form fields (s:textfield, s:password) and style them using materializecss framework?


<form class = "col l12 s12">
    <div class = "row">
        <div class="input-field col l6 s6">
            <input id="firstName" type="text" class="validate">
            <label for="firstName">First Name</label>
        </div>
    </div>
</form>

I want to apply Struts2 on the above code to get the value of firstName. How should i do that?

EDIT (whole jsp code for registration form):

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
    <link type="text/css" rel="stylesheet" href="css/register.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <div class = "background">
        <h1 class = "center-align white-text">Register</h1>
    </div>
    <div class = "container formContainer white z-depth-2">
        <div class = "row formParent">
            <form class = "col l12 s12">
                <div class = "row">
                    <div class="input-field col l6 s6">
                        <input id="firstName" type="text" class="validate">
                        <label for="firstName">First Name</label>
                    </div>
                    <div class="input-field col l6 s6">
                        <input id="lastName" type="text" class="validate">
                        <label for="lastName">Last Name</label>
                    </div>
                </div>
                <div class = "row">
                    <div class="input-field col l12 s12">
                        <input id="username" type="text" class="validate">
                        <label for="username">Username</label>
                    </div>
                </div>
                <div class = "row">
                    <div class="input-field col s6">
                        <input id="password" type="password" class="validate">
                        <label for="password">Enter password</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="repeatPassword" type="password" class="validate">
                        <label for="repeatPassword">Repeat password</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="email" type="email" class="validate">
                        <label for="email" data-error="wrong" data-success="right">Email</label>
                    </div>
                </div>
                <div class = "row formButtons">
                    <button class="btn waves-effect waves-light right submitButton purple accent-4" type="submit" name="submit">Submit</button>
                    <a href = 'index.jsp' class = 'btn waves-effect waves-dark right cancelButton purple accent-1'>Cancel</a>
                </div>
            </form>
        </div>

    </div>
</body>

In the above jsp code, i wish to get the field values and i want to be able to assign them to the following actionClass:

public class registerAction {
    private String firstName, lastName, username;
    public String execute(){
        return "";
    }
}

but i dont know how to apply the struts prefix to the jsp form which is using materialize css input fields.

Here is the code for struts.xml

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

 <!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration    2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
    <constant name="struts.devMode" value="true"/>
    <package name="helloWorld" extends="struts-default">
    <action name="hello" class = "com.bugManager.registerAction"   method="execute">
        <result name="success">helloWorld.jsp</result>
    </action>
    </package>
</struts>

Solution

  • Ok, i did it on my own. If someone wants to use materializecss form tags in struts2 do the following:

    1. Add this line into the struts.xml

    <constant name="struts.ui.theme" value="simple" />
    

    my updated and working struts.xml

    <struts>
        <constant name="struts.devMode" value="true"/>
        <constant name="struts.ui.theme" value="simple" /> <!-- this is the line which helps in applying materializecss's styling to the form elements -->
        <package name="com.bugManager" extends="struts-default">
            <action name="register" class = "com.bugManager.registerAction" method="execute">
                <result name="success">helloWorld.jsp</result>
            </action>
        </package>
    </struts>
    

    my helloWorld.jsp: (any redirection page, i made this page to test out if the values are being mapped and stored correctly)

    <html>
        <head>
            <title>Hello World Strut</title>
        </head>
        <body>
            Hello from <s:property value = "firstName"/> <s:property value = "lastName"/> <s:property value = "username"/> <s:property value = "password"/>
             <s:property value="email"/>
    
        </body>
    </html>
    

    2. Then change

    Form tags

    <form></form> to <s:form></s:form>
    

    any text or email input tags to

    <s:textfield />
    

    password fields to

    <s:password />
    

    submit can remain the same.

    Check out the example form code given below

    <s:form class = "col l12 s12" action = "register">
        <div class = "row">
            <div class="input-field col l6 s6">
    
                <s:textfield name = "firstName" id="firstName" type="text" class="validate"/>
                <label for="firstName">First Name</label>
            </div>
            <div class="input-field col l6 s6">
                <s:textfield name = "lastName" id="lastName" type="text" class="validate"/>
                <label for="lastName">Last Name</label>
            </div>
        </div>
        <div class = "row">
            <div class="input-field col l12 s12">
                <s:textfield name = "username" id="username" type="text" class="validate"/>
                <label for="username">Username</label>
            </div>
        </div>
        <div class = "row">
            <div class="input-field col s6">
                <s:password name = "password" id="password" type="password" class="validate"/>
                <label for="password">Enter password</label>
            </div>
            <div class = 'input-field col s6'>
                <s:password name = "password" id="repeatPassword" type="password" class="validate"/>
                <label for="repeatPassword">Repeat password</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <s:textfield name = "email" id="email" type="email"/>
                <label for="email">Email</label>
            </div>
        </div>
        <div class = "row formButtons">
            <button class="btn waves-effect waves-light right submitButton purple accent-4" type="submit" name="submit">Submit</button>
            <a href = 'index.jsp' class = 'btn waves-effect waves-dark right cancelButton purple accent-1'>Cancel</a>
        </div>
    </s:form>
    

    Take a look at all the struts form tags here: http://www.tutorialspoint.com/struts_2/struts_form_tags.htm

    I hope this helps everyone who is trying to implement materializecss in Struts2!