Customising RapidSpellWeb Layout

It is possible to customise the layout of the spell checker using a HTML template mechanism. This is

done by specifying the layout property with a string of Html using special tags to indicate the position of the

essential spell checker elements. The tags are <PreviewPane/>*, <AddButton/>, <IgnoreButton/>,

<IgnoreAllButton/>, <ChangeButton/>, <ChangeAllButton/>, <FinishButton/>, <UndoButton/>,

<ChangeToLabel/>, <ChangeToBox/>*, <SuggestionsLabel/>, <SuggestionsBox/>* - tags marked with *

are required for correct functionality.

Code Example From CustomSpellCheckerPopUp.jsp With Customized Layout

Page containing the RapidSpellWeb Tag

<%@ taglib uri="http://www.keyoti.com/" prefix="RapidSpellWeb" %>

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<html>

<title>Spell Check</title>

<body>

<Center>

<RapidSpellWeb:rapidSpellWeb

changeToBoxStyle="font-size:10pt; width:200px; font-family:'arial,

helvetica, sans-serif';"

changeToLabelStyle="font-size:9pt; font-family:'arial, helvetica, sansserif';

"

suggestionsBoxStyle="font-size:10pt; width:200px; font-family:'arial,

helvetica, sans-serif';"

suggestionsLabelStyle="font-size:9pt; font-family:'arial, helvetica, sansserif';"

previewPaneStyle="font-family: 'arial, sans-serif, helvetica'; font-size:

8pt; font-weight:bold;"

previewPaneWidth="200"

previewPaneHeight="190"

ignoreButtonStyle="font-family:'Tahoma,Arial,Helvetica';font-size:10pt;

border:1px solid #b5bed6; background-color:#dddddd; width: 90px;"

ignoreButtonOnMouseOver="this.style.backgroundColor='#b5bed6';this.style.borderColor='#08246b';"

ignoreButtonOnMouseOut="this.style.backgroundColor='#dddddd';this.style.borderColor='#b5bed6';"

.....button styles.....

finishButtonOnMouseOut="this.style.backgroundColor='#dddddd';this.style.borderColor='#b5bed6';"

layout="

<table border=0>

<tr><td colspan=3 bgcolor='#eeeeee'><b>MyCo Spell Checking</b></td></

tr>

<tr><td>

<PreviewPane/>

</td>

<td>

<table border=0 height=190>

<tr><td>

<ChangeToLabel/>

</td></tr><tr><td>

<ChangeToBox/>

</td></tr><tr><td>

<SuggestionsLabel/>

</td></tr><tr><td valign=bottom>

<SuggestionsBox/>

</td></tr>

</table>

</td>

<td>

<table border=0 height=160>

<tr><td>

<IgnoreButton/>

</td></tr><tr><td>

<IgnoreAllButton/>

</td></tr><tr><td>

<AddButton/>

</td></tr><tr><td>

<ChangeButton/>

</td></tr><tr><td>

<ChangeAllButton/>

</td></tr><tr><td>

<FinishButton/>

</td></tr>

</table>

</td>

</tr>

</table>

"

/>

</center>

</body>

</html>

The only restriction is that the special tags must be on a line by themselves.