flamingo ribbon component
DESCRIPTION
JavaOne 2009 presentation on the ribbon componentTRANSCRIPT
![Page 1: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/1.jpg)
Flamingo: Bringing the Ribbon Component to Swing
Kirill GrouchnikovAmdocs
![Page 2: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/2.jpg)
2
Agenda
> What is a ribbon?
> Swing ribbon implementation
> Swing ribbon structure
Basic terminology
Command buttons
Ribbon bands
Ribbon tasks
Miscellaneous
> Where to next?
![Page 3: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/3.jpg)
What is a ribbon?
3
![Page 4: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/4.jpg)
4
Ribbon demo
![Page 5: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/5.jpg)
5
http://blogs.msdn.com/jensenh
![Page 6: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/6.jpg)
Ribbon availability
6
> Available for WinForms, Win32, WPF, Silverlight
> Third-party vendors
> Microsoft – WPF 3.5, Windows 7 (scenic ribbon)
![Page 7: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/7.jpg)
Ribbon for Swing applications
7
Metal
A03
Looks Plastic XP
Nimbus
![Page 8: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/8.jpg)
Ribbon for Swing applications
8
Office Blue 2007
AutumnRaven Graphite
NebulaCreme
Office Silver 2007
![Page 9: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/9.jpg)
Ribbon for Swing applications
9
Black Moon
Sky Metallic
Mauve MetallicBlue Moon
Orange Metallic
Blue Ice
![Page 10: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/10.jpg)
Ribbon for Swing applications
10
http://flamingo.dev.java.net
![Page 11: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/11.jpg)
Basic ribbon terminology
11
Application menu button
Taskbar panelContextual ribbon task Help button
Ribbon gallery
Contextual ribbon task group
Ribbon task
Ribbon band Ribbon band expand button
![Page 12: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/12.jpg)
Basic hierarchy
> Ribbon
Contains tasks
Containing bands
> JRibbon
RibbonTask
AbstractRibbonBand
12
Ribbon task
Ribbon band
![Page 13: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/13.jpg)
Basic building block
13
Command buttons
![Page 14: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/14.jpg)
Command buttons
> AbstractCommandButton
JCommandButton
JCommandToggleButton
14
![Page 15: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/15.jpg)
15
Command buttons demo
![Page 16: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/16.jpg)
Display state
AbstractCommandButton.setDisplayState(
CommandButtonDisplayState)
16
BIG TILE MEDIUM
SMALL
![Page 17: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/17.jpg)
Action and popup areas
17
JCommandButton.setCommandButtonKind(CommandButtonKind)
ACTION_ONLY POPUP_ONLYACTION_AND_POPUP_MAIN_ACTION
ACTION_AND_POPUP_MAIN_POPUP
ActionButtonModel AbstractCommandButton.getActionModel()
PopupButtonModel JCommandButton.getPopupModel()
![Page 18: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/18.jpg)
Simple popups
18
JCommandButton.setPopupCallback(PopupPanelCallback)
JCommandButton button = ...;
button.setPopupCallback(new PopupPanelCallback() {
public JPopupPanel getPopupPanel(
JCommandButton commandButton) {
JCommandPopupMenu menu =
new JCommandPopupMenu();
menu.addMenuButton(...);
menu.addMenuSeparator();
...
return menu;
}
});
![Page 19: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/19.jpg)
Command button strips
JCommandButtonStrip
19
HORIZONTAL VERTICAL
![Page 20: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/20.jpg)
Command button panels
JCommandButtonPanel
20
ROW_FILL COLUMN_FILL
![Page 21: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/21.jpg)
Rich popups
21
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;
}
});
![Page 22: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/22.jpg)
22
Bands / tasks demo
![Page 23: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/23.jpg)
Ribbon bands
> AbstractRibbonBand
JRibbonBand
JFlowRibbonBand
23
Ribbon band Ribbon band Flow ribbon band Ribbon band
![Page 24: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/24.jpg)
Flow ribbon bands
JFlowRibbonBand
Adding content:
addFlowComponent(JComponent)
24
Two row flowing content
Three row flowing content
Collapsed
![Page 25: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/25.jpg)
Regular ribbon bands
JRibbonBand
Can host:
> command buttons
> wrapped core / 3rd party components
> ribbon galleries
25
![Page 26: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/26.jpg)
Hosting command buttons
26
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);
![Page 27: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/27.jpg)
Hosting core and 3rd party controls
27
Simple wrapping Wrapping with icon and caption
Wrapped components spanning multiple rows
![Page 28: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/28.jpg)
Ribbon galleries
28
Expanded gallery shown in a popup
Expanded gallery scrolled down
Hosted gallery scrolled down
Hosted gallery
![Page 29: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/29.jpg)
Groups in ribbon bands
29
Two unnamed groups with
command buttons
Three unnamed groups with
command buttons
Two named groups with wrapped core
components
![Page 30: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/30.jpg)
Ribbon tasks
30
new RibbonTask(title,
AbstractRibbonBand... bands)
JRibbon.addTask(RibbonTask)
Ribbon task Ribbon task Ribbon task
Ribbon task Ribbon task
![Page 31: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/31.jpg)
Contextual task groups
31
Contextual ribbon task
Contextual ribbon task group Contextual ribbon task group
Selected contextual ribbon task
![Page 32: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/32.jpg)
32
Menu button / taskbar demo
![Page 33: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/33.jpg)
Application menu button
33
Application menu button
![Page 34: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/34.jpg)
Application menu
34
Primary menu group
Secondarymenu group
Footer
JRibbon.setApplicationMenu(RibbonApplicationMenu)
![Page 35: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/35.jpg)
Taskbar panel
35
Taskbar panel
JRibbon.addTaskbarComponent(Component)
![Page 36: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/36.jpg)
36
Tooltips / key tips demo
![Page 37: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/37.jpg)
Rich tooltips
37
Tooltip for the action area
Tooltip for the popup area
Displayed below the ribbon
![Page 38: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/38.jpg)
Rich tooltips
38
Tooltip for wrapped core component
Multiple paragraphs
Tooltip for taskbar component
Displayed below the taskbar
![Page 39: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/39.jpg)
Rich tooltips
39
Tooltip for application menu
button
Footer section and images
![Page 40: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/40.jpg)
Key tips
40
Press Alt or F10 for the top chain
Showing key tips of the
selected task
Showing key tips of the selected
button
P V
Esc Esc
![Page 41: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/41.jpg)
41
Resizing / minimized
demo
![Page 42: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/42.jpg)
Ribbon resizing
42
![Page 43: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/43.jpg)
Ribbon resizing, collapsing and scrolling
43
Expanding the collapsed ribbon
band
Scrolling tasks Scrolling bands
![Page 44: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/44.jpg)
Minimized mode
44
JRibbon.setMinimized(true)
User double-clicking a task buttonUser pressing Ctrl+F1
User clicking a task button
![Page 45: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/45.jpg)
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
![Page 46: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/46.jpg)
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
![Page 47: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/47.jpg)
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
![Page 48: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/48.jpg)
What is missing - medium
> Right-to-left support
> High DPI support
48
![Page 49: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/49.jpg)
Potentially useful
> XML-driven ribbon content
> SWT version
> World domination
49
![Page 50: Flamingo Ribbon component](https://reader036.vdocument.in/reader036/viewer/2022081720/540350cf8d7f72de4c8b45ea/html5/thumbnails/50.jpg)
Try it now!
50
http://flamingo.dev.java.net