Page 1 of 1

[Tip] Smart client to web client conversion cheat sheet

PostPosted: Tue Sep 25, 2012 10:58 pm
by david
Our cheat sheet for converting smart client solutions and form work over to web client as of Servoy 6.1.x. Will keep updated as we run into things -- especially the "gotchas" section at the end. Feel free to augment!

Basic compatibility differences between smart and web clients ... y+overview

Scrollable grids ... SCROLLABLE

Split beans to split tab panel (author: Lach)

Split beans are not web client compatible and need to be converted to split tab panels. (Split tab panels were introduced in Servoy 5.x and should be used for smart client as well now.)

Design conversion:

- note the size of the largest bean element and it's location
- remove the beans from the form
- note the forms that make up the tab panel and relation info.
- remove the bottom or right tab panel
- resize the remaining tab panel to the size of the bean
- set the tab orientation property SPLIT_VERITCAL
- anchor the tab panel to left, top, bottom, right (or as you see fit)
- add forms to split tab panel. position labels to get desired left/right or top/bottom split

Code conversion:

Split bean setup code is usually located in the onLoad event. Comment out (or remove) and add new code in the onShow event (firstShow parameter). Example:

Code: Select all
if (firstShow) {
   elements.tab_top.resizeWeight = 1;
   elements.tab_top.dividerSize = 0;
   elements.tab_top.dividerLocation = elements.tab_top.getHeight();

Any other code that modifies the split bean at runtime needs to be corrected to modify the split pane. In general, the runtime functions of the split beans and split tab panels are fairly similar. So pretty easy to track down and fix.

Use styles instead of element properties

A lot of older smart client solutions have various elements styled directly with properties even though styles have been available for a long time. This is a good time to convert everything over to using style sheets. Some wiki references:

Basic usage: ... g+with+CSS
Supported style properties: ... properties

Note that Servoy 6.1 implemented major upgrades to styles: ... ingoptions

An example using the above split bean conversion: create style classes for split tab panels that correspond to the look of what you had setup for split beans. (Make sure your form(s) have style sheets assigned.)

The following code sample uses the new sub class feature to define styles for different split tab panels:

Code: Select all
/* tab panel */
tabpanel {
   border: 0px solid;

tabpanel.grid_primary {
   border: 1px solid #A1B0CF;
   border-bottom-width: 3px;
   border-top-color: #647B95;

tabpanel.grid_secondary {
   border: 1px solid #D1D7E2;
   border-bottom-width: 3px;
   border-top-color: #647B95;

Alternate CSS for web client

Additionally, highly recommend configuring some global css with Harjo's Servoy Forge project:

iFrame deployment

A lot of us imbed web client in an iFrame. The URL of the iFrame is a web client deep link. This requires advanced knowledge of client-side javascripting and associated libraries. The trade-off is that it allows for for powerful "wrapper" manipulation of your solution. Some of the things we're doing:

- Dedicated wrappers for various mobile devices to setup and organize specific css and functionality. Example is that on an ipad the user is prompted to save the web app to their home screen as an icon. Another: open Google Maps app from an address in in web client.

- Cool override of Servoy's busy indicator: ... ation.html

- Custom router, browser history manipulation, and real URLs. Example: instead of web client's ugly url. Proprietary to our Data Sutra frameworks at this point.

- Google analytics. With real/consistent/meaningful URL's -- going to specific screens and records google analytics works very well now. Also able to use robots.txt and humans.txt to help search engines.

- Implemented favicon.ico and associated named variants for Android and iOS to get the URL badge graphic.

Advanced CSS ideas

- External graphic sprites for all icons. Use instead of Servoy media images via css background assignment. Advantage: Servoy sends medias used on forms individually each time a form is shown. A sprite is sent once for your entire solution.

- Replace out all gradient images with CSS3 equivalents. Put the CSS into Servoy style sheet. Assign class to a label. Neato gradient CSS builder:

Advanced client-side manipulation

Sean's web client utils plugin allows server-side code to run client-side code and vice-versa. Well worth the price (free):

This basically throws the door wide open for implementing any client-side library functionality into Servoy web client.


1) HTML area fields

In our smart client solutions we've used a lot of HTML area fields to display custom widgets such as calendars, special grids, badges in grids, etc. Typical code snippet from a calculation:

Code: Select all
function display_group_name(){
   if (id_group) {
      var itemName = (group_name) ? group_name : 'UNKNOWN'
      var html = '<html><head><style type="text/css" media="screen"><!--'
      html += 'table { table-layout: fixed; width: 100%; border-spacing: 0px; border: 0px; }'
      html += 'td  { text-indent: 5px; white-space: nowrap; overflow: hidden; border: 0px; padding: 2px; height: 20px; line-height: 20px; }'
      html += '.rowSelected  { color: white; text-decoration: none; font-weight: bold; background-image: url("media:///row_selected.png"); }'
      html += 'td.rowSelected a { color: white; text-decoration: none; }'
      html += '--></style></head>'
      if (globals.AC_group_selected == id_group) {
         html += '<table><tr>'
         html += '<td class = "rowSelected">' + itemName + '</td>'
         html += '</tr></table></html>'
      else {
         html += '<table><tr>'
         html += '<td>' + itemName + '</td>'
         html += '</tr></table></html>'
      return html

Note how we included some fairly generic style classes. Of course all html area code appears at some point in the final html markup in web client. This could be (and usually is) after any Servoy style information is loaded.

The gotcha is that if you have some generic classes in html area markup (like td and tr.'s shown above), this can override earlier CSS for those classes/tags and the rest of your screen will take the values from your html area field instead of what you defined in a Servoy style sheet or elsewhere.