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