Page History
...
This chapter explains the above mentioned techniques.
| Stoc |
|---|
Customizing the Form HTML & CSS templates
...
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:
| Code Block |
|---|
#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:
| Code Block |
|---|
<!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>
|
...
When modified, the templates need to be stored in the following location to be picked up by Servoy at runtime:
| Code Block |
|---|
\{servoyInstall}/application_server/server/webapps/ROOT/servoy-webclient/templates/\{subdir}/\{solutionName}/\{formName}.[html/css].
|
...
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:
| Code Block |
|---|
application.setUIProperty(APP_WEB_PROPERTY.WEBCLIENT_TEMPLATES_DIR, 'customDirectoryName');
|
...
While storing the libraries in the Media Library is convenient for deployment of the libraries with a Solution, the contents of the Media Library is part of the Solution design and thus will be loaded into memory in each client. In case of the Smart Client this means that the libraries will also be downloaded, while they have no use in the Smart Client.
| Code Block |
|---|
var html = (<html>
<head>
<script src="media:///jquery-1.6.2.min.js" type="text/javascript"></script>
<!--JQuery Tweet plugin: http://tweet.seaofclouds.com/-->
<script src="media:///jquery.tweet.js" type="text/javascript"></script>
<style src="media:///jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
<script type='text/javascript'>
<![CDATA[
function initTweets() {
$(".tweet").tweet({
username: "servoy",
avatar_size: 32,
count: 100,
loading_text: "Getting you the latests tweets right now...",
refresh_interval: 60,
template: '{avatar}{text}<span>{time} - {retweet_action} - {reply_action} - {favorite_action}</span>'
}).bind("empty", function() { $(this).append("No matching tweets found"); });
}
]]>
</script>
</head>
<body onload="initTweets()">
<div class="tweet" style="width: 100%; height: 100%"></div>
</body>
</html>).toXMLString().replace(']]>', '').replace('<![CDATA[', '');
|
...
Through the style attribute on the button, the button is made invisible to the user, while remaining programmatically clickable.
| Code Block |
|---|
var html = (<html>
<head>
<script>
<![CDATA[
var x = 10;
var y = 10;
function doCallback() {
document.getElementById("myCoordinatesCallbackHandler").click()
}
]]>
</script>
</head>
<body>
<button id="myCoordinatesCallbackHandler" onclick="javascript:globals.myCoordinatesCallbackMethod(browser:x, browser:y, false)" style="visibility: hidden"> </button>
</body>
</html>).toXMLString().replace(']]>', '').replace('<![CDATA[', '');
|
When using the 'browser:' syntax to send back String values, the parameter needs to be double-quoted. Make sure to use single quotes to surround the overall event handler code:
| Code Block |
|---|
onclick='javascript:globals.myZipCodeCallbackMethod(\"browser:zipcode\")';
|
...
The plugin adds the following capabilities to the Servoy environment:
Allows to force inclusion of some of the JavaScript libraries Servoy ships with: Servoy by default conditionally includes them onto the Web Client markup only when they are needed. If custom clientside logic requires the library to be available, this can be done using the following code:
Code Block plugins.WebClientUtils.addJsReference(SERVOY_WEB_RESOURCES.JQUERY)For an overview of the version of each JavaScript library that is bundled with Servoy, check the Servoy stack info
- Allows to execute custom JavaScript clientside in the browser, using the .execueClientSideJS(...) function
- Allows adding class attributes to the markup of elements, using .setExtraCssClass(element, classAttribute). The extra class can then be references in custom StyleSheets added to the markup
- Allows for generating callback scripts through .addCallback(), which can then be included into the markup through a non-editable HTMLArea or be part of the code executed client-side using the .executeClientsideJS(...)
- Allows for marking elements as rendered: this hooks deeply into Servoy mechanism for updating the Web Client markup when something changes in the UI. When some custom client-side code modifies the HTML Markup, this change will not automatically be synced back to the server-side running Web Client. when the developer implements the sync using a callback to the Server, any changes made to the UI in the callback method on the server, would normally result in Servoy performing an automatic update of the Web Client's UI in the browser again, because it recorded the changes made in the callback event. By calling the .setRendered(..) on the element(s) that were changed in the callback event in order to sync their state with their state in the browser, Servoy will ignore the updated made to the elements, thus not updated them again in the Web Client's UI.
For example to center the current webclient form with the WebClientUtils execute the following script in each form onRender:
| Code Block |
|---|
var form_account_script = "var main_form = document.getElementById('form_"+currentcontroller.getName()+"');";
form_account_script += "if (main_form != null){";
form_account_script += "main_form.style.width='940px';";
form_account_script += "main_form.style.left='50%';";
form_account_script += "main_form.style.top='0px';";
form_account_script += "main_form.style.bottom='0px';";
form_account_script += "main_form.style.position='absolute';";
form_account_script += "main_form.style.marginLeft='-470px';";
form_account_script += "}";
plugins.WebClientUtils.executeClientSideJS(form_account_script); |
this example assuming your form is 940px wide
Overview
Content Tools
Activity