Difference between revisions of "The CCIL User Interface Layer"

Revision as of 07:11, 2 July 2016

Thee CCIL User Interface Layer is composed of several simple frameworks. Blended together, they produce integrated, modular web interface which is well suited for dynamic binding just like the CCIL framework itself.

Principles

The main concept behind the UI Layer is that the different aspects of the environment are realized as independent Maven Web projects, which are finally blended-in by the ccil-ui-web project. The latter should be referenced by the client projects, and the different functionalities simple disabled from the main configuration file.

It is built around the Maven's overlay system.

In the distribution (the resulting WAR file - ccil-ui-web-XXX.war), all shared artifacts are located in the /ccil folder. The different components add their stuff to its sub-folders.

JavaScripts

All of them are located in the /ccil/js folder. The ccil.js is the main script file. It introduces the CCIL object, which holds all useful functions and variables.

More in the ccil-ui-js dedicated page.

HTMLs

Located in the /ccil/html [CCIL-63 folder.

Basically, the structure is formed by 4 HTML files and one configuration.

interface.json

In the web root there is a file, called interface.json. A sample below:

{
	"title" : "CCIL Web UI",
	"message" : {
		"enabled" : "yes",
		"text": "<strong>Important!</strong>  More information about the front-end <a href = "http://ccil.sourceforge.net" class = "lert-link"> is available here</a>."
	},
	"menu" : {
		"enabled"  : "yes",
		"link": "",
		"items" : [
			{"name":"Welcome", "link":"content.html"},
			{"name":"More...", "link":"content.html"}
		]
	},
	"content" : {
		"enabled"  : "yes",
		"link" : "http://ccil.sourceforge.net/documentation"
	}
}

title

The title for the site. It will be displayed in the [TBA] strip of the browser.

message

This is the message at the top strip.

menu

TBA

content

TBA

Components

1. Logo

More information about the component is available here.

2. JavaScript

More information about the component is available here.

3. Wallpapers

More information about the component is available here.

4. Web

This is the final project, which blends it all together. More information about the component is available here.