Customization framework

The customization framework overview

The GWC-JS infrastructure consists of two components:

Project directory

The project directory (project_dir) contains JavaScript (js), template HTML (tpl.html) and sass stylesheets (scss) files used to create the front-end application. See Project directory.

Tools

The developer working on customization installs these third-party tools.

Tool	Description	Project directories/files
Node.js (http://nodejs.org/)	Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes your GWC-JS Web applications lightweight and efficient.	\customization_project\js
git (http://git-scm.com/)	Git looks after the version control for the project development, keeping track of the changes you make to your project.	n/a
npm	Node Package Manager (npm) keeps track of your project's packages and their dependencies in a manifest file.	package.json
Grunt	Grunt is the JavaScript task runner which builds the project with compilation options and automates the compilation and the reconfiguration of the GWC-JS client after customization.	Gruntfile.js
Sass	Sass is an extension of CSS that allows use of variables, mixins, and inline imports. The project directory contains a set of sass stylesheets that provide default definitions for all key HTML components and Genero application elements; such as forms, buttons, navigation and other interface components. By editing these styles in the scss files, you customize the components in your project. Note: The open source text editor Brackets (http://brackets.io/) makes working with scss and json files much easier.	\customization_project\sass

The setup for customization involves these steps

1. Installing third-party tools. See Install tools
2. Extracting sources from the GWC-JS project zip file and creating your project directory. See Configure your environment
3. Creating a customization project, see Customization Project.
4. Customizing the user interface, see Customize the User Interface.
5. Linking the project distribution (project_dir/dist/customization/custom_project_dir) to your $FGLASDIR/web/<gwc-dev>.
6. Configuring your apps to use your customized GWC-JS front-end, see Apply customization to an application.