Mindfire Solutions

www.mindfiresolutions.com

Servoy JavaScript Bridge – User Guide Introduction Leveraging on the power of Servoy Browser Bean, we would like to demonstrate a glimpse of how the JavaScript world can be triggered from Servoy. Here, we have established the back and forth communication between Servoy and JavaScript, which works on both smart/web client. All these examples are based on the Open Source JavaScript utilities/plug-ins that are available on the web.

Requirements 1) Servoy_installer – 6.0.6 2) Servoy Browser bean. (“https://www.servoyforge.net/projects/browsersuite/news”) 3) Downloaded zip(“Servoy JQuery.zip”) contains three items : a)

JQuerySamples.servoy (“Servoy solution”)

b)

Folder named “resources” contains all JQuery lib and CSS files used in the application.

c)

Folder named “uploads” contains some image and video files used in the application.

Installation Process: 1) Install Servoy installer. 2) Install Servoy browser suite. 3) Downloaded zip contains three items : a) JQuerySample.servoy (“Servoy solutions”):  It contains main solution and all dependent modules along with database schema and some sample data.  First create a database named “sample_data”. Page | 1

Mindfire Solutions

www.mindfiresolutions.com

 Then import “JQuerySample.servoy” solution.

(N.B: We have used Postgres as back end)

b) resources:  This folder contains all JQuery libs and CSS files.  Keep “resources” folder inside “\application_server\server\webapps\ROOT\”. c) uploads:  This folder contains some sample images and videos which will be used in the solutions  Move all the contents of “uploads” folder to “\installation\application_server\server\webapps\ROOT\uploads” folder.

Page | 2

Mindfire Solutions

www.mindfiresolutions.com

Description:  Given sample application contains main solution named “JquerySamples” along with 11 other sample solutions as module.  Each solution implemented different jQuery techniques.  To reflect jQuery techniques in Servoy we have taken the help of HTML area in case of webclient and in case of smart-client we have taken the help of Servoy browser bean. Signature Pad:  It helps users to create their signature and save the created signature to the database for future use.  It works in both smart and web client. jQuery Charts And Graphs:  This sample module is used to draw different type of charts and graphs depending upon the data provided.  In this sample module 4 types of charts and graphs (“one pie-chart, two different types of bar-chart and a line-chart”) has been displayed using one set of data.  You will find zooming functionality in line-chart.  One can add dynamic data and also delete existing data to see changes.  It works in both smart and web client. Dashboard:  This sample module used to create a dashboard, where user can display messages in different boxes.  These message boxes are editable, one can update the message, hide the message, delete the message, can change the color of the message box and also it is possible to move the message box from one place to other.  It works in both smart and web client. LiteAccordion and jQuery Samples:  Both are used to animate images in very attractive way.  It is possible to add new images and delete existing images  Both works in smart and web client. Sticky Notes:    

This sample module used to create sticky notes. It is possible to move the notes from one place to other. You can add and delete notes dynamically. It works in both smart and web client. Page | 3

Mindfire Solutions

www.mindfiresolutions.com

Tag Cloud:  This sample module is used to create spherical tag cloud  It has functionality to zoom in and zoom out  There are two options available, one is for showing image based tag cloud another is for showing text based Tag Cloud  It provides functionality to add new element to the tag cloud and remove existing element from the tag cloud  It works in both smart and web client JPlayer:  This sample module is used to play video in smart client as well as in web client.  Here we are taking the help of HTML 5 to play video.  Playing of a video is dependent upon the browser used and the video formats supported by that browser For example: .ogv - Firefox, Google Chrome 6 (TESTED). .webm - Firefox, Google Chrome 6, Opera 10.6 .m4v - Internet Explorer 9, Google Chrome 6 YouTube Playlist:  This sample module has techniques to create a play list of YouTube videos in both smart and web client.  You can add more than one YouTube video URL to create a play list and also it is possible to remove any video from the play list by clicking delete button. Google Feeds:  This sample module is used for delivering updates of different web sites.  To view the updates of a web site you need to add the rss feed URL of that web site.  It works in both smart and web client. Weather Feeds:  This sample module is used to display weather report of different cities.  You can add a new city from the drop down to the list and also can remove a city from the list by clicking delete button.  It works in both smart and web client. Twitter Ticker:  This sample module has technique to display tweets of different users.  To display tweets of a user you need to add the user name to the list.  It works in both smart and web client.

Page | 4

Mindfire Solutions

www.mindfiresolutions.com

Code Snippet: //Used to create HTML content. function createHTML(){ htmlContent = ""; htmlContent =( $dot$ $dot$ $dot$ $dot$ ).toXMLString(); // Used to replace static string("youtubeLinkTable") with dynamically created html elements("globals.xmlString"). htmlContent = utils.stringReplace(htmlContent, "youtubeLinkTable", globals.xmlString); htmlContent = utils.stringReplace(htmlContent, "$dot$", ""); htmlContent = utils.stringReplace(htmlContent,']]>',''); htmlContent = utils.stringReplace(htmlContent,'