-
Notifications
You must be signed in to change notification settings - Fork 0
Configuration
To configure flex, you should attach settings file: flex.settings.js. Use next pattern (you can find it in repository too):
(function () {
"use strict";
var init = function () {
flex.init({
resources: {
MODULES : [
//List of modules, which should be attached
'flex.presentation'
],
EXTERNAL : [
//List of external resources
{ url: '/resources/some_resource.css' },
{ url: '/resources/some_resource.js' },
],
ASYNCHRONOUS : [
//Bundles of external resources
{
resources: [
{ url: 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' },
{ url: '/program/highcharts/highcharts.js' },
],
//Cache resources of bundle or not
storage : false,
finish : function(){
//You can do something after all resources of bundle are loaded
}
}
],
//Cache resources or not
USE_STORAGED : true,
},
paths : {
//Path to flex modules folder. You should define this path only if your flex modules aren't in same folder as flex.core.js
CORE : '/kernel',
//Default path to your modules (libraries) if you are using flex in "short module definition" mode. Read about it bellow
ATTACH : '/app'
},
//Load events
events : {
onFlexLoad: function () {
//Fired when flex load all resources and done all other work
},
onPageLoad: function () {
//Fired when page are loaded and rendered
}
},
//Settings of flex
settings: {
//Flex will parse your CSS files and restore all path, which defined as "../folder/image.png" to full ulr, like "http://domain.com/images/folder/image.png". This option should be activated if your CSS has such not-full paths and you want to use cache.
CHECK_PATHS_IN_CSS : true
},
//Settings of logs
logs: {
SHOW: ['CRITICAL', 'LOGICAL', 'WARNING', 'NOTIFICATION', 'LOGS', 'KERNEL_LOGS']
}
});
},
start = function () {
if (typeof flex !== 'undefined') {
init();
} else {
setTimeout(start, 50);
}
};
start();
}());
Remember, you should not attach flex.settings.js, flex will do it automatically. Just place this file in same folder as flex.
MODULES – is a list of your modules, which are created within flex-pattern. To attach such module, you should register it in flex.registry.modules.js and use module name instead url of module.
In flex.settings.js file you just define name of necessary module:
MODULES : [
//List of modules, which should be attached
'flex.html',
'flex.css.events',
'flex.ui.window.resize',
'flex.ui.window.move',
'flex.ui.window.focus'
],
And as was said before, your module should be registered in flex.registry.modules.js
(function() {
"use strict";
if (typeof flex !== 'undefined') {
//Declaration of modules
flex.libraries = {
events : { source: 'KERNEL::flex.events.js' },
html : { source: 'KERNEL::flex.html.js' },
css : {
animation : { source: 'KERNEL::flex.css.animation.js' },
events : { source: 'KERNEL::flex.css.events.js' },
},
ui : {
window : {
move : { source: 'KERNEL::flex.ui.window.move.js' },
resize : { source: 'KERNEL::flex.ui.window.resize.js' },
focus : { source: 'KERNEL::flex.ui.window.focus.js' },
maximize: { source: 'KERNEL::flex.ui.window.maximize.js'},
},
templates : { source: 'KERNEL::flex.ui.templates.js' },
scrollbox : { source: 'KERNEL::flex.ui.scrollbox.js' },
itemsbox : { source: 'KERNEL::flex.ui.itemsbox.js' },
areaswitcher: { source: 'KERNEL::flex.ui.areaswitcher.js' },
areascroller: { source: 'KERNEL::flex.ui.areascroller.js' },
arearesizer : { source: 'KERNEL::flex.ui.arearesizer.js' },
},
presentation: { source: 'program/presentation.js' },
};
}
}());
EXTERNAL – a list of any JS or CSS files, which should be included into project. Loading of external resources will start only after all modules (list MODULES) are loaded and initialized. To define some external resource you should use url like bellow:
EXTERNAL : [
//List of external resources
{ url: '/resources/some_resource.css' },
{ url: '/resources/some_resource.js' },
],
ASYNCHRONOUS – it’s list of any external resources (like EXTERNAL), but this group of resources will be load in parallel with flex modules. Also you can define several bundles of resources and resolve dependencies between resources.
Each bundle is a collection of resources:
ASYNCHRONOUS : [
//Bundle A
{
resources: [
{ url: 'resource_a_0.js' },
{ url: 'resource_a_1.js' },
],
storage : false,
finish : function(){
//You can do something after all resources of bundle are loaded
}
},
//Bundle B
{
resources: [
{ url: 'resource_b_0.js' },
{ url: 'resource_b_1.js' },
],
storage : false,
finish : function(){
//You can do something after all resources of bundle are loaded
}
},
],
All bundles will start to loading as soon as it's possible. As usual it's immediately after flex's core is loaded.
In addition, you can easy manage dependencies between resources in bundle. Just use directive "after" to do it.
ASYNCHRONOUS : [
{
resources: [
{ url: '/external/jquery.js' },
{ url: '/external/highcharts.js', after: ['/external/jquery.js'] },
{ url: '/external/highcharts-more.js', after: ['/external/jquery.js', '/external/highcharts.js'] },
]
}
],
In this example, resource highcharts-more.js will be loaded only after resources highcharts.js and jquery.js are loaded and ready. As you understand we can do definition shorter.
ASYNCHRONOUS : [
{
resources: [
{ url: '/external/jquery.js' },
{ url: '/external/highcharts.js', after: ['/external/jquery.js'] },
{ url: '/external/highcharts-more.js', after: ['/external/highcharts.js'] },
]
}
],
Because highcharts.js will require jquery.js in any case.
You can define two paths:
- CORE - this is path to modules, which were created within flex-pattern. If your modules in same folder as flex.core.js, you should not define this path.
- ATTACH - this is path to modules, which were created within short-flex-pattern. You can read about it bellow.
In this section you can define handles for start-flex events.
- onFlexLoad - fired when flex finish loading of modules (list MODULES), loading of external resources (list EXTERNAL) and loading of all bundles of external resources (list ASYNCHRONOUS).
- onPageLoad - fired when page and all resources on page are loaded.
In most cases first will be onFlexLoad and second onPageLoad.
In this section you can change some flex settings. Most important of it is: [boolean] CHECK_PATHS_IN_CSS. Flex cache all resources (only if you didn't deny it). If you attach some .css within such urls in CSS like "../images/image.png" will be valid. But during next loading flex will not attach this resource within <LINK>; flex will mount CSS within <STYLE> and such urls like it "../images/image.png" will not be valid.
You can easy solve this problem, just allow flex correct urls (set CHECK_PATHS_IN_CSS to true). In this case all urls will be convert from "../images/image.png" to "http://domain.com/images/image.png".
In logs section you can setup types of message, which will be shown in browser's console.
logs: {
SHOW: ['CRITICAL', 'LOGICAL', 'WARNING', 'NOTIFICATION', 'LOGS', 'KERNEL_LOGS']
}
You open flex.core.js and find next block of code (it's at the begining of file)
config = {
defaults : {
resources :{
USE_STORAGED : { type: 'boolean', value: true },
MODULES : { type: 'array', value: [] },
EXTERNAL : { type: 'array', value: [] },
ASYNCHRONOUS : { type: 'array', value: [] }
},
paths : {
CORE : {
type : 'string',
value : function () {
var url = '',
script = document.querySelector('script[src*="' + options.files.CORE + '"]');
if (script !== null) {
url = system.url.parse(script.src.toLowerCase());
url = url.path;
}
return url;
}
},
ATTACH : { type: 'string', value: '/app' },
},
events : {
onFlexLoad : { type: 'function', value: null },
onPageLoad : { type: 'function', value: null },
},
settings : {
CHECK_PATHS_IN_CSS : { type: 'boolean', value: false },
ATTACH_PATH_SIGNATURE : { type: 'string', value: 'PATH::' },
KERNEL_PATH_SIGNATURE : { type: 'string', value: 'KERNEL::' },
},
cache : {
reset : {
ON_NEW_MODULE : { type: 'boolean', value: true },
ON_UPDATED_MODULE : { type: 'boolean', value: false },
ON_NEW_RESOURCE : { type: 'boolean', value: false },
ON_UPDATED_RESOURCE : { type: 'boolean', value: false },
ON_CRITICAL_ERROR : { type: 'boolean', value: true },
}
},
logs : {
SHOW: { type: 'array', value: ['CRITICAL', 'LOGICAL', 'WARNING'] }
}
},
As you can see, it's clear and transparent. You can see and default value and type of some config field.