BizzyBee’s BizzyThoughts

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.

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.

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!

(2 votes, average: 5 out of 5)

 Loading ...

9 Responses to “How to mimic the action buttons from java views (close but not perfect)”

1. Nathan T. Freeman says:
   August 29th, 2008 at 3:00 pm

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

2. Martin Vereecken says:
   August 29th, 2008 at 3:05 pm

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

3. Patrick Kwinten says:
   August 29th, 2008 at 5:11 pm

   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!

4. Martin Vereecken says:
   August 29th, 2008 at 6:35 pm

   I’m glad it was useful, Patrick

5. Patrick Kwinten says:
   September 3rd, 2008 at 7:32 am

   Hej, I notice some differences in height with the original image that is used for the background (37 px compared with 30px).

   Maybe I am wrong or I have different properties for the view. For example bar height I have 4,75 Exs in stead of fixed 30 px.

   I took the properties from this example db:

   http://www-10.lotus.com/ldd/insidelotusblog.nsf/dx/new-discussion-template-posted

   …

6. Martin Vereecken says:
   September 3rd, 2008 at 8:03 am

   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

7. Great UI examples for LN applications (recap) « All about Lotus Domino Development (AaLDD) says:
   September 7th, 2008 at 10:48 am

   […] Also Martin Vereecken wrote a usefull tip about mimicing the action buttons from Java views. […]

8. April Ames says:
   November 25th, 2008 at 4:54 pm

   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.

9. Jak says:
   December 1st, 2008 at 11:13 pm

   http://bbolpttuoi.sitebooth.com/pokemon-b0/index.html

Leave a Reply