IOport Blip - Web Application Framework Documentation

Note: This initialization type uses archived module packages and drastically increases module installation efficiency when using workspaces. Refer to the Yarn documentation for more information.

Delete the package.json file created by the yarn init -2 command and then rename the package.json.master file to package.json. Then use the yarn install command to update all the files needed to run the Hub.

$ del package.json
$ rename package.json.master package.json
$ yarn install

Example for Windows Users

Note: The package.json.master file was downloaded with the Hub installation and contains the configuration for Yarn to use going forward.

Install IOport Blip (Blip for short).

$ yarn installblip

Example

You can start the Blip server which is configured to run from host localhost(127.0.0.1). Ensure your system is configured for this host. Entering the yarn runblip command will start the server.

$ yarn runblip

Example

From within a browser enter the URL localhost to view the Blip client-side interface.

Updates to the Hub and Blip can be done using the below commands.

$ yarn updatehub
$ yarn updateblip

Example

Server Framework Structure

Overview

This application framework is designed to accomplish the following:

Structured management
Code integrity
High performance
Expandability
Flexibility
Small footprint
Decrease development turnaround time

It incorporates a philosophy of using base layer code whenever possible and is flexible enough for additional frameworks to be added if desired. The framework uses an object called blip that is passed to each framework based require(...).init() function and contains what is needed to run the server. Examples of this object in use are stated throughout this documentation and its contents can be viewed in the File-Server.js file's initBlip() function.

The framework uses Site Docks as its site warehouse and the documention refers to the Blip site dock (SiteDock-Blip) going forward. In practice you'll use separate site docks to configure and run additional sites.

Do not alter SiteDock-Blip since it will get overwritten as updates are released. You can copy and past this site dock into the SiteDocks directory and configure it as an additional site. To change the IP and domain that this site dock uses add a Configuration-Extension.js file addition. You can also use a Site Dock Base Frame that is configured for the SiteDock location. SiteDock/Hanger71 is reserved for IOport site docks.

Performance note: The philosophy on performance when it comes to this framework revolves around flexibility in isolating code in the most minimalistic way first and foremost to ensure an option is available when needed. The overall end implementation of a solution will vary across the board.

Directory Tree

Root

Blip has two main directories at the root level which are Server and Client. All the files are split according to how they are processed. The server activity data is located in the Logs directory.

ioport-blip
- Server
- Client
- Logs

Directory Tree

Templates

Templates are theme based and within Site Docks is where you'll find all of the template filename.html.tpl files.

ioport-blip
- Server
  - SiteDocks
    - Hanger71
      - SiteDock-Blip
        
        Templates
        
        Themes
        
        Blip
        
        Common
        
        Pages
        
        Sandbox

Directory Tree

Site Docks

SiteDocks is where any server code additions should be kept that are outside of the main codebase. You can simply copy a site dock or use a Site Dock Base Frame and use it as the base for additional sites. More on this is covered later in the documentation.

ioport-blip
- Server
  - SiteDocks

Directory Tree

Core

All of the server engine code is located in the Core.

Blip
- Server
  - Core

Directory Tree

SSL

Ssl contains the SSL certificate and key files used with HTTPS. Each site dock can contain it's own set when used.

ioport-blip
- Server
  - SiteDocks
    - Hanger71
      - SiteDock-Blip
        
        Ssl

Directory Tree

Configuration

Core Server

Server configuration is done by altering and/or adding entries to the Configuration-Extension.js file located in the root Server directory. Example entries and comments can be found in the File-Server.js file.

Rename Configuration-Extension.js.master to Configuration-Extension.js to use.

ioport-blip
- Server

Configuration-Extension.js

Directory Tree

Site Docks

Site dock configuration is done inside each individual site dock, in a file called SiteDock-Configuration.js located in the server SiteDocks directory. Example entries and comments can be found in the SiteDock-Frame-Basic.zip.zbm package which can be used as a springboard for fresh site dock creation. More information on site docks can be found in the Plug-and-Play Site Docks section of this document.

ioport-blip
- Server
  - SiteDocks
    - SiteDock-Directory-Name

SiteDock-Configuration.js

Directory Tree

HTTP

Configuration

When configuring an additional dock site, there are two important files to make note of, and they are Configuration-Extension.js and SiteDock-Configuration.js.


blip.svar.siteDocksBlipListen:     '192.168.1.2',
blip.svar.siteDocksBlipDomainName: 'blip',  // Could instead be blip.com, www.blip.com, www.blip.io, or whatever.blip.whatever
blip.svar.loggerOutputType = blip.ref.loggerOutputTypeOptions.consoleAndFile;
(more...)

Configuration-Extension.js JavaScript


const siteDockName  = 'SiteDock-Blip';  // This should be unique relative to other site docks!
const listen        = blip.svar.siteDocksBlipListen;
const listenSsl     = listen;
const domainName    = blip.svar.siteDocksBlipDomainName;
const domainNameSsl = domainName;
const hosts         = ['']; // Example: ['www', 'downloads']
const hostsSsl      = ['']; // Example: ['secure', 'ssl']
(more...)

SiteDock-Configuration.js JavaScript

Request and Response

A simple template initialization and implementation example.


var templatePage = new blip.templateAssembler.TemplateEngine(blipSiteDock.appUrl, true);

templatePage.addFragFilePath( blipSiteDock.path.templatesPagesDir + 'Page_Home-Body.html.tpl', false );

blipSiteDock.server.httpApp.get(templatePage.url, function (req, res) {

    template.sendPage( req, res );

});

JavaScript

HTTPS

Configuration

When configuring an additional dock site, there are two important files to make note of, and they are Configuration-Extension.js and SiteDock-Configuration.js. Refer to the registrar documentation (external to IOport) for additional information when using them to create the certification files.


blip.svar.siteDocksBlipListen:     '192.168.1.2',
blip.svar.siteDocksBlipDomainName: 'blip',  // Could instead be blip.com, www.blip.com, www.blip.io, or whatever.blip.whatever
blip.svar.loggerOutputType = blip.ref.loggerOutputTypeOptions.consoleAndFile;
(more...)

Configuration-Extension.js JavaScript


const siteDockName  = 'SiteDock-Blip';  // This should be unique relative to other site docks!
const listen        = blip.svar.siteDocksBlipListen;
const listenSsl     = listen;
const domainName    = blip.svar.siteDocksBlipDomainName;
const domainNameSsl = domainName;
const hosts         = ['']; // Example: ['www', 'downloads']
const hostsSsl      = ['']; // Example: ['secure', 'ssl']
(more...)

const svar = {
    (more...)
    domainName:                    domainName,
    domainNameSsl:                 domainNameSsl,
    hosts:                         hosts,
    hostsSsl:                      hostsSsl,
    siteDomain:                    hosts[0]     + ((hosts[0] != '') ? '.' : '') + domainName,
    siteDomainSecure:              hostsSsl[0]  + ((hostsSsl[0]  != '') ? '.' : '') + domainNameSsl,
    (more...)
    serverIp:                      listen,
    serverPort:                    80,
    serverSslIp:                   listenSsl,
    serverSslPort:                 443,
    sslPassphrase:                 '',
    (more...)

svar['fullAppRootUrlSecure'] = 'https://' + svar.siteDomainSecure + svar.appUrl;
(more...)

const path = Object.freeze({
    sslKeyDir: __dirname + '/Ssl/',
(more...)

let blipSiteDock = initSiteDockParams();
blip.svar.siteDockInstanceNames.push(blipSiteDock.svar.serverSiteDockName);
(more...)

const options = {
    key: blip.server.fs.readFileSync(blipSiteDock.path.sslKeyDir + 'clientCert.key'),
    cert: blip.server.fs.readFileSync(blipSiteDock.path.sslKeyDir + 'clientCert.pem'),
    //passphrase: blipSiteDock.svar.sslPassphrase
};
(more...)

SiteDock-Configuration.js JavaScript

SSL

sslPassphrase is the password for the SSL certificate which is located in the designated SSL directory. Leave blank if you didn't use a password to create the key for the certificate.


const svar = {
    sslPassphrase: 'Local$1private'
}

JavaScript

Request and Response

The below code is demonstrated in the file codebase located in the ioport-blip/Server/SiteDocks/Hanger71/SiteDock-Blip/Pages directory.


blipSiteDock.server.httpsApp.get(templatePage.url, function (req, res) {

    template.sendPage( req, res );

});

JavaScript

Template Engine

Overview

The TemplateEngine class is the nuts and bolts that not only holds the framework together, but also allows control over its contents programmatically; ofwhich, you'll discover as you become more familiar with the members inside.

Class: TemplateEngine

Constructor

The class constructor contains the parameters needed to control the data being served. The order of operation is that a class object is initialized, then loaded with content fragments and other parameteres before serving a response by using one of its send methods.


class TemplateEngine {
    constructor(siteDock = null, url = null, flagCache = false) {
        this.id           = te_tEOCntr++; // Object ID
        this.siteDock     = siteDock;
        this.url          = url; // URL of page
        this.cache        = { enabled: flagCache, data: null, time: null };  // Cache control object
        this.cacheMemSize = 0; // Size of cache object
        this.frag         = []; // Holds all of the fragment objects
        this.type         = 'page'; // page or fragment
        templateEngineObjects.push(this); // Holds all of the initialized TemplateEngine objects
    }
(more...)
}

JavaScript

Object Initialization

This class is part of the blip object and uses the syntax new blip.templateAssembler.TemplateEngine(...) to initialize.

Typically it will include the URL argument, but this is not required.


var template = new blip.templateAssembler.TemplateEngine(blipSiteDock.appUrl + 'Documentation', true);

JavaScript

addFragData(data, enabled=false)

Adds data to a TemplateEngine object and returns its stored fragment id. To cache the data in memory set enabled to true.


var text = "AJAX return text.";

template.addFragData(text);
// or
template.addFragData(text, true);

JavaScript

addFragFilePath(filePath, enabled=false)

Adds the filePath to a TemplateEngine object and returns its stored fragment id. To cache the file's contents in memory set enabled to true. The blip.svar.flagCache memeber will also need to be true.


var filePath = "./filename.html.tpl";

template.addFragFilePath(filePath);
// or
template.addFragFilePath(filePath, true);

JavaScript

addIncludesHeader(id, includes)

Adds the header includes code to a TemplateEngine object by passing the TemplateEngine store id and an includes object. This method can be called multiple times, adding to the existing includes each time.


var htmlIncludes = { css: [{sipTag: '{sip var="commonCss" /}', externalFile: '<link rel="stylesheet" href="Buttons_Generic.css" />'}],
                      js: [{sipTag: '{sip var="commonJs" /}', externalFile: '<script src="Buttons_Generic.js"></script>'}] };

var templateFragPageHeaderId = template.addFragFilePath("Header-Filename.html.tpl", true );

template.addIncludesHeader(templateFragPageHeaderId, htmlIncludes);

JavaScript

addIncludesFooter(id, includes)

Adds the footer includes code to a TemplateEngine object by passing the TemplateEngine store id and an includes object. This method can be called multiple times, adding to the existing includes each time.


var htmlIncludes = { js: [{sipTag: '{sip var="commonJs" /}', externalFile: '<script src="Buttons_Special.js"></script>'}] };

var templateFragPageFooterId = template.addFragFilePath("Footer-Filename.html.tpl", true );

template.addIncludesHeader(templateFragPageFooterId, htmlIncludes);

JavaScript

addStrReplace(id, obj)

Adds a string search and replace pair inside an object literal to a TemplateEngine object by passing the TemplateEngine store id and an object (obj) containing the two string pairs. This method can be called multiple times, adding to the existing entry each time.

A RegExp object can be used for the srcStr property.


var sourceString = "foo"
var replaceString = "bar";

template.addStrReplace(id, {srcStr: sourceString, rplStr: replaceString});

JavaScript

disableFrag(id, obj)

This method is still under development.

enableFrag(id, obj)

This method is still under development.

getFrag(id)

Returns the fragment associated with the id.


var frag = template.getFrag(id);

JavaScript

removeFrag(id)

Nulls the fragment store associated with the id.


template.removeFrag(id);

JavaScript

sendError(res, msg, sendResponseHeader=true)

Send a server response text msg.

The status code 200 and "'Content-Type', 'text/html'" will precede the msg by default.


template.sendError(res, "Error: This is an error message!");
// or
template.sendError(res, "Error: This is an error message!", false);  // No header information is sent.

JavaScript

sendPage(req, res, sendResponseHeader=true)

Sends the entire page including all of the added fragments to the template object and any header and/or footer includes. The fragments are sent in the order they were added unless changed.

The status code 200 and "'Content-Type', 'text/html'" will precede the page by default.


template.sendPage(req, res);
// or
template.sendPage(req, res, false);  // No header information is sent.

JavaScript

static sendText(res, text)

Sends response text without needing to initializate a TemplateEngine object.

No status or header information is sent with this server response.


var msg = "Arbitrary text."
blip.templateAssembler.TemplateEngine.sendText(res, msg);

JavaScript

static sendTextHtmlPage(res, text)

Sends response text without needing to initialize a TemplateEngine object.

The status code 200 and "'Content-Type', 'text/html'" will precede the page by default.


var msg = "Arbitrary text."
blip.templateAssembler.TemplateEngine.sendTextHtmlPage(res, msg);

JavaScript

sendPageCacheHandler(req, res, id)

If true, this method will check if the page cache memory is enabled and sends the entire page including all of the added fragments to the template object and any header and/or footer includes.

No page is sent if the return value is false.


var sentCachedPage = template.sendPageCacheHandler(req, res, id);

JavaScript

setFragCacheState(id, flagState)

Sets a template object's fragment memory cache enabled state to true or false.


template.setFragCacheState(templateFragId, true);

JavaScript

updateFragCache(id, data, flagCache=true)

Updates a template object's fragment memory cache data store associated with its id.


var cachedData = "New cached data.";
template.updateFragCache(templateFragId, cachedData);
// or
template.updateFragCache(templateFragId, cachedData, false);

JavaScript

updateFrag(id, data, flagCache=false)

Updates a template object's fragment data store associated with its id.


var newData = "New data.";
template.updateFrag(templateFragId, newData);
// or
template.updateFrag(templateFragId, newData, true);

JavaScript

setFragSipKeyedData(id, sipData)

Updates a template object's fragment SIP (Server Induced Population) data associated with its id.


var sipData = {dbItem1: 'Foo', dbItem2: 'Bar'};
template.setFragSipKeyedData(templateFragId, sipData);

JavaScript

cacheMem

Contains the amount of memory the template object is using. The value isn't always exact and should be used as a ballpark at best.


var templateMemoryUsed = template.cacheMem;

JavaScript

static objects

Contains all of the TemplateEngine initialized objects.


var templateObjects = blip.templateAssembler.TemplateEngine.objects;

JavaScript

static setCacheState

Sets a template object's memory cache state as either true = enabled or false = disabled.


blip.templateAssembler.TemplateEngine.setCacheState(template.id, true);

JavaScript

blip.templateAssembler

Overview

The blip.templateAssembler object contains class methods and functions used to assemble content into usable server responses.

Functions

The blip.templateAssembler object's functions exist outside of the TemplateEngine class and no template initialization is required to use them.

TemplateEngine

The TemplateEngine class is mentioned here since it is part of the blip.templateAssembler object and its documentation can be found here.

getContentFromTplFile(filePath)

Returns the contents of a template file.


var fileContents = blip.templateAssembler.getContentsFromTplFile("./filename.html.tpl");

JavaScript

performStringSip(str, tagText, strReplace)

Returns a text string with a SIP operation performed.


var text = "The quick red {sip var="animal" /} jumped."

var sippedText = blip.templateAssembler.performStringSip(text, "animal", "fox");

console.log(sippedText);

//Output: The quick red fox jumped.

JavaScript

getLoopFragIndices(str)

Returns the string indices from a string containing SIP loop tags.

SIP loop tag Example: {sipLoop id="TemplateEngine"}...{sipLoopSplit var="id" /}...{/sipLoop}


var fragIndices = blip.templateAssembler.getLoopFragIndices(str);

JavaScript

getSortFragLoops(str)

Returns a sorted loop fragment object.


var sortedFrags = blip.templateAssembler.getSortFragLoops(str);

JavaScript

assembleLoopFragData(dataObj, loopData = {})

Returns a string of assembled frag loops containing template sipLoopSplit variable data.


var fragWithLoop = '{sipLoop id="TemplateEngine"}
                        <div>{sipLoopSplit var="id" /}</div><div>{sipLoopSplit var="url" /}<div>
                    {/sipLoop}';

var loopData = {TemplateEngine: [
        {id: 0,
        url: "http://localhost"},
        {id: 1,
        url: "http://localhost/Core"},
        {id: 2,
        url: "http://localhost/Cp"}
    ]};

var sortedFragLoop = blip.templateAssembler.getSortFragLoops(fragWithLoop);

var assembledLoopFrag = blip.templateAssembler.assembleLoopFragData(sortedFragLoops, loopData);

console.log(assembleLoopFrag);

/* Output
<div>0</div><div">http://localhost<div>
<div>1</div><div>http://localhost/Core<div>
<div>2</div><div>http://localhost/Cp<div>
*/

JavaScript

blip.utilities

Overview

blip.utilities contains useful time saving functions.

Functions

JSONDecodeURIComponent(json)

Returns a JSON object from the JSON source object with all of its members decoded using node.js's decodeURIComponent().


var decodedJsonObj = blip.utilities.JSONDecodeURIComponent(json);

JavaScript

returnEmptyResults(fields)

Returns a database results set with all of the field values = ''.

To be used with the mysql node module which can be installed using $ yarn add mysql.


var emptyResults = blip.utilities.returnEmptyResults(fields);

JavaScript

splitFillNoResults(text)

Returns all SIP elements within text with no results.

To be used with the mysql node module which can be installed using $ yarn add mysql.


var emptyResults = blip.utilities.splitFillNoResults(text);

JavaScript

storeReqLogParams(req)

Stores selected server request members to the blip.server.appConnQueReqLogging object.


blip.utilities.storeReqLogParams(req);

// Example from source.
function storeReqLogParams(req){

    blip.server.appConnQueReqLogging = {
        siteDock: siteDock.svar.serverSiteDockName,
        url: req.url || 'NA',
        method: req.method || 'NA',
        ip: req.ip || 'NA',
        host: ((req.headers != undefined) ? req.headers.host || 'NA' : 'NA'),
        referer: ((req.headers != undefined) ? req.headers.referer || 'NA' : 'NA'),
        lang: ((req.headers != undefined) ? req.headers['accept-language'] || 'NA' : 'NA'),
        userAgent: ((req.headers != undefined) ? req.headers['user-agent'] || 'NA' : 'NA'),
        cookieId: ((req.headers != undefined) ? req.headers.cookie || 'NA' : 'NA')
    };

}

JavaScript

logRequest(req = null, msg = null)

Sends server request information with a message to the logs.


var msg = "Log this message.";

blip.utilities.logRequest(null, msg);

JavaScript

requestFailedHandler(req = null, msg = null)

Sends server request information and/or a message to the logs.


var msg = "Log this message.";

blip.utilities.requestFailedHandler(null, msg);

JavaScript

argIntegrityCheck(ops)

Adds a layer of error checking by performing an argument type validation defined in the ops object.


function assembleLoopFragData(dataObj, loopData = {}){

    if(!blip.utilities.argIntegrityCheck([
        {op: dataObj, type: 'object', subType: 'array'},
        {op: loopData, type: 'object', subType: 'object literal'}
    ])) return -1;
(more...)
}

JavaScript

Logging

Overview

Blip uses winston and winston-daily-rotate-file Yarn packages for its logging code foundation. Additional documentation that is not included in this document can be found in its corresponding Yarn Package Manager repository.

Configuration

Add any of the below svar members to the Configuration-Extension.js file to override the members in the File-Server.js file.


const ref = Object.freeze({
    loggerOutputTypeOptions: {
        none:           0,
        console:        1,
        file:           2,
        process:        3,
        consoleAndFile: 4,
        processAndFile: 5
    }
});

const svar = {
    (more...)
    loggerOutputType: ref.loggerOutputTypeOptions.consoleAndFile,
    flagVerbose:      true, // Enable/Disable detailed running log
    (more...)

JavaScript

Customizing

Customizing the Blip logger can be done by accessing the blip.server.logger, blip.server.loggerInfoErr, blip.server.loggerInfo, and blip.server.loggerErr objects. The source code can be found in the Server/Core/Common/Common_Utilities.js file.


(more...)
logDir:                 '/../../../Logs',
logInfoFileNamePrefix:  'Log_Server-Info',
logErrorFileNamePrefix: 'Log_Server-Error',
logFileNameExt:         '_%DATE%.log',
logTimestamp:           'YYYY-MM-DD hh:mm:ss.SS',
logDatePattern:         null,
logFrequency:           null,
logFormat:              ({ level, message, timestamp }) => {return `${timestamp} [${level}] ${message}`;},
logMaxSize:             '10m',
logMaxFiles:            '90d',
(more...)

blip.server.logger;
blip.server.loggerInfoErr;
blip.server.loggerInfo;
blip.server.loggerErr;

JavaScript

Output to Type

Set Type


const ref = Object.freeze({
    loggerOutputTypeOptions: {
        none:           0,
        console:        1,
        file:           2,
        process:        3,
        consoleAndFile: 4,
        processAndFile: 5
    }
});

const svar = {
    (more...)
    loggerOutputType: ref.loggerOutputTypeOptions.console,
    (more...)

JavaScript

Plug-and-Play Site Docks

Overview

There are two different types of plug-and-play site docks within Blip which are IOport Hanger71 and user supplied. The Hanger71 site docks are supplied by IOport and should not be used by the end user; whereas, the user supplied site docks are supplied by the end user or a 3rd party. Use a package in the ExamplePackageFrames as a starter springboard.

Hanger71 is reserved for IOport supplied packages.

ioport-blip
- Server
  - SiteDocks (user supplied location)
    - Hanger71 (reserved for IOport supplied site docks)

Directory Tree

Configuration

Supplied is a SiteDock-Frame-Basic package inside ExamplePackageFrames that can be used as a site dock creation springboard. The installed version has a SiteDock-Configuration.js file that holds all of the configuration parameters.

ioport-blip
- Server
  - SiteDocks
    - ExamplePackageFrames (packages)

Directory Tree

Installing

To install a site dock package, all that is required is to put the site dock package into the SiteDocks directory and restart the server. In this case, we will use the SiteDock-Frame-Basic package. After restarting the server, you will see new log entries and a new site dock directory in SiteDocks. Any packages are moved to the ./InstalledPackages directory after installation. Use URL: http://localhost:8080 to view the newly created site. To alter the host information you'll want to visit the HTTP Configuration section.

{"message":"Loading site dock: SiteDock-Frame-Basic","level":"info","timestamp": "2019-10-19 11:35:39.57"}

Log Entry Example

ioport-blip
- Server
  - SiteDocks
    - SiteDock-Frame-Basic

Directory Tree with New Addition

Client-Side

Assets

Overview

Blip organizes its client-side assets into common and themes based directory trees. As good practice, any Blip included assets and their locations should never be moved or altered in any way to help ensure code integrity when updates are applied. The end user or 3rd party assets should be added to a newly created common and/or themed directory tree.

All javascript code is isolated using (function (){...})(); wrappers and any global activity is done with the GLOBAL object found in Main.js.

Directory Tree

Common

Frequently used generic assets.

Client
- SiteDocks
  - SiteDock-Blip
    - Common
      - Css
      - Images
      - Js

Directory Tree

Themes

Assets used for styling and special purposes.

Client
- SiteDocks
  - SiteDock-Blip
    - Themes
      - Blip
        
        Common
        
        Images
        
        Buttons
        
        ...

Directory Tree

Configuration

Server-Side

Server-side configuration settings are found in the File-Server.js file and changes should follow the Core Server documentation.


const date = new Date();

const ref = Object.freeze({
    loggerOutputTypeOptions: {
        none:           0,
        console:        1,
        file:           2,
        process:        3,
        consoleAndFile: 4,
        processAndFile: 5
    }
});

const svar = {
    date:              date,
    version:          '2.1.0', // {sip var="blipVersion" /}
    copyrightYear:    ((date.getUTCFullYear() != '2020') ? '2020 - ' + date.getUTCFullYear(): '2020'),
    loggerOutputType: ref.loggerOutputTypeOptions.consoleAndFile,
    flagVerbose:      true, // Enable/Disable detailed running log
    flagCache:        false, // Enable/Disable all caching
    (more...)
}

JavaScript

Client-Side

Client-side configuration settings are found in the Main.js file with the settings located in the GLOBAL object.

Client
- Common
  - Js
    - Main.js

Directory Tree


var GLOBAL = {
    displayErrors: {type: "popup"}, // type: <"none" | "popup" | "console">
    themeNames: {blip: 'Blip'},
    domain: 'localhost',
    domainSecure: 'localhost',
    httpURLHostname: 'http://',
    httpsURLHostname: 'https://',
    httpPort: '',   // Ex: ':8000', optional, default will be used if empty.
    httpsPort: '',  // Ex: ':4443', optional, default will be used if empty.
    appURL: '/',  // Application URL example: '/' or '/app/'
    popups: {shadow: undefined},
    onWindowLoadFunc: undefined,
    flagIsTouch: false,
    flagIsSilkBrowser: false,
    touchBottomAdjValue: 40,
    emailCheck: /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
    utility: {}, // Used for utility functions. To initialize use GLOBAL.utility.[] = ;
    onWindowLoadRun: [] // Used to run extension functions on the window.onload event.  To initialize use GLOBAL.onWindowLoadRun.push();
};
(more...)
GLOBAL.httpURLHostname += GLOBAL.domain + GLOBAL.httpPort;
GLOBAL.httpsURLHostname += GLOBAL.domainSecure + GLOBAL.httpsPort;
(more...)

JavaScript

CSS @media

Blip uses the CSS @media style modifier to compensate for display size variations which allows for a richer interactive experience whether viewing from the desktop or mobile devices.

CSS Touch

Blip detects touch devices and dynamically loads files with dedicated CSS @media style modifiers that enhance the interface for touch use. Below is an example used by Blip for Buttons Generic.


GLOBAL.utility.addCssFileTouch("/Assets/Themes/Blip/Buttons/Css/Buttons_Generic_Touch.css");

Javascript

Navigation Menu

By default Blip uses the BlipDynamoTabs menu theme and it resides inside the Blip style theme directory tree.

This menu is intended to be used as main site navigation and the active tab states will not be functional in the below example.

Example

Client
- SiteDocks
  - SiteDock-Blip
    - Themes
      - Blip
        
        Menus
        
        BlipDynamoTabs

Directory Tree

To use the menu, add the ./Css/Menus.css and the ./Js/Base/Menu-Base.js to your HTML page using TemplateEngine.addIncludesHeader(id, includes) and then add the below syntax to the javascript file dedicated to your page layout.

linkAlternative is optional and can be used with a single URL or an array of URLs. Used to set active state of tab along with link.

urlParamParsers is optional and can be used to split URLs so tabs can become active.

linkAlternative and urlParamParsers are only used as topMenu object members.


(function (){

    init();

    function init(){

        GLOBAL.run.push(initTopMenuButtons);

    }

    let urlParamParsers = ['#','?'];  // Used to split URLs so tabs can become active.

    function initTopMenuButtons(){

        menuGroup = [
        {idName: 'flyoutPanel', link: '*'},
        {topMenu:    {id: 'buttonTopMenuBarTabHome',
                        name: 'Home',
                        urlParamParsers: urlParamParsers,
                        link: GLOBAL.httpURL + GLOBAL.appURL,
                        linkAlternative: 'http://' + GLOBAL.domain + GLOBAL.appURL, // Optional
                        style: 'top-menu-bar-tab-left',
                        styleActive: 'top-menu-bar-tab-active',
                        styleTabEffect: 'top-menu-bar-tab-wrapper',
                        styleTabEffectActive: 'top-menu-bar-tab-wrapper-active',
                        styleText: 'text-padding-8px',
                        styleTextActive: null,
                        styleTextEffect: null,
                        styleTextEffectActive: null,
                        styleFiller: 'top-menu-bar-tab-filler',
                        styleFillerActive: 'top-menu-bar-tab-filler-active',
                        width: null,
                        textAlign: 'left'},
        flyoutMenu: {id: 'buttonFlyoutMenuHome',
                        name: 'Home',
                        link: GLOBAL.httpURL + GLOBAL.appURL,
                        style: 'flyout-menu-button',
                        styleActive: 'flyout-menu-button-active'}},
        (more...)
        ];

        var BDT = GLOBAL.utility.BlipDynamoTabs();
        BDT.topMenuBarCondensedElement = 'topMenuBarCondensedTab';
        BDT.topMenuBarContainerElement = 'topMenuBarContainer';
        BDT.initParentMenu(menuGroup);

    }

})();

JavaScript

Use ./Js/Menus.js along with the Header.html.tpl template file found in the Common directory as an example.

Buttons

Blip button assets are located in the Blip/Buttons themes directory and the style rules found in ./Css/Buttons_Generic.css.

Client
- SiteDocks
  - SiteDock-Blip
    - Themes
      - Blip
        
        Buttons

Directory Tree

Generic

Example

HTML


let button = document.getElementById("button");

button.onclick = function(){
    // action
}

JavaScript

Generic Link

Button

Example


Button

HTML

Inline Text Link

This is a sample Text link.

Example


This is a sample Text link.

HTML

AJAX

Overview

Load data asynchronously to a webpage using the CommXmlHttp class.

Client
- SiteDocks
  - SiteDock-Blip
    - Common
      - Js
        
        Comm.js

Directory Tree

Class: CommXmlHttp

Initializes by returning a new object.


let comm = GLOBAL.utility.commXmlHttp();

JavaScript

setUrl(url)

Initialize the URL to send a request to.


comm.setUrl("http://locahost.com/ajax");

JavaScript

setTimeout(count)

Delays the execution of the setOnTimeoutFunc(func) assigned function if it is set.


let count = 250; //Milliseconds

comm.setTimeout(count);

JavaScript

setOnTimeoutFunc(func)

Assigns a function to be executed after a successful request reply using a delay which is set with setTimeout(count).


let func = function(){
    (more...)
}

comm.setOnTimeoutFunc(func);

JavaScript

setPreReqFunc(func)

Assigns a function to be executed before a successful request reply.


let func = function(){
    .
    .
    .
}

comm.setPreReqFunc(func);

JavaScript

setPostResFunc(func)

Assigns a function to be executed after a successful request replies with results.

this.responseData comes directly from the comm object and should use this syntax.


let func = function(){
    let data = this.responseData;
    (more...)
}

comm.setPostResFunc(func);

JavaScript

setResTarget(targetId, loaderId)

Assigns the target element to update its inner HTML contents and a loader animation element if present. The loaderId is optional.


let targetId = "innerHTMLParent";
let loaderId = "targetLoader";  // Optional

comm.setResTarget(targetId, <loaderId or null>);

JavaScript

setTargetLoaderFunc(func, <{} or null>)

Assigns a new target loader function and its arguments which replaces the default in the comm object.

Example

HTML


let args = {xmlHttpOpenAsync: false}; //Optional, sets xmlHttp.open(...) async state.  Default is true.

function func(){
    .
    .
    .
};

comm.setTargetLoaderFunc(func, <args or null>);

JavaScript

sendHttpGet()

Sends a get request.


comm.sendHttpGet();

JavaScript

sendHttpPost()

Sends a post request.


comm.sendHttpPost();

JavaScript