new layout.dt/js/spi/ThemeProvider()
stable API
ThemeProvider is the SPI implemented by themes to allow them to be integrated into ABCS. ThemeProvider instances are registered on the ThemeProviderRegistry to make them available for use in ABCS.
- Version:
- 17.1.5
- Source:
- See:
-
- Example ThemeExtensionManager on how to register/unregister a theme
Example
An example of a simple theme provider.
define([
'layout.dt/js/api/ThemeAssets',
'layout.dt/js/api/ThemeComponentMap',
'layout.dt/js/api/ThemeDescriptor',
'text!API.Example/theme/layout.html',
'text!API.Example/manifest.json'
], function(
ThemeAssets,
ThemeComponentMap,
ThemeDescriptor,
theme,
manifestJSON) {
'use strict';
var SimpleThemeProvider = function () {
var self = this;
var manifest = JSON.parse(manifestJSON);
self._descriptor =
new ThemeDescriptor({
id: manifest.id,
title: manifest.displayName,
description: manifest.description,
preview: manifest.image,
link: null,
linkText: null});
self._template = theme;
self._package = manifest.package;
};
SimpleThemeProvider.prototype.getDescriptor = function() {
return this._descriptor;
};
SimpleThemeProvider.prototype.getComponentMap = function() {
var componentMap = new ThemeComponentMap();
componentMap.addFavicon('abcs-tpl-app-favicon');
componentMap.addThemeArea('abcs-tpl-header-bar');
componentMap.addThemeArea('abcs-tpl-footer-bar');
componentMap.addTitle('abcs-tpl-app-title');
componentMap.addLogo('abcs-tpl-app-logo');
componentMap.addCopyright('abcs-tpl-app-copyright');
componentMap.addUserArea('abcs-tpl-app-user-area');
var options = {boundIds: ['abcs-tpl-phone-menu'],
alternateIds: ['abcs-tpl-app-main-menu-mobile']};
componentMap.addMenuArea('abcs-tpl-app-main-menu', options);
return componentMap;
};
SimpleThemeProvider.prototype.getAssets = function() {
var assets = new ThemeAssets();
assets.addAsset(ThemeAssets.Type.STYLE, 'style.css');
assets.addAsset(ThemeAssets.Type.TEMPLATE, 'layout.html');
assets.addAsset(ThemeAssets.Type.TEMPLATE, 'menu-horizontal-main.html');
assets.addAsset(ThemeAssets.Type.TEMPLATE, 'menu-horizontal.html');
assets.addAsset(ThemeAssets.Type.TEMPLATE, 'menu-mobile.html');
assets.addAsset(ThemeAssets.Type.TEMPLATE, 'user-area.html');
assets.addAsset(ThemeAssets.Type.IMAGE, 'menu-arrow.png');
return assets;
};
SimpleThemeProvider.prototype.getTemplate = function() {
return this._template;
};
SimpleThemeProvider.prototype.getAssetPath = function() {
return '' + this._package + '/theme';
};
SimpleThemeProvider.prototype.generateViewModelRuntimeCode = function() {
// Insert method to return view model runtime code here
};
SimpleThemeProvider.prototype.initializeViewModel = function() {
// Insert code to initialize view model at design time and return a
// promise to be resolved once the initialization is done.
return Promise.resolve();
};
return new SimpleThemeProvider();
});Methods
generateViewModelRuntimeCode() → {String}
stable API
Returns a String containing Javascript code to be executed in the generated application after the DOM has been prepared. This code should be used to initialize the view model for the theme, if required.
- Version:
- 17.1.5
- Source:
Returns:
code to initialize view model in generated application
- Type
- String
getApplicationContentId() → {String}
stable API
Returns the ID of an element in the HTML template into which ABCS should inject the application content.
Note: currently this is not used, and content will be injected into an
element with id "abcs-app-content".
- Version:
- 17.1.5
- Source:
Returns:
element ID for application content
- Type
- String
getAssetPath() → {String}
stable API
Returns the base path to the assets supplied by this theme. Each asset supplies a path relative to this base path. The base path itself should be a relative path from the extensions directory.
- Version:
- 17.1.5
- Source:
Returns:
base path for assets
- Type
- String
getAssets() → {layout.dt/js/api/ThemeAssets}
stable API
Returns a ThemeAssets object representing the assets provided by this theme (other HTML templates, images, css files etc).
- Version:
- 17.1.5
- Source:
- See:
Returns:
Assets for this theme
getComponentMap() → {layout.dt/js/api/ThemeComponentMap}
stable API
Returns a ThemeComponentMap which defines where certain ABCS components (title, logo, copyright, menu, etc) should be inserted into the HTML template.
- Version:
- 17.1.5
- Source:
- See:
Returns:
Content map for this theme
getDescriptor() → {layout.dt/js/api/ThemeDescriptor}
stable API
Returns a ThemeDescriptor that describes this theme. The descriptor includes the ID of the theme, along with additional information that may be presented to the user.
- Version:
- 17.1.5
- Source:
- See:
Returns:
The theme's descriptor
getTemplate() → {String}
stable API
Returns the HTML template that defines the view of the theme. This should
be a String containing an HTML body fragment. The best way to do this is
to place the markup in its own file, and then require it with a
text! prefix in the ThemeProvider (see example in constructor).
This template must contain an empty <div> element with
ID abcs-app-content and must not include
<html>, <body>, or
<head>.
- Version:
- 17.1.5
- Source:
- See:
-
- RequireJS loader plugin
for loading resources (
text!)
- RequireJS loader plugin
for loading resources (
Returns:
HTML string representing the view
- Type
- String
initializeViewModel() → {Promise}
stable API
Initializes the view model for the theme, if required. This code will be executed at design time, when the theme has been refreshed.
- Version:
- 17.1.5
- Source:
Returns:
A promise that is resolved when the view model has been initialized.
- Type
- Promise