« [Tip] Retrieving a value from a non-related table | Main | [Tip] Return number of days between dates »

January 07, 2005

[Article] Using HTML to navigate through data

by Enrico Arata

Screen1_3

If you want to build an easy interface that lets a user click select on images or information have a close look to a couple of powerful instruments that Servoy's dream development team have developed for us.

Here you have three simple steps to getting started:

(1) Display a global field with HTML code on it. Just load the following string on a global string:

<html>Hello Servoy</html>

and display it on a field with property displayType = HTML_AREA and set is as not editable. It works? OK, now change your global field to:

<html><img src= "http://www.servoy.com/images/servoy-logo-made-simple.gif">hello Servoy</html>

Now as long as the Servoy's webmaster does not move or rename their logo on the web....

(2) Store your gif or jpg images as binary data into a blob (MEDIA) fields on databases and retrieve them easily in an html string. "media:///servoy_blobloader" will do the job for you.

Syntax:

media:///servoy_blobloader?servername=controller.getServerName()+'&tablename='+controller.getTableName()
+'&dataprovider=blobfieldname&rowid='+record.primarykeyid

(3) Lastly, using "javasript:yourMethod(parameters)" you can link your method to your html string.

"yourMethod()" is the name of a normal servoy method. It must be defined in the form that you are using, and you can pass one or more parameters to it.

Example:

var temp_html = '<html><table border="0" cellspacing="0" cellpadding="10"> <tr>' // starts the html string

var col_count = 0;

for ( var i = 1 ; i <= foundset.getSize() ; i++ )
{
    var record = foundset.getRecord(i)

    var img_string = 'media:///servoy_blobloader?servername=' +
        controller.getServerName() + '&tablename=' + controller.getTableName() +
        '&dataprovider=image_field&rowid1= ' + record.primarykeyid

    temp_html += '<td valign="middle" align="center"><a href="javascript:myMethod(' +"'"+record.codeitem +"'"+')">'

    temp_html += '<img src="' +img_string + '" border="1"></a></td>'

    if (++col_count == 4)// max 4 images for each row of data
    {
        temp_html += '</tr><tr>'

        col_count = 0;// new line
    }
}

temp_html += '</tr></table></html>'// closes the html string

globals.html_field = temp_html// stores the html string on the global variable

Why should you use this html way to present data and not simply display your form in list view? Well, probably because it is easy to implement an 2,3,4...n possible selections per row, and a lot of nice things can be done with html... or... just to enjoy SERVOY a little bit more!!!

Screen2

| Posted by David Workman on January 7, 2005 at 06:12 AM in Articles | Permalink

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/t/trackback/118167/1638173

Listed below are links to weblogs that reference [Article] Using HTML to navigate through data:

Comments

Post a comment