Web Application Development using J-Framework Web
J-Framework Web is a set of API’s, components, and practices for building Java web applications based on JSF and PrimeFaces.
|
Check the tutorials sections for quick startup instructions |
Recommended Project Structure
As shown in the below figure, below is the project structure for J-Framework Web applications: . Create the following folders in src/main/webapp resources admin login pages ** public
Templates:
Create three facelet template files in src/main/webapps/WEB-INF/templates: * default.xhtml (look below for a proposed template) * empty.xhtml (look below for a proposed template) * error.xhtml (look below for a proposed template)
CSS
-
In the resources create
-
app.css: consists of the high layout of the app, mainly covers the styles in the default.xhtml template.
-
app.js: consists of the main Java script functions and callbacks that are mainly required on the app which most likely called references from default.xhtml template.
-
css/primefaces-fix.css: this file will includes any overridden styles of prime-faces components on the app level, for specific pages changes, you need to override in the page.css of that page.
-
css/root.css: this file shall contains the main theme variables, check the below example for more information.
-
css/components/component1.css: in case of complex pages, it could be good idea to create css file for each component
-
-
Each page in the pages folder should contains page.css and page.js files next to the index.xhtml
-
Use ${request.contextPath}
-
use ?reload=#{util.reloadRandom()} next to any static resources url such as javascript or css, to ensure refresh on each request for easier development.
Pages
-
Create public/home folder for public pages access
-
Create admin folder for admin pages access
-
Create pages folder for protected pages.
-
Each page should be treated as folder, where the folder is the page name, and inside that folder we shall have index.xhtml which will be automatically triggered if we only put the folder name in the URL. For example, if you have employee page, create employee folder in the pages folder, then create index.xhtml page inside that folder, the full path will be _src/main/webapp/pages/employee/index.xhtml*.
-
Create home page at pages/home/index.xhtml to serve as the default page after the user logged in.
-
Create src/main/webapp/index.xhtml that redirects to pages/home/
