Swing and you are winning

Transcription

1 Swing and you are winning Pimp your user interface with the power of the swing framework. Tuning a standard user interface with gradients, custom components and validating text fields using the JGlassPane. Gerrit Grunwald, Raith GmbH (Germany)

2 Agenda: A simple standard user interface Design prototype Gradients Custom components Animations Selfvalidating form using the glass pane 2

3 A simple standard user interface Form based application to gather feedback from a user. There are mandatory fields and free fields to fill out. Mandatory fields are marked with an asterisk. Doesn t it look nice? NO!!! 3

4 The design prototype Use graphics program like Adobe Fireworks to create a design prototype containing gradients custom components animations etc. 4

5 Customizing Swing components Nearly all Swing components whose names begin with J descend from JComponent. For example, JPanel, JScrollPane, JButton, and JTable all inherit from JComponent. The easy way to customize components is to override the paintcomponent() method which the mentioned components also inherit from JComponent. 5

6 Gradients are powerful tools to create astonishing effects like shadows gloss all kinds of 3D effects mirroring so let s use it 6

7 Using a multicolor gradient in the background 7

8 Custom JPanel Design Prototype how to do that in Swing? 8

9 Creating the customized JPanel public class SDLinearGradientPanel extends JPanel BufferedImage cache = protected void paintcomponent(graphics g) (Graphics2D) g2 = (Graphics2D) g; if (cache == null cache.getheight()!= getheight()) cache = createbackgroundimage(); } g2.drawimage(cache, 0, 0, getwidth(), getheight(), null); } g2.dispose(); private BufferedImage createbackgroundimage() final float[] FRACTIONS = 0.0f, 0.1f, 0.4f, 1.0f}; final Color[] COLORS = new Color(0,0,0,255), new Color(32,53,72,255), new Color(0,0,0,255), new Color(32,53,72,255)}; LinearGradientPaint bgndgradient = new LinearGradientPaint(start, stop, FRACTIONS, COLORS); 9

10 Using a customized buttons 10

11 Custom JButton Design Prototype Text how to do that in Swing? 11

12 Stripping down the prototype #1 Background Shape & Background Gradient #2 Foreground Shape & Foreground Gradient #3 Highlight Shape & Highlight Gradient #4 Button Text Text 12

13 Creating the background shape #1 Background Shape public class SDButton extends JButton private java.awt.shape getbackgroundshape() return new java.awt.geom.roundrectangle2d.float(0, 0, getwidth(), getheight(), 10, 10); } 13

14 Creating the background gradient #1 Background Shape Point2D start = new java.awt.geom.point2d.float(0, 0); Point2D stop = new java.awt.geom.point2d.float(0, getheight()); final float[] FRACTIONS_BACKGROUND = 0.0f, 0.33f }; final Color[] COLORS_BACKGROUND = new Color(1.0f, 1.0f, 1.0f, 1.0f), new Color(0.0f, 0.0f, 0.0f, 1.0f) }; LinearGradientPaint paintbackground = new java.awt.lineargradientpaint (start, stop, FRACTIONS_BACKGROUND, COLORS_BACKGROUND); 14

15 Creating the foreground shape #2 Foreground Shape public class SDButton extends JButton private java.awt.shape getforegroundshape() return new java.awt.geom.roundrectangle2d.float(1, 1, getwidth() - 2, getheight() - 2, 8, 8); } 15

16 Creating the foreground gradient #2 Foreground Shape Point2D start = new java.awt.geom.point2d.float(0, 0); Point2D stop = new java.awt.geom.point2d.float(0, getheight()); final float[] FRACTIONS_FOREGROUND = 0.0f, 1.0f }; final Color[] COLORS_FOREGROUND = new Color(0.0f, 0.0f, 0.0f, 1.0f), new Color( f, f, f, 1.0f) }; LinearGradientPaint paintforeground = new java.awt.lineargradientpaint (start, stop, FRACTIONS_FOREGROUND, COLORS_FOREGROUND); 16

17 Creating the highlight shape #3 Highlight Shape public class SDButton extends JButton private java.awt.shape gethighlightshape() java.awt.geom.roundrectangle2d rrecthighlight = (java.awt.geom.roundrectangle2d) getforegroundshape(); java.awt.geom.rectangle2d recthighlight = new java.awt.geom.rectangle2d.float (1, getheight() / 2, getwidth() - 2, getheight() - 2); java.awt.geom.area shapehighlight = new java.awt.geom.area(rrecthighlight); shapehighlight.subtract(new java.awt.geom.area(recthighlight)); return shapehighlight; } 17

18 Creating the highlight gradient #3 Highlight Shape Point2D start = new java.awt.geom.point2d.float(0, 0); Point2D stop = new java.awt.geom.point2d.float(0, getheight()); final float[] FRACTIONS_HIGHLIGHT = 0.0f, 1.0f }; final Color[] COLORS_HIGHLIGHT = new Color(1.0f, 1.0f, 1.0f, 0.4f), new Color(1.0f, 1.0f, 1.0f, 0.2f) }; LinearGradientPaint painthighlight = new java.awt.lineargradientpaint (start, stop, FRACTIONS_HIGHLIGHT, COLORS_HIGHLIGHT); 18

19 Creating the text #4 Button Text Text // Select font and get textboundary g2.setfont(new Font("Verdana", 1, 12)); FontMetrics metrics = g2.getfontmetrics(); Rectangle2D textboundary = metrics.getstringbounds(text, g2); // Draw text shadow g2.setcolor(color.dark_gray); g2.drawstring(text, (int) ((getwidth() - textboundary.getwidth()) / 2), getheight() - metrics.getheight() - ((getheight() - metrics.getheight()) / 2) + metrics.getascent()); // Draw text g2.setcolor(color.white); g2.drawstring(text, (int) ((getwidth() - textboundary.getwidth()) / 2-1), getheight() - metrics.getheight() - ((getheight() - metrics.getheight()) / 2) + metrics.getascent() + armedoffset - 1); 19

20 Use BufferedImage() for assembling the parts public class SDButton extends JButton private BufferedImage createbuttonimage(string text) BufferedImage buttonimage = new BufferedImage(getWidth(), getheight(), TYPE_INT_ARGB); java.awt.graphics2d g2 = buttonimage.creategraphics(); g2.setrenderinghint(key_antialiasing, VALUE_ANTIALIAS_ON); g2.setrenderinghint(key_text_antialiasing, VALUE_TEXT_ANTIALIAS_ON); // Draw background rectangle LinearGradientPaint paintbackground = new LinearGradientPaint(start, stop, FRACTIONS_BACKGROUND, COLORS_BACKGROUND); g2.setpaint(paintbackground); g2.fill(getbackgroundshape()); // Draw foreground rectangle LinearGradientPaint paintforeground = new LinearGradientPaint(start, stop, FRACTIONS_FOREGROUND, COLORS_FOREGROUND); g2.setpaint(paintforeground); g2.fill(getforegroundshape()); // Draw highlight shape LinearGradientPaint painthighlight = new LinearGradientPaint(start, stop, FRACTIONS_HIGHLIGHT, COLORS_HIGHLIGHT); g2.setpaint(painthighlight); g2.fill(gethighlightshape()); 20

21 Finally overide paintcomponent() method Text public class SDButton extends protected void paintcomponent(graphics g) Graphics2D g2 = (Graphics2D) g; g2.setrenderinghint(key_antialiasing, VALUE_ANTIALIAS_ON); java.awt.image.bufferedimage buttonimage = createbuttonimage(gettext()); g2.drawimage(buttonimage, 0, 0, this); 21

22 Using animations for visualization how to do that in Swing? 22

23 Painting a mouse over highlight Text Text Point2D center = new Point2D.Float((getWidth() / 2), (getheight() / 2)); float[] dist = 0.0f, 1.0f }; final Color FULLY_TRANSPARENT = new Color 1.0f, 1.0f, 1.0f, 0.0f ); Color[] colors = fadingcolor, FULLY_TRANSPARENT }; int radius = getwidth() / 3; RadialGradientPaint gradient = new RadialGradientPaint(center, radius, dist, colors); g2.setpaint(gradient); g2.fill(getbackgroundshape()); 23

24 Painting a mouse over highlight Text Text // DrawMouseOverHighlight if (enabled) Point2D center = new Point2D.Float((getWidth() / 2), (getheight() / 2)); float[] dist = 0.0f, 1.0f }; Color[] colors = fadingcolor, TOTAL_TRANSPARENT }; int radius = getwidth() / 3; final RadialGradientPaint PAINT_MOUSEOVER_HIGHLIGHT = RadialGradientPaint(center, radius, dist, colors); g2.setpaint(paint_mouseover_highlight); g2.fill(getbackgroundshape()); } Use a MouseListener as trigger for the effect 24

25 Use a thread to in-/decrease transparency int fadingalpha = fadingcolor.getalpha(); // Fade out if (!fadein) while (fadingalpha > 0) Thread.sleep(50); fadingcolor = new Color(255, 255, 255, fadingalpha); fadingalpha -= 15; repaint(); } fadingcolor = new Color(255, 255, 255, 0); } repaint(); // Fade in if (fadein) while (fadingalpha < 100) Thread.sleep(50); fadingcolor = new Color(255, 255, 255, fadingalpha); fadingalpha += 15; repaint(); } fadingcolor = new Color(255, 255, 255, 100); repaint(); } 25

26 Using the GlassPane for validation! first name not valid Luke valid 26

27 WTF is the GlassPane? Frame JMenuBar RootPane LayeredPane ContentPane GlassPane The GlassPane sits on top of every other component in a Swing UserInterface. 27

28 Custom JPanel as custom GlassPane The glasspane is a custom JPanel, where we again override the paintcomponent() method. The custom panel holds a reference on each component that should get a special marker for validation and paints them if needed. To avoid duplicate entries we are using java.util.set. 28

29 Paint the validation markers public class SDGlassPane extends protected void paintcomponent(graphics g) Graphics2D g2 = (Graphics2D) g; // Draw all AttentionMarker drawattentionmarker(g2); } private void drawattentionmarker(graphics2d g2) JComponent tmpcomponent; for (javax.swing.jcomponent component : this.markercomponentset) int originx = 0; int originy = 0; tmpcomponent = component; while (tmpcomponent.getparent() instanceof javax.swing.jcomponent) originx += tmpcomponent.getx(); originy += tmpcomponent.gety(); tmpcomponent = (JComponent) tmpcomponent.getparent(); } g2.drawimage(marker_image, (originx - HALF_MARKER_SIZE), (originy - HALF_MARKER_SIZE), null); } } 29

30 Final thoughts You don t need Flash, Silverlight or JavaFX to create nice looking userinterfaces. Swing is very flexible which means nearly everything is possible as long as you know how to do it. When it comes to complicated UI s it might be more easy to use JavaFX instead of Swing but this we ll see in the future. So let s swing 30

31 Thanx for your attention 31

32 Webstart version available here Just doubleclick 32

33 References: Java 2D Graphics by Jonathan Knudsen Java 2D API Graphics by Vincent J. Hardy Swing Hacks by Joshua Marinacci Filthy Rich Clients by Chet Haase and Romain Guy Java Swing by Marc Loy, Robert Eckstein, Dave Wood, James Elliott and Brian Cole 33