COMPANY

BLOGS

  • user warning: Unknown column 'u.signature_format' in 'field list' query: SELECT c.cid as cid, c.pid, c.nid, c.subject, c.comment, c.format, c.timestamp, c.name, c.mail, c.homepage, u.uid, u.name AS registered_name, u.signature, u.signature_format, u.picture, u.data, c.thread, c.status FROM comments c INNER JOIN users u ON c.uid = u.uid WHERE c.nid = 28412 AND c.status = 0 ORDER BY c.cid LIMIT 0, 50 in /var/www/www.4d.com/docs/modules/comment/comment.module on line 991.
  • warning: file_get_contents(http://www.telize.com/geoip/54.80.137.168) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /var/www/www.4d.com/docs/includes/common.inc(1762) : eval()'d code on line 4.

Have some style!

30.05.2013
by Olivier Deschanels

Don't think I'm going to reveal the remarks my PE teacher made when I tried to do my floor exercises in gym class. I've long erased those painful memories, even if they're slightly reawakened by the scent of the sweat and rubber mats of my childhood. However, my PE teacher's lessons also left me with some good lessons, which I'll take advantage of today.

 

Let's see how!

 

Let's examine the following example:

 

For several versions now, 4D has offered the use of rich, styled text. Whenever I've met with 4D developers, I've had the chance to see this element in action, and so it's now time for me to give it a role. 

 

Look at the following list:

Screenshot 1

This list contains two columns: The first with phone numbers (fictitious, don't bother calling them!) and the second the duration of the calls to these numbers.

 

With a first look, can you tell how many calls lasted for more than an hour?

 

If you reread the list, you see that you need to concentrate to get this information because your eye isn't guided and you have to read everything.

 

 

This is where my gym teacher's lesson comes in, when he asked me to hold my hand or point my feet in a particular way. According to this teacher, in addition to the necessary grace (which was non-existent in my case), extending the hands or the feet would allow me to make for a more aesthetically pleasing figure. This requires more work and concentration, but the result is better. Keeping this lesson in mind, here's how I can apply it to the present case.

 

 

Reading this list is difficult because the view is weighed down by the number of insignificant zeroes, which do nothing more than provide visual alignment.

 

How can we improve this?

 

 

A radical solution is to elminiate the zeroes. Here's how that looks: 

Screenshot 2

It looks pretty good! It's easier to read. But the soution is more fit to a lumberjack than a gymnast.

  

Let's add a little style, a little bit of "class" – 4D styled text, as it may be. Styled text allow you to place several different styles in the same object, playing on the size, color, weight, etc. Here I'll keep things light by not playing with the color and merely reducing the visibility of the not-very-useful zeroes. Here's how it looks: 

Screenshot 3

The change might seem very insignificant and may even go unnoticed.  And that's exactly what we want to do: Help the user out by working on the little details. These little details make all the difference in the world. To paraphrase the great Ron Burgundy, they help you "Stay classy!"

 

 

Now let's look at how we can bring this stylish detail. I'll assure you right away that it's much sympler than gym class. No need to lace up your sneakers or put on silly shorts, and you don't even need to balance on anything. 

 

The preceding lists were made using simple listboxes. In the first case, the second column directly represented the field Time.

 

Forget the second test and let's skip to the final result.

 

In the last example, in the property list for the second column, I modified the source of the data [Appel]Durée (translation: [Call]Duration):

 

Screenshot 4

 

with the expression:

 

 

DureeStyle([Appel]Durée) (translation: StyledDuration([Call]Duration))

 

So I use the function called DureeStyle to display my information in the form I would like.

 

Here's the code for the method:

 

C_TEXTE($0)
C_HEURE($1)
$time:=$1
$seconds:=$time%60
$minutes:=(Ent($time/60))%60
$hours:=(Ent($time/3600))%24
Au cas ou
: ($hours>=10)
$0:=Chaine($hours;"00")+":"+Chaine($minutes;"00")+":"+Chaine($seconds;"00")
: ($hours>0)
$0:="<span style=\"color:lightgrey\">"+Chaine($hours\10;"0")+"</span>"+Chaine($hours%10;"0")
+":"+Chaine($minutes;"00")+":"+Chaine($seconds;"00")
: ($minutes>=10)
$0:="<span style=\"color:lightgrey\">"+Chaine($hours;"00")+":"+"</
span>"+Chaine($minutes;"00")+":"+Chaine($seconds;"00")
: ($minutes>0)
$0:="<span style=\"color:lightgrey\">"+Chaine($hours;"00")+":"+Chaine($minutes\10;"0")+"</
span>"+Chaine($minutes%10;"0")+":"+Chaine($seconds;"00")
: ($seconds>=10)
$0:="<span style=\"color:lightgrey\">"+Chaine($hours;"00")+":"+Chaine($minutes;"00")+":"+"</
span>"+Chaine($seconds;"00")
: ($seconds>0)
$0:="<span style=\"color:lightgrey\">"+Chaine($hours;"00")+":"+Chaine($minutes;"00")
+":"+Chaine($seconds\10;"0")+"</span>"+Chaine($seconds%10;"0")
Sinon
$0:="<span style=\"color:lightgrey\">"+Chaine($hours;"00")+":"+Chaine($minutes;"00")
+":"+Chaine($seconds;"00")+"</span>"
Fin de cas

This code is really simple and uses the <span> tag to provide the desired colors.

 

After having parsed the variable of the heure (time) type into hours, minutes and seconds, I construct a string containing the desired styles.

 

So you actually need very little to have a stylish interface. All those years later, I still remembered that lesson!

 

You can let this example inspire you to create interfaces with styled text, allowing you to bring more value to your most important information without making them flash in red.
 

 

By using this principle, and having a certain amount of "class," you can highlight or soften the inoline presentation of text – there are many ways to take advantage of this!

 

Part numbers: Oftentimes, part numbers contain distinct logical parts like the product line number, then the category number, and finally a product number. Why not use three harmonious colors to make things easier to read?

 

 

Banking: The first three numbers of an account number can be very significant. Maybe they should be in bold? 

 

  • 411001841 insiste sur le fait qu'il s'agit d'un compte client
  • 401001841 montre rapidement un fournisseur

 

Rolling on with this principle, the possibilities are endless, and we can perfect our interfaces with simple and elegant touches. Stay classy, indeed.

RSS 0 comment(s) to this post