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.

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;

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:

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:

Uusing STRUTS form:

4. Adding the tab menu

Add the following code inside the <body> tag:

Struts Message Resources example:

Plaintext example:

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:

5. Add the tab body

Add the following:

A TabBody tag will produce the following JSP code:

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.

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;

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:

JSP

(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.

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

produces:

Small Sized Text Area

produces:

Full Sized Text Area

Note

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