...

Customization of the Web Client is possible in a view few different ways:

• Modifying the Form HTML & CSS templates
• Changing the "the servoy_web_client_default.css" template
• Interacting with the browser environment through non-editable HTMLAreas

...

In case of a CSS template, these will be all the ID's used on the StyleClasses, for example the ID "'form_frm_company" ' 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, these are the "'id" ' and "'servoy:id" ' attributes on the nodes in the sample below:

...

Inside the HTML Templates Servoy uses long UUID's as ID's, for example "'sv_5636ffed_4465_43f0_97bb_23a7d800942f"', sometimes postfixed with "'_wrapper"': these ID's match the UUID of the objects as available through the SolutionModel's API.  At runtime however, these ID's are replaced with dynamically generated short ID's.

...

Modified templates become out of sync with the design of the Form as soon as the Form is altered in Servoy Developer. When this happens, the modified temaplte needs to be removed and the then  dynamicaly generated template needs to be modified and stored in the correct location again.

Changing

...

the servoy_web_client_default.css

...

Template

Besides the Form HTML and CSS, there is also the "servoy_web_client_default.css" template. This template contains the default CSS used for styling the forms and elements in a Web Client. Modifying this template will result in changing the overall look of all solution in the Web Client.

This css can be found at {serverURL}/servoy-webclient/templates/default/ and be changed via webdav.

Example
As an example to center all webclient solutions add:

#forms
{
left: 50%;
width: 940px;
margin-left: -480px;
top: 0px;
bottom: 0px;
position: absolute;
}

For an extensive example customization of the "the servoy_web_client_default.css" template see the Alternative CSS for Web Client project on ServoyForge.

...

The special behavior comes in when the HTML string contained in the dataprovider contains specific specific values for certain attributes on specific HTML tags:

• Servoy media URL's (media:///.....) inside Style tags or attributes are rewritten so they can be resolved in the browser
• Servoy media URL's used in the 'src' attribute of Style, Script and IMG tags are rewritten so they can be resolved in the browser 
• Script, Style and Link tags automatically end up in the head section of the DOM in the browser
• Event handlers that in the HTML start start with "'javascript:"', followed by a Servoy method identifier are rewritten to perform a callback to the server
• An onload event handler on the body of the HTML is executed in the browser when the DOM is ready

...

The following example renders the latest 100 tweets from the servoy twitter account in the non-editable HTMLArea.

The code snippet show shows a variable called 'called html' being filled with a custom HTML string. The technique used here to create the HTML string is using an XML object, on which which .toXMLString() is called to convert it into a String.

As the code of the initTweet the initTweets function contains invalid characters for XML, the code is wrapped in a CDATA tag. The CData opening and closing tags are to be removed from the actual HTML string that is put in the 'the html' variable for Servoy to be able to correctly parse and inject the HTML string into the Web Client's HTML markup. 

The tweet stream is initialized through the calling of the the initTweets() function through the onload event on the body.

...

Inside the body a button is placed with a onclick event handler that is prefixed with "'javascript:"', followed by a global method called "called myCoordinatesCallbackMethod" that should be defined in the Solution.

The call to "to globals.myCoordinatesCallbackMethod()" in the onclick handler is setup to send 3 arguments into the callback: the first two are local, browser-side variables "variables x" and "y", while the third is a hardcoded false value.

The "'browser:" ' prefix on the argument indicates that the value of a browser-side variable should be included in the callback.

The The doCallback() function is a little helper function that can be called by browser-side logic to programmatically perform the click on the button.

...