Customizing the Look of Lotus Notes 8

26,316
-1

Published on

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

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
26,316
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Customizing the Look of Lotus Notes 8

  1. 1. AD 204 Customizing the Look of Lotus Notes 8 Mary Beth Raven | User Experience Designer| Westford, Mass Matthew Hatem| Senior Software Engineer| Westford, Mass ®
  2. 2. 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
  3. 3. 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
  4. 4. Notes Style Prior to Notes 8  Application developers had control over individual templates
  5. 5. 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
  6. 6. 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
  7. 7. Some Controls are System Controls  Title bar  Menu bar  Scroll bar
  8. 8. Some Are Custom for a Touch of Uniqueness  Open Menu  Tab Row  Toolbar  Status bar
  9. 9. 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
  10. 10. 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
  11. 11. Giving Your Templates the Notes 8 Style  Visual style  Interaction style
  12. 12. Ideal Visual Style for the Action Bar and Column Headers
  13. 13. 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
  14. 14. Visual Style for the Outline View
  15. 15. Visual Style for Icons
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. A Custom Visual Theme Can Be Just the Frame
  20. 20. A Custom Visual Style Can Be Complete
  21. 21. Example of Another Visual Theme
  22. 22. 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”
  23. 23. How Notes 8 is Built  Themeing of the Notes 8 frame is possible because of the way Notes 8 is built
  24. 24. 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
  25. 25. 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
  26. 26. 27 Two Options for the Open List: Button or Docked
  27. 27. 28 Three Options for Sidebar: Closed, Thin, Open
  28. 28. Expeditor Provides Two Themes  Notes 8 Theme  Operating System Theme
  29. 29. The Look of the “Notes 8” Theme Provided by Expeditor
  30. 30. The Look of the Operating System Theme as Provided by Expeditor
  31. 31. 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!
  32. 32. 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
  33. 33. 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
  34. 34. Creating a New CSS Theme  Create a Plug-in  Create a Lotus Expeditor Theme Extension  Add the CSS content and associated resources  Deploy
  35. 35. 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”);
  36. 36. 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
  37. 37. Demo: Creating a New Theme
  38. 38. View Elements Styled by CSS NOT THE FORM!
  39. 39. Demo of Customizing Views
  40. 40. 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.)
  41. 41. 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
  42. 42. Resources  Look for forthcoming articles and tools on developerWorks!  Subscribe to the notes design blog at www.Marybethraven.com
  43. 43. Questions?
  44. 44. © 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.

×