Developing LimeWire: Swing for the Masses

Transcription

1 Developing LimeWire: Swing for the Masses Sam Berlin Michael Everett TS-5162 Lime Wire LLC Lime Wire LLC

2 GOAL: > To help you easily create large, good-looking User Interfaces in Swing 2

3 What is LimeWire? > The most popular P2P application > Supports both Gnutella and BitTorrent protocols > Written entirely in Java and Swing > In development since 2000 > Open source 3

4 Why you should listen > Actively developed > Production code since 2000 > 10 Million users/day > 25 Million users/week CONCLUSION > The code is available and it works 4

5 Agenda > Brief LimeWire UI History > Plan a new interface > Flesh it out (Guice) > Work with real data (Glazed Lists) > Make it pretty (JXLayer, > add a web browser! (MozSwing) 5

6 LimeWire 1.4 > Early 2001 > Java Compatible! > Metal L&F Only 6

7 LimeWire 2.0 > Late 2001 > Still Java Compatible! > Still Metal L&F Only 7

8 LimeWire 3.0 > Mid 2003 > Still Java Compatible! (but 1.3 support) > Pluggable L&F 8

9 LimeWire 4.0 > Mid 2004 > Still Java Compatible! (but 1.3 support) > Pluggable L&F, better native feel 9

10 LimeWire 4.18 > Mid 2008 > Minimum Java 1.5 > Pluggable L&F, best native feel 10

11 LimeWire 5 11

12 Agenda > Brief LimeWire UI History > Plan a new interface > Flesh it out (Guice) > Work with real data (Glazed Lists) > Make it pretty (JXLayer, > add a web browser! (MozSwing) 12

13 Planning a New Interface > Get (and use) a User Experience Designer! > Know your purpose Browser? Media playback? Language familiarity? > Evaluate Toolkits Swing, JavaFX, SWT, QT Jambi, Air... 13

14 Sketch your ideas > Brainstorm > Nothing is permanent 14

15 Use Paper Mockups > Test on a fresh set of eyes > Examine the flow of interactions 15

16 Use Paper Mockups: Problems > Too many input boxes > Unclear actions 16

17 Baby Steps > The uglier the better 17

18 A Little Paint Goes A Long Way... > Wow, this is a real thing?! 18

19 Agenda > Brief LimeWire UI History > Plan a new interface > Flesh it out (Guice) > Work with real data (Glazed Lists) > Make it pretty (JXLayer, > add a web browser! (MozSwing) 19

20 Fleshing It Out: Simple UI == Happy UI > No logic in the UI code > Don't let the core dictate the UI's architecture > If complex core, create simplifying code > Create simple core API while developing UI 20

21 Simple by Design: Keep the UI Clean StatusPanel(StatusData data) { statusdata.addpclistener(new PropertyChangeListener()) { public void propertychanged(propertychangeevent evt) { if(evt.getpropertyname().equals(statusdata.my_property)) changestatus(evt.getnewvalue()); } }); StatusDataImpl implements StatusData { StatusDataImpl(ComplexStatusManager mgr) { mgr.addlistener(new SimplifyingListener()); } public void addpclistener(propertychangelistener pcl) {... 21

22 Dependency Injection > Binds core to UI > Easy swapping of core > We use Guice (TS-5434) public void RealCoreModule extends AbstractModule { public void configure() { bind(statusdata.class).to(corestatusdataimpl.class); } } public void MockCoreModule extends AbstractModule { public void configure() { bind(statusdata.class).to(mockstatusdataimpl.class); } } 22

23 DEMO Core API & Dependency Injection 23

24 Agenda > Brief LimeWire UI History > Plan a new interface > Flesh it out (Guice) > Work with real data (Glazed Lists) > Make it pretty (JXLayer, > add a web browser! (MozSwing) 24

25 Glazed Lists > EventList Backed by java.util.list Can be wrapped by other Glazed Lists Fires events when changes occur to list > ThreadSafeList Handles locking > SortedList Tied to TableColumns to initiate sort > FilterList Tied to a JTextField 25

26 Creating the TableModel eventlist = GlazedLists.threadSafeList(new BasicEventList()); MatcherEditor matcher = new TextComponentMatcherEditor( filtertextfield, new FileInfoFilterator()); filterlist = new FilterList(eventList, matcher); sortedlist = new SortedList(filterList, new FileComparator()); tablemodel = new EventTableModel(sortedList, new FileTableFormat()); 26

27 DEMO Glazed Lists 27

28 Agenda > Brief LimeWire UI History > Plan a new interface > Flesh it out (Guice) > Work with real data (Glazed Lists) > Make it pretty (JXLayer, > add a web browser! (MozSwing) 28

29 Feedback > Overlays, Notifications and Feedback GlassPane, JLayeredPane, ToolTips, Modal Dialogs > Problem Layer clashing Calculating location of subcomponent in frame Visibility when subcomponent is hidden/shown 29

30 JXLayer > Part of SwingX project > GlassPane for Components > Encapsulates layers from rest of project > Potentially faster with less repainting than JLayeredPane > TS-4454 The Magic of the JXLayer Component 30

31 OverLays using JXLayer LockableUI overlayui = LockedUI(); JXLayer jxlayer = new JXLayer(scrollPane, overlayui); jxlayer.getglasspane().add(new WelcomePanel()); jxlayer.getglasspane().setvisible(true); 31

32 DEMO JXLayer 32

33 Agenda > Brief LimeWire UI History > Plan a new interface > Flesh it out (Guice) > Work with real data (Glazed Lists) > Make it pretty (JXLayer, > add a web browser! (MozSwing) 33

34 Painting Components > Subclass the Component or ComponentUI > Override paintcomponent ( ) > Problem Subclassing for the sake of L&F Difficult to maintain Impossible for Graphic Designers to implement or change the L&F 34

35 SwingX Painters > Decorate components rather than subclass > Create new components only for logical changes > Setting a painter on a JXComponent setbackgroundpainter(painter painter) setforegroundpainter(painter painter) > Painters ShapePainter RectanglePainter CompoundPainter (lets you combine painters) More... 35

36 Before Painters Remember this ugly page? 36

37 Applying Painters filtertextfield = new JXTextField(); filtertextfield.setbackgroundpainter(new TextFieldPainter());... 37

38 Creating a Painter public class TextFieldPainter extends RectanglePainter { private Color background = Color.decode(#ffffff); private Color bordergradienttop = Color.decode(#616161); private int arcwidth = 13;... public TextFieldPainter() { Paint borderpainter = new GradientPaint(0, 0, bordergradienttop, 0, 1, bordergradientbottom); setrounded(true); setfillpaint(background); setroundedwidth(arcwidth); setroundedheight(archeight); setborderpaint(borderpaint); 38

39 > Part of JSR-196 Application Framework > Graphic Designer friendly > private Color private Color private Color private int private int archeight; public TextFieldPainter() { Application.getInstance().getContext(). getresourcemap(appframe.class).injectfields(this); } 39

40 AppFrame.properties... # Painter for rounded TextField TextFieldPainter.background = #ffffff TextFieldPainter.backgroundGradientTop = # TextFieldPainter.backgroundGradientBottom = #f3f3f3 TextFieldPainter.arcWidth = 13 TextFieldPainter.arcHeight =

41 Painters > SwingX Painters > Poor Man's CSS Let Graphic Designers paint the graphics! Nimbus? (TS-5579) javacss.dev.java.net 41

42 DEMO Painters 42

43 JXTextField > We cheated, there is no JXTextField! public class JXTextField extends JTextField { private Painter<JTextField> backgroundpainter; public JXTextField() { setopaque(false); } public void setbackgroundpainter(painter painter) { this.backgroundpainter = painter; } protected void paintcomponent(graphics g) { if(backgroundpainter!= null) backgroundpainter.paint((graphics2d) g, this, getwidth(), getheight()); super.paintcomponent(g); 43

44 Agenda > Brief LimeWire UI History > Plan a new interface > Flesh it out (Guice) > Work with real data (Glazed Lists) > Make it pretty (JXLayer, >... add a web browser! (MozSwing) 44

45 Integrating a Web Browser > JWebPane??? Still no browser available in the JDK > LimeWire SWT Native Browser Used SWT_AWT_Bridge Only worked on Windows and Linux OSX support on SWT 3.5? 45

46 SWT_AWT Problems > Uses Native OS browser Uses user settings > Threading complexity 2 different EDTs to worry about > Limited customization No DOM interaction No JavaScript calls Limited set of Listeners 46

47 MozSwing > MozSwing == XULRunner == Firefox JavaScript <~~~> Java interaction Hooks for DOM Component swapping (ie Downloader) > Behaves as separate install Allows you to customize plugins Doesn't affect user's FireFox install > Links 47

48 Creating MozSwing MozillaPanel browser = new MozillaPanel(); add(browser, BorderLayout.CENTER); browser.load( ); 48

49 Custom Downloading // lookup the preferences service by contract id nsiprefservice prefservice = nsiprefservice.class); prefservice.getbranch( browser.download. ).setboolpref( usedownloaddir, 1); prefservice.getbranch( browser.download. ).setintpref( folderlist, 2); prefservice.getbranch( browser.download. ).setcharpref( dir, downloaddir); prefservice.getbranch( browser.download.manager. ). setboolpref( showwhenstarting, 0); prefservice.getbranch( browser.download.manager. ). setboolpref( showalertoncomplete, 0); //prevent the save or open dialog from prompting for these mime types prefservice.getbranch( browser.helperapps.neverask. ). setcharpref( savetodisk, MIME_TYPES); 49

50 Summary > Plan a new interface Sketch, brainstorm, paper mocks, start small > Flesh it out The less logic the better > Working with real data Dependency Injection helps > Make it pretty Painters Painters Painters! 50

51 Links > LimeWire is Open Source! 51

52 Sam Berlin Michael Everett Lime Wire LLC Lime Wire LLC TS