/*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/smarty; if (!is_callable('smarty_modifier_replace')) include 'phar:///usr/share/Wafl-Extensions/Templating/Smarty3/Smarty3.1.21.phar/plugins/modifier.replace.php'; if (!is_callable('smarty_block_nominify')) include '/usr/share/Wafl-Extensions/Templating/Smarty3/Plugins/block.nominify.php'; ?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ ActiveWAFL - User Interface Design Elements /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['SKIN']->value)&&$_smarty_tpl->tpl_vars['SKIN']->value->Get_MainFont()&&$_smarty_tpl->tpl_vars['SKIN']->value->Get_MainFont()->GetStylesheetUrl()) {?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['SKIN']->value)&&$_smarty_tpl->tpl_vars['SKIN']->value->Get_HeadingFont()&&$_smarty_tpl->tpl_vars['SKIN']->value->Get_HeadingFont()->GetStylesheetUrl()) {?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['SKIN']->value)&&$_smarty_tpl->tpl_vars['SKIN']->value->Get_SubFont()&&$_smarty_tpl->tpl_vars['SKIN']->value->Get_SubFont()->GetStylesheetUrl()) {?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['SKIN']->value)&&$_smarty_tpl->tpl_vars['SKIN']->value->Get_AccentFont()&&$_smarty_tpl->tpl_vars['SKIN']->value->Get_AccentFont()->GetStylesheetUrl()) {?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['SHEETOBJECT'] = new Smarty_Variable; $_smarty_tpl->tpl_vars['SHEETOBJECT']->_loop = false; $_from = $_smarty_tpl->tpl_vars['STYLESHEETS']->value; if (!is_array($_from) && !is_object($_from)) { settype($_from, 'array');} foreach ($_from as $_smarty_tpl->tpl_vars['SHEETOBJECT']->key => $_smarty_tpl->tpl_vars['SHEETOBJECT']->value) { $_smarty_tpl->tpl_vars['SHEETOBJECT']->_loop = true; ?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['SHEETOBJECT']->value->Get_SkinName()=='') {?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['CURRENT_SKIN_TITLE']->value==$_smarty_tpl->tpl_vars['SHEETOBJECT']->value->Get_SkinName()) {?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['CURRENT_SITEPAGE']->value->HasControlCss()) {?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/" /> /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['ADDITIONAL_RAW_HEAD_HTML']->value)) {?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['ADDITIONAL_RAW_HEAD_HTML']->value;?> /*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/
/*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/tpl_vars['GLOBAL_ERRORS']->value)>0) {?>/*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/getSubTemplate ("Parts/GeneralErrors.tpl", $_smarty_tpl->cache_id, $_smarty_tpl->compile_id, 9999, null, array(), 0);?> /*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*//*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/ /*%%SmartyNocache:1661667899594ad83708be12-45551219%%*/getSubTemplate ("Parts/GeneralInfo.tpl", $_smarty_tpl->cache_id, $_smarty_tpl->compile_id, 9999, null, array(), 0);?> /*/%%SmartyNocache:1661667899594ad83708be12-45551219%%*/

ActiveWAFL User Interface Design Overview

ActiveWAFL provides UI Components, Utilities, and CSS that can be used to streamline your UI development.
Those are the three aspects of the user interface design we'll discuss in this article.

Styled HTML Elements
Standard HTML elements that have CSS applied to provide a particular look and feel.
UI Components
Generated by the template renderer based on Rendering Instructions.
Generated with the {ui} or the {uiblock}...{/uiblock} Content Shortcut.
Content is based on a server-side template (.tpl file).
Can have client-side functionality (Javscript) built-in.
UI Utilities
Client side Javascript methods that generate UI elements on-the-fly.

Styled HTML Elements

These elements are automatically styled. You can override the default styles in your application.

Alerts

Alerts can be used to alert the user or to draw attention to certain content.

  1. <div class="Warning Alert">
  2.     <h4>Syrup Alert</h4>
  3.     <p>We are running low on maple syrup!</p>
  4. </div>
  5. <div class="Alert Info">
  6.     <h4>Syrup Info</h4>
  7.     <p>This syrup is warm and ready!</p>
  8. </div>
  9. <div class="Alert Error">...</div>
  10. <div class="Alert Success">...</div>

Syrup Alert

We are running low on maple syrup!

Syrup Info

This syrup is warm and ready!

Syrup Emergency

We are ALL OUT of maple syrup!

Syrup Consumed

We ate all of the syrup.

Buttons

ActiveWAFL has several types of buttons including basic buttons, dropdown buttons, and link buttons.  All of them can be contextually styled.

Basic Buttons
button
<button>Command Text</button>
Link Buttons
a.Button
Link Text <a class="Button" href="">Link Text</a>
Button States
.Info|.Contrast|.Warning|.Success|.Error

<button class="Error">Error</button>
<button class="Info">Info</button>
<button class="Warning">Warning</button>
<button class="Contrast">Contrast</button>
<button class="Success">Success</button>

Insets

.Inset

Make content stand-out by isolating it and adding an inset effect
  1. <div class="Inset Error">
  2.     <h1>Inset Heading</h1>
  3.     Inset contents go here
  4. </div>

.Inset.Info

Make informative content stand-out by isolating it and adding an blue colored inset effect
  1. <div class="Inset Info">
  2.     <h1>Info Heading</h1>
  3.     Informative content goes here
  4. </div>

.Inset.Success

Make success messages stand-out by isolating them and adding an green colored inset effect
  1. <div class="Inset Success">
  2.     <h1>Success Heading</h1>
  3.     Success message goes here
  4. </div>

.Inset.Warning

Make warning messages stand-out by isolating them and adding an orange colored inset effect
  1. <div class="Inset Warning">
  2.     <h1>Warning Heading</h1>
  3.     Warning message goes here
  4. </div>

.Inset.Error

Make error messages stand-out by isolating them and adding a red colored inset effect
  1. <div class="Inset Error">
  2.     <h1>Error Heading</h1>
  3.     Error message goes here
  4. </div>

Marks

Tags provide visual context for words or phrases.

<p>There is an <span class="Error Mark">Error Mark</span> in this sentence.</p>

<p>There is an <span class="Warning Mark">Warning Mark</span> in this sentence.</p>

<p>There is an <span class="Success Mark">Success Mark</span> in this sentence.</p>

There is an Error Mark in this sentence.

There is an Warning Mark in this sentence.

There is an Success Mark in this sentence.

Menus

Menus provide a user interface for grouping commands.

Menu List
menu
  1. <menu>
  2.     <li>Menu Item 1</li>
  3.     <li>Menu Item 2</li>
  4.     <li>Menu Item 3</li>
  5.     <li>Menu Item 4</li>
  6.     <li>Menu Item 5</li>
  7. </menu>

Notifications

Notifications can be used to notify the user about events.

  1. <div class="Warning Notification">
  2.     <h5 class="Title">Warning Notification Demo</h3>
  3.     This is a warning Notification
  4. </div>
  5. <div class="Notification Info">
  6.     <h5 class="Title">Info Notification Demo</h3>
  7.     This is an info Notification
  8. </div>
  9. <div class="Notification Error">
  10.     <h5 class="Title">Error Notification Demo</h3>
  11.     This is an error Notification
  12. </div>
  13. <div class="Notification Success">
  14.     <h5 class="Title">Success Notification Demo</h3>
  15.     This is a success Notification
  16. </div>
Warning Notification Demo
This is a warning Notification
Info Notification Demo
This is an info Notification
Error Notification Demo
This is an error Notification
Success Notification Demo
This is a success Notification

Pagination

Pagination can be used to navigate pages

  1. <ul class="Pagination">
  2.         <li><a href="">Previous</a></li>
  3.         <li><a href="">1</a></li>
  4.         <li><a href="">2</a></li>
  5.         <li><a href="">3</a></li>
  6.         <li class="Active"><a href="">4</a></li>
  7.         <li><a href="">5</a></li>
  8.         <li><a href="">Next</a></li>
  9.     </ul>

Tags

Tags provide visual context for words or phrases.

<p>There is a <span class="Warning Tag">Warning Tag</span> in this sentence.</p>

<p>There is a <span class="Info Tag">Info Tag</span> in this sentence.</p>

<p>There is a <span class="Success Tag">Success Tag</span> in this sentence.</p>

There is a Warning Tag in this sentence.

There is a Info Tag in this sentence.

There is a Success Tag in this sentence.

Tiles

Tiles can be used to display thumbnails or any other grid content

ul.Tiles.Bordered puts a border on each tile, not on the container
This behavior of .Bordered on a ul.Tiles is different than it is on other elements.  
Tile sizes are determined automatically by their contents.
for fixed heights, add the .Small, .Medium, .Large, or .XLarge classes
for perfect squares, add the .Fixed class
for fixed rectangles, add the .Wide or .Tall class
Code Example
  1. <ul class="Bordered Small Tiles">
  2.         <li>{resource name="GreySquare.png"}</li>
  3.         <li>{resource name="GreySquare.png"}</li>
  4.     </ul>
Code Example (with Captions)
  1. <ul class="Bordered Small Tiles">
  2.         <li>
  3.             {resource name="GreySquare.png"}
  4.             <div class="Caption">Caption 1</div>
  5.         </li>
  6.         <li>
  7.             {resource name="GreySquare.png"}
  8.             <div class="Caption">Caption 2</div>
  9.         </li>
  10.         <li>
  11.             {resource name="GreySquare.png"}
  12.             <div class="Caption">Caption 3</div>
  13.         </li>
  14.         <li>
  15.             {resource name="GreySquare.png"}
  16.             <div class="Caption">Caption 4</div>
  17.         </li>
  18.     </ul>
Example #1 (ul.Bordered)
  • Resource
  • Resource
Example #1 (ul.Bordered.Small with captions)
  • Resource
    Caption 1
  • Resource
    Caption 2
  • Resource
    Caption 3
  • Resource
    Caption 4
Example #2 (ul.Bordered.Medium.Tall)
  • Resource
  • Resource
Example #3 (ul.Bordered.Medium with captions)
  • Resource
    Caption 1
  • Resource
    Caption 2

Toolbars

Toolbars can be used to organize and display buttons, form inputs, and other elements in a horizontal bar

They can host several different types of content.

Basic Toolbar with centered text inside
Code
<div class="Toolbar Centered">Basic Text Contents</div>
Demo
Basic Text Contents
Toolbar with nested ButtonLinks and DropDown Menus

Using simple LI list

Code
  1. <div class="Toolbar">
  2.          <ul class="Separated ButtonLinks FullWidth">
  3.             <li class="Active"><a href="">test 1</a></li>
  4.             {uiblock name="DropdownMenu" Caption="test2"}
  5.                 <li class="Header">Test Section 1</li>
  6.                 <li><a href="">UI Blocks Rock</a></li>
  7.                 <li><a href="">etc...</a></li>
  8.             {/uiblock}
  9.             {uiblock name="DropdownMenu" Caption="test3 float right" Class="Float Right"}
  10.                 <li class="Header">Test Section 1</li>
  11.                 <li><a href="">UI Blocks Rock</a></li>
  12.                 <li><a href="">etc...</a></li>
  13.             {/uiblock}
  14.             <li><a href="">test 4</a></li>
  15.          </ul>
  16.     </div>
Demo

UI Components

The HTML for these elements is generated by rendering a Control's template at runtime.

DatePicker

Use the date picker for user date selection.

Basic Date Picker
ui name="DatePicker"
January 1900
Su Mo Tu We Th Fr Sa
{ui name="DatePicker" Id="StartDate" PostName="StartDate"}

Dropdown Buttons

Dropdown Buttons are useful for displaying several grouped navigation links.

Dropdown Buttons
uiblock name="DropdownButton"

  1. {uiblock name="DropdownButton" Caption="Dropdown Button"}
  2.     <li><a href="">Link 1</a></li>
  3.     <li><a href="">Link 2</a></li>
  4.     <li><a href="">Link 3</a></li>
  5. {/uiblock}
Dropdown Button States
.Info|.Contrast|.Warning|.Success|.Error

  1. {uiblock name="DropdownButton" ButtonClass="Error" Caption="Error"}
  2.         <li><a href="">Menu Link 1</a></li>
  3.         <li><a href="">Menu Link 2</a></li>
  4.         <li><a href="">Menu Link 3</a></li>
  5.     {/uiblock}
  6.     {uiblock name="DropdownButton" ButtonClass="Info" Caption="Info"}
  7.         <li><a href="">Menu Link 1</a></li>
  8.         <li><a href="">Menu Link 2</a></li>
  9.         <li><a href="">Menu Link 3</a></li>
  10.     {/uiblock}
  11.     {uiblock name="DropdownButton" ButtonClass="Warning" Caption="Warning"}
  12.         <li><a href="">Menu Link 1</a></li>
  13.         <li><a href="">Menu Link 2</a></li>
  14.         <li><a href="">Menu Link 3</a></li>
  15.     {/uiblock}
  16.     {uiblock name="DropdownButton" ButtonClass="Contrast" Caption="Contrast"}
  17.         <li><a href="">Menu Link 1</a></li>
  18.         <li><a href="">Menu Link 2</a></li>
  19.         <li><a href="">Menu Link 3</a></li>
  20.     {/uiblock}
  21.     {uiblock name="DropdownButton" ButtonClass="Success" Caption="Success"}
  22.         <li><a href="">Menu Link 1</a></li>
  23.         <li><a href="">Menu Link 2</a></li>
  24.         <li><a href="">Menu Link 3</a></li>
  25.     {/uiblock}

Dropdown Menus

Menus provide a user interface for grouping navigation links.

Dropdown Menu
uiblock name="DropdownMenu"
  1. {uiblock name="DropdownMenu" Caption="Dropdown Menu"}
  2.     <li class="Header">Test Section 1</li>
  3.     <li><a href="">Menu Item 1</a></li>
  4.     <li><a href="">Menu Item 2</a></li>
  5.     <li class="Header">Test Section 2</li>
  6.     <li><a href="">Menu Item 3</a></li>
  7.     <li><a href="">Menu Item 4</a></li>
  8. {/uiblock}
Menu List with Dropdown Buttons
ul.Menu > uiblock name="DropdownMenu"
  1. <menu>
  2.     {uiblock name="DropdownMenu" Caption="Menu Item 1"}
  3.         <li class="Header">Test Section 1</li>
  4.         <li><a href="">Sub Menu Item 1</a></li>
  5.         <li class="Header">Test Section 2</li>
  6.         <li><a href="">Sub Menu Item 3</a></li>
  7.         <li><a href="">Sub Menu Item 4</a></li>
  8.     {/uiblock}
  9.         <li><a href="">Menu Item 2</a></li>
  10.     {uiblock name="DropdownMenu" Caption="Menu Item 3"}
  11.         <li class="Header">Test Section 1</li>
  12.         <li><a href="">Sub Menu Item 1</a></li>
  13.         <li class="Header">Test Section 2</li>
  14.         <li><a href="">Sub Menu Item 3</a></li>
  15.         <li><a href="">Sub Menu Item 4</a></li>
  16.     {/uiblock}
  17.     <li><a href="">Menu Item 4</a></li>
  18.     <li><a href="">Menu Item 5</a></li>
  19. </menu>
Horizontal Menu List

Using simple LI list

Code
  1. <ul class="Menu Horizontal">
  2.         {uiblock name="DropdownMenu" Caption="Menu Item 1"}
  3.             <li class="Header">Test Section 1</li>
  4.             <li><a href="">Sub Menu Item 1</a></li>
  5.             <li class="Header">Test Section 2</li>
  6.             <li><a href="">Sub Menu Item 3</a></li>
  7.             <li><a href="">Sub Menu Item 4</a></li>
  8.         {/uiblock}
  9.         <li><a href="">Menu Item 2</a></li>
  10.         {uiblock name="DropdownMenu" Caption="Menu Item 3"}
  11.             <li class="Header">Test Section 1</li>
  12.             <li><a href="">Sub Menu Item 1</a></li>
  13.             <li class="Header">Test Section 2</li>
  14.             <li><a href="">Sub Menu Item 3</a></li>
  15.             <li><a href="">Sub Menu Item 4</a></li>
  16.         {/uiblock}
  17.         <li><a href="">Menu Item 4</a></li>
  18.         <li><a href="">Menu Item 5</a></li>
  19.     </ul>
Demo

RotateBanner

RotateBanners will cycle through a list of items based on a button click.

Usage
  1. {uiblock name="Rotator" [height="400" width="500" speed="5" plane="Horizontal" BackNavCaption="<" BackNavClass="defaultclass" ForwardNavCaption=">" ForwardNavClass="defaultclass" BackNavX="1" BackNavY="1" ForwardNavX="100" ForwardNavY="1"]}
  2.     {uiblock name="RotatorItem" [Image="RotateImage1.png" BackNavX="1" BackNavY="1" ForwardNavX="100" ForwardNavY="1"]}
  3.         Slide Html Contents
  4.     {/uiblock}
  5.     {uiblock name="RotatorItem" [Image="RotateImage2.png" BackNavX="1" BackNavY="1" ForwardNavX="100" ForwardNavY="1"]}
  6.         Slide Html Contents
  7.     {/uiblock}
  8.     and so on...
  9. {/uiblock}
Code Example #1
  1. {uiblock name="Rotator"}
  2.     {uiblock name="RotatorItem" Image="RotateImage1.png"}This is the first slide{/uiblock}
  3.     {uiblock name="RotatorItem" Image="RotateImage2.png"}This is the second slide{/uiblock}
  4.     {uiblock name="RotatorItem" Image="RotateImage3.png"}This is the second slide{/uiblock}
  5. {/uiblock}
Example #1

There appears to be an error with the requested page.
Server Error 500
Please try again.