You are on page 1of 51
Flamingo: Bringing the Ribbon Component to Swing Kirill Grouchnikov Amdocs

Flamingo: Bringing the Ribbon Component to Swing

Kirill Grouchnikov

Amdocs

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?

What is a ribbon? 3

Ribbon demo

http://blogs.msdn.com/jensenh

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

Ribbon availability

> Available for WinForms, Win32, WPF, Silverlight > Third-party vendors

Ribbon availability > Available for WinForms, Win32, WPF, Silverlight > Third-party vendors > Microsoft – WPF
Ribbon availability > Available for WinForms, Win32, WPF, Silverlight > Third-party vendors > Microsoft – WPF
Ribbon availability > Available for WinForms, Win32, WPF, Silverlight > Third-party vendors > Microsoft – WPF
Ribbon availability > Available for WinForms, Win32, WPF, Silverlight > Third-party vendors > Microsoft – WPF
Ribbon availability > Available for WinForms, Win32, WPF, Silverlight > Third-party vendors > Microsoft – WPF

> Microsoft – WPF 3.5, Windows 7 (scenic ribbon)

Ribbon for Swing applications

Metal
Metal
Nimbus
Nimbus
Looks Plastic XP
Looks Plastic XP
A03
A03

Ribbon for Swing applications

Office Blue 2007
Office Blue 2007
Creme
Creme
Raven Graphite
Raven Graphite
Office Silver 2007
Office Silver 2007
Nebula
Nebula
Autumn
Autumn

Ribbon for Swing applications

Black Moon
Black Moon
Blue Moon Blue Ice
Blue Moon
Blue Ice
Orange Metallic
Orange Metallic
Mauve Metallic
Mauve Metallic
Sky Metallic
Sky Metallic

Ribbon for Swing applications

http://flamingo.dev.java.net

Basic ribbon terminology

Application menu button Taskbar panel Ribbon task Contextual ribbon task group Contextual ribbon task Help button
Application menu button
Taskbar panel
Ribbon task
Contextual ribbon task group
Contextual ribbon task
Help button
Ribbon gallery

Ribbon band

Ribbon band expand button

Basic hierarchy

> Ribbon

  • Contains tasks

    • Containing bands

> JRibbon

  • RibbonTask

    • AbstractRibbonBand

Ribbon task
Ribbon task

Ribbon band

Basic building block

Basic building block Command buttons 13

Command buttons

Command buttons

> AbstractCommandButton

  • JCommandButton

  • JCommandToggleButton

Command buttons demo

Display state

AbstractCommandButton.setDisplayState(

CommandButtonDisplayState)

BIG TILE MEDIUM SMALL
BIG
TILE
MEDIUM
SMALL

Action and popup areas

JCommandButton.setCommandButtonKind(CommandButtonKind)

ACTION_AND_POPUP ACTION_AND_POPUP ACTION_ONLY POPUP_ONLY _MAIN_ACTION _MAIN_POPUP
ACTION_AND_POPUP
ACTION_AND_POPUP
ACTION_ONLY
POPUP_ONLY
_MAIN_ACTION
_MAIN_POPUP

ActionButtonModel AbstractCommandButton.getActionModel() PopupButtonModel JCommandButton.getPopupModel()

Simple popups

JCommandButton.setPopupCallback(PopupPanelCallback)

Simple popups JCommandButton.setPopupCallback(PopupPanelCallback) JCommandButton button = ... button. setPopupCallback (new PopupPanelCallback() { ; public JPopupPanel getPopupPanel(

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

HORIZONTAL

Command button strips JCommandButtonStrip HORIZONTAL VERTICAL 19

VERTICAL

Command button strips JCommandButtonStrip HORIZONTAL VERTICAL 19

Command button panels

JCommandButtonPanel

ROW_FILL

Command button panels JCommandButtonPanel ROW_FILL COLUMN_FILL 20

COLUMN_FILL

Command button panels JCommandButtonPanel ROW_FILL COLUMN_FILL 20

Rich popups

Rich popups JCommandButton button = ... button.setPopupCallback(new PopupPanelCallback() { ; public JPopupPanel getPopupPanel( JCommandButton commandButton) {

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;

}

});

Bands / tasks demo

Ribbon bands

Ribbon band Ribbon band Flow ribbon band Ribbon band
Ribbon band
Ribbon band
Flow ribbon band
Ribbon band

> AbstractRibbonBand

  • JRibbonBand

  • JFlowRibbonBand

Flow ribbon bands

JFlowRibbonBand

Adding content:

addFlowComponent(JComponent)

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

Two row flowing content

Three row flowing content

Collapsed

Regular ribbon bands

JRibbonBand

Can host:

> command buttons > wrapped core / 3 rd party components > ribbon galleries

Hosting command buttons

JRibbonBand clipboardBand = new JRibbonBand(

Hosting command buttons JRibbonBand clipboardBand = new JRibbonBand( “Clipboard”, ... ); JCommandButton pasteButton = new JCommandButton(

“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 3 rd party controls

Hosting core and 3 party controls Simple wrapping Wrapping with icon and caption Wrapped components spanning

Simple wrapping

Hosting core and 3 party controls Simple wrapping Wrapping with icon and caption Wrapped components spanning

Wrapping with icon and caption

Hosting core and 3 party controls Simple wrapping Wrapping with icon and caption Wrapped components spanning

Wrapped components spanning multiple rows

Ribbon galleries

Hosted gallery

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

Hosted gallery scrolled down

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

Expanded gallery shown in a popup

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

Expanded gallery scrolled down

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

Groups in ribbon bands

Two unnamed groups with command buttons

Three unnamed groups with command buttons

Two named groups with wrapped core components

Groups in ribbon bands Two unnamed groups with command buttons Three unnamed groups with command buttons
Groups in ribbon bands Two unnamed groups with command buttons Three unnamed groups with command buttons
Groups in ribbon bands Two unnamed groups with command buttons Three unnamed groups with command buttons

Ribbon tasks

Ribbon task Ribbon task

Ribbon task Ribbon task

Ribbon task

Ribbon tasks Ribbon task Ribbon task Ribbon task Ribbon task Ribbon task new RibbonTask(title, AbstractRibbonBand ...

new RibbonTask(title, AbstractRibbonBand

...

bands)

JRibbon.addTask(RibbonTask)

Contextual task groups

Contextual ribbon task group

Contextual ribbon task group

Contextual ribbon task
Contextual ribbon task

Selected contextual ribbon task

Contextual task groups Contextual ribbon task group Contextual ribbon task group Contextual ribbon task Selected contextual

Menu button / taskbar demo

Application menu button

Application menu button

Application menu button Application menu button 33
Application menu button Application menu button 33

Application menu

Primary menu group

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

Footer

Secondary menu group

JRibbon.setApplicationMenu(RibbonApplicationMenu)

Taskbar panel

Taskbar panel

Taskbar panel Taskbar panel JRibbon.addTaskbarComponent(Component) 35

JRibbon.addTaskbarComponent(Component)

Tooltips / key tips demo

Rich tooltips

Tooltip for the action area

Tooltip for the popup area

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

Displayed below

the ribbon

Rich tooltips

Tooltip for wrapped core component

Multiple paragraphs
Multiple
paragraphs

Tooltip for taskbar component

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

Displayed below

the taskbar

Rich tooltips

Tooltip for application menu button

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

Footer section

and images

Key tips

Press Alt or F10 for the top chain

Showing key tips of the selected task

Showing key tips of the selected button

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

Resizing / minimized demo

Ribbon resizing

Ribbon resizing 42
Ribbon resizing 42
Ribbon resizing 42
Ribbon resizing 42

Ribbon resizing, collapsing and scrolling

Expanding the collapsed ribbon band

Scrolling tasks

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

Scrolling bands

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

Minimized mode

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

JRibbon.setMinimized(true)
User double-clicking a task button

User pressing Ctrl+F1

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

Minimized mode JRibbon.setMinimized(true) User double-clicking a task button User 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

Under the hood

> Visual consistency across LAFs

> org.jvnet.flamingo.common.ui.BasicCommandButtonUI.paint ButtonBackground

> Key tips

> org.jvnet.flamingo.ribbon.JRibbonFrame.KeyTipLayer

> Placing content in the title pane

> org.jvnet.substance.flamingo.ribbon.ui.SubstanceRibbonF rameTitlePane

> More in the code…

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

What is missing - medium

> Right-to-left support > High DPI support

Potentially useful

> XML-driven ribbon content > SWT version > World domination

Try it now!

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

http://flamingo.dev.java.net

Kirill Grouchnikov

kirillcool@yahoo.com

http://flamingo.dev.java.net

http://www.pushing-pixels.org