Differences

This shows you the differences between two versions of the page.

@@ Line 1: / Line 1: @@
+====== Support - Customizing the WebSpellChecker Web Interface ======
+  - [[customizing_the_webspellckecker_web_interface#overview|Overview]]
+  - [[customizing_the_webspellckecker_web_interface#directory_structure|Directory structure]]
+  - [[customizing_the_webspellckecker_web_interface#customizable_files|Customizable files]]
+  - [[customizing_the_webspellckecker_web_interface#installation_procedure|Installation procedure]]
+=====  1. Overview =====
+One of the design goals for WebSpellChecker is to allow clients to produce a spell checking dialog consistent with their own appearance guidelines. This document will first describe the files normally available for customization. Then each customizable item will be reviewed separately.
+**Some changes to the customizable files will not take effect until the sproxy cache directory content is deleted.**
+===== 2. Directory structure =====
+A custom look-and-feel package should be prepared in precise format to be properly understood by the SpellChecker Web engine. This implies files with predefined names stored in predefined folders.
+There are several locations where customizable files should be placed:
+{{wsc-tree.jpg }}
+    * <SpellCheckerProgramFolder>/WebComponents/WebInterface/lf/
+    *  <SpellCheckerProgramFolder>/WebComponents/WebInterface/templates/lf/
+    *  <SpellCheckerProgramFolder>/WebComponents/WebInterface/texts/
+The first location contains common public files. The second location contains custom templates. The third location contains text messages, button captions used in the WebSpellChecker window
+The WebInterface/templates/lf/ folder contains the templ folder, where spell checking dialog parts are stored.
+The WebInterface/lf/ and WebInterface/templates/lf/ directories contain one or more subdirectories with look-and-feel schemas. Schema 18 is used by default.
+Each public directory in WebInterface/templates/lf/<schema>/ contains three .css files (mid.css, styles.css and top.css) and twelve locale-specificsub directories with images for eleven supported locales, plus one directory for files shared across all locales. The names are as follows:
+  * img - shared images (logo and borders)
+  * img_br - British English language support
+  * img_dk - Danish language support
+  * img_en - American English language support
+  * img_fr - French language support
+  * img_de - German language support
+  * img_it - Italian language support
+  * img_nl - Dutch language support
+  * img_no - Norwegian language support
+  * img_pt - Portuguese language support
+  * img_se - Swedish language support
+  * img_sp - Spanish language support
+The img/ directory contains only four images:
+  * d.gif - border part
+  * dlg_top_left.gif - border part
+  * powered_by.gif - SpellChecker.net logo
+  * spell_only.gif - Tab Control containing only one tab element - the SpellChecker Tab
+The locale-specific directories can contain five files:
+  * cancel.gif - "Cancel" button
+  * finish_checking.gif - "Finish checking" button
+  * opt_dlg.gif - Options Dialog Buttons set
+  * options.gif - "Options" button
+  * spell_dlg.gif - SpellCheck Dialog Buttons set
+SpellChecker provides an additional feature for American English locale, this is the reason why the img_en directory can contain six extra files:
+  * change_to.gif - "Change To" button, which is used in the thesaurus dialog
+  * gramm_dlg.gif - Grammar dialog buttons set
+  * gramm_tab.gif - Tabset, which is used in the grammar dialog
+  * spell_tab.gif - Tabset, which is used in the spellcheck dialog
+  * thes_dlg.gif - thesaurus dialog buttons set
+  * thes_tab.gif - Tabset, which is used in the thesaurus dialog
+===== 3. Customizable files =====
+In this section individual customizable files are described. You can customize .css and .gif files in the WebInterface/lf/<schema>/ directory, and also .html and .js templates in the WebInterface/templates/lf/<schema>/tmpl/ directory.
+CSS-files are well-formed custom style sheet files which satisfy all requirements of the CSS Level 1 specification. In this section below you can find a detailed description for each class defined in the file.
+GIF are images in CompuServe Graphic Interchange format. GIF-files are mostly used for buttons on the site. To customize a particular image, you only need to replace it with an image of an identical size.
+HTML-files are templates for spell checking, grammar and thesaurus dialogs. You can update these files to modify the layout of the WebSpellChecker window. Please be careful when modifying the template files. Places where you can insert your code are marked with comments. Changing other code may lead to unpredictable results. When changing the WebSpellChecker window layout, a browser compatibility testing should be performed. If the template file cannot be found, the default file is used. The template files contain tags of a special kind (metatags), which look like this: <#some_identifier#>. These metatags are used by the WebSpellChecker Web Interface.
+Files in the texts/ folder contain text constants of messages and button captions appearing in the WebSpellChecker window. Each line of this file may be presented in the WebSpellChecker window using a metatag which looks like <#tx_noNN#>, where NN is the number of line in the appropriate file. Please note that these files are Unicode. Be careful when updating these files. Windows Notepad may be used for editing. After changing the file, please remove the first two bytes from the file using any other non-Unicode editor.
+**mid.css**
+This file describes the middle frame layout. The middle frame contains the user text in all modes.
+{{ wsc-wnd-body.jpg }}
+  * bodymid - middle frame
+  * midtext - style of text in middle frame
+  * a:link - style of a misspelled word when the word has not been clicked recently
+  * a:active - style of a misspelled word when the word is selected in the spell checking dialog or active
+  * cerr - style of current misspelling mark
+**styles.css**
+This custom style sheet file describes the common settings for all "SpellChecker", "Grammar" and "Thesaurus" sections of the page.
+  * bodytop - style of top frame
+  * bodybottom - style of bottom frame
+  * dlgframe - style of frame dialog border
+  * tabframe - this style is not currently in use and is included for future features
+  * dlg - style of bottom dialog
+  * label - style of bottom dialog text
+  * gramborder - style of grammar dialog border
+  * gramsuggest - style of grammar suggestions dialog
+  * gramsugtext - style of grammar suggestions description
+  * gramsugitem - style of each grammar suggestions item
+  * gramsugtbl - style of grammar suggestions table
+  * bodyopt - style of SpellChecker options dialog document
+  * optborder - style of SpellChecker options dialog border
+  * opttable - style of SpellChecker options dialog table
+  * optheader - style of SpellChecker options dialog caption
+  * optheadertext - style of SpellChecker options dialog caption text
+  * optcel - style of SpellChecker options dialog info
+  * optlabel - style of SpellChecker options dialog info text
+  * optdescr - style of SpellChecker options dialog info descriptions
+  * cel - style of button cell
+  * tabborder - style of tab section border
+  * tabbody - style of tab section tab space
+  * tabactive - style of active tab
+  * tabpassive - style of passive tab
+  * celbrdr - style of button border
+  * tabbrdr - style of tab border
+  * optdlgborder - this style is not currently in use and is included for future features
+  * optdlgframe - this style is not currently in use and is included for future features
+  * a:link - style of a button when the button has not been pressed recently
+  * a:active - style of a button when the button is engaged or active
+  * a:visited - style of a button when the button has been clicked recently
+  * a:hover - style of a button when the user hovers the mouse pointer over the button
+**top.css**
+This custom style sheet file describes the way the top part with "SpellChecker", "Grammar" and "Thesaurus" buttons looks. Because the page contains only these three links (designed as buttons), you can customize only the links appearance.
+{{ wsc-wnd-head.jpg }}
+  * a:link - style of a button when the button has not been clicked recently
+  * a:active - style of a button when the button is engaged or active
+  * a:visited - style of a button when the button has been clicked recently
+  * a:hover - style of a button when the user hovers the mouse pointer over the button
+**finish.html**
+This template is displayed when spell and grammar checking is completed.
+**gram_dlg.html**
+This template is displayed at the bottom of the dialog in grammar mode when the text being checked contains grammar issues. Normally it displays suggestions and buttons to apply or ignore the rule.
+**sp_opt.html**
+This template configures the options dialog. In standard shipment, it allows to control the following spell checking options: "all-caps words", "words with numbers", "words with mixed case", "domain names". Also, it includes a functionality to manage user dictionaries.
+**spell_dlg.html**
+This template is displayed when the posted text contains spelling errors. It suggests options for unrecognized words.
+**spellsuggestall.html**
+This is the template for the invisible frame used internally to speed up suggestion processing. It can't be customized to prevent unexpected system behavior.
+**text.html**
+This template is a placeholder for all other templates and is primarily used in spell checking dialog.
+**thes_dlg.html**
+This template displays a control panel for the thesaurus section of the dialog. Originally, it includes categories, synonym lists and control buttons "Change to", "Finish checking" and "Cancel".
+**top.html**
+This template configures the top part of the dialog. Usually, this section contains the "SpellCheck", "Grammar" and "Thesaurus" buttons, as well as a language chooser.
+===== 4. Installation procedure =====
+When you have finished preparing the whole package of the files, you can integrate them into your web set.
+Place all custom files in appropriate places described in the [[customizing_the_webspellckecker_web_interface#directory_structure|"Directory structure"]] section.
+Set the schema identifier - schemaIdentifier - in the page which utilize the WebSpellChecker in the code which invoke the spellchecker:
+<code javascript>
+<script type="text/javascript">
+	//<!--
+	function startSpellCheck(){
+		doSpell({
+			ctrl:'myEditor',
+			lang:'en_US',
+			schemaIdentifier: '30'
+		});
+	}
+	//-->
+</script>
+</code>