Frequently Asked Questions

Components

What the components are?

Version: 4.0

A component is an element, which can be placed on the page. For example text area, choice fields, audio and pop-up are components.

Components and templates base expansion shortens time of course creation and makes course appearance more attractive. So, speaking about economics, it increases efficiency of course creation, lowers costs and at the same time improves quality of the courses.

How to create a component?

Version: 4.0

You should know basics of XML and HTML, and have some skills in JavaScript programming.

All components are in directory <WBTExpress directory>/components. To make new one please make new directory in components_user directory. To make working component you need to create and edit following files:

definition.xml - component's definition in XML
body.js - HTML code, which is placed on a page in BODY section.
editor.html - Properties editor written in HTML. This file is loaded automatically every time when User opens
a dialog window to change component's properties.
head.js - HTML code, which contains comopnent's functionality.
icon.bmp - Icon (16x16), which will appear in WBTExpress.

There also can be:

style.html - which is similar to editor.html and is called whenever User opens style dialog for component.

After adding a new component, WBTExpress must be restarted.

Here are sample files:

definition.xml

<?xml version="1.0"?> <document> <component version="2"> <include className="__image"/> </component> <class name="activeimage" type="api" extends="component" paintElement="true" canCopyElement="true"> <info> <hint>New component</hint> </info> <property name="width" type="int" defaultValue="21" readonly="false" desc=""/> <property name="height" type="int" defaultValue="34" readonly="false" desc=""/> <property name="srcIn" type="path" defaultValue="rollin.gif" readonly="false" desc=""/> <property name="srcOut" type="path" defaultValue="rollout.gif" readonly="false" desc=""/> <event name="onClick"/> <action name="actionHideObject"/> <action name="actionShowObject"/> <action name="actionRunScript"/> </class> </document>

head.js

/* Example component Copyright: 4system Polska */ componentNewImage = function(name) { //inherited this.componentElement = componentElement; this.componentElement(name); // this.image1 = this.addChild(new __componentImage(null)); this.image2 = this.addChild(new __componentImage(null)); this.image2.visible = false; }; componentNewImage.prototype = new componentElement(); componentNewImage.prototype.type = "componentNewImage"; componentNewImage.prototype.onCreate = function(obj) { this.captureMouseEvents(); }; componentNewImage.prototype.onPaint = function(obj) { this.image2.x = this.image1.x = 0; this.image2.y = this.image1.y = 0; this.image2.w = this.image1.w = this.w; this.image2.h = this.image1.h = this.h; }; componentNewImage.prototype.onMouseOut = function(obj) { this.image2.setVisible(false); this.image1.setVisible(true); }; componentNewImage.prototype.onMouseOver = function(obj) { this.image1.setVisible(false); this.image2.setVisible(true); }; /*******************************************************/

body.js editor.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns:wbte> <head> <title>*[HTMLEDIT_TITLE_ROLLOVER_PROPERTIES]*</title> <meta http-equiv="Content-type" content="text/html; charset=windows-1250" /> <link rel="stylesheet" href="../../lib/editors_controls/css/normal.css" type="text/css" /> <script type="text/javascript" language="javascript" src="../../lib/editors_controls/js/io.js"></script> <style type="text/css"> @media all { wbte\:edit { behavior: url(../../lib/editors_controls/edit/edit.htc); } wbte\:state { behavior: url(../../lib/editors_controls/state/state.htc); } wbte\:imageSelect { behavior: url(../../lib/editors_controls/image/imageselect.htc); } } </style> </head> <body bgcolor="buttonface" dialogwidth="560" dialogheight="420"> <form id="mainForm"> <table class="pos"> <tr> <td class="pos"> <fieldset style="height: 115px"> <legend>*[HTMLEDIT_PROPERTIES]*</legend> <table class="pos"> <tr> <td class="pos"><wbte:edit id="name" editWidth="180" captionWidth="50" caption="*[HTMLEDIT_NAME]*" maxchar="" format="alfanum" /></td> </tr> <tr> <td class="pos"><wbte:state id="step" selectWidth="180" captionWidth="50" caption="*[HTMLEDIT_STATUS]*" /></td> </tr> <tr> <td class="pos"><wbte:checkBox id="ignoreAnswer" captionWidth="180" caption="*[HTMLEDIT_IGNORE_ANSWER]*" /></td> </tr> </table> </fieldset> </td> <td> <fieldset style="height: 115px"> <legend>*[HTMLEDIT_SIZE_AND_LOCATION]*</legend> <table class="pos"> <tr> <td class="pos"><wbte:edit id="x" editWidth="50" captionWidth="50" caption="*[HTMLEDIT_X]*" maxchar="4" format="num" /></td> <td class="pos"><wbte:edit id="width" editWidth="50" captionWidth="50" caption="*[HTMLEDIT_WIDTH]*" maxchar="4" format="num" /></td> </tr> <tr> <td class="pos"><wbte:edit id="y" editWidth="50" captionWidth="50" caption="*[HTMLEDIT_Y]*" maxchar="4" format="num" /></td> <td class="pos"><wbte:edit id="height" editWidth="50" captionWidth="50" caption="*[HTMLEDIT_HEIGHT]*" maxchar="4" format="num" /></td> </tr> </table> </fieldset> </td> </tr> <tr> <td class="pos" colspan="2"> <fieldset style="height: 194px"> <legend>*[HTMLEDIT_IMAGE_PREVIEW]*</legend> <table class="pos"> <tr> <td class="pos"><wbte:imageSelect id="srcOut" buttonCaption="*[HTMLEDIT_IMAGE_BROWSE]*" width="120" height="120" /></td> <td class="pos"><wbte:imageSelect id="srcIn" buttonCaption="*[HTMLEDIT_IMAGE_BROWSE]*" width="120" height="120" /></td> </tr> </table> </fieldset> </td> </tr> </table> </form> </body> </html>

Home

Site map

Contact

Partnership programme