...
This chapter explains the above mentioned techniques.
Stoc |
---|
...
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
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