Advanced Effects in Java Desktop Applications

Similar documents
Bringing Life to Swing Desktop Applications

Kirill Grouchnikov, Amdocs Desktop Matters Conference San Jose, March

UI Software Organization

CS 251 Intermediate Programming GUIs: Components and Layout

Developing LimeWire: Swing for the Masses

Widgets. Overview. Widget. Widgets Widget toolkits Lightweight vs. heavyweight widgets Swing Widget Demo

Graphics. Lecture 18 COP 3252 Summer June 6, 2017

Graphic Interface Programming II Events and Threads. Uppsala universitet

Swing and you are winning

Graphic Interface Programming II Using Swing and OOP more advanced issues. Uppsala universitet

Widgets. Widgets Widget Toolkits. User Interface Widget

Event Dispatch. Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch. 2.4 Event Dispatch 1

Event Dispatch. Interactor Tree Lightweight vs. Heavyweight Positional Dispatch Focus Dispatch. Event Architecture. A pipeline: Event Capture

Heavyweight with platform-specific widgets. AWT applications were limited to commonfunctionality that existed on all platforms.

Filthy Rich Clients: Filthier. Richer. Clientier. Romain Guy, Google Chet Haase, Adobe Systems

Outline. Topic 9: Swing. GUIs Up to now: line-by-line programs: computer displays text user types text AWT. A. Basics

Swinging from the Outside

All the Swing components start with J. The hierarchy diagram is shown below. JComponent is the base class.

Topic 9: Swing. Swing is a BIG library Goal: cover basics give you concepts & tools for learning more

Topic 9: Swing. Why are we studying Swing? GUIs Up to now: line-by-line programs: computer displays text user types text. Outline. 1. Useful & fun!

CS 349 / SE 382 Custom Components. Professor Michael Terry February 6, 2009

Widget. Widget is a generic name for parts of an interface that have their own behaviour. e.g., buttons, progress bars, sliders, drop-down

More UI Output Tasks: Damage Management & Layout

Graphics programming. COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson)

Widgets. Widgets Widget Toolkits. 2.3 Widgets 1

CSE 331 Software Design & Implementation

Widget Toolkits CS MVC

Introduction to the JAVA UI classes Advanced HCI IAT351

GUI Implementation Support

Introduction to Graphical Interface Programming in Java. Introduction to AWT and Swing

Juice: An SVG Rendering Peer for Java Swing

SELF-STUDY. Glossary

Graphical User Interfaces (GUIs)

Lecture 5: Java Graphics

Object-Oriented Programming Design. Topic : Graphics Programming GUI Part I

China Jiliang University Java. Programming in Java. Java Swing Programming. Java Web Applications, Helmut Dispert

Graphics and Painting

Graphical User Interfaces

Lecture 11: Output 2. Fall UI Design and Implementation 1

GUI Output. Adapted from slides by Michelle Strout with some slides from Rick Mercer. CSc 210

Review. Designing Interactive Systems II. Introduction. Web 2.0 in keywords GWT Cappuccino HTML5. Cross platform GUI Toolkit

Designing Interactive Systems II

Microsoft Office Illustrated Introductory, Finishing a Presentation

Software Construction

Java: Graphical User Interfaces (GUI)

Today s hall of fame or shame candidate is the Domino s Pizza build-your-own-pizza process. You can try it yourself by going to the Domino s website

Nimbus: Making Swing Look Sexy!

KF5008 Program Design & Development. Lecture 1 Usability GUI Design and Implementation

CSE 331 Software Design & Implementation

Introduction to GUIs. Principles of Software Construction: Objects, Design, and Concurrency. Jonathan Aldrich and Charlie Garrod Fall 2014

Lecture 18 Java Graphics and GUIs

Welcome to CIS 068! 1. GUIs: JAVA Swing 2. (Streams and Files we ll not cover this in this semester, just a review) CIS 068

Graphic User Interfaces. - GUI concepts - Swing - AWT

Windows and Events. created originally by Brian Bailey

PROGRAMMING DESIGN USING JAVA (ITT 303) Unit 7

Programming Languages and Techniques (CIS120)

Graphical User Interface (GUI)

Preface. WELCOME to Filthy Rich Clients. This book is about building better, more. Organization

Educational Fusion. Implementing a Production Quality User Interface With JFC

Agenda. Programming Seminar. By: dr. Amal Khalifa. Coordinate systems Colors Fonts Drawing shapes Graphics2D API

Announcements. Introduction. Lecture 18 Java Graphics and GUIs. Announcements. CSE 331 Software Design and Implementation

PIC 20A GUI with swing

EPITA Première Année Cycle Ingénieur. Atelier Java - J5

Programming Languages and Techniques (CIS120)

Introduction p. 1 JFC Architecture p. 5 Introduction to JFC p. 7 The JFC 1.2 Extension p. 8 Swing p. 9 Drag and Drop p. 16 Accessibility p.

(Incomplete) History of GUIs

Object Orientated Programming in Java. Benjamin Kenwright

Version 3 Media Guide

Downloaded from

IT101. Graphical User Interface

Java Swing. based on slides by: Walter Milner. Java Swing Walter Milner 2005: Slide 1

Introduction. Part I: jquery API 1. Chapter 1: Introduction to jquery 3

Event Driven Programming

Assignment 2. Application Development

Event Dispatch. Dispatching events to windows and widgets.

... Output System Layers. Application 2. Application 1. Application 3. Swing. UIKit SWT. Window System. Operating System

Virtualians.ning.pk. 2 - Java program code is compiled into form called 1. Machine code 2. native Code 3. Byte Code (From Lectuer # 2) 4.

CSC207H: Software Design Lecture 11

Advanced Cocoa Text Tips and Tricks. Aki Inoue Cocoa Engineer

Strategy Pattern. What is it?

Output in Window Systems and Toolkits

Tool Kits, Swing. Overview. SMD158 Interactive Systems Spring Tool Kits in the Abstract. An overview of Swing/AWT

Summary Chapter 25 GUI Components: Part 2

Lab 4. D0010E Object-Oriented Programming and Design. Today s lecture. GUI programming in

Swing. By Iqtidar Ali

GUI Components: Part 1

Graphics in Swing. Engineering 5895 Faculty of Engineering & Applied Science Memorial University of Newfoundland

GUI Basics. Object Orientated Programming in Java. Benjamin Kenwright

CSE 331 Software Design & Implementation

CompSci 125 Lecture 17. GUI: Graphics, Check Boxes, Radio Buttons

Exit: These control how the object exits the slide. For example, with the Fade animation the object will simply fade away.

Lecture 9. Lecture

The JFrame Class Frame Windows GRAPHICAL USER INTERFACES. Five steps to displaying a frame: 1) Construct an object of the JFrame class

SD Module-1 Advanced JAVA

CSE 331 Software Design & Implementation

SD Module-1 Advanced JAVA. Assignment No. 4

Command-Line Applications. GUI Libraries GUI-related classes are defined primarily in the java.awt and the javax.swing packages.

Here is a list of a few of the components located in the AWT and Swing packages:

MOBILE COMPUTING 1/20/18. How many of you. CSE 40814/60814 Spring have implemented a command-line user interface?

Core Java Syllabus. Pre-requisite / Target Audience: C language skills (Good to Have)

Transcription:

Advanced Effects in Java Desktop Applications Kirill Grouchnikov, Senior Software Engineer, Amdocs kirillcool@yahoo.com http://www.pushing-pixels.org OSCON 2007

Agenda Swing pipeline Hooking into the pipeline RepaintManager Playing with opacity Glass pane Layering in UI delegates Rainbow demo Q&A

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

Swing painting pipeline - Three major participants - JComponent - RepaintManager - ComponentUI - Provide various hooks to customize behavior - Vary in flexibility, robustness and ease of use

Swing painting pipeline part I JComponent repaint() RepaintManager adddirtyregion() Coalesce repaints Create an event Queue event on EDT paintimmediately() Opacity checks Double-buffering paint() paintdirtyregions() EDT gets to the queued event

Swing painting pipeline part II paint() JComponent paintcomponent() ComponentUI update() paint() paintborder() paintchildren()

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

What we can achieve? - Translucency - Non-rectangular components - Layering - Image filtering - Animation

Agenda Swing pipeline Hooking into the pipeline RepaintManager Playing with opacity Glass pane Layering in UI delegates Rainbow demo Q&A

Swing painting pipeline hooks JComponent repaint() RepaintManager adddirtyregion() Coalesce repaints Create an event Queue event on EDT paintimmediately() Opacity checks Double-buffering paint() paintdirtyregions() EDT gets to the queued event

RepaintManager example - SwingX project - JXPanel that provides translucency - setalpha(float) - using RepaintManagerX see code

There can be only one (singleton) class JXPanel { public void setalpha(float alpha) { if (alpha > 0f && alpha < 1f) {... RepaintManager.setCurrentManager( new RepaintManagerX()); } }

Agenda Swing pipeline Hooking into the pipeline RepaintManager Playing with opacity Glass pane Layering in UI delegates Rainbow demo Q&A

Swing painting pipeline hooks JComponent repaint() RepaintManager adddirtyregion() Coalesce repaints Create an event Queue event on EDT paintimmediately() Opacity checks Double-buffering paint() paintdirtyregions() EDT gets to the queued event

Opacity basics - setopaque - 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

Transition effects using opacity - 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

DEMO Transition layout demo

Transition layout manager TransitionLayoutManager.getInstance(). track(mytabbedpane, true); TransitionLayoutManager.getInstance(). track(mypanel, true); - Play with opacity (set to false during animation cycle) - Set translucency (for fades) - Custom layout manager (for sliding effects)

Transition scenarios - Remains visible and has the same bounds - Remains visible and has different bounds - Becomes invisible - Added or becomes visible - Remains invisible

Agenda Swing pipeline Hooking into the pipeline RepaintManager Playing with opacity Glass pane Layering in UI delegates Rainbow demo Q&A

Swing painting pipeline hooks paint() JComponent paintcomponent() ComponentUI update() paint() paintborder() paintchildren()

Glass pane basics - Painting over all the components frame.setglasspane(new CustomGlassPanel()); frame.getglasspane().setvisible(true);

Glass pane - Pros - Does not affect component's state - Cons - Global resource (for a frame) - Everything is repainted (performance)

JXLayer overview - 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 - Painters API - Image filtering - Translucency - PainterModel.setAlpha(float) - Non-rectangular components - MouseEvents filtering

Agenda Swing pipeline Hooking into the pipeline RepaintManager Playing with opacity Glass pane Layering in UI delegates Rainbow demo Q&A

Swing painting pipeline hooks paint() JComponent paintcomponent() ComponentUI update() paint() paintborder() [*] paintchildren() [*]

UI delegates basics - 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 delegate flow JComponent paint() paintcomponent() paintborder() paintchildren() update() ButtonUI paint() painticon() painttext() paintfocus()

Alternatives - 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 -...

DEMO Ghost effects

Ghost effects sequence

Ghost effects implementation update() paint() - Custom painting code in: - ButtonUI.paintIcon() or - ButtonUI.update() painticon() painttext() paintfocus()

Ghost effects eye candy Icon ghosting over multiple components

Ghost effects - 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

Agenda Swing pipeline Hooking into the pipeline RepaintManager Playing with opacity Glass pane Layering in UI delegates Rainbow demo Q&A

DEMO Rainbow demo https://rainbow.dev.java.net Sources + WebStart link

Links - 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

Q&A Kirill Grouchnikov kirillcool@yahoo.com