Page History
...
| 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[', '');
|
Example 2
This example shown the creation of a callback to the Web Client business logic that runs on the Server.
Inside the body a button is placed with a onclick event handler that is prefixed with "javascript:", followed by a global method called "myCoordinatesCallbackMethod" that should be defined in the Solution.
The call to "globals.myCoordinatesCallbackMethod()" in the onclick handler is setup to send 3 arguments into the callback: the first two are local, browser-side 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 doCallback() function is a little helper function that can be called by browser-side logic to programmatically perform the click on the button.
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">dummy</button>
</body>
</html>).toXMLString().replace(']]>', '').replace('<
While this example will work on a simple Form, there is a risk of it breaking. This example includes JQuery. Servoy itself also utilizes JQuery in certain scenario's. The logic of Servoy is as such that it will only conditionally include JQuery conditionally when required. When that happens when this html is also being shown, there can be a conflict between the 2 JQuery inclusions. This issue can be easily solved by excluding the JQuery library in the html of this example and forcing Servoy to include the JQuery library it ships using the WebClientUtils plugin.
Example 2
This example shown the creation of a callback to the Web Client business logic that runs on the Server.
Inside the body a button is placed with a onclick event handler that is prefixed with "javascript:", followed by a global method called "myCoordinatesCallbackMethod" that should be defined in the Solution.
The call to "globals.myCoordinatesCallbackMethod()" in the onclick handler is setup to send 3 arguments into the callback: the first two are local, browser-side 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 doCallback() function is a little helper function that can be called by browser-side logic to programmatically perform the click on the button.
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">dummy</button>
</body>
</html>).toXMLString().replace(']]>', '').replace('<![CDATA[', '');
|
Interacting with the browser environment through the WebClientUtils plugin
The WebClientUtils plugin is a plugin that is not part of the default distribution of Servoy, but is hosted on ServoyForge.
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(...) fucntion
- 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.
Overview
Content Tools
Activity