Flamingo: Bringing the
Ribbon Component to
Swing
Kirill Grouchnikov
Amdocs
Agenda
>   What is a ribbon?
>   Swing ribbon implementation
>   Swing ribbon structure
       Basic terminology
       ...
What is a ribbon?




                    3
Ribbon demo

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




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




>   Microsoft – WPF 3....
Ribbon for Swing applications
              Metal             Looks Plastic XP




              Nimbus                   ...
Ribbon for Swing applications
         Office Blue 2007       Office Silver 2007




                 Creme               ...
Ribbon for Swing applications
           Black Moon           Orange Metallic




            Blue Moon           Mauve Me...
Ribbon for Swing applications




   http://flamingo.dev.java.net




                                  10
Basic ribbon terminology

Application menu button                          Contextual ribbon task group
                  ...
Basic hierarchy
>   Ribbon
                                               Ribbon task
       Contains tasks
           C...
Basic building block




             Command buttons




                               13
Command buttons
>   AbstractCommandButton
       JCommandButton
       JCommandToggleButton




                        ...
Command
buttons demo

               15
Display state

AbstractCommandButton.setDisplayState(
  CommandButtonDisplayState)



                  BIG     TILE      ...
Action and popup areas
JCommandButton.setCommandButtonKind(CommandButtonKind)



   ACTION_ONLY   ACTION_AND_POPUP   ACTIO...
Simple popups
JCommandButton.setPopupCallback(PopupPanelCallback)
             JCommandButton button = ...;
             b...
Command button strips
JCommandButtonStrip

         HORIZONTAL     VERTICAL




                                   19
Command button panels
JCommandButtonPanel

        ROW_FILL        COLUMN_FILL




                                      20
Rich popups
              JCommandButton button = ...;
              button.setPopupCallback(new PopupPanelCallback() {
  ...
Bands / tasks
   demo

                22
Ribbon bands



         Ribbon band   Ribbon band   Flow ribbon band   Ribbon band




>   AbstractRibbonBand
       JRi...
Flow ribbon bands
JFlowRibbonBand

Adding content:
  addFlowComponent(JComponent)




      Two row flowing       Three ro...
Regular ribbon bands
JRibbonBand

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



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

        JComman...
Hosting core and 3rd party controls



        Simple wrapping                      Wrapping with icon
                   ...
Ribbon galleries
  Hosted gallery   Expanded gallery   Expanded gallery
                   shown in a popup    scrolled do...
Groups in ribbon bands

         Two unnamed
           groups with
      command buttons


         Three unnamed
       ...
Ribbon tasks
       Ribbon task           Ribbon task          Ribbon task
                  Ribbon task          Ribbon t...
Contextual task groups
               Contextual ribbon task group               Contextual ribbon task group

           ...
Menu button /
taskbar demo

                32
Application menu button
Application menu button




                           33
Application menu


     Primary                                Secondary
  menu group                                menu ...
Taskbar panel

     Taskbar panel




JRibbon.addTaskbarComponent(Component)




                                         ...
Tooltips / key
 tips demo

                 36
Rich tooltips


        Tooltip for the
          action area




                          Displayed below
              ...
Rich tooltips


    Tooltip for wrapped
      core component
                           Multiple
                         ...
Rich tooltips


       Tooltip for
application menu
           button


                     Footer section
              ...
Key tips

  Press Alt or         Showing key           Showing key tips
  F10 for the           tips of the           of t...
Resizing /
minimized
  demo
             41
Ribbon resizing




                  42
Ribbon resizing, collapsing and scrolling
                   Scrolling tasks   Scrolling bands




  Expanding the
collaps...
Minimized mode



                 JRibbon.setMinimized(true)
                 User double-clicking a task button
        ...
Big features recap
>   Ribbon regular and flow bands
>   Ribbon galleries
>   Ribbon tasks and contextual task groups
>   ...
Under the hood
>   Visual consistency across LAFs
    >   org.jvnet.flamingo.common.ui.BasicCommandButtonUI.paintB
       ...
What is missing - small
>   Hosting small buttons in galleries
>   Resizing popup panels
>   Navigating with keyboard (arr...
What is missing - medium
>   Right-to-left support
>   High DPI support




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




                                ...
Try it now!




    http://flamingo.dev.java.net


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




                   ...
Upcoming SlideShare
Loading in …5
×

Flamingo Ribbon component

15,621 views

Published on

JavaOne 2009 presentation on the ribbon component

Published in: Technology

Flamingo Ribbon component

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

×