The RCP framework allows us to create applications really fitting our needs. But we often want it to look different than a classical Eclipse Workbench. We already have our perspectives, our views, but we want them to be presented differently. That's exactly what the Presentations API is designed for. This talk will present a case study of the customization of an RCP application using the Presentations API and other UI tricks that can be used to build a sexy UI on top of RCP and SWT. It will highlight the key concepts of the Presentations API, and give a general feedback on how easy it is (or sometimes not!) to customize an Eclipse UI.

1. Customizing RCP UI using
the Presentations API
Sébastien Moran
Eclipse Summit Europe 2009
1 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

2. Agenda
Context
RCP Customization & Presentations API
Demo
UI Tips & Tricks
Conclusion
Questions
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

3. Sierra Wireless
• Formerly know as “Anyware Technologies”
• Third quarter of 2009 : Sierra Wireless - Solutions & Services
Four product categories…
AirCard® Embedded
Intelligent Solutions …serving a diversified set of segments in
Gateways & Services
mobile computing and machine-to-
machine
3 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

4. Expresso
Discovery & Learn tool
• Fast configuration of modems
• Easy access to basic features
User friendly
• Intuitive graphical user interface
• One click shows both ATCommand & its result
Features
• SMS & Voice call configuration
• AT Console View
• Photographic help system
• …
4 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

5. Initial work
“Classical” RCP Several
Several Views
Application Perspectives
One per One per specific
OS native look &
discovery discovery
feel
thematic feature
Can be used in
Eclipse visual Aggregates
several
flavor several views
perspectives
5 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

6. 6 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

7. Product Manager remarks
“Great ! It works like a charm.
But … it really looks like Eclipse... We have to
add some UI love !”
7 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

8. Graphical Designer Mockup
8 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

9. Developer thoughts
Use Presentations API !
Ask my best friends :
&
What am I gonna do ?!
9 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

10. Agenda
Context
RCP Customization & Presentations API
Demo
UI Tips & Tricks
Conclusion
Questions
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

11. Why ?
Over heard Eclipse Look & Feel ?
The way editors and views
“[..] It really looks like are shown.
Eclipse [..]
Custom tabs Look & Feel
“Do I need Eclipse to use
your application ?” Perspectives switcher
11 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

12. If you don’t like it – change it !
Presentations API
• Control the look and feel of
views and editors
Workbench Customization
• Customize the content area
• Customize the window’s shape
12 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

13. Presentations API Concepts
Presentation Presentation Extension
Presentation
Part Factory Point
Look & Feel
Editors
extension for
Editor presentation
Workbench
stacks
parts
Register a
presentation
Manage the factory
trim and Views
layout of View presentation
parts’ areas stacks
(Part stacks)
13 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

14. Presentation Responsibilities
Create part stacks’ Control layout &
trim visibility
Tabs Parts
Title
Toolbars
System menu
View menus
Part management buttons
Borders Drag & Drop regions
14 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

15. More details
Eclipse Con 2005 presentation slides
• eclipsecon2005-presentationsAPI.ppt
Retrieve them from eclipse CVS repository
• org.eclipse.ui.examples.presentation
15 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

16. Workbench customization
Next step : change the application window's layout
• WorbenchWindowAdvisor participates in window creation
• Control things in the Worbench that regular plug-ins can't
• Perfect Presentations API's complement
• Adapt Workbench default layout to your needs
16 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

17. Expresso Customizations
Presentations API
• Customize Parts' stacks display
Workbench customization
• Specific window’s shape
• Specific workbench layout
• Specific perspective switcher
17 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

18. Expresso Customizations
18 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

19. Agenda
Context
RCP Customization & Presentations API
Demo
UI Tips & Tricks
Conclusion
Questions
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

20. Agenda
Context
RCP Customization & Presentations API
Demo
UI Tips & Tricks
Conclusion
Questions
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

21. Three states widgets
Single image containing all
widget’s states
• Normal
• Hover
• Clicked & Selected
Specific image's region is
paint depending on the state
21 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

22. Shells decorations
Custom dialog without trim
• SWT.NO_TRIM
Create SWT Regions to
define the Shell's shape
• org.eclipse.mylyn.commons.ui
• AbstractNotificationPopup.java
22 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

23. Agenda
Context
RCP Customization & Presentations API
Demo
UI Tips & Tricks
Conclusion
Questions
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

24. Conclusion
First of all: You NEED a Graphic Designer 
StackPresentation implementation is the most tricky part
• Start from the examples
– org.eclipse.ui.examples.presentation
– org.eclipse.ui.presentations.r21
SWT Graphics knowledge
• Mandatory for Shell's shape customization & custom widgets
• Eclipse article
– http://www.eclipse.org/articles/Article-SWT-graphics/SWT_graphics.html
Eclipse's future of UI customization : e4
• Modeled Workbench
• CSS styling
24 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0

25. Questions ?
Sébastien Moran
SMoran@sierrawireless.com
25 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0