JCart: Admin UI Layout SetUp

As I am not really a good UI designer I searched for a free good looking UI website Admin templates and I found this fantastic template https://almsaeedstudio.com/preview. We will be using this template for our Administration web application.

We are going to use Thymeleaf templates for our View layer. Thymeleaf offers facelets style templating mechanism. Basically we need 2 layout templates, one for unauthorized views like Login/ForgotPassword etc and another for authorized users.

Setup AdminLTE Theme Resources

We are going to start with basic template and include what is necessary instead of dumping everything that comes with the theme.

  • Copy AdminLTE-2.3.0/bootstrap into jcart-admin/src/main/resources/static/assets folder.
  • Copy AdminLTE-2.3.0/dist into jcart-admin/src/main/resources/static/assets folder. You can keep dist/js/app.min.js and delete rest of the files from js directory.
  • Copy AdminLTE-2.3.0/plugins/jQuery into jcart-admin/src/main/resources/static/assets/plugins folder.

Note: I don’t want to dump all the HTML content along with CSS styles on this post itself. Instead I will put only the key parts of the HTML content and give a link to the complete file on GitHub repository https://github.com/sivaprasadreddy/jcart.

GuestLayout Template

Create the guest layout thymeleaf template jcart-admin/src/main/resources/templates/layout/guestLayout.html as follows:


<html xmlns="http://www.w3.org/1999/xhtml" 
	  xmlns:th="http://www.thymeleaf.org">
  <head>
    
    
    JCart Admin
    
    
    
    
    
    
  </head>
  <body>
    	
</body> </html>

This is guest layout skeleton page. Observe the place holder <div layout:fragment=”content”> … </div> for the content to be dynamically included at runtime.

Login Page

Create login view page jcart-admin/src/main/resources/templates/public/login.html


<html xmlns="http://www.w3.org/1999/xhtml" 
	  xmlns:th="http://www.thymeleaf.org"
      layout:decorator="layout/guestLayout">
  <head>
    Log in    
  </head>
  <body>
  	

Invalid Email and Password.

You have been logged out.

I forgot my password
</body> </html>

Things to observe here:

  • We are specifying to use guestlayout template for this Login page by using layout:decorator=”layout/guestLayout”
  • We are using various Thymeleaf attributes like th:action, th:if, th:text to provide the dynamic content
  • We are using th:text=”#{some_message_key}” to provide all the labels dynamically from ResourceBundles jcart-admin/src/main/resources/messages.properties so that we can provide I18N feature easily.
  • We are using ${param.someKey} to access HttpServletRequest parameters.
  • We are using ${someKey} to access HttpServletRequest attributes.
  • We are using th:action=”@{/login}” and th:href=”@{/forgotPwd}” for URLs so that we don’t have to worry about Context Relative URL problems.
  • For more information on using Thymeleaf Layouts refer http://www.thymeleaf.org/doc/articles/layouts.html

    Using ResourceBundles for Internationalization (I18N)

    Create the default ResourceBundle jcart-admin/src/main/resources/messages.properties.
    For now we are supporting only English Locale.

    label.jcart_admin=JCart Admin
    label.email=Email
    label.password=Password
    label.login=Login
    label.submit=Submit
    label.forgot_password=I forgot my password
    info.logout_success=You have been logged out
    error.login_failed=Invalid Email and Password
    

    Now create JCartAdminApplication.java which is starting point for our Administration application.

    package com.sivalabs.jcart;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    public class JCartAdminApplication
    {
    	public static void main(String[] args)
    	{
    	SpringApplication.run(JCartAdminApplication.class, args);
    	}
    }
    

    WebMVC Configuration

    Create a Spring WebMVC Configuration class to configure things like ViewControllers, Interceptors etc.

    @Configuration
    public class WebConfig extends WebMvcConfigurerAdapter
    {   
    	@Override
    	public void addViewControllers(ViewControllerRegistry registry)
    	{
    	super.addViewControllers(registry);
            registry.addViewController("/login").setViewName("public/login");
    	registry.addRedirectViewController("/", "/home");
    	
    	}
    	
    }
    

    Now we can run JCartAdminApplication as a Java Application and point your browser to http://localhost:8080/login

    Authorized Users Layout

    Create the main layout thymeleaf template jcart-admin/src/main/resources/templates/layout/mainLayout.html as follows:

    
    <html xmlns="http://www.w3.org/1999/xhtml" 
    	  xmlns:th="http://www.thymeleaf.org">
      <head>
        
        
        JCart Admin
        
        
        
        
        
        
      </head>
      <body>
        
    
        
        
        
        
       </body>
    </html>
    

    Create Home page thymeleaf view jcart-admin/src/main/resources/templates/home.html as follows:

    
    <html xmlns="http://www.w3.org/1999/xhtml" 
    	  xmlns:th="http://www.thymeleaf.org"
          layout:decorator="layout/mainLayout">
          
          <head>
            Home
        </head>
      <body>
        	

    JCart Administration Manage JCart Site Content

    Welcome User!

    </body> </html>

    Create a simple controller to display Home page.

    @Controller
    public class HomeController 
    {	
    	@RequestMapping("/home")
    	public String home(Model model)
    	{
    	return "home";
    	}
    }
    

    Now you can run JCartAdminApplication as a Java Application and point your browser to http://localhost:8080/home.

    ResourceBundle for Hibernate Validation Errors

    If you observe the JPA entities, we are using Hibernate Validation annotations for some of our Entity fields. SpringMVC has support for JSR-303 Bean Validation API. But by default Hibernate Validation looks for ValidationMessages.properties file in root classpath for failure message keys.
    If you want to use messages.properties for both I18N and Hibernate Validation error messages you can register the Validator Bean as follows:

    @Configuration
    public class WebConfig extends WebMvcConfigurerAdapter
    {  
    	...
    	...
    	
    	@Autowired
        private MessageSource messageSource;
    
        @Override
        public Validator getValidator() {
            LocalValidatorFactoryBean factory = new LocalValidatorFactoryBean();
            factory.setValidationMessageSource(messageSource);
            return factory;
        }
    	
    }
    

    Now we have the layout templates ready and basic MVC configuration is in place. Next we will look into how to configure Spring Security.

    16 thoughts on “JCart: Admin UI Layout SetUp

    1. Hi Siva,

      After configuring the WebMVCConfig when i am trying to run the JCartAdminApplication…i am getting the below error:

      org.springframework.beans.factory.BeanCreationException: Error creating bean with name ‘jpaMappingContext’: Invocation of init method failed; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name ‘entityManagerFactory’: Post-processing of FactoryBean’s singleton object failed; nested exception is org.springframework.jdbc.datasource.init.ScriptStatementFailedException: Failed to execute SQL script statement #1 of URL [file:/F:/softwares/workspace/spring_realtime_project/ECommerce/Ecart-core/target/classes/data.sql]: delete from role_permission; nested exception is org.h2.jdbc.JdbcSQLException: Table “ROLE_PERMISSION” not found; SQL statement:
      delete from role_permission [42102-190]
      at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1578) ~[spring-beans-4.2.3.RELEASE.jar:4.2.3.RELEASE]
      at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:545) ~[spring-beans-4.2.3.RELEASE.jar:4.2.3.RELEASE]

        1. Hi Siva,

          I have already updated this property in the application.properties file of jcart-core module .The problem is if i run the Jcart-core module individually ,all the tables are getting created and records are also inserted properly but when i run the jcart-admin module then i am getting the above exception.

          1. Hi Siva,

            The above issue is fixed now after adding the application-default.properties,application-dev.properties file.But now when i enter http://localhost:9443/home in the browser,it is asking for username and password.I tried giving admin@gmail.com as username and password as admin but it is saying wrong username and password.
            Can you please tell the username/password for this.

    2. Hi Siva,

      Why the roles and permissions can’t show on admin side bar ?
      Theres is some requirements to do ?

      Thanks

    Leave a Reply

    Your email address will not be published. Required fields are marked *