Embed Size (px)
DESCRIPTION
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.
Citation preview
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
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
AirCard® Embedded
Solutions & Services
IntelligentGateways
Four product categories…
…serving a diversified set of segments in
mobile computing and machine-to-
machine
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
• …
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
5
Initial work
“Classical” RCP Application
OS native look & feel
Eclipse visual flavor
Several Perspectives
One per discovery thematic
Aggregates several views
Several Views
One per specific discovery feature
Can be used in several
perspectives
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
6 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
7
“Great ! It works like a charm.
But … it really looks like Eclipse... We have to
add some UI love !”
Product Manager remarks
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
8
Graphical Designer Mockup
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
9
Developer thoughts
What am I gonna do ?!
Ask my best friends :
Use Presentations API !
&
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
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
“[..] It really looks like Eclipse [..]
“Do I need Eclipse to use your application ?”
Eclipse Look & Feel ?
The way editors and views are shown.
Custom tabs Look & Feel
Perspectives switcher
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
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
13
Presentations API Concepts
Presentation
Look & Feel extension for Workbench
parts
Manage the trim and layout of
parts’ areas (Part stacks)
Presentation Part
Editor
View
Presentation Factory
Editors presentation
stacks
Views presentation
stacks
Extension Point
Register a presentation
factory
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
14
Presentation Responsibilities
Create part stacks’ trim
Tabs
Title
System menu
Part management buttons
Borders
Control layout & visibility
Parts
Toolbars
View menus
Drag & Drop regions
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
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
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
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
Expresso Customizations
18 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
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
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
Three states widgets
21
Single image containing all
widget’s states
• Normal
• Hover
• Clicked & Selected
Specific image's region is
paint depending on the state
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
Shells decorations
22
Custom dialog without trim• SWT.NO_TRIM
Create SWT Regions to
define the Shell's shape• org.eclipse.mylyn.commons.ui
• AbstractNotificationPopup.java
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
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
Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
Questions ?
Sébastien Moran
25 Customizing RCP UI using the Presentations API - © 2009 Sierra Wireless, made available under EPL V1.0
