XPages and Me

My Journey into XPages Development

So, you got your Web application’s Home Page done, what about the Lotus Notes Client (Part 2)?

In Part 1 we created a form and formatted the table for our Notes Client home page. Part 2 we will define the colors we use and create the icons for the buttons.

Colors:

For this UI, I use 3 different Custom Colors: a Dark Blue, a Light Blue and a Light Yellow (inspired by my company’s brand):

Image 17

These colors are used for Titles, Headers, Outlines etc. For labels and fields, I use black. As you know, you can define your own custom colors in the designer. Sometimes though, the colors are not stored and you have to redefine them again the next time you want to use them. There is a way around this: You can define your custom colors directly in the notes.ini and they’ll be available all thru the Notes and Designer client. Here is how you do it:

First thing you have to do is to find out, what the HEX code is for the colors you’d like to add as Custom Colors. There are several web pages out there, that offer RGB to HEX converters (here is one). The variable name for Custom Colors is (very surprisingly) CustomColor plus a counter. If you want to add 2 Custom Colors you would add CustomColor1 and CustomColor2 to the notes.ini. Here is the syntax:

CustomColor# = <BGR-HexCode> (B = blue, G = green, R = red)

In order to use the Custom Colors mentioned above, you would add the following three lines to your notes.ini:

CustomColor1=7F5000

CustomColor2=C27900

CustomColor3=99FFFF

If you restart your Lotus Notes and you want to change text color, you should see the three custom color:

Image 18

Next up, the icons for our outline

Icons:

In my Lotus Notes applications, I am using animated icons, meaning they change appearances when you run the mouse over it or if you click on it. I’ve created an icon template that consists of four individual frames for the different states: Normal, Mouse-over, Selected and Mouse-down. Each frame is a pixel apart. Outline Entry (if you don’t want to use this template, you can change it or create your own).

The first icon we are going to create is for the outline entry to open the database in the browser. Get the icon for the browser you are using within your company, fit the size of it to the frames (the inside of each frame is 21×21 pixels).

Open the icon template in MS Paint or Paint.net (you can download it from here, very nice OpenSource image tool) and copy the browser icon into each frame (here is an example for IE: actOpenInBrowser). Save the icon.

Next create an icon that depicts exiting the application (example: ExitApp) and save it.

Now we are going to import the icons into the application.

  • In the Designer, click on “Resources” and then “Images” (in Notes R6.5 / R7 it is “Shared Resources” and then “Images”)
  • Click on the button “Import Image Resources” (in Notes R6.5/R7 it is “New Image Resource”)
    Image 19
  • Select all the icons you’d like to import (in our case two) and click on “Open”:

Once you imported your icons into the database, they will look like this:
Image 20

Now it is time to give your Image Resources a proper name and alias and change some of their properties:

  • As a name you could enter something like this: <DB Abbreviation>.<Image Name>
    If your Database Name is HR Requests, the abbreviation could be HRR or for a Vacation Request DB it could be VRDB. The abbreviation should not exceed five characters.
    As this database is called Sample Application I use the abbreviation SA. So the name of the first image would be “SA.ActOpenInBrowser”

HINT: If you have images that you are using across several databases, you could use SYS.<ImageName> instead of <DB Abbreviation>

  • The alias should indicate what kind of design element our image is: img<DB Abbreviation><Image Name>
    So, in our case, for the first image the alias would be “imgSAActOpenInBrowser”
  • As I mentioned before, I am using animated icons. Therefore we need to change the settings for “Image across” from 1 to 4.

Now the properties of the image resource should look like this:
Image 21

Repeat these steps for the other image we’ve created.

Now we have everything to further modify the form/table we created and to create the outline, which I will show you in part 3.

Advertisements

2 responses to “So, you got your Web application’s Home Page done, what about the Lotus Notes Client (Part 2)?

  1. Patrick Kwinten (@patrickkwinten) February 4, 2014 at 1:16 pm

    Why not follow these guidelines for user experience?

    User experience guidelines for IBM Lotus rich client applications and plug-ins

    http://www.ibm.com/developerworks/lotus/documentation/d-ls-ueguidelines/

    • Daniel Friedrich February 4, 2014 at 1:31 pm

      Hello Patrick,

      absolutely, these are some good guidelines. If you convert an existing Notes Client app to an XPages / Web app, many users will still have the original database tile on their workspace. Providing them with a menu that informs them that the application is now a web application and to provide a button / link that’ll open the app in the browser is good practice I believe.

      I believe we as developers need to provide for a good user experience by designing an easy to navigate, easy to find things UI. A UI makes or brakes an application. Your code can be as sophisticated as possible, if the UI is frustrating, the user will hate the application.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: