JavaTMP Bootstrap Template Documentation Index

JavaTMP-App-Starter Project Version

JavaTMP-App-Starter project is an advanced dynamic Java Bootstrap LTR/RTL multi languages User Management Web application Template based on combined curated front-end resources of jQuery and Bootstrap LTR/RTL Admin and Dashboard components and plugins modified and developed to provide a dynamic features built mainly using Java 8, Spring Boot 2.2.4 framework and deployed as a standalone project using embedded tomcat 9 container. It supports for data persistent using Mysql Database Management System through java Persistent API and hibernate JPA implementation. It is a standard Maven project, so you can directly import and open it in any Java IDE supporting Apache Maven build tool. The Online Dynamic Java Spring Bootstrap Apps Management Web Application provides a running version of this template war file on tomcat 9. Kindly see the Apache Maven build file ./JavaTMP/JavaTMP-App-Starter/pom.xml for more information about our Java backend dependencies.

JavaTMP-App-Starter project is a dynamic java Spring Boot web application providing a simple apps management demo. The following list provides the main features of Dynamic Java Spring Boot Apps Management web application Template version JavaTMP-App-Starter Project:

JavaTMP-App-Starter Project Folder Structure

The JavaTMP-App-Starter project folder structure is based on Apache Maven build tool with the following main contents of its folder root:

./JavaTMP-App-Starter
|---.eslintrc (ESLint plugin configuration file which contains directive and parameters to gulp-eslint gulp plugin)
|---.gitignore (git SCM meta file to exclude mainly folders from versioning)
|---gulpfile.js (gulp's configuration file for automating front end resources and generate assets/dist JS/CSS files)
|---package.json (A Node.js's NPM meta file. This file holds various metadata relevant to the project)
+---db_scripts (Oracle Mysql Database dump script to start the Users Web Application from)
+---src (Standard Spring Boot Maven source code files)
+---web (Source files of Web specific static resources like fonts, js, and sass folders and files)
|---pom.xml (Apache Maven Configuration build file)

./JavaTMP-App-Starter/pom.xml file

A standard Apache Maven Java Spring Boot build configuration file contains java dependencies building instructions. Read more about Apache Maven in Java Automated Build Tool Apache Maven

./JavaTMP-App-Starter/gulpfile.js file

This is a gulp’s configuration file. gulp is a toolkit for automating painful or time-consuming tasks in your development workflow. We use gulp to automate our building process like generating JS/CSS. The main important gulp task is generate-dist which copy resources from node_module folder and combine them and compile and generate theme and template Javascript and CSS files and folders. We described it in details in Manage Front-end dependencies Using Node.js And Gulp.

./JavaTMP-App-Starter/src folder

src contains the Java source code of all backend classes like Spring Boot Controllers, Configuration files, bean, Java Web listener, Java Web Context classes. Read more about Standard Maven Directory Layout in Java Automated Build Tool Apache Maven.

./JavaTMP-App-Starter/web folder

This folder contains everything related to front end resources and plugins. The following tree structure provides an outline of its contents with description and usages.

./JavaTMP-App-Starter/web/src
+---src (Source folder of front end resources like scss and js files)
    +---fonts
    +---js-src
    +---sass
    +---sass-rtl

The main sass file that include bootstrap and template sass file and override it is in ./web/assets/src/sass/main.scss that was referenced by ./web/assets/src/sass/themes/javatmp-default.scss which the later referenced in all other theme files resided in ./web/assets/src/sass/themes. This main.scss file includes and references the following resources:

  1. Import JavaTMP Global Variables
  2. Import original Bootstrap SCSS file
  3. Import JavaTMP Base Tempalte SCSS files
  4. Import Custom Plugins SCSS files that Override default plugins CSS rules
  5. Import demo pages scss files

The main important JSP page in our dynamic Java Bootstrap template is index.jsp which was dispatched from com.javatmp.web.controller.IndexController Servlet class to the user. The following HTML code provides its contents:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="${labels["global.language"]}" dir="${labels["global.direction"]}" class="javatmp-default-admin-layout">
    <head>
        <title>${labels["global.page.title"]}</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="${pageContext.request.contextPath}/assets/dist/css/javatmp-plugins-all.min.css" rel="stylesheet" type="text/css"/>
        <link href='${pageContext.request.contextPath}/assets/dist/css/javatmp-plugins-print-all.min.css' rel='stylesheet' media='print' />

        <!-- Include directional support -->
        <c:if test="${labels['global.direction'] == 'ltr'}">
            <link id="themeStyleSheet" href="${pageContext.request.contextPath}/assets/dist/css/javatmp-${sessionScope.user.theme}.min.css" rel="stylesheet" type="text/css"/>
        </c:if>
        <c:if test="${labels['global.direction'] == 'rtl'}">
            <link id="themeStyleSheet" href="${pageContext.request.contextPath}/assets/dist/css/javatmp-${sessionScope.user.theme}-rtl.min.css" rel="stylesheet" type="text/css"/>
        </c:if>

        <!-- Include language support font -->
        <link href="${pageContext.request.contextPath}/assets/dist/css/font-family-${labels['global.language']}.min.css" rel="stylesheet" type="text/css"/>
    </head>
    <body class="sidebar-active">
        ...
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp-plugins-all.min.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp-plugins-all-locale-${sessionScope.user.lang}.min.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(function ($) {
                javatmp.init({
                    httpMethod: "GET",
                    dataType: "html",
                    updateURLHash: true,
                    defaultPassData: {_ajax: "ajax", _ajaxGlobalBlockUI: true, _handleAjaxErrorGlobally: true},
                    defaultOutputSelector: '.main-body-content-container',
                    defaultUrl: '${pageContext.request.contextPath}/pages/home',
                    floatDefault: "${labels['global.floatDefault']}",
                    floatReverse: "${labels['global.floatReverse']}",
                    direction: "${labels['global.direction']}",
                    isRTL: ${labels['global.direction'] == 'ltr' ? 'false' : 'true'},
                    contextPath: '${pageContext.request.contextPath}'
                });

                javatmp.user = {};
                javatmp.user.id = ${sessionScope.user.id};
                javatmp.user.lang = "${sessionScope.user.lang}";
                // force en as a moment locale for now
                moment.locale("en");
            });
        </script>
        ...
    </body>
</html>

Notes

Dynamic JSP Starter Pages

The starter Java Bootstrap default English LTR page that use the above generated combined files look like the following:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en" dir="ltr" class="javatmp-default-admin-layout">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="${pageContext.request.contextPath}/assets/dist/css/javatmp-plugins-all.min.css" rel="stylesheet" type="text/css"/>
        <link href='${pageContext.request.contextPath}/assets/dist/css/javatmp-plugins-print-all.min.css' rel='stylesheet' media='print' />
        <link href="${pageContext.request.contextPath}/assets/dist/css/javatmp-default.min.css" rel="stylesheet" type="text/css"/>
        <!-- Include language support font -->
        <link href="${pageContext.request.contextPath}/assets/dist/css/font-family-en.min.css" rel="stylesheet" type="text/css"/>
        ...
    </head>
    <body class="sidebar-active">
        ...
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp-plugins-all.min.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp-plugins-all-locale-en.min.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp.min.js" type="text/javascript"></script>
        ...
    </body>
</html>

And the starter Java Bootstrap default English RTL page that use the above generated combined files look like the following:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en" dir="rtl" class="javatmp-default-admin-layout">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="${pageContext.request.contextPath}/assets/dist/css/javatmp-plugins-all.min.css" rel="stylesheet" type="text/css"/>
        <link href='${pageContext.request.contextPath}/assets/dist/css/javatmp-plugins-print-all.min.css' rel='stylesheet' media='print' />
        <link href="${pageContext.request.contextPath}/assets/dist/css/javatmp-default-rtl.min.css" rel="stylesheet" type="text/css"/>
        <!-- Include language support font -->
        <link href="${pageContext.request.contextPath}/assets/dist/css/font-family-en.min.css" rel="stylesheet" type="text/css"/>
        ...
    </head>
    <body class="sidebar-active">
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp-plugins-all.min.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp-plugins-all-locale-en.min.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp.min.js" type="text/javascript"></script>
        ...
    </body>
</html>

And the starter Java Bootstrap default Arabic RTL page that use the above generated combined files look like the following:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="ar" dir="rtl" class="javatmp-default-admin-layout">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="${pageContext.request.contextPath}/assets/dist/css/javatmp-plugins-all.min.css" rel="stylesheet" type="text/css"/>
        <link href='${pageContext.request.contextPath}/assets/dist/css/javatmp-plugins-print-all.min.css' rel='stylesheet' media='print' />
        <link href="${pageContext.request.contextPath}/assets/dist/css/javatmp-default-rtl.min.css" rel="stylesheet" type="text/css"/>
        <!-- Include language support font -->
        <link href="${pageContext.request.contextPath}/assets/dist/css/font-family-ar.min.css" rel="stylesheet" type="text/css"/>
        ...
    </head>
    <body class="sidebar-active">
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp-plugins-all.min.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp-plugins-all-locale-ar.min.js" type="text/javascript"></script>
        <script src="${pageContext.request.contextPath}/assets/dist/js/javatmp.min.js" type="text/javascript"></script>
        ...
    </body>
</html>

Generating Production JavaTMP-App-Starter.war file

Generating our online production Java Spring Bootstrap Apps Web application war file is done using the following special gulp’s task steps:

gulp.src([
    './JavaTMP-App-Starter/**/*',
    '!**/node_modules{,/**}',
    '!**/nbproject/private{,/**}',
    '!**/package-lock.json'
], {dot: true})
        .pipe(gulp.dest("temp/JavaTMP-App-Starter"));
gulp.src(['temp/JavaTMP-App-Starter/build/web/**/*'], {dot: true})
        .pipe(gulp.dest("temp/online-java-demo-starter"));
gulp.src(['temp/online-java-demo-starter/**/*.html', 'temp/online-java-demo-starter/**/*.jsp'], {dot: true})
        .pipe(htmlmin({collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: true,
            removeComments: true,
            ignoreCustomComments: false,
            keepClosingSlash: true,
            ignoreCustomFragments: [/<%--[\s\S]*?--%>/, /<%@[\s\S]*?%>/, /\$\{[\s\S]*?\}/, /<fmt:[\s\S]+?\/>/, /<c:[\s\S]+?\/?>/, /<\/c:[\s\S]+?>/, /\{\{[\s\S]*?\}\}/]
        }))
        .pipe(gulp.dest("temp/online-java-demo-starter"));
gulp.src(['temp/online-java-demo-starter/**/*'], {dot: true})
        .pipe(chmod(0o644, true))
        .pipe(zip('JavaTMP-App-Starter.war'))
        .pipe(gulp.dest('temp'));

Installation and Deploying

Preparing Maven Project

The JavaTMP-App-Starter project is a standard Apache Maven project structure, so you can directly import and open it in any Java IDE support Maven for compilation and deploying

Preparing Oracle Mysql Database Management System

Although we use JPA with Hibernate implementation library through default Spring Boot framework configuration for managing and wrapping connections and JDBC handling to provide standard interface for any database management, we tested and deployed our online demo version with Oracle Mysql Database, So we describe and prepare it as a standard database vendor to use in JavaTMP projects.

First of all make sure you install and prepare your Oracle Mysql Database management system in your local development machine and follow the documentation on their website.

Most Database parameters like database name, username and password should be saved and changed in Spring Boot configuration file .\JavaTMP-App-Starter\src\main\resources\application.properties file.

Login to your mysql database instance through the command line:

> mysql -u mysql_user -p

Create a new Database:

mysql > create database appdb;

Check your new created Database:

mysql > show databases;

Create the User

mysql > create user javatmpUser;

Grant privileges while assigning the password for javatmpUser:

mysql > grant all on appdb.* to ‘javatmpUser’@’localhost’ identified by ‘javatmpUserPassword’; or

mysql > GRANT all privileges ON appdb.* TO ‘javatmpUser’@’localhost’ WITH GRANT OPTION;

Note: The localhost field usually doesn’t have to be edited, but you can set it to the specific address.

The above example grants all privileges, obviously. But you will likely want to limit privileges under many circumstances. These parameters include select, insert, and delete, For example:

mysql > grant select, insert, delete, update on appdb.* to ‘javatmpUser’@’localhost’ identified by ‘javatmpUserPassword’;

mysql > GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, ALTER, CREATE TEMPORARY TABLES, LOCK TABLES, REFERENCES ON appdb.* to ‘javatmpUser’@’localhost’ identified by ‘javatmpUserPassword’;

always be sure to reload all the privileges and changes through the command:

mysql > FLUSH PRIVILEGES;

quit to import our database script to your local database instance appdb from console command line:

mysql -ujavatmpUser -pjavatmpUserPassword -D appdb < ./JavaTMP-App-Starter/db_scripts/build.sql

Now, Your local database should be loaded with all mandatory data and demo users in your local Mysql database ‘appdb’ instance. check that by login to mysql and run the following command:

mysql > show tables;

JavaTMP Apps Database Tables

The database schema contains the following tables:

Please refer to tables description and corresponding Java bean entity classes for more information about their fields and values.