The Notes Style Prior to Notes 8  Definition of the Notes 8 Style  Giving templates the Notes 8 style  Visual style  Interaction style  Creating a custom visual style for Notes 8  How Notes 8 is built  Customize the Expeditor frame  Customize the Java views  Customize the forms

2. AD 204
Customizing the Look of Lotus Notes 8
Mary Beth Raven | User Experience Designer| Westford, Mass
Matthew Hatem| Senior Software Engineer| Westford, Mass
®

3. Agenda
 The Notes Style Prior to Notes 8
 Definition of the Notes 8 Style
 Giving templates the Notes 8 style
 Visual style
 Interaction style
 Creating a custom visual style for Notes 8
 How Notes 8 is built
 Customize the Expeditor frame
 Customize the Java views
 Customize the forms

4. Notes Style Prior to Notes 8
 Frame had one look
across all platforms
 End users could choose
System color or not
 Administrators could not
create a company look for
the frame

5. Notes Style Prior to Notes 8
 Application developers
had control over individual
templates

6. Agenda
 The Notes Style Prior to Notes 8
 Definition of the Notes 8 Style
 Giving templates the Notes 8 style
 Visual style
 Interaction style
 Creating a custom visual style for Notes 8
 How Notes 8 is built
 Customizing the Expeditor frame
 Customizing the Java views

7. Approach to the Notes 8 Style
 Goals
Give Administrator and Application developers control over more than
just templates
Provide an updated, fresh style out of the box
 Some controls are system controls on each operating system
 Some are custom to give it just enough of an individual look

8. Some Controls are System Controls
 Title bar
 Menu bar
 Scroll bar

9. Some Are Custom for a Touch of Uniqueness
 Open Menu
 Tab Row
 Toolbar
 Status bar

10. Notes 8 Visual Style
 Glassy look
 Blue gradients
Darker for the tab row
Lighter for the toolbar
 Flat blue treatments
Navigator
Status bar
 Orange gradient
highlights

11. Agenda
 The Notes Style Prior to Notes 8
 Definition of the Notes 8 Style
 Giving templates the Notes 8 style
 Visual style
 Interaction style
 Creating a custom visual style for Notes 8
 How Notes 8 is built
 Customizing the Expeditor frame
 Customizing the Java views

12. Giving Your Templates the Notes 8 Style
 Visual style
 Interaction style

13. Ideal Visual Style for the Action Bar and Column
Headers

14. Action Bar Properties
 Bar height: 10.4 Exs
 Color: 239,239,239
 Border style: solid color 177, 177, 210
 Border effects: drop shadow, width 2, thickness 1
 Button size: default
 Display border on mouseover

15. Visual Style for the Outline View

16. Visual Style for Icons

17. Interaction Style : Action Bar and Menu
 Any item in the Action bar SHOULD ALSO be in the
Actions menu
Same order
Menu can be a superset
Give menu items mnemonics for accessibility

18. Interaction Style: Order of Action Bar
 The general order of items on the action bar could be
as follows, from left to right:
New/create
<other actions>
A “More” button (if it is necessary to add
miscellaneous things that do not all fit separately
Sametime integration
New or Use the term “More” for Show command,
Create Miscellaneous things right-justified
Sametime integration
goes at the end, but
NOT right-justified

19. Agenda
 The Notes Style Prior to Notes 8
 Definition of the Notes 8 Style
 Giving templates the Notes 8 style
Visual style
Interaction style
 Creating a custom visual style for Notes 8
How Notes 8 is built
Customizing the Expeditor frame
Customizing the Java views

20. A Custom Visual Theme Can Be Just the Frame

21. A Custom Visual Style Can Be Complete

22. Example of Another Visual Theme

23. A Complete Custom Visual Style for Notes 8 Means..
 Customizing the frame and Java views using Lotus Expeditor
Themes Extension point
 Customizing your forms or other templates “by hand”

24. How Notes 8 is Built
 Themeing of the Notes 8 frame is possible because of the way
Notes 8 is built

25. 25
Lotus Notes 8 — Using Lotus Expeditor Platform
Eclipse is an Open Source Java Client
Lotus Expeditor is based on Eclipse, and available as a client
platform
Notes is a big Plug-in to Expeditor
Notes
Lotus Expeditor
Eclipse 3.2 Foundation

26. 26
Notes 8 is a big plug-in to Expeditor
 Expeditor provides:
Title bar
Menu bar
Open List
 Button
 Docked
Tabs
Toolbar
Sidebar
Thin
Open
Closed
Status bar
Visual theme

27. 27
Two Options for the Open List: Button or Docked

28. 28
Three Options for Sidebar: Closed, Thin, Open

29. Expeditor Provides Two Themes
 Notes 8 Theme
 Operating System Theme

30. The Look of the “Notes 8” Theme Provided by
Expeditor

31. The Look of the Operating System Theme as
Provided by Expeditor

32. Adding Your Own Theme
 New Themes can be
added using Eclipse
extension points
 The themes you create
will be added to the
preference panel
Your Theme here!

33. Anatomy of a Lotus Expeditor Theme
 Lotus Expeditor Themes are comprised of:
CSS file or files
associated image resources
plug-in extension meta data
 These files are packaged in an Eclipse plug-in and
deployed to clients using the Lotus Expeditor
provisioning service or standard Eclipse Update
Manager

34. Why CSS?
 CSS is a language used to separate style from content in user
interfaces
Common in Web Sites
Can be applied to any UI
Simple to maintain a consistent style
Style is separate from executable code
Leverages existing skill sets

35. Creating a New CSS Theme
 Create a Plug-in
 Create a Lotus Expeditor Theme Extension
 Add the CSS content and associated resources
 Deploy

36. Color Gradients and URLs
 Gradient colors are defined by a list N of color values followed by a
list N-1 of percentage values.
 Example:
background-color: red, blue, 100%;
 URLs can be either relative or absolute. Absolute images must use
the Eclipse platform URL format.
 Example:
// platform URL
url(quot;platform:/plugin/com.ibm.rcp.plugin/images/my_image.pngquot;);
or
// relative URL
url(“/images/my_image.png”);

37. CSS Elements and Class Mapping
 Elements map to SWT Widget class names
 CSS: Button – SWT: SButton or Button
 Widgets prefixed with ‘S’ support additional CSS properties
 Classes map to specialized instances of a widget
 Specialized Instance: Open Button – CSS Class: LaunchButton

38. Demo: Creating a New Theme

39. View Elements Styled by CSS
NOT
THE
FORM!

40. Demo of Customizing Views

41. To Complete the New Theme
 Edit the forms using Domino Designer
 Give the Action Bar an appropriate styles
 Make any other modifications on the form (Icon style,
etc.)

42. Summary
 You know the Notes 8 Style
 You can apply it to all your templates
 You can create your own style and apply it to
The Expeditor frame
The Java Views
All other forms in views in your templates

43. Resources
 Look for forthcoming articles and tools on
developerWorks!
 Subscribe to the notes design blog at
www.Marybethraven.com

44. Questions?

45. © IBM Corporation 2007. All Rights Reserved.
The information contained in this publication is provided for informational purposes only. While efforts were made to verify the
completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or
implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without
notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other
materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from
IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM
software.
References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM
operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based
on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way.
Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will
result in any specific sales, revenue growth or other results.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have
achieved. Actual environmental costs and performance characteristics may vary by customer.
IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of
International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in
the United States, other countries, or both.
Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the
United States, and/or other countries.
Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.
Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.
Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.
Other company, product, or service names may be trademarks or service marks of others.All references to Renovations refer to a fictitious
company and are used for illustration pposes only.