Your SlideShare is downloading. ×
0
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Customizing the Look of Lotus Notes 8
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Customizing the Look of Lotus Notes 8

25,543

Published on

The Notes Style Prior to Notes 8 …

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
25,543
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. Notes Style Prior to Notes 8  Application developers had control over individual templates
  • 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. 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. Some Controls are System Controls  Title bar  Menu bar  Scroll bar
  • 8. Some Are Custom for a Touch of Uniqueness  Open Menu  Tab Row  Toolbar  Status bar
  • 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. 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. Giving Your Templates the Notes 8 Style  Visual style  Interaction style
  • 12. Ideal Visual Style for the Action Bar and Column Headers
  • 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. Visual Style for the Outline View
  • 15. Visual Style for Icons
  • 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. 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. 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. A Custom Visual Theme Can Be Just the Frame
  • 20. A Custom Visual Style Can Be Complete
  • 21. Example of Another Visual Theme
  • 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. How Notes 8 is Built  Themeing of the Notes 8 frame is possible because of the way Notes 8 is built
  • 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. 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. 27 Two Options for the Open List: Button or Docked
  • 27. 28 Three Options for Sidebar: Closed, Thin, Open
  • 28. Expeditor Provides Two Themes  Notes 8 Theme  Operating System Theme
  • 29. The Look of the “Notes 8” Theme Provided by Expeditor
  • 30. The Look of the Operating System Theme as Provided by Expeditor
  • 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. 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. 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. Creating a New CSS Theme  Create a Plug-in  Create a Lotus Expeditor Theme Extension  Add the CSS content and associated resources  Deploy
  • 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. 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. Demo: Creating a New Theme
  • 38. View Elements Styled by CSS NOT THE FORM!
  • 39. Demo of Customizing Views
  • 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. 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. Resources  Look for forthcoming articles and tools on developerWorks!  Subscribe to the notes design blog at www.Marybethraven.com
  • 43. Questions?
  • 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.

×