08.03.2007

SnTT: Round corners and layers

>>Author:  Bernd Hort
>>Ort:     Hamburg

URL: http://www.assono.de/blog/d6plinks/BHOT-6Z4S8Y

Category: Show-n-Tell Thursday, Lotus Notes, Entwicklung, Interface Design

Since Ben Langhinrichs has showed how to build a table with round corners quite easily I wanted to use this feature in a productive environment. But there is this old issue with “Notes and Printing” which prevented me from doing so. During the Lotusphere - Session: Designing the User Experience: Why Your Interface Matters from Chris Blatnick and Nathan T Freeman I figured out a solution.

But start with the beginning. For round corners in tables two ingredients are needed: a image resource like this one A picture named M2

and of course a table.

In the property box of the table the border style “Image” has to be selected and the name of the image resource has to be given. To see the round corners clearly the thickness of the border has to be fairly large. In the example I used 9 pixels.

The result is quite nice. A picture named M4

Until you start to print it.

During printing the image resource is not used. But the thickness of 9 pixels of the border will result in a big ugly border. Even if you use a white border it is not really good looking.

As mentioned above there is a solution: Layers. There are two tables in the form. The one with the round corners is in a layer. The second one is just for printing and will be covered by the layer with the other table. (In the screen shot I moved the layer, so that the underlying table could be seen.)

The only thing to remember is setting the hide-when option for printing in the line where the layer anchor is.

With this settings the layer with the table with the round corners will be shown on screen but for printing the simple table will be used.

Comments

If I understand correctly, this points out that the rounded corners technique that I have used before with an image resource looks good on screen but doesn't print well, since the huge borders show but not the image resource. On the other hand, if you use layers to create the rounded table, and put it over the standard table, the standard table is all that will print, so it will look good on screen but also when printed.

Bernd, how did I do?

Posted by Ben Langhinrichs At 14:46:12 On 09.03.2007 | - Website -

Bernd...very nice job on this! I think that creating separate elements for printing in Notes is often a great idea, since a printed form should often look different from a computer interface anyway.

I'm curious if you could put one layer on another and set the image properties of the layer to use the rounded table graphic and see if Notes would respect this for printing. Did you try that by any chance?

In any event, thank you for the translation! Even though I work for a German company, my German skills are not so good! Emoticon

Posted by Chris Blatnick At 17:53:48 On 09.03.2007 | - Website -

Actually I never tried the image properties of the layer. I'm not quite shure whether this would work. The trick with the round corners is that through the border settings "Image" the image resource is scaled automatically. Is there a border setting for the layer?

Posted by Bernd Hort At 18:04:12 On 09.03.2007 | - Website -

The dynamical scale is the one thing I like about the border style with an image resource. IBM did a pretty good job to scale the grafic nicely.

Posted by Bernd Hort At 10:31:33 On 12.03.2007 | - Website -

Any chance of a translation so I can comment? You've got a layer thing going on here, but I'm not sure what for. :)

Posted by Nathan T. Freeman At 14:07:46 On 09.03.2007 | - Website -

If you don't need it to dynamically scale, I bet you could put that graphic on the overlay layer with a TRANSPARENT center and it would be see-through. That way, the layer need only contain the actual graphics, and the stuff underneath it would come through.

You could probably even make that image a cell background and use "size to fit" to get some level of dynamic adjustment out of it.

And that might even print properly, y'know. :)

Posted by Nathan T. Freeman At 22:59:57 On 09.03.2007 | - Website -

Ben, you did really good. You where much faster than my translation which by the way should be public by now.

Posted by Bernd Hort At 14:55:17 On 09.03.2007 | - Website -