Saturday, June 30, 2012

Do You Know What Day It Is?



Have you ever sat in on a meeting like this?




Person 1:  The customer wants a green background on this page.



Person 2: Do we know they're going to stick with green?  Maybe we need a configuration option for background color.



Nobody wants to disagree and the manager never comes to these boring design meetings so there is quiet before somebody says...



Person 3: A configuration option just for background color is kind of weak, we'd be better off allowing choices for all colors.



Person 4: Is this an instance level configuration, or do we let the end-user pick her color?



Person 2 (the original troublemaker): well it really has to be instance level, but the end-user can override, that way we satisfy all possibilities.



From here the debate continues until they've decided to create a skinning system with lots of UI color pickers and other stuff, and they wrap up with:



Person 6: Well this sounds great, but what should we make the default background color?



...and nobody can remember that:




The customer specifically asked for green, only green, and nothing but green.



Is this an exaggeration?  Perhaps, but I've sat in meetings that come close.  Seems to me that I've sat in meetings that were worse, but I'd hate to slander anybody, and being as I'm not perfect myself, we'll leave that one alone for now.



So anyway, there were many things going wrong in that meeting, but we're going to stick with the simple fact that nobody there knew this one simple rule, the first rule of system design, which should be burned into your brain, which you should repeat before and during any design or architecture meeting:





Today's Constant is Tomorrow's Variable.



This is not so much a rule as an observation, but when you realize that it is true on almost any level, it can become a guiding rule, something that actually lets you make decisions with confidence, decisions that turn out to work well.



The problem is that most people in technology don't know what day it is.  They make one of two mistakes, they either:


  1. constantly plan, estimate, design, or program for tomorrow's variable when all they need to do is handle the simpler case of today's constant.

  2. or they don't realize that when "the customer changed the requirements!!!" the customer is doing what everybody does, taking something simple from yesterday and making it a bit more complex today.


So you can turn this around and say, "Everything I do today will get changed tomorrow.  It will become more complicated.  Everything I think is fixed or constant will float or become a variable."













What It Means



We've all learned (hopefully) that you don't embed constants in code because it makes the code difficult to change.  We define the constants in headers, or we accept all values from outside sources as parameters.  This makes the code more flexible, and it is a good thing.  The code is more robust, it can handle more cases without breaking or needing alteration.



The trick to using Ken's first and only rule of system design, "Today's Constant is Tomorrow's Variable" is to recognize the many forms of "constants" that we build into our systems in hard-to-reach places, making it hard to change them when tomorrow comes and they are no longer fixed and constant.



Another trick to using the rule is to always know what day it is.  Most of what I do today will involve features that may never change.  It is extremely easy to see how they might change, but impossible to know for sure.  So we leave them constant for today.













Back To That Meeting




Let's go back to that meeting we started with.  Here is how it goes when somebody knows that "Today's Constant is Tomorrow's Variable."





Person 1:  The customer wants a green background on this page.



Person 2: Do we know they're going to stick with green?  Maybe we need a configuration option for background color.



Our Hero:  We don't know they are going to stick with green because we never know if any customer is ever going to stick with anything, and we all know that today's constant is tomorrow's variable.  However, I hope we've put the styles into a style sheet and not embedded them directly into the HTML so we can change it later if we have to, right?





Somebody mumbles that yes in fact we do use style sheets, and the meeting moves on.













Is That  Lame Example?



That's a pretty lame example really, who doesn't use style sheets?  And who embeds constants in their code?





Well kiddies it turns out that we didn't always use style sheets.  When I got interested in web pages CSS was still optional (Yes! Believe it!) and you put your style information directly into tags, which was basically embedding constants into code, and it didn't take long before you intuitively realized this was not right, and you discovered CSS.  





It is amazing how often that basic pattern repeats itself, trying to identify what you thought was a constant, realizing it is "buried in code", and turning it into a variable.













Today's Post Is Tomorrow's Promise





I'll be posting a lot more on this subject, using a very reliable and strict schedule based on a host of variables that mostly comes down to whenever-the-hell-I-feel-like-it(TM).  





Cheers.



Tuesday, June 26, 2012

ListUIs: Adding Decorations to Cells

This is a follow-up to my previous article: TreeUI's: Adding Decorations to Cells.

What is a "Decoration" again?

A decoration is a UI component overlayed inside or on top of another component.

Muted-color minimal buttons/decorations are becoming increasingly common in modern UIs. This is great way to add extra functionality for power users without adding too much visual clutter.

Here is a screenshot of part of my current Firefox window. There are 6 decorations showing:

  • The star bookmarks a page.
  • The down arrow presents a list of recent URLs.
  • The circular arrow refreshes the page.
  • The left side of the search field lets me change search engines.
  • The word "Google" is also a decoration indicating what search engine is being used.
  • The right side of the search field commits my search.
  • ... but there are only 3 non-decorative UI elements showing: the URL field, the history button, and the search field. The decorations add a lot of subtle controls in a small space.

    As an accessibility side-note: it's worth mentioning that decorations usually do not receive keyboard focus as you navigate the interface with the tab key. They are second-class citizens when it comes to your window hierarchy. You probably need to provide alternate ways to access these features (menu shortcuts, for example) to help reach a wider target audience.

    List Decorations

    The section above talked about decorations in general, but what are some examples of decorations for list elements?

    Above are search results in a recent youtube query: when you mouse over a thumbnail there is an optional button to add a video to your queue.

    Also you could provide buttons to delete list elements, reload, or show progress indicators.

    On the right is a new-ish decoration for sound files observed on Mac OS 10.7. When you mouse over the graphic: a play button fades in. When you click the play button: the outer ring appears, and the gray arc proceeds clockwise representing the playback of your sound.

    The same playback controls are used for movies, however for movies the controls fade away as soon as you mouse out of the preview area.

    (Traditionally these controls have been presented with a thin horizontal row of controls along the bottom of a sound/movie. I'm not trying to argue that Apple's new circular timeline is any better than a horizontal timeline: both could be presented with overlayed controls.)

    Implementation

    In Swing, JLists (and JTrees) use renderers, where one component is rubber stamped for every element in the list/tree.

    This is a great scalable model (because tens of thousands of elements can safely be rendered without too much overhead), but it lacks mouse input. To implement decorations on a list, I developed the DecoratedListUI. This UI manages multiple ListDecorations, which are rubber-stamp overlays to your existing ListCellRenderers.

    All you have to do is invoke the following:


    ListDecoration[] arrayOfDecorations;
    ...
    myList.setUI( new DecoratedListUI() );
    myList.putClientProperty( DecoratedListUI.KEY_DECORATIONS, arrayOfDecorations);

    Example

    Here is an example that emulates the Mac playback controls with a list of 5 sounds:

    You can download this jar (source included) here.

    (Note: usually I make an effort to keep my jars small in file size so you can easily plug them in to other projects, but in this case: I ended up bundling several megabytes of wav files inside the jar. So while this jar is nearly 2 MB, the code you need is probably less than 100 KB. Sorry for the inconvenience.)

    In this applet: each sound file is an element of a JList. When you select a sound file: decorations appears to play/pause and delete the sound.

    In theory you could make some decorations always visible (this might be especially useful for a loading indicator, or a warning indicator?), but personally I want actionable buttons to be limited in number to keep the interface simple.

    Also, in case you were wondering: the music file icon is a scalable javax.swing.Icon. I noticed in some contexts on my Mac the background had a sort of plastic glazed look and not a radial gradient, but I decided not to fixate on that level of detail. My replicas are never intended to be pixel-perfect copies, just reasonable likenesses.

    And if anyone knows how to reduce the flickering observed in this (and other) applets: please let me know! This does not reproduce when launched as a desktop application, so I'm not sure exactly how to debug this.

    Saturday, June 23, 2012

    Liens pratiques de la semaine

    Vous trouverez dans ce billet une s�lection de liens pratiques autour des technologies Eclipse qui m'ont particuli�rement int�ress�es ces derni�res semaines.   

    Eclipse
    • Angelo Zerr pr�sente le projet Eclipse Libra via trois billets (billet 1, billet 2 et billet 3). Le projet Eclipse Libra fournit un ensemble d'outils pour les applications d'entreprise bas�es sur OSGi. Plus pr�cis�ment Eclipse Libra regroupe les outils du projet WTP et PDE. Dans le cadre des billets d'Angelo, il montre comment construire un WAR � partir d'une application RAP.   
    Java 
    •  Si vous recherchez une biblioth�que Java permettant de lire des vid�os sous diff�rents formats Xuggler peut faire l'affaire. Il s'agit d'un wrapper Java pour ffmpeg.
    • JavaCV est un wrapper Java des principales biblioth�ques qui manipulent du contenu multim�dia (OpenCV, ffmpeg...).
    Divers
    • Un billet tr�s int�ressant qui parle du Cloud pour le d�veloppeur.
    • ownCloud est une solution alternative � DropBox. Cette solution de partage permet tout comme DropBox de disposer d'un client install� sur son poste (Linux, Windows et MAC OS) pour synchroniser des fichiers. ownCloud fournit �galement des modules suppl�mentaires permettant de synchroniser d'autres types de ressources (calendrier, contacts, vid�os...). J'ai eu le m�me coup de c�ur qu'� l'�poque avec Redmine. J'utilise actuellement ownCloud en test mais j'ai du malheureusement d�sactiver le partage de fichier entre utilisateur puisque ce module am�ne � une occupation anormale du processeur. Esp�rons que les prochaines versions stabilisent ce probl�me. A surveiller de pr�s.