Presentation Templates

  • Presentation Template's are .tpl files that represent your application's output
  • .tpl files usually contain segments of Html markup (but could contain anything you wish to output)
  • Master Presentation Templates can be used for main site containers that are repeated on many pages
  • In places where the output needs to be dynamic, tokens are used as place-holders
  • Tokens are replaced at run-time with dynamic data
  • Template functions for displaying iterative and other complex data in place of the tokens
  • With the default setup, Smarty3 is used as the template rendering engine
Presentation Template file details
File name example
SomeWebPage.tpl
File extension
.tpl
File contents type
HTML5 syntax + dynamic data tokens + rendering instructions
Standard location
AppNamespace/Presentation/Templates
Presentation Templates support both inheritence and composition

A Presentation Template can define abstract "blocks" that must be populated by sub-templates. [see drawing]
Just like with Object Oriented programming, the abstract template must be inherited by a conrete sub-template which provides the missing content.
In a standard ActiveWafl Mvc application, all Presentation Templates extend the "Master/MainLayout.tpl" template. The MainLayout.tpl template contains the outer <html> tag, the <head> tag and its contents, and an empty <body> "block". Then, each Site Page Presentation Template extends the MainLayout, and provides a concrete implementation for the abstract block. In ActiveWafl, these "abstract base-templates" are called Master Templates. Master Templates are usually contain outer Html elements such as <html>, <head>, and <footer>.
Default ActiveWafl applications have the following Master Presentation Templates: Html5.tpl, MainHead.tpl, MainLayout.tpl, and PlainLayout.tpl.

Presentation Templates can also be composed of one or more other Presentation Templates. This allows you to include any Presentation Template within another. Typically, the composition is referred to simply as a "Presentation Template" or a "Regular Presentation Template". The templates that make up the composition are referred to as "Part Presentation Templates".

So, to recap, we have three logical classifications of Presentation Templates:

  • Master Presentation Templates
  • (Regular) Presentation Templates
  • Part Presentation Templates

Note that Master Presentation Templates can also contain Part Presentation Templates, making them compositions as well as abstract base templates. Similarly, Part Presentation Templates can contain other Part Presentation Templates.

Default ActiveWafl application Presentation Template file structure and inheritence chain
  • Master/Html5.tpl
    • Master/MainHead.tpl
      • Master/MainLayout.tpl
        • <PageName>.tpl | Errors/ServerError.tpl
          • [Parts/GeneralErrors]
          • [Parts/GeneralInfo]

Default Master Presentation Templates

These abstract templates provide the high-level wrappers needed for Html5 Web Applications

Master/Html5.tpl
This Master Presentation Template is the main wrapping template for an HTML5 document. Everything else exists inside of this wrapper.
This Presentation Template has two abstract blocks: HTML_HEAD and HTML_BODY
It is recommended that you do not alter the contents of this file unless needed for a unique circumstance.
Master/MainHead.tpl
This Master View inherits from Html5 and implements it's HTML_HEAD block. It fills it in with the Html head element that contains the page title, scripts, links, and meta data.
It is recommended that you do not alter the contents of this file unless needed for a unique circumstance

Default Part Presentation Templates

These templates can be included within other Presentation Templates

Parts/GeneralErrors.tpl
If there are any non-fatal errors reported by your application, this Part Presentation Template will be rendered and displayed just before <Page Name>.tpl.
Parts/GeneralInfo.tpl
If there are any notices reported by your application, this Part Presentation Template will be rendered and displayed just before <Page Name>.tpl.
Errors/ServerError.tpl
If your web server (ex: Apache) returns an HTTP error code, this Part Presentation Template will be displayed.

Default Regular Presentation Templates

Every Site Page in a Web Application has its own Presentation Template

PageName.tpl
The main Html for the displayed SitePage.

Create a Presentation Template

  1. Create a new .tpl file in AppNamespace/Presentation/[SkinName/]Templates. Name the file appropriately. (example: "ContactUs.tpl"). No spaces or special characters
  2. Add some HTML contents to the file

Presentation Stylesheets

Presentation Stylesheets are .css files that provide rendering instructions for a Presentation Template. Presentation Stylesheets support the use of dynamic variable data for values. In the places where the output is dynamic, tokens are used as place-holders. The tokens are replaced at run-time with dynamic data.

Presentation Stylesheet file details
File name example
SomeWebPage.css
File extension
.css
File contents type
CSS3 syntax* (+ vendor-specific token replacement)
Standard location
App/Presentation/[SkinName/]Stylesheets

Create a Presentation Stylesheet:

  1. Create a new .css file in AppNamespace/Presentation/[SkinName/]Stylesheets. Name the file appropriately. (example: "ContactUs.css"). No spaces or special characters
  2. Add some CSS to the file

Create a Presentation Stylesheet for a specific Presentation Template

  1. Create a file with the same base name as the Presentation Template in AppNamespace/Presentation/[SkinName/]Stylesheets/
  2. Example: If the Presentation Template is named ContactUs.tpl, then the Presentation Stylesheet file name would be ContactUs.css

Create a Presentation Stylesheet that can be shared between Views

Application-wide CSS is available in AppNamespace/Presentation/[SkinName/]Stylesheets/Global.css

Dynamic Presentation Data

Presentation Templates can display dynamic information provided by your application. Dynamic data and rendering instructions are denoted by surrounding {curly-brackets} in the Presentation Template. Some Presentation Stylesheets also support dynamic content using the same syntax.

In Non-MVC applications the dynamic data is avialable in variables of whatever name you gave them.

In MVC applications, the dynamic data is always available in a variable named $MODEL. Each of the Model's property is also available directly via a variable of the same name. For example, if you have a Model with the properties PropertyA and PropertyB, those properties could be accessed using either of the following: {$MODEL->GetFieldValue("PropertyA")} or {$PropertyA}.

MVC Example: A View's Presentation Template that displays dynamic data in the <title> and <body> sections
  1.    <head>
  2.       <title>{$MODEL->GetFieldValue("SiteName")}</title>
  3.    </head>
  4.    <body>
  5.       Welcome to {$MODEL->GetFieldValue("SiteName")}, the site about {$MODEL->GetFieldValue("SiteDescription")}
  6.    </body>
  7. </html>

To render dynamic data, the rendering engine needs to be given the values that will be used to fill in the placeholder tokens.

In an MVC application, the easiest way to supply data to the rendering engine is to pass a Model to the createResponseFromRequest helper method.

createResponseFromRequest(DblEj\Communication\Http\Request $request, DblEj\Mvc\IMvcWebApplication $app[, DblEj\Mvc\IModel $dataModel = null])

In MVC applications where you are dealing with the View, you can associate data directly to it. Views expose the following two methods for that purpose.

IView::Set_Model(IModel $model)
IView::SetModelData(string $dataName, mixed $dataValue)

In all web applications, you can use the SetGlobalTemplateData method on the Application object to pass data to the rendering engine.

IWebApplication::SetGlobalTemplateData(string $dataName, mixed $dataValue)

If none of the previous options are available, you can pass data directly to the rendering engine using these three methods.

SetGlobalData(string $variableName, mixed $value)
SetGlobalDataReference(string $variableName, mixed &$value)
SetStaticData(string $variableName, mixed $value)

The following examples will demonstrate some of these approaches.

Web Application request handler that uses the Application's SetGlobalTemplateData method to make data available to the rendering engine.
  1. public function HandleHttpRequest(\DblEj\Communication\IRequest $request, $requestString, \DblEj\Application\IApplication $app)
  2. {
  3.    //Get the passed EmployeeId GET/POST var
  4.    $employeeId = $request->GetInput("EmployeeId");
  5.  
  6.    //Load the Employee Functional Model from the database (Models are used in all app types, not just MVC)
  7.    $employeeModel = new Employee($employeeId);
  8.  
  9.     //Make the employee data available to the rendering engine
  10.     $app->SetGlobalTemplateData("EMPLOYEE", $employeeModel);
  11.  
  12.    //return a response that tells the application to return a rendering of the default template for the given request
  13.    return new \DblEj\Communication\Http\SitePageResponse($sitePage);
  14. }
In this example Controller action, we use an HTTP GET/POST variable named 'EmployeeId' to load a Functional Model for an Employee from the Employees table and expose it to the template rendering engine by passing it to createResponseFromRequest.
MVC Controller action: use createResponseFromRequest to create the response.
  1. public function DefaultAction(Request $request, IMvcWebApplication $app)
  2. {
  3.    //Get the passed EmployeeId GET/POST var
  4.    $employeeId = $request->GetInput("EmployeeId");
  5.  
  6.    //Load the Employee Functional Model from the database *
  7.    $employeeModel = new Employee($employeeId);
  8.  
  9.    //return a response that tells the application to return a rendering of the default template for the given request using the given Model.
  10.    return $this->createResponseFromRequest(request, $app, $employeeModel);
  11. }
In this example HTTP request handler, we use an HTTP GET/POST variable named 'EmployeeId' to load a Functional Model for an Employee from the Employees table and expose it to the template rendering engine by using helper method on the WebApplication object.
MVC Controller action: associate a Model directly to a View using it's Set_Model method.
  1. public function DefaultAction(Request $request, IMvcWebApplication $app)
  2. {
  3.    //Get the passed EmployeeId GET/POST var
  4.    $employeeId = $request->GetInput("EmployeeId");
  5.  
  6.    //Load the Employee Functional Model from the database *
  7.    $employeeModel = new Employee($employeeId);
  8.  
  9.    //use the request to query the app for the correct SitePage
  10.    $sitePage = $app->GetSitePageByRequest($request);
  11.  
  12.    //When rendering the $sitePage View, the rendering engine will use the $employeeModel as a data source.
  13.    $sitePage->Set_Model($employeeModel);
  14.  
  15.    //return a response that tells the application to return a rendering of $sitePage's template using $sitePage's Model.
  16.    return $this->createResponseFromSitePage($app, $sitePage);
  17. }
In this example Controller action, we use an HTTP GET/POST variable named 'EmployeeId' to load a Functional Model for an Employee from the Employees table and expose it to the template rendering engine by associating it with the returned View ($sitePage).
Presentation Template segment: Use the exposed Model when rendering the Presentation Template
  1. <div>
  2.    <h1>Employee Details for id#: {$EMPLOYEE->Get_EmployeeId()}</h1>
  3.    <div>
  4.       Name: {$EMPLOYEE->Get_LastName()}, {$EMPLOYEE->Get_FirstName()}
  5.    </div>
  6.    <div>
  7.       Title: {$EMPLOYEE->Get_PositionTitle()}
  8.    </div>
  9.    <div>
  10.       Address:
  11.       <div>{$EMPLOYEE->Get_Address()}</div>
  12.       <div>{$EMPLOYEE->Get_City()}, {$EMPLOYEE->Get_State()} {$EMPLOYEE->Get_ZipCode()}</div>
  13.    </div>
  14. </div>
Here we display information from the Employee Functional Model that was exposed by the request handler in a previous example.
MVC Presentation Template segment: Use the exposed Model's properties when rendering the Presentation Template
  1. <div>
  2.    <h1>Employee Details for id#: {$EmployeeId}</h1>
  3.    <div>
  4.       Name: {$LastName}, {$FirstName}
  5.    </div>
  6.    <div>
  7.       Title: {$PositionTitle}
  8.    </div>
  9.    <div>
  10.       Address:
  11.       <div>{$Address}</div>
  12.       <div>{$City}, {$State} {$ZipCode}</div>
  13.    </div>
  14. </div>
Here we display information from the Employee Functional Model that was exposed by the Controller in a previous example. Note that we could have instead chosen to use the IModel::GetFieldValue("PropertyName") method on the Model object to achieve the same.

Rendering Instructions

ActiveWAFL uses presentation-centric instructions to determine how to compile, render, and cache the Presentation Template and the associated data.

The 5 different types of Rendering Instructions

Compiler Instructions
Tells the rendering engine how to treat, or not to treat, the contained contents.
Always has a starting and ending tag.
Content Modifiers
Formats, filters, or otherwise modifies string content.
Content is piped into a Content Modifier.
Content Modifiers can be called in chains.
Content Shortcuts
Generates standard content automatically.
Always has a starting tag. Ending tags are only needed for shortcuts that have dynamic nested content.
Decorative Containers
Wraps the contents in a decorated frame.
Always has a starting and ending tag.
Structure Controllers
Display and/or repeat content, optionally based on logical conditions.
Always has a starting and ending tag.

Compiler Instructions

Compiler instruction tell the compiler how to treat a section of code. They always have start and end tags.

Compiler Instruction Synopsis where "compiler_instruction" is the name of the instruction being called.
{compiler_instruction ParamName1=ParamValue1 ParamName2=ParamValue2 ...}
    Some static and/or {$dynamic} contents.
{/compiler_instruction}

nocache

Don't include the contents in the server-side cache.

Instruct the renderer never to cache the username.
<div>
    Hello, you are logged in as {nocache}{$CURRENT_USER->Get_Username()}{/nocache}
</div>

nominify

Don't minify the contents.

Instruct the renderer never to minify the letter, as to maintain it's letter and line spacing.
{nominify}
<pre>
    Dear Waffle House,

        We love waffles!  Especially when they're covered in syrup!

    Sincerely,
    The Wafl Team
</pre>
{/nominify}

Content Modifiers

Content Modifiers modify the content that is piped into them.

Content Modifier Synopsis where "content_modifier" is the name of the modifier being called.
{$SOME_CONTENT|content_modifier:param1:param2:...}

capitalize

Capitalizes the first letter of each word in the string.

{$SOME_STRING|capitalize}

commify

Formats a number with thousands seperators and a decimal point.

Arguments for commify
Precision
Optional
The number of digits after the decimal point
Decimal Point
Optional
The character to use for the decimal point
Thousands Seperator
Optional
The character to use as the thousands seprator
{$SOME_STRING|commify[:2:".":","]}

currency

Formats a number with thousands seperators and a decimal point with numeric precision in the hundredths.

date_format

Formats a Unix time stamp as a readable date string.

Arguments for date_format
Format
strftime format for output
{$SOME_STRING|date_format:"%Y-%b-%d"}

datetime_format

Formats a Unix time stamp as a readable date and time string.

Arguments for datetime_format
Format
strftime format for output
{$SOME_STRING|datetime_format:"%c"}

escape

Escape a string sequence.

http://www.smarty.net/docs/en/language.modifier.escape.tpl

localdate_format

Convert the specifed GMT timestamp into a local date string.

localdatetime_format

Convert the specifed GMT timestamp into a local datetime string.

indent

Prefix every line in a string with the specified character padding.

lower

Make all characters in the string lowercase.

http://www.smarty.net/docs/en/language.modifier.lower.tpl

regex_replace

Regular expression string replacement.

http://www.smarty.net/docs/en/language.modifier.regex.replace.tpl

phone_format

Formats a phone number according to the country's format.

Arguments for phone_format
Country Code
2-digit ISO Country Code
{$PHONE_NUMBER_STRING|phone_format:"US"}

replace

Replace strings within a string.

http://www.smarty.net/docsv2/en/language.modifier.replace.tpl

spacify

Spacify a string.

http://www.smarty.net/docs/en/language.modifier.spacify.tpl

truncate

Truncate a string if it is too long for display.

http://www.smarty.net/docs/en/language.modifier.truncate.tpl

strip

Remove whitespace from the ends of a string.

http://www.smarty.net/docs/en/language.function.strip.tpl

strip_tags

Remove HTML tags from a string.

http://www.smarty.net/docs/en/language.modifier.strip.tags.tpl

t

Translate a string resource using the current locale.

tojson

Convert the contents to JSON where the contents is an object or an array.

upper

Make all characters in the string uppercase.

http://www.smarty.net/docs/en/language.modifier.upper.tpl

wordwrap

Wrap text at given boundries.

http://www.smarty.net/docs/en/language.modifier.wordwrap.tpl

Content Shortcuts

Content Shortcuts create standard HTML output, reducing the amount of repeatable content you need to write. They always have a start tag, but an end tag is only required for shortcuts that contain nested dynamic content.

Content Shortcut Synopsis where "content_shortcut" is the name of the shortcut being called.
{content_shortcut ParamName1=ParamValue1 ParamName2=ParamValue2 ...}
Content Shortcut Synopsis where there is child contents and "content_shortcut" is the name of the shortcut being called.
{content_shortcut ParamName1=ParamValue1 ParamName2=ParamValue2 ...}
Some contents that is to be displayed within the generated HTML.
{/content_shortcut}

model_editor

Accepts a data model as an argument and generates a <form> with a {property_input} for each of it's properties.

model_editor example
  1. {model_editor Model=$SOME_DATA_MODEL}

navigate

Generate a link to a registered SitePage, for use in menus and other navigation links.

Show a link to the default action on a Controller named Controller1
{navigate Destination="Controller1"}

property_input

Displays a label and a form input for the specified model property.

property_input example with a text box input
  1. {property_input Model=$SOME_DATA_MODEL Property="SomePropertyName"}
property_input example with a select input, populated by a key / value array.
  1. {property_input Model=$SOME_DATA_MODEL Property="SomePropertyName" OptionList=$SOME_ARRAY}
property_input example with a select input, populated by an array of objects
  1. {property_input Model=$SOME_DATA_MODEL Property="SomePropertyName" OptionObjects=$SOME_ARRAY ValueProperty="SomeObjectProperty" LabelProperty="SomeObjectProperty"}

resource

Renders an appropriate HTML element to display the specified resource, where the resource is a file in the application's public resources folder.

Show an image
{resource name="MyLogoImage"}

ui

Renders the HTML and Javascript for the specified UI Component.

Show a number spinner
{ui name="Spinner" Id="SomeNumber" PostName="SomeNumber" MinValue="1" MaxValue="10000" SmallStep="1" LargeStep="100" Value="0"}
Show a date picker
{ui name="DatePicker" Id="StartDate" PostName="StartDate"}

uiblock

Renders the HTML and Javascript for the specified block UI Component.

uiblock example: show a dropdown menu with navigation links
  1. {uiblock name="DropdownMenu" Caption="Dropdown Menu Example"}
  2.    <li>{navigate Destination="Controller1"}</li>
  3.    <li>{navigate Destination="Controller2"}</li>
  4.    <li>{navigate Destination="Controller3"}</li>
  5. {/uiblock}

validator

Provides client-side validation of a form input and provides visual indication of the input's validity.

Decorative Containers

console

Display the contents in a way that represents computer console output.

{ console } example
  1. {console Header="Console application output" HeaderSideNote="/var/bin/testapp" Footer="Output from a pretend shell script"}
  2. cd /var/bin/testapp
  3. ./testapp > /tmp/testfile.txt
  4. echo "Thanks for playing!"
  5. {/console}
Here is the rendered output from the above example
Console application output

cd /var/bin/testapp
./testapp > /tmp/testfile.txt
echo "Thanks for playing!"
                                                       
Output from a pretend shell script

highlightcode

Wrap the code contents in a frame with a header description and perform syntax highlighting on the contained code with optional line numbers and alternating row colors.

{ highlightcode } example
  1. {highlightcode Language="c#" Header="My example program" HeaderSideNote="program_example.file"
  2.             Footer="This is an example of setting a foo to the value of bar's length times two"
  3.             LineBgColor="#fcfcfc" LineBgColorAlt="#f0f0f0" TabWidth=3 LineNumbers=true}
  4. String foo;
  5. Object bar;
  6. foo = Math.Round(bar.Length * 2);
  7. {/highlightcode}
Here is the rendered output from the above example
My example programprogram_example.file
  1. String foo;
  2. Object bar;
  3. foo = Math.Round(bar.Length * 2);
This is an example of setting a foo to the value of bar's length times two

Structure Controllers

repeater

Use the Repeater to repeat sections of static content while the dynamic content changes with each repetition.

Repeater example: Render a div for each employee that shows their name and ID.
  1. {repeater $MODEL->GetFieldValue("Employees") as $EMPLOYEEID => $EMPLOYEE}
  2. <div>
  3.     Employee Id: {$EMPLOYEEID} <br>
  4.     Employee Name: {$EMPLOYEE->Get_LastName()}, {$EMPLOYEE->Get_FirstName()} <br>
  5. </div>
  6. {/repeater}

display_condition

Only render the contents if the condition is met.
There can only be one display_condition within each rendering instruction.

Example: Only display the employee div if the employee is not a manager.
  1. {display_condition $EMPLOYEE->Get_Title() != "Manager"}
  2.     <div>
  3.         Employee Id: {$EMPLOYEEID} <br>
  4.         Employee Name: {$EMPLOYEE->Get_LastName()}, {$EMPLOYEE->Get_FirstName()} <br>
  5.         Security Clearance: Yes
  6.     </div>
  7. {/display_condition}

display_alternative

Render the contents if the display_condition was not met, but this alternative condition is.
There can be multiple display_alternatives within each rendeirng instruction.

display_otherwise

Render the contents if neither the display_condition.
There can only be one display_condition within each rendering instruction.

Example: Render a div for each employee that shows different information depending on their job title.
  1. {repeater $MODEL->GetFieldValue("Employees") as $EMPLOYEEID => $EMPLOYEE}
  2.     {display_condition $EMPLOYEE->Get_Title() == "Manager"}
  3.         <div style="background-color: green;">
  4.             Employee Id: {$EMPLOYEEID} <br>
  5.             Employee Name: {$EMPLOYEE->Get_LastName()}, {$EMPLOYEE->Get_FirstName()} <br>
  6.             Security Clearance: Yes
  7.         </div>
  8.     {display_alternative $EMPLOYEE->Get_Title() == "Assistant Manager"}
  9.         <div style="background-color: orange;">
  10.             Employee Id: {$EMPLOYEEID} <br>
  11.             Employee Name: {$EMPLOYEE->Get_LastName()}, {$EMPLOYEE->Get_FirstName()} <br>
  12.             Security Clearance: Yes
  13.         </div>
  14.     {display_alternative $EMPLOYEE->Get_Title() == "Team Lead"}
  15.         <div style="background-color: purple;">
  16.             Employee Id: {$EMPLOYEEID} <br>
  17.             Employee Name: {$EMPLOYEE->Get_LastName()}, {$EMPLOYEE->Get_FirstName()} <br>
  18.             Security Clearance: No
  19.         </div>
  20.     {display_otherwise}
  21.         <div style="background-color: blue;">
  22.             Employee Id: {$EMPLOYEEID} <br>
  23.             Employee Name: {$EMPLOYEE->Get_LastName()}, {$EMPLOYEE->Get_FirstName()} <br>
  24.             Security Clearance: No
  25.         </div>
  26.     {/display_condition}
  27. {/repeater}

Template Composition & Inheritence

ActiveWAFL supports Template Inheritence and Template Composition. Using these methods allows for easy reuse of template sections.

Template Composition

In the following example, we'll use composition to display the above Employee template for the passed employee, as well as a chart stored in another template file that shows their productivity.
  1.    <div>
  2.       <h1>Employee Information</h1>
  3.       {include file="EmployeeInfo.tpl"}
  4.    </div>
  5.    <div>
  6.       <h1>Employee Productivity</h1>
  7.       {include file="EmployeeProductivityChart.tpl"}
  8.    </div>
  9. </body>
This is showing a Regular Presentation Template composed of the following Part Presentation Templates: EmployeeInfo, EmployeeProductivityChart

Template Inheritence

We'll achieve the same result in this example, but this time we'll use inheritence instead of composition
  1.    <div>
  2.       <h1>Employee Information</h1>
  3.       {block "EmployeeInfo"}{/block}
  4.    </div>
  5.    <div>
  6.       <h1>Employee Productivity</h1>
  7.       {block "EmployeeProductivityChart"}{/block}
  8.    </div>
  9. </body>
This is showing a Master Presentation Template with two abstract blocks: EmployeeInfo and EmployeeProductivityChart. These abstract blocks need to be implemented by a sub-template.

Skins

ActiveWAFL supports the dynamic lookup of Presentation Templates and Stylesheets based on a selected Skin. This allows you to easily change the entire look and static content of a site while sharing all dynamic aspects.
The default skin for all ActiveWAFL web applications is called "DefaultSkin" and it's contents can be found in the following folder AppNamespace/Presentation[/DefaultSkin]
You can create new skins by creating a new folder in the same directory as DefaultSkin, and give it a custom name.

A "Skin" in ActiveWAFL refers to all design files for a View, including the Presentation Stylesheet (.css) and Presentation Template (.tpl) files. In ActiveWAFL you can customize the Css as well as the Html contents on a per skin basis. Another unique feature in ActiveWAFL is that the custom skins will inherit from the DefaultSkin automatically. All you have to do is copy and edit the files you wish to change for your custom skin.

In this image of part of an app's folder-structure you see the DefaultSkin folder and a new custom skin named TestSkin
Resource

Define the skins

Skins can be defined in the LookAndFeel.syrp file.

Example Skin configurationConfig/More/LookAndFeel.syrp
  1. Skins
  2.    DefaultSkin
  3.       TemplateFolder =  DefaultSkin
  4.       Fonts
  5.          BaseFont
  6.             Family      =  "Open Sans"
  7.             Provider    =  Google
  8.             Fallback    =  sans-serif
  9.             BaseSize    =  18px
  10.             Weight      =  normal
  11.          StandoutFont
  12.             Family      =  "Roboto"
  13.             Provider    =  Google
  14.             Fallback    =  serif
  15.             BaseSize    =  20px
  16.             Weight      =  bold
  17.       Layout
  18.          VerticalElementSeparation  =  9px
  19.          VerticalRowSeparation      =  15px
  20.          HorizontalRowSeparation    =  15px
  21.       Colors
  22.          BaseFont       =  #333333
  23.          StandoutFont   =  #333333
  24.          Titles         =  #000000
  25.          Context
  26.             Info              =  #49afcd
  27.             InfoContrast      =  #ffffff
  28.             Primary           =  #0074cc
  29.             PrimaryContrast   =  #ffffff
  30.             Success           =  #51a351
  31.             SuccessContrast   =  #ffffff
  32.             Warning           =  #faa732
  33.             WarningContrast   =  #ffffff
  34.             Urgent            =  #bd362f
  35.             UrgentContrast    =  #ffffff
  36.             Error             =  #bd362f
  37.             ErrorContrast     =  #ffffff
  38.             Inverse           =  #414141
  39.             InverseContrast   =  #ffffff

Set the active skin

To set the active skin at render-time, edit the Skin setting under the Application heading in the environment's settings file.
Example environment settings file snippet with DefaultSkin set as the active skinConfig/Settings.environment.syrp
  1. Application
  2.    Skin  =  DefaultSkin

To set the active skin at run-time, call the SetGlobalStylesheet in the DblEj User-interface Utilities.
Example Javascript that sets TestSkin1 set as the active skin
  1. DblEj.UI.Utils.SetGlobalStylesheet("TestSkin1");