Skip to end of metadata
Go to start of metadata

Using the new Tab Controller

The old tab controller doesn't support the FCKeditor controller very well so a new one is rewritten. The new tab controller is very simple to integrate. Simply follow the steps below.

1. Reference the javascript and CSS file

Simply add the two following lines inside the <head> tag.

    <script type="text/javascript" src="http://path_to/lams/includes/javascript/tabcontroller.js"></script>

This accesses the user's selected stylesheet and the scripts from lams-central.war

2. Initialise the tabs after the pages has loaded

Inside the <head> tag add the following;

<script type="text/javascript">
     function init() {
            var tag = document.getElementById("currentTab");
	    	if(tag.value != "")
                selectTab(1); //select the default tab;


The code simply chooses the default tab automatically, only use this code if you wish to include this feature.

3. Adding automatic tab control

If you wish to utilise automatic tab control you will be required to set the control attribute in the Tabs tag (see next step) and add the following code inside the <head> tag:

<script type="text/javascript">
     function doSelectTab(tabId) {

          var tag = document.getElementById("currentTab");
          tag.value = tabId;



The function doSelectTab() is customisable to suit your Tool implementation, but must include the lines in the simple example seen above.

Add the following code inside the <form> tag or <html:form> (using Struts):

Using normal HTML form:

<input type="hidden" name="currentTab" value="" id="currentTab">

Uusing STRUTS form:

<html:hidden property="currentTab" styleId="currentTab" />

4. Adding the tab menu

Add the following code inside the <body> tag:

Struts Message Resources example:

<lams:Tabs control="true">
    <lams:Tab id="1" key="label.tab1"/>
    <lams:Tab id="2" key="label.tab2"/>
    <lams:Tab id="3" key="label.tab3"/>

Plaintext example:

<lams:Tabs control="true">
    <lams:Tab id="1" value="tab1"/>
    <lams:Tab id="2" value="tab2"/>
    <lams:Tab id="3" value="tab3"/>

For the examples above, just replace the key value with the appropriate Message Resources key string for the tab name, or for the value attribute, replace tab1, 2 and 3 with the name of your tabs.

The above code examples will produce an array of Tables. Each Tab is created using a HTML Table. Below is an example of the HTML output produced for a single Tab:

<table border="0" cellspacing="0" cellpadding="0" width="120" summary="This table is being used for layout purposes only">
	<td width="8">
            <a href="#" onClick="doSelectTab(1);return false;" >
                <img src="http://path_to/lams/images/aqua_tab_left.gif" name="tableft_1" width="8" height="22" border="0" id="tableft_1"/>
	<td class="tab tabcentre" id="tab1"  onClick="doSelectTab(1);return false;"  nowrap="nowrap">
            <a href="#" onClick="doSelectTab(1);return false;" id="1" >Tab 1</a>
	<td width="8">
            <a href="#" onClick="doSelectTab(1);return false;" >
                <img src="http://path_to/lams/images/aqua_tab_right.gif" name="tabright_1" width="8" height="22" border="0" id="tabright_1"/>

5. Add the tab body

Add the following:

<lams:TabBody id="1" titleKey="label.tabbody1.desc" page="tabbody1.jsp"/>
<lams:TabBody id="2" titleKey="label.tabbody2.desc" page="tabbody2.jsp"/>
<lams:TabBody id="3" titleKey="label.tabbody3.desc" page="tabbody3.jsp"/>

A TabBody tag will produce the following JSP code:

<div id="tabbody1">
    <h2><font size=2> <b>TabBody1 Title</b></font></h2>
    <div id="formtablecontainer">
        * included page or nested content *

To add your content for each tab body you can either include a JSP page using the page attribute or include the content within the body of the TabBody tag.

(warning) It's important to note that the function selectTab(tabId) used in the last section will display the corresponding tab identified by the id attribute (tabbody[tabId])

Behind the Tags

That's It!

For more details information on how to implement the custom tags for Tab Controller please see: Tab Controller + FCK Editor Custom Tags

Run TabExample.html in the attached file to see how the tab engine works.

Using the FCKcontroller

The FCKcontroller allows single instance of FCKeditor to be open on top of any <textarea>. This takes away the need for multiple instances of FCKeditor. Hence performances will increase therefore overall user experience is more pleasant.

Follow the steps below to integrate the FCKcontroller into your tool

1. Reference the javascript and CSS file

Simply add the following lines inside the <head> tag.

<script type="text/javascript" src="http://path_to/lams/fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="http://path_to/lams/includes/javascript/fckcontroller.js"></script>
<link href=http://path_to/lams/css/fckeditor_style.css" rel="stylesheet" type="text/css">

The files fckeditor_style.css and fckcontroller.js is our own custom file and fckeditor.js is part of the FCKeditor library.

2. Initialise the FCK controller when the page finish loading

Also inside the <head> tag add the following;

    function init(){
        // TabController code here


The parameter inside the initEditor() is the editorId. This editorId will be to be placed in several places in your HTML.

3. Add the FCKeditor into the page

At the bottom of your HTML page, add the following tag:


The above custom tag will produce the following JSP output:

<div id="wyswygEditorScreen" style="visibility: hidden">
    <div id="wyswygEditor">
            <!-- If using FCK editor with in JSP then enable the code below -->
            <FCK:editor id="FCKeditor1" basePath="/lams/fckeditor/"
        <div style="text-align: center">
            <a href="#" onClick="saveWYSWYGEdittedText(activeEditorIndex); doPreview(activeEditorIndex)">
                <img src="path_to/lams/images/tick.gif" border="0" alt="Save"/></a>
            <a href="#" onClick="doPreview(activeEditorIndex)">
                <img src="path_to/lams/images/cross.gif" border="0" alt="Cancel"/></a>

(warning) Note: You are only required to use the single custom tag (HTMLEditor) to create the FCKEditor instance.

4. Now add the textarea/s

Just place the following tag line anywhere on the page, if you need several textareas you'll need to place the code on several place.

<lams:SetEditor id="<editorID>" text="<editorText>"/>

The above custom tag will create the appropriate textarea field as shown in examples below:

<lams:SetEditor id="Title" text="This is the Title" small="true"/>


Small Sized Text Area
<span id="previewTitle" style="visibility: hidden; display: none;">
        <a href="javascript:doWYSWYGEdit('Title','small')">
             <img src="path_to/lams/images/html.gif" border="0" alt="Open HTML Editor">
    <div class="smallPreviewPanel" id="previewTitle.text"></div>
<span id="txTitle">
        <a href="javascript:doTextToHTML('Title'); doWYSWYGEdit('Title','small')">
             <img src="path_to/lams/images/html.gif" border="0" alt="Open HTML Editor">
    <textarea class="smallTextareaPanel" name="title" id="txTitle.textarea">This is the Title</textarea>
<lams:SetEditor id="Description" text="Instructions go here"/>


Full Sized Text Area
<span id="previewDescription" style="visibility: hidden; display: none;">
        <a href="javascript:doWYSWYGEdit('Description')">
             <img src="path_to/lams/images/html.gif" border="0" alt="Open HTML Editor">
    <div class="previewPanel" id="previewDescription.text"></div>
<span id="txDescription">
        <a href="javascript:doTextToHTML('Description'); doWYSWYGEdit('Description')">
             <img src="path_to/lams/images/html.gif" border="0" alt="Open HTML Editor">
    <textarea class="textareaPanel" name="description" id="txDescription.textarea">Instructions go here</textarea>


Remember to change the editorId. The editorId must be unqiue for each textarea.

The first one is small sized textarea and the second one is full sized textarea you will notice the code is pretty much the same except some css classes are different. One important thing to notice is doWYSWYGEdit('Title','small') has an extra parameter small in the small sized textarea. This is set by the small attribute in the SetEditor tag.

The examples above use Title and Description as the editorId, you would need to replace it with Instructions inorder to create an extra textarea for instructions.

For more details information on how to implement the custom tags for FCKController please see: Tab Controller + FCK Editor Custom Tags

Check out the FCKControllerExample.html attached to see it in action.
Note: you would need to download and unpackage the FCKeditor in the same directory to work this example

Integrating the FCK Controller and Tab Controller

Note: you would need to download and unpackage the FCKeditor in the same directory to work the example

Look at the attached TabbedFCKControllerExample.html to see how it works.
Note: you would need to download and unpackage the FCKeditor in the same directory to work this example

Please see Tab Controller + FCK Editor Custom Tags on how to intergrate using the pre-built Custom Tags.

  • No labels