The Servoy Web Client has a pure HTML & CSS based UI that runs in the Browser, while all the business logic is executed on the Application Server.
With the UI running in the browser and being pure HTML and CSS, it lends itself for customization.
Customization of the Web Client is possible in a view different ways:
This chapter explains the above mentioned techniques.
For each Form that is part of the designtime design of a Solution, Servoy generates both a HTML and CSS template dynamically. These templates are filled with data at runtime.
The generated templates can be customized and stored in a specific location on the Servoy Application Server, using a name identical to the dynamic generated template. If a template is available on disk, that template will be used at runtime, instead of the dynamicly genarated template.
Viewing the templates
The dynamically generated templates are available through the browser at {serverURL}/servoy-webclient/templates/default/{solutionName}/{formName}.[html/css] and viewing the source of the page. The templates can also be accessed via WEBDAV.
Modifying the templates
The source of the template can be modified any preferred tool. When modifying the the templates, care must be taken not to alter any of the identifiers used by Servoy to fill the template at runtime with data.
In case of a CSS template, these will be all the ID's used on the StyleClasses, for example the ID "form_frm_company" marked in red in the sample below:
#form_frm_company { border-style: none; min-width: 800px; min-height: 600px; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px }
In case of editing HTML templates
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Servoy webclient page Copyright 2011 Servoy --> <html xmlns:servoy> <head> <title>dialog - Servoy</title> <servoy:head> </servoy:head> </head> <body id='servoy_page'> <form id='servoy_dataform'> <servoy:panel> <div servoy:id='servoywebform' id='form_dialog'> <div id='sfw_form_dialog' style='position: absolute; height: 0px; right: 0px; left: 0px;'/> <div id='sfh_form_dialog' style='position: absolute; bottom: 0px; top: 0px; width: 0px;'/> <div servoy:id='View'> <div servoy:id='sv_5636ffed_4465_43f0_97bb_23a7d800942f' id='sv_5636ffed_4465_43f0_97bb_23a7d800942f' class='formpart'> <div servoy:id='sv_da70a6fe_39c8_445b_88bc_7aca5c1bb0b6' class='tabpanel' > <div servoy:id='webform' style='overflow: auto;position: relative' class='webform' > </div> </div> <div style="white-space: nowrap;" servoy:id='sv_1e460f73_5cac_4396_815a_c09af002918e' class='label' ></div> <div style="white-space: nowrap;" servoy:id='sv_5eae2200_ae8d_4100_844b_4d825775f1d3' class='label' ></div> <div servoy:id='sv_1399876f_ed4f_410e_a7e7_91839bd7390c_wrapper' id='sv_1399876f_ed4f_410e_a7e7_91839bd7390c_wrapper' > <button type='submit' servoy:id='sv_1399876f_ed4f_410e_a7e7_91839bd7390c' class='button' ></button> </div> <div servoy:id='sv_8fb398c4_064f_4222_82b9_74f4fdc8410e_wrapper' id='sv_8fb398c4_064f_4222_82b9_74f4fdc8410e_wrapper' > <button type='submit' servoy:id='sv_8fb398c4_064f_4222_82b9_74f4fdc8410e' class='button' ></button> </div> <div servoy:id='sv_5bdbe19a_0e8b_407d_855e_28c97dcade9e_wrapper' id='sv_5bdbe19a_0e8b_407d_855e_28c97dcade9e_wrapper' > <button type='submit' servoy:id='sv_5bdbe19a_0e8b_407d_855e_28c97dcade9e' class='button' ></button> </div> </div> </div> </div> </servoy:panel> </form> </body> </html>
Storing modified templates
When modified, the templates need to be stored in the following location to be picked up by Servoy at runtime:
\{servoyInstall}/application_server/server/webapps/ROOT/servoy-webclient/templates/\{subdir}/\{solutionName}/\{formName}.[html/css].
Creating multiple customizations
The '{subdir}' part of the location is the 'default' directory by default, but it is possible to create another subdirectory in the {servoyInstall}/application_server/server/webapps/ROOT/servoy-webclient/templates/ directory for storing the modified templates and at runtime in the Solution tell Servoy to use this directory insetad of the default directory using the following code:
application.setUIProperty(APP_WEB_PROPERTY.WEBCLIENT_TEMPLATES_DIR, 'customDirectoryName');
This mechanism allows for creating multiple variations of the templates, for example one variation per customer in a SaaS environment.
For branding some of the generic web pages that are part of the Servoy environment and are utilized by the Web Client, see Branding.
WebClientUtils plugin:
For an overview of the version of each JavaScript library that is bundled with Servoy, check ....