How to mimic the action buttons from java views (close but not perfect)

If you’re like me, you like the design of the action bar in the inbox of your R8 mailbox.

Action buttons in java views

The round buttons, the orange gradient and the blue match the new client very well.

Unfortunately, for us, developers, these are features that are out of reach to build in regular views and forms at this moment. Even in the mailbox the buttons on the memoform have “normal” looks.

I tried to get as close to this “ideal” as possible and this is the result.

Java view action buttons simulation

How were the buttons created?

First you’ll need to download the background images. Note that the R8actionbutton.jpg needs to be set to images across=4 in the image resource properties.

These are the Action Bar settings I applied:

  • Bar Height: fixed, 30 pixels.
  • Color: RGB 231,233,240.
  • Image: r8actionbar.jpg, repeat horizontally.
  • Border: style=solid, color=RGB 169,192,215, 2px bottom (other borders=0).
  • Button Size Height: fixed size, 30 pixels.
  • Button Options: display border=on mouse over, internal margins=0px.
  • Button Background: color=RGB 240,240,240, image=r8actionbutton.jpg
  • Font: default sans serif, 9pt, plain, RGB 0,64,128

That’s it! If you see ways to make it a closer match, let me know!

10 Comments

  1. Action buttons respect multi-part images for hover effects? NICE! I didn’t think that worked anywhere except in images embedded in forms.

    Reply
  2. Yep, this works. I didn’t think there were still things I could teach you :-).

    Reply
  3. Ths is great! I am at the moment occupied with setting up a new standard template for our company based upon the Lotus Notes 8, Sametime, Symphony and Expeditor design guidelines and an example database (I can not remember 123 a reference) but the mouseover effect was completely forgotten in the example. Thanks!

    Reply
  4. Hi Patrick,
    You’re right about the height, I used fixed size pixel height, that is different from the original one. I guess the only time this makes a difference, is when people start to change their fontsizes. In other cases it looks exactly like the Lotus template.
    Thanks for the link! It’s both interesting for those who want a fresher looking Discussion Template, and for an example new actionbar.

    Regards,
    Martin

    Reply
  5. Help, please. I’m in my first web design class and there is little to no help from the Prof. I am trying to make some graphic buttons I found on a web site appear as if they have been clicked. I used the z-index to stack the images on a background which I made. The only info I received from my teacher was use Java. Kind of scary since I’m just learning XHTML.

    Reply
  6. Awesome is the word , i have been trying various java snippets to achieve this effect tried once using the borders and all but i wasn’t even close to this . Good Job !

    Reply
  7. there are 2 nice articles on developerworks that describe how to use java views in your common Notes databases…

    Reply

Trackbacks/Pingbacks

  1. Great UI examples for LN applications (recap) « All about Lotus Domino Development (AaLDD) - [...] Also Martin Vereecken wrote a usefull tip about mimicing the action buttons from Java views. [...]

Submit a Comment

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

89 − = 85

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>