advanced effects oscon 2007
TRANSCRIPT
![Page 1: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/1.jpg)
Advanced Effects
in Java Desktop
Applications
Kirill Grouchnikov, Senior Software
Engineer, Amdocs
http://www.pushing-pixels.org
OSCON 2007
![Page 2: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/2.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Agenda•Swing pipeline
•Hooking into the pipeline
•RepaintManager
•Playing with opacity
•Glass pane
•Layering in UI delegates
•Rainbow demo
•Q&A
![Page 3: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/3.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Swing basics- UI toolkit for Java applications
- What is a lightweight component?
- Very flexible
- Provides a lot of hooks for custom behavior
- Not trivial to implement
- Heavyweight counterparts – AWT and SWT
![Page 4: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/4.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Swing painting pipeline- Three major “participants”
- JComponent
- RepaintManager
- ComponentUI
- Provide various hooks to customize behavior
- Vary in flexibility, robustness and ease of use
![Page 5: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/5.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Swing painting pipeline – part I
addDirtyRegion()repaint()
•Coalesce repaints
•Create an event
•Queue event on EDT
JComponent RepaintManager
EDT gets to the
queued eventpaintDirtyRegions()paintImmediately()
•Opacity checks
•Double-buffering
paint()
![Page 6: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/6.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Swing painting pipeline – part II
update()
paintBorder()
paintComponent()
paint()
paintChildren()
paint()
JComponent ComponentUI
![Page 7: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/7.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Swing pipeline hooks- JComponent
- Override paint or paintComponent
- Or even repaint or paintImmediately
- RepaintManager
- Install a custom implementation (singleton)
- ComponentUI
- Provide custom painting for a specific component class
![Page 8: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/8.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- Translucency
- Non-rectangular components
- Layering
- Image filtering
- Animation
What we can achieve?
![Page 9: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/9.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Agenda•Swing pipeline
•Hooking into the pipeline
•RepaintManager
•Playing with opacity
•Glass pane
•Layering in UI delegates
•Rainbow demo
•Q&A
![Page 10: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/10.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Swing painting pipeline hooks
addDirtyRegion()repaint()
•Coalesce repaints
•Create an event
•Queue event on EDT
JComponent RepaintManager
EDT gets to the
queued eventpaintDirtyRegions()paintImmediately()
•Opacity checks
•Double-buffering
paint()
![Page 11: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/11.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
RepaintManager example- SwingX project
- JXPanel that provides translucency
- setAlpha(float)
- using RepaintManagerX – see code
![Page 12: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/12.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
class JXPanel {
public void setAlpha(float alpha) {
if (alpha > 0f && alpha < 1f) {
...
RepaintManager.setCurrentManager(
new RepaintManagerX());
}
}
There can be only one (singleton)
![Page 13: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/13.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Agenda•Swing pipeline
•Hooking into the pipeline
•RepaintManager
•Playing with opacity
•Glass pane
•Layering in UI delegates
•Rainbow demo
•Q&A
![Page 14: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/14.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Swing painting pipeline hooks
addDirtyRegion()repaint()
•Coalesce repaints
•Create an event
•Queue event on EDT
JComponent RepaintManager
EDT gets to the
queued eventpaintDirtyRegions()paintImmediately()
•Opacity checks
•Double-buffering
paint()
![Page 15: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/15.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- setOpaque(false) == “draw stuff behind me”
- Useful for translucent or non-rectangular
components
- setOpaque(true) == “I’ll handle it”
- During repainting of an opaque component
Swing does not repaint any components behind
Opacity basics - setOpaque
![Page 16: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/16.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- UIs changes are immediate
- Showing / hiding a control
- Moving a control to new location
- Tab switch
- Solution – use transitions (cross fades, fly-in / out)
- Making controls non-opaque to enable the transition effects
Transition effects using opacity
![Page 17: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/17.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
DEMOTransition layout demo
![Page 18: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/18.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- Play with opacity (set to false during animation cycle)
- Set translucency (for fades)
- Custom layout manager (for sliding effects)
TransitionLayoutManager.getInstance().track(myTabbedPane, true);
TransitionLayoutManager.getInstance().track(myPanel, true);
Transition layout manager
![Page 19: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/19.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- Remains visible and has the same bounds
- Remains visible and has different bounds
- Becomes invisible
- Added or becomes visible
- Remains invisible
Transition scenarios
![Page 20: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/20.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Agenda•Swing pipeline
•Hooking into the pipeline
•RepaintManager
•Playing with opacity
•Glass pane
•Layering in UI delegates
•Rainbow demo
•Q&A
![Page 21: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/21.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Swing painting pipeline hooks
update()
paintBorder()
paintComponent()
paint()
paintChildren()
paint()
JComponent ComponentUI
![Page 22: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/22.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
frame.setGlassPane(new CustomGlassPanel());
frame.getGlassPane().setVisible(true);
- Painting over all the components
Glass pane basics
![Page 23: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/23.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- Pros
- Does not affect component's state
- Cons
- Global resource (for a frame)
- Everything is repainted (performance)
Glass pane
![Page 24: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/24.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- It is a component wrapper like JScrollPane
- You have access to the wrapped component's state
- It does not use glassPane from the frame
- It has its own a transparent panel on the top
- JXLayer.paint() delegates all painting to the painter
- A flexible way to modify component's appearance
JXLayer overview
![Page 25: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/25.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- Painters API
- Image filtering
- Translucency
- PainterModel.setAlpha(float)
- Non-rectangular components
- MouseEvents filtering
JXLayer overview
![Page 26: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/26.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Agenda•Swing pipeline
•Hooking into the pipeline
•RepaintManager
•Playing with opacity
•Glass pane
•Layering in UI delegates
•Rainbow demo
•Q&A
![Page 27: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/27.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Swing painting pipeline hooks
update()
paintBorder() [*]
paintComponent()
paint()
paintChildren() [*]
paint()
JComponent ComponentUI
![Page 28: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/28.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- UI delegates – classes responsible for painting Swing
components.
- JPanel – PanelUI delegate [*]
- JButton – ButtonUI delegate [*]
- ... (41 different UI delegates)
- Provide flexible control over painting different visual layers
of Swing components
UI delegates basics
![Page 29: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/29.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
update()
paintBorder()
paintComponent()
paint()
paintIcon()
paintText()paintFocus()
paintChildren()
paint()
JComponent ButtonUI
UI delegate flow
![Page 30: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/30.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- Repaint manager and glass pane - much higher level
- UI delegate can
- Add drop shadow to the button text
- And get all the rest from the core implementation
- Opens the field to a wide array of effects
- Ghost images / springs
- Ripples
- ...
Alternatives
![Page 31: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/31.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
DEMOGhost effects
![Page 32: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/32.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Ghost effects sequence
![Page 33: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/33.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- Custom painting code in:
- ButtonUI.paintIcon() or
- ButtonUI.update()
update()
paintIcon()paintText()paintFocus()
paint()
Ghost effects implementation
![Page 34: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/34.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Icon ghosting over multiple components
Ghost effects eye candy
![Page 35: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/35.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- Pros
- Minimal changes in the application code.
- No need for custom painting code
- Available under multiple look and feels (use
bytecode injection)
- Cons
- Custom paintComponent implementations
Ghost effects
![Page 36: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/36.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Agenda•Swing pipeline
•Hooking into the pipeline
•RepaintManager
•Playing with opacity
•Glass pane
•Layering in UI delegates
•Rainbow demo
•Q&A
![Page 37: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/37.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
DEMORainbow demo
https://rainbow.dev.java.net
Sources + WebStart link
![Page 38: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/38.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
- JXLayer project https://swinghelper.dev.java.net/
- Laf-Widget project http://laf-widget.dev.java.net
- SwingX project http://swingx.dev.java.net/
- Old blog http://weblogs.java.net/blog/kirillcool/
- New blog http://www.pushing-pixels.org
Links
![Page 39: Advanced Effects Oscon 2007](https://reader034.vdocuments.us/reader034/viewer/2022042614/55a589f01a28abd4138b4649/html5/thumbnails/39.jpg)
Kirill Grouchnikov, Advanced Effects in Java Desktop Applications
Q&AKirill Grouchnikov