« [Tip] Showing status with an animated gif | Main | [Tip] Colorize and format Servoy methods for HTML output »
June 29, 2006
[Article] UI tricks: move, resize, hide, and show interface elements
by David Workman
Data Mosaic
Servoy allows you to manipulate the "physical" properties of objects at runtime. I am talking about size, location, readability, visibility, etc. There is enough there that you can even animate your objects. I am sure that given enough time and boredom, you could write a fairly passable version of Tetris in Servoy. But what use is animating an object in a Servoy solution? I haven't found a brilliant use yet -- cute as they are -- but I do find that a certain amount of physical object manipulation in Servoy can bring your interfaces to life. It doesn't take much to add a certain polish to your solutions.
Here are a few examples to get your mind going.
Outline
1. Hiding until needed
2. Custom tab controller
3. Adjusting the viewable work space
4. Graphics in row calculations
1. Hiding until needed
In this series of graphics, I don't show a couple of data input fields unless "Adjustment" is the selected value in the timeslip type combobox. This step reinforces the fact that additional data is required when selecting "Adjustment". Troy put this one in one day and got immediate rave reviews from the users.
Custom tab controller
I don't think I have used the default tabs in Servoy for any major solution since Servoy came out. Creating your own custom tab controller is easy and allows you to get away from being at the mercy of what platform and LAF a user is on. In one style of our tab controllers we move a white line around to cover up the baseline of the currently selected tab (which is a box with a line all around it). This makes the tab blend to the white background of the form in the tab panel (turn off borders on the form in the tab panel). This is the only way to create a blend currently because you cannot change the border properties of an object with a method.
Adjusting the viewable work space
I like this one because it gives the user some control of their work space. One of our production templates is divided into three major sections: navigation, record list, and record detail. The defaul view is to show all three sections. Most of the time though, a user will not be using the navigation list and will be using the record list to get to various records. Solution? Hide the navigation list and move and resize the record list to fill the space left over when hiding the navigation list.
We even wrote a nifty sliding transition animation for this action. But it turns out that it is only cool for about a day in real life after which the animation becomes slightly annoying.
Graphics in row calculations
You'll notice in the last screen shots that the lists have show quite clearly which row is selected. Instead of using the standard background row calculation for this I am using a graphic. Why use a graphic instead of a color? In this case the graphic is a gradient which lends an extra bit of pizzaz over a solid color. This technique can easily be used for showing all kinds of graphics in lists based on certain situations -- getting quite advanced. For example:
- show/hide a trash can depending on user delete privileges
- mark records that are out of date, need payments on, need processing, etc
- overlay a gantt chart (see http://forum.servoy.com/viewtopic.php?t=5999)
To show this particular graphic I need an html field that is placed over the entire row (so this doesn't work with tables -- only lists). This field contains the following calculation:
if (globals.FNCL_payroll_row_selected == id_payroll)
{
return '<html><img src= "media:///row_selected.png" width=200 height=20></html>'
}
else
{
return null;
}
Then on the record selected property, set the global with this method:
//set selected record
if (controller.getMaxRecordIndex() > 0) {
globals.FNCL_payroll_row_selected = id_payroll
}
Summary
To state the obvious: any object manipulation you do at runtime only affects the user in question (a good thing). Sending events to other users is a whole other issue.
Used wisely, the physical properties of screen objects can be useful for more than just party tricks. They can be an effective and powerful tool in your user interface bag of tricks.
| Posted by David Workman on June 29, 2006 at 11:49 AM in Articles | Permalink
Comments
Great article, David. I really like your iTunes-like template. I'm learning Servoy so I can migrate a FMP solution, which happens to have an Aqua-like template, but yours is much, much more elegant looking. Well done.
Now, if I could only borrow your production template ;o)
Posted by: Sean Mills | Jul 19, 2006 1:41:30 PM
Sorry, there was a typo in my email address.
Posted by: Sean Mills | Jul 19, 2006 1:53:23 PM
