Servoy Forum

by **cbenassi** » Tue Dec 11, 2007 2:47 am

For this issue's Tip or Trick, Servoy would like to thank Darren Clarke and The Support Group for their contribution -- the HTML "iframe" tag.

"The why of iframes"

Have you ever wanted to embed a Servoy Web Client solution into an existing web page? Perhaps you want to hide Web Client's complex URLs from your users or display media inline in one of your Servoy solutions. All of these things can be accomplished by using the HTML <iframe> tag.

An <iframe> allows you to embed an entire web page or application inside another page. You simply specify its size and the URL of the resource to load and modern browsers will take care of the rest. For example, if you wanted to embed the Servoy home page in another page, you could add this code to an HTML page:

<iframe src="http://www.servoy.com" height="400" width="500" frameborder="0" scrolling="yes">Some warning text here in case the browser doesn't support iframes.</iframe>

The <iframe> tag is getting a lot of use today in part because of the "embeddable application" craze led by Facebook. The concept is that third-parties can write applications, hosted on remote servers, that seem to the user to be part of the "parent" page or site. If you were to build an embeddable mini-application using Web Client, it could be added to a page like this:

<iframe src="http://your-ip-address:8080/servoy-webclient/solutions/solution/your-solution-name" height="200" width="200" frameborder="0" scrolling="no" marginwidth='0px' marginheight='0px' style='margin:0px; padding:0px; border-size:0px;'>Warning text.</iframe>

A similar idea could be used to embed a full-sized Servoy application in a frame, which would give a clean-looking URL in the browser location bar instead of the verbose Apache Wicket URLs that are standard in Web Client. Even better, in most browsers the back button will continue to work as expected for the embedded page. The full contents of the parent web page would look like this:

<html>
<head>
<title>Your title</title>
</head>
<body style='margin:0px; padding:0px;'>
<iframe src="http://your-ip-address:8080/servoy-webclient/solutions/solution/your-solution-name" height="100%" width="100%" scrolling="no" frameborder='0' marginwidth='0px' marginheight='0px' style='margin:0px; padding:0px; border-size:0px;'>Warning text.</iframe>
</body>
</html>

Take this code, place it in an .html file, fill in the correct IP address / solution name and put the file on your web server (or in /Servoy/server/webapps/ROOT/ where Servoy's internal web pages are hosted). When you give out the location of your application to users, simply tell them the location of this "shell" page.

The <iframe> tag can also be used to display rich media in Web Client (assuming that the user has the proper plugins installed). This example will embed an HD Quicktime movie into your solution -- just place it in an HTML-area field or in a label with the HTML checkbox checked:

<iframe src='http://images.apple.com/movies/us/hd_gallery/gl1800/480p/bbc-blue_m480p.mov' width='850px' height='495px' scrolling='no' frameborder='0' marginwidth='0px' marginheight='0px' style='margin:0px; padding:0px; border-size:0px;'>Warning text.</iframe>

This technique could also be used to embed an entire .pdf viewer in your solution:

<iframe src='http://www.servoy.com/downloads/whitepapers/servoy_saas_whitepaper.pdf' width='450px' height='550px' scrolling='no' frameborder='0' marginwidth='0px' marginheight='0px' style='margin:0px; padding:0px; border-size:0px;'>Warning text.</iframe>

Using iframes, you can take advantage of all of the native abilities of your browser of choice and bring those capabilities into your Servoy Web Client solution.

Carla Benassi
Marketing Coordinator
Servoy, USA

by **grahamg** » Tue Dec 18, 2007 5:36 pm

Great tip and agree that I-Frames are ideal for presenting WebClient systems.

One thing to watch out for is

width="100%"

Some FireFox releases have a problem with this and will default to 200px width so I hardcode width="900px".

by **Westy** » Tue Dec 18, 2007 7:16 pm

Another benefit of this approach is that it could be used to center a webclient solution within a browser:

Code: Select all: <html> <head> <title>Your title</title> </head> <body style='margin:0px; padding:0px;'> <center> <iframe src="http://your-ip-address:8080/servoy-webclient/solutions/solution/your-solution-name" height="100%" width="100%" scrolling="no" frameborder='0' marginwidth='0px' marginheight='0px' style='margin:0px; padding:0px; border-size:0px;'>Warning text.</iframe> </center> </body> </html>

Thank you for the great iframe tips.

Dean Westover
Choices Software, Inc.

by **Westy** » Mon Mar 24, 2008 4:02 pm

I just had the occasion to use my above suggestion and it did not work. The revised code below should work:

Code: Select all: <html> <head> <title>Your Title</title> </head> <body style='margin:0px; padding:0px;'> <div style="text-align:center;"> <iframe src="your-ip-address:8080/servoy-webclient/solutions/solution/your-solution-name" height="100%" width="680px" scrolling="no" frameborder='0' marginwidth='0px' marginheight='0px' style='margin:0px; padding:0px; border-size:0px;'>Place warning text here for browsers that do not support iframes.</iframe> </div> </body> </html>

An important change is that the div tags need to be used. Also, the width of 680px represents the width of my widest Servoy form. Alternatively, a percentage width such as 70% or 80% could be used.

Dean Westover
Choices Software, Inc.

by **bcusick** » Wed Mar 26, 2008 3:38 pm

Dean,

This is a GREAT tip! Thanks for that...

Servoy Forum

Newsletter Tip or Trick number 2

Newsletter Tip or Trick number 2

Who is online