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/>*,<OptionsButton/>*, <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>

<head>

<title>Spell Check</title> <style type="text/css">

body{overflow:hidden;
font-family: sans-serif, arial, helvetica;

}
div{height:100%;}

#rsw_documentTextPanel
{
border: 1px solid #aaa;
border-radius: 3px;
}
#rsw_word, #suggestions
{
border: 1px solid #aaa;
border-top-color: #a0a0a0;
}
#rsw_optionsDialog
{
font-size:.80em;
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 295px;
height: 230px;
z-index: 101;
background-color: white;
border: 1px solid #444;
border-radius: 5px;
padding: 8px;
}
#rsw_optionsDialog_Backing
{
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(100,100,100,.60);
z-index: 100;
}
#rsw_optionsDialog > label
{
display: block;
padding-bottom: 12px;

}
#rsw_optionsDialog > input
{
margin-right: 9px;
margin-top:12px;
}
#rsw_optionsHeader
{
font-size: 1.2em;
border-bottom: 1px solid #aaa;
}

</style> </head>

<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> <OptionsButton/> </td></tr> <tr><td> <tr><td>

<UndoButton/>

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