Overview

SmartComponents are established in the customer layer of the ttkf. The customer layer contains a customization of
the authoring environment, the HTML Player and the HTML5 Player of tt knowledge force.
The customer's configuration can be found in three places:

• #User profile#\ttkf\cfg-#version#\ttn.kf\config#configuration name#\components\
  
  
  Configuration settings for tt knowledge force document editor UI
  


• #User profile#\ttkf\cfg-#Version#\ttn.kf\content\config\#configuration name#\components\
  
  
  Configuration settings for document editor view and html content created with tt knowledge force
  


• #User profile#\ttkf\cfg-#Version#\ttn.kf\com.tts.player\configuration\#configuration name#\components\page\
  
  
  Configuration settings for html5 content created with tt knowledge force
  

SmartComponents are always created by a web developer in the customer layer.
Integration of SmartComponents with ttkf is accomplished as follows.

Definition of a SmartComponent

A SmartComponent is defined in the customer's configuration under the ttkf configuration settings:

\ttkf\cfg-#version#\ttn.kf\config\#configuration name#\components\#class name#

• Definition of the SmartComponent's meta data (metadata.js) including the definition of parameters, etc.


• UI for the properties dialog displayed in the authoring mode of ttkf Framework used

Upon starting ttkf (authoring environment), all meta data information relating to SmartComponents existing in the
configuration is gathered and provided to the author in the UI of ttkf. This is why it is not possible to make changes
to these bits of information on the fly (at runtime). If meta data of a component are changed, the web developer either
has to restart tt knowledge force, or switch to a different configuration.

The libraries used in the UI dialog are stored as follows:

\ttkf\cfg-#version#\ttn.kf\config\#configuration name#\libraries#name of the library#-#MajorVersion#.#MinorVersion#.#RevisionVersion#



The library itself should be named in the same way:

#name of the library#-#MajorVersion#.#MinorVersion#.#RevisionVersion#



Do not include spaces in folder name or file name. Lowercase is mandatory
Moreover, you should not use the min- suffix in the file name of the library and the corresponding folder name.
If you want to export a SmartComponent this structure will be checked. If it doesn't matches to these rules the export
is denied (The export and import function will be available in the ttkf 10.0.).

Please find here an example of a path for using the library jquery-1.8.3-min.js:

\ttkf\cfg-9.1\ttn.kf\config\tts\libraries\jquery-1.8.3\ jquery-1.8.3.js


The UI dialog uses always the library referred in the ui.htm. Therefore it is possible that one component uses one
version of a library and another component uses another version of the same library.

The Class of a SmartComponent

Logic and design of a SmartComponent are defined in a class. This class is stored in the configuration settings relating to content created with tt knowledge force.
The class have to be in AMD notation. Our AMD framework is configured to provide two modules to simply the loading and handling of external files:

require-css:
You can define and use your styles in seperate files located in your component directory by defining them as a dependency in the define area.

requirejs/text:
Similar to the ccs module, but for text files. This module can be used for loading local text files and html fragments, but due to browser restrictions this will not work for the wysiwyg view and local exports.


To get files from the component-directory you should use "./" as file path (e.g.: "css!./myStyles.css").

HTML Player


\ttkf\cfg-#Version#\ttn.kf\content\config\#configuration name#\components\#class name#


HTML5 Player


\ttkf\cfg-#Version#\ttn.kf\com.tts.player\configuration\#configuration name#\components\page\#class name#

• the programmed SmartComponent class (component.js)


• all related resources

The libraries used by a class are stored as follows:


HTML Player

\ttkf\cfg-#Version#\ttn.kf\content\config\#configuration name#\libraries#name of the library#-#MajorVersion#.#MinorVersion#.#RevisionVersion#


HTML5 Player


\ttkf\cfg-#Version#\ttn.kf\com.tts.player\configuration\#configuration name#\libraries#name of the library#-#MajorVersion#.#MinorVersion#.#RevisionVersion#

The library itself should be named in the same way: #name of the library#-#MajorVersion#.#MinorVersion#.#RevisionVersion#


Do not include spaces in folder name or file name. Lowercase is mandatory
Moreover, you should not use the min- suffix in the file name of the library and the corresponding folder name.
If you want to export a SmartComponent this structure will be checked. If it doesn't matches to these rules the export
is denied (The export and import function will be available in the ttkf 10.0.).

Please find here a path example for using the library jquery-1.8.3-min.js: \ttkf\cfg-9.1\ttn.kf\config\tts\libraries\jquery-1.8.3\ jquery-1.8.3.js


If there are two versions of a library in the library folder the player uses automatically the newer one for all components.

There are already some libraries included in the HTML5 player and you can use them by default, without putting them to the libraries folder.
On the other side that means, that you have to use the version, that is shipped with HTML5 Player and it is not possible to use
your own version of this libraries.
The included libraries are:

• jQuery 1.11.3 - id: jquery

Inserting a SmartComponent

In the authoring environment, the author can insert instances of a SmartComponent (based upon the SmartComponent class)
into the TT document's content. Each instance features a properties dialog used for editing in the document editor.

If the author can load a resource, like an image, into the component, that resource will be stored in the TT document
and linked to the instance.

If a TT document is published as an e-learning, all pieces of information regarding a SmartComponent are available in
the document's content. The class will be provided in the customer's layer at runtime via the player, creating a
corresponding instance when the content is played back.

Note


If the class name (the SmartComponent's folder name) is changed during the life cycle of a SmartComponent,
all instances that have already been created from it are rendered non-functional.

Defining a SmartComponent and UI elements

A SmartComponent is defined in metadata.js. For each SmartComponent, the following values can be defined:

• Class name
  
  
  (is provided here so that metadata.js can be assigned unambiguously to this component.)
  


• Title and Category
  
  
  (will be shown in the UI of ttkf, can be maintained language-dependent. Providing these is mandatory).
  


• Version
  
  
  (internal value illustrating the version history of the SmartComponent. This value is not transferred to ttkf).
  


• Events
  
  
  (defines trigger events that can be selected by the author as Trigger type in the Trigger dialog).
  


• Parameters


• Language-dependent default texts for the SmartComponent's properties dialog

The properties dialog of a SmartComponent is laid out in its corresponding ui.htm. Via this dialog, the author can
define properties of a SmartComponent or transfer data (parameters).

The SmartComponent's identifier (name), which is displayed in the ttkf UI for each instance of a component, should be
specified.

The UI dialog can be designed language-dependent (adapting to the UI language of ttkf, like the title and the category).

The tt-ui-builder.js library uses jQuery and serves as an example of how creating a properties dialog can be simplified.
Like the demo components, this library is intended as an example. It is neither maintained, nor updated by TTS.
You may use it as a starting point for creating SmartComponents.

Parameters

Parameters are defined in the metadata.js and used by the ui.htm and the components.js.

• com.tts
  
  
  pre-defined parameters that are transferred from the UI API to tt knowledge force
  (for further information see: Getting Started Document)
  
  
  
  • Custom parameters
    
    
    Special parameters defined exclusively for this SmartComponent, which are transferred to the class
    (for further information see: Getting Started Document)
    
  
  
  
  

Trigger events

Via a SmartComponent, you can provide trigger events for the trigger functionality in tt knowledge force. If an instance
of a SmartComponent sends an event, the trigger that binds to the event from this instance will be evoked immediately.

An example: A button is used to fade in a text box. The button is a SmartComponent that sends the toggleOn event.
This event starts the text box's fade in trigger. As a result the text box appears. A second click on the button sends
the toggleOff event. A second trigger on the text box listens for that event to fade out the text box. Events are
pre-defined by the SmartComponent and can be used by the e-learning author in the trigger dialog.

Loading of SmartComponents upon starting an e-learning

The Player loads the SmartComponent classes that are necessary for an e-learning page into the local cache, if they are
not yet available. Subsequently, the page is loaded and displayed. The three previous and following pages are loaded in
the background. The developer of a SmartComponent should take into account that the instances must not be active yet on
pre-loaded pages (e.g. for sounds or videos).

See: bindOnEnter and bindOnExit functions on PageEventContext.

Instances can query global values from the player, the status of a page, and the like, via the Player API.