ePresence 6.0 introduces a new system for "Templates" (the presentation viewing UI). This guide describes how these templates can be customized. It is split into 2 sections; the first describes how the style can be customized, while the second describes how the functionality can be customized.

1. Style (Theme)

Themes are stored in /res/themes. Themes are directories .css files compiled into swfs, as well as assets, such as fonts and images, etc. The basic directory structure is as follows:

• <name>
  • The directory should identify the theme by its name.
• <name>/style.swf
  • The base compiled .css file. Should include all base styles (for instance, font definitions and base control styles (eg: custom skinning)).
• <name>/<component>/<sub_component>.swf
  • Each component uses its own set of compiled .css files.
• <name>/assets/fonts
  • Should contain all of the fonts that the theme references.
• <name>/assets/images
  • Should contain all of the images that the theme references.

CSS files can be compiled into .swf using Flex Builder. Simply create a .css file somewhere in your project's "src" directory, right-click on it, and select "Compile CSS to SWF". Note that the CSS supported by Flash is not as robust as the CSS supported by HTML.

2. Functionality

A template layout is defined by an XML file located in /res/templates/<template name>/template.xml. This layout file allows you to use any standard Flex component, as well as our custom components, to design a template. The following is an example of such a file:

<?xml version="1.0" encoding="utf-8" ?>
<template display="[Template display name]" version="5.1">
  <view type="[View type]" width="[pixel value or percentage%]" height="[...]">
    <component id="[path.to.component]" param="value" param="value" ... style="style1: val; style2: val" />
    ...
  </view>
</template>

Notes:

• Component parameters can be anything that Flex supports (eg: alpha, width, height, etc...), plus anything that our custom components support (eg: allowViewSwitching).
• Styles can be anything that Flex supports (eg: backgroundColor, verticalGap).
• [path.to.component] can be the class path of a standard Flex component (eg: mx.containers.VBox), or a custom component (eg: tv.epresence.components.chat.ChatContainer?).
• [View type] must be one of "Live", "LiveNoChat?", or "Archive". One of each view should be in the template descriptor.

3. Components

The following components are included by default:

Chat

• Custom CSS:
  • area.swf
    • Defines styles for the chat text area -- where messages appear.
  • container.swf
    • Defines styles for the container that the entire chat component resides in.
  • message.swf
    • Defines message styles.
  • sender.swf
    • Defines styles for the message input area.
  • tabs.swf
    • Defines styles for the tab area.
  • user.swf
    • Defines styles for the user list.
• Custom parameters:
  • senderRules (string)
    • Not yet supported
  • viewerRules (string)
    • Not yet supported

Presentation

• Custom CSS:
  • switcher.swf
    • Defines styles for the "view switcher" -- the control that allows you to switch between different views, eg. Picture-in-Picture, etc.
  • overlay.swf
    • Defines styles for the player controls overlay.
• Custom Parameters:
  • swap (boolean)
    • If swap is true, displays the video as the "major" component by default; if false, shows the slide area as the major component by default.
  • defaultView (string)
    • The default view to show; can be set to viewSBS (side-by-side), viewPIP (picture-in-picture), viewFull (either video or slides take up full area).
  • allowViewSwitching (boolean)
    • Defines whether the user is able to switch views.