JavaOne 2009 presentation on the ribbon component

1. Flamingo: Bringing the
Ribbon Component to
Swing
Kirill Grouchnikov
Amdocs

2. Agenda
> What is a ribbon?
> Swing ribbon implementation
> Swing ribbon structure
 Basic terminology
 Command buttons
 Ribbon bands
 Ribbon tasks
 Miscellaneous
> Where to next?
2

3. What is a ribbon?
3

4. Ribbon demo
4

5. http://blogs.msdn.com/jensenh
5

6. Ribbon availability
> Available for WinForms, Win32, WPF, Silverlight
> Third-party vendors
> Microsoft – WPF 3.5, Windows 7 (scenic ribbon)
6

7. Ribbon for Swing applications
Metal Looks Plastic XP
Nimbus A03
7

8. Ribbon for Swing applications
Office Blue 2007 Office Silver 2007
Creme Nebula
Raven Graphite Autumn
8

9. Ribbon for Swing applications
Black Moon Orange Metallic
Blue Moon Mauve Metallic
Blue Ice Sky Metallic
9

10. Ribbon for Swing applications
http://flamingo.dev.java.net
10

11. Basic ribbon terminology
Application menu button Contextual ribbon task group
Ribbon task
Taskbar panel Help button
Contextual ribbon task
Ribbon gallery
Ribbon band Ribbon band expand button
11

12. Basic hierarchy
> Ribbon
Ribbon task
 Contains tasks
 Containing bands
> JRibbon
 RibbonTask
 AbstractRibbonBand Ribbon band
12

13. Basic building block
Command buttons
13

14. Command buttons
> AbstractCommandButton
 JCommandButton
 JCommandToggleButton
14

15. Command
buttons demo
15

16. Display state
AbstractCommandButton.setDisplayState(
CommandButtonDisplayState)
BIG TILE MEDIUM
SMALL
16

17. Action and popup areas
JCommandButton.setCommandButtonKind(CommandButtonKind)
ACTION_ONLY ACTION_AND_POPUP ACTION_AND_POPUP POPUP_ONLY
_MAIN_ACTION _MAIN_POPUP
ActionButtonModel AbstractCommandButton.getActionModel()
PopupButtonModel JCommandButton.getPopupModel()
17

18. Simple popups
JCommandButton.setPopupCallback(PopupPanelCallback)
JCommandButton button = ...;
button.setPopupCallback(new PopupPanelCallback() {
public JPopupPanel getPopupPanel(
JCommandButton commandButton) {
JCommandPopupMenu menu =
new JCommandPopupMenu();
menu.addMenuButton(...);
menu.addMenuSeparator();
...
return menu;
}
});
18

19. Command button strips
JCommandButtonStrip
HORIZONTAL VERTICAL
19

20. Command button panels
JCommandButtonPanel
ROW_FILL COLUMN_FILL
20

21. Rich popups
JCommandButton button = ...;
button.setPopupCallback(new PopupPanelCallback() {
public JPopupPanel getPopupPanel(
JCommandButton commandButton) {
JCommandButtonPanel panel =
new JCommandButtonPanel(...);
panel.addButtonGroup(...);
panel.addButtonToGroup(...);
...
JCommandPopupMenu menu =
new JCommandPopupMenu(panel,
maxColumns, maxRows);
...
return menu;
}
});
21

22. Bands / tasks
demo
22

23. Ribbon bands
Ribbon band Ribbon band Flow ribbon band Ribbon band
> AbstractRibbonBand
 JRibbonBand
 JFlowRibbonBand
23

24. Flow ribbon bands
JFlowRibbonBand
Adding content:
addFlowComponent(JComponent)
Two row flowing Three row flowing Collapsed
content content
24

25. Regular ribbon bands
JRibbonBand
Can host:
> command buttons
> wrapped core / 3rd party components
> ribbon galleries
25

26. Hosting command buttons
JRibbonBand clipboardBand = new JRibbonBand(
“Clipboard”, ...);
JCommandButton pasteButton = new JCommandButton(
“Paste”, pasteIcon);
pasteButton.setCommandButtonKind(
CommandButtonKind.ACTION_AND_POPUP_MAIN_ACTION);
pasteButton.setPopupCallback(...);
clipboardBand.addCommandButton(pasteButton,
RibbonElementPriority.TOP);
...
clipboardBand.addCommandButton(cutButton,
RibbonElementPriority.MEDIUM);
26

27. Hosting core and 3rd party controls
Simple wrapping Wrapping with icon
and caption
Wrapped components
spanning multiple rows
27

28. Ribbon galleries
Hosted gallery Expanded gallery Expanded gallery
shown in a popup scrolled down
Hosted gallery
scrolled down
28

29. Groups in ribbon bands
Two unnamed
groups with
command buttons
Three unnamed
groups with
command buttons
Two named groups
with wrapped core
components
29

30. Ribbon tasks
Ribbon task Ribbon task Ribbon task
Ribbon task Ribbon task
new RibbonTask(title,
AbstractRibbonBand... bands)
JRibbon.addTask(RibbonTask)
30

31. Contextual task groups
Contextual ribbon task group Contextual ribbon task group
Contextual ribbon task
Selected contextual ribbon task
31

32. Menu button /
taskbar demo
32

33. Application menu button
Application menu button
33

34. Application menu
Primary Secondary
menu group menu group
Footer
JRibbon.setApplicationMenu(RibbonApplicationMenu)
34

35. Taskbar panel
Taskbar panel
JRibbon.addTaskbarComponent(Component)
35

36. Tooltips / key
tips demo
36

37. Rich tooltips
Tooltip for the
action area
Displayed below
the ribbon
Tooltip for the
popup area
37

38. Rich tooltips
Tooltip for wrapped
core component
Multiple
paragraphs
Tooltip for taskbar
Displayed below
component
the taskbar
38

39. Rich tooltips
Tooltip for
application menu
button
Footer section
and images
39

40. Key tips
Press Alt or Showing key Showing key tips
F10 for the tips of the of the selected
top chain selected task button
P V
Esc Esc
40

41. Resizing /
minimized
demo
41

42. Ribbon resizing
42

43. Ribbon resizing, collapsing and scrolling
Scrolling tasks Scrolling bands
Expanding the
collapsed ribbon
band
43

44. Minimized mode
JRibbon.setMinimized(true)
User double-clicking a task button
User pressing Ctrl+F1
User clicking a task button
44

45. Big features recap
> Ribbon regular and flow bands
> Ribbon galleries
> Ribbon tasks and contextual task groups
> Application menu button and taskbar panel
> Resizing, collapsing and scrolling
> Rich tooltips and key tips
> Minimized mode
45

46. Under the hood
> Visual consistency across LAFs
> org.jvnet.flamingo.common.ui.BasicCommandButtonUI.paintB
uttonBackground
> Key tips
> org.jvnet.flamingo.ribbon.JRibbonFrame.KeyTipLayer
> Placing content in the title pane
> org.jvnet.substance.flamingo.ribbon.ui.SubstanceRibbonFr
ameTitlePane
> More in the code…
46

47. What is missing - small
> Hosting small buttons in galleries
> Resizing popup panels
> Navigating with keyboard (arrows, tabs)
> Dragging controls to the taskbar panel
> Hosting taskbar panel below the ribbon
47

48. What is missing - medium
> Right-to-left support
> High DPI support
48

49. Potentially useful
> XML-driven ribbon content
> SWT version
> World domination
49

50. Try it now!
http://flamingo.dev.java.net
50

51. Kirill Grouchnikov
kirillcool@yahoo.com
http://flamingo.dev.java.net
http://www.pushing-pixels.org
51