6 paths to rounded corners in the Notes Client

I like rounded corners. It makes life less edgy. Gives some curve to my existence. I started wondering how this could be achieved in the client. In the browser there are tons of techniques to find. I did some research for the client and found a post from Ben Langhinrichs about it.

He used image borders for it, and the results are surprisingly good: Domino rescales the corners in a not-so-bad way!

But I miss some things:

  • What about exact corners? You wanted small corners, but they grow bigger if your table gets bigger with this technique.
  • What about gradients, often used, but not possible here?

I gave it a second thought, experimented a little and came up with 6 ways to create different types of rounded corners. They’re not really all that different, but depending on what you’re trying to achieve and your graphical skills and tools, you can choose an approach.

Seems good enough for my first Show ‘n Tell Thursday post!

Here are the 6 examples. All of them are demonstrated on the About this database page of a Rounded Corner Demo database.

Rounded corners for the Notes Client - examples

If you take a look at the design in the database, it’s not so hard to figure out how they work. But here’s a brief explanation for the different types anyway:

  1. Example 1 uses an image border. Domino scales the image frame dynamically.
  2. Example 2 has a fixed background image in its cell. Your table has to match the dimensions of the background image exactly.
  3. Example 3 has a very long background image in the left cell (make it big enough, 1000 pixels or more if you want to scale it dynamically and go really wide). The right cell closes the image with its round corners. Don’t be afraid of file sizes: a file of 1000 pixels widht is only about 5k. Gifs are very good at this. It’s a bit like the sliding doors technique in css. Gradients are possible here.
  4. Example 4 has images for the left and right side of the rounded rectangle. The middle part is a simple background color for the cell.
  5. Example 5 is as example 4, but with a tiled background image in the middle. Now we can use gradients here too.
  6. Example 6 is the most complex and dynamic solution: it uses 4 corner images, a background image to connect the top borders and a background image for the middle section. The lower part takes a solid grey background color.

The last example can have other variants as well, but at least I should have got you inspired by now.

How to create the corners?

I used Fireworks for this. I created the rounded rectangles first, then cut them into pieces and exported the different parts I needed. Also notice that a 1-pixel width background image often will do to fill the middle sections of your table by tiling the image.

Some of these techniques may look like a lot of work, but the truth is: once you created a basic table, you can reuse them all over your application.

17 Comments

  1. I like rounded corners, too (and whoever finds them to look “so 1980″ – well, we both know who does … – is plain wrong). And I think it’s OK, that Notes won’t generate them for me.
    Unfortunately, my employer’s CD is all about sharp edges and right angles. Not much hope to use techniques like these, I’m afraid.

    Reply
  2. Yep, I saw that “so 1980’s” one too, and I nodded my head :-). He’s wrong… I agree with “microfades of color”, but I think AmigaOS4.0 is not going to beat Microsoft, Apple or any Linux distribution out there. Amiga is “sooo 1980’s” ;-).

    Reply
  3. well they are at least very 90’s. But mostly I like rounded corners more than the square corners (the same goes for females).

    Thank you for the posting!

    Reply
  4. Might be the very answer why rounded corners are attractive :-).

    Reply
  5. I can’t open the Demo-Database in Notes 6. It says (in German): “Versuchte Verschlüsselungsoperation wird in dieser Notes-Version nicht unterstützt”. Can you send my a R6-Version of this Database?

    Reply
  6. Oh my glod! :-) I created the database in Notes 8. Apparently with local encryption on and this seems to differ from local encryption in previous versions. I learned something today!
    I apologize for the useless download, I signed it with a previous version, took the encryption away and now it should be all ok (maybe clear your browser cache to make sure you download the newer version).

    Reply
  7. Hello Martin!

    The database doas not work. the errormessage still appears.

    I cleaned my browsercache and i used even another browser (internet explorer) to download the database… :-)

    Reply
  8. sorry, wrong smily. this ist the smily i wanted to paste: :-(

    Reply
  9. Hm, tested it one more time, and it really seems ok to me. Perhaps some company proxy in between?
    Can anybody else confirm having the same problem (or not)?
    Meanwhile I’ll just mail you the file, ok?

    Reply
  10. Yes, it was the Company proxy… now it works! Thank you! (5 Stars!)

    Reply
  11. Nice work Martin! And very timely as I was about to do some experiments with round corners too.
    Thanks.

    Reply
  12. Thanks glod and Vitor!
    Vitor, was it the IdeaJam post that triggered this? Because I started thinking about rounded corners the day before this was posted on IdeaJam by someone. I just ask because it seems like a lot of people were thinking rc’s at the same time :-)

    Reply
  13. Well, actually I’ve been thinking about it for a while, I just couldn’t find the time to work on it.

    Reply
  14. “Amiga is ‘sooo 1980’s'”

    Lol! Yeah, it’s still just an Amiga, no ATARI. :-P

    Reply
  15. Hey, my very first computer was an Atari ST. I didn’t know there were others owning one too! :-)

    Reply
  16. 1) Thanks for a great post with a number of consolidated approaches to this problem.

    2) In Example 5, did you try using a “Size to Fit” on the gradient instead of a tile? Tiled backgrounds are SLOW on a repaint if you have a lot of them on the screen. Put 10 or 12 of those on at once, and you’ll watch your client redraw them in slow motion. I mention using a size to fit approach here: http://www.lotus911.com/nathan/escape.nsf/D6Plinks/NTFN-6YPPMV

    3) re: the person who thinks it looks so 1980s — if he thinks it’s a bad idea, it’s automatically a good one.

    4) One of the things I’ve always wondered is exactly how Notes does the image parsing for the repeated border. It turns out that it’s quite difficult to get perfect images where you want to do rounded corners on gradients with themselves with an additional border — like your site logo.

    Lotus is now cheating to produce those in Notes 8 standard. Your calendar uses rounded-corner templates whose internal RGB shadings are computed on the fly. These are rendered 100% by SWT/JFace, rather then by the native Notes C++ code, so there’s no way for you to do this in your own views yet. But to me, those are exactly the kinds of visual controls we should be trying to achieve on forms, even in Notes 6. If we can figure out exactly how the source image gets chopped up and repeated for a table border, it SHOULD be possible to mimic that!

    Reply
  17. Hi Martin,

    Great technique, I downloaded you sample Db couple of months ago, I now have a project that can benefit from rounded corners.

    I have managed to produce superb looking form using 1 image border – 1 x 1 table – dynamic size – solid. It looks superb on screen, BUT when I print it the rounded border image does not print. Instead off rounded border, I get a black solid rectangle which probably 8 pixels wide.

    Am I missing something, or is this the same old Lotus Notes scenario of what you see on screen and what gets printed is different.

    I have could lots of tables with tables to separate different area of the form, and I though the table complexity might be causing a problem BUT I printed out the ‘About Database’ document, that prints in a similar manner. Does the rounded corners technique only work on screen?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

33 − = 23

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>