Friday, November 28, 2003


Source: Tomalak's Realm

Boxes & Arrows: Natural Selections: Colors Found in Nature and Interface Design. Perhaps no other design element has as much influence on how we feel in a space (a website, a home, etc.) as color. Colors can instantaneously change our moods and alter our opinions. They can make us comfortable, put us in a state of awe, or get us excited. [Tomalak's Realm]

 


3:55:44 PM    trackback []     Articulate [] 

Source: Curiouser and curiouser!

Fingerprints of Unhappy Companies All Look the Same.

John R. Brandt writes the column Brandt On Leadership for Industry Week. His latest article Come On, Get Happy, is another gem. Brandt says,

It never ceases to amaze how completely the managers and employees of unhappy companies -- whether actively failing or merely mired in mediocrity -- can convince themselves that their troubles are unique.

Invariably, I'm told that their predicament is due to: difficult market conditions beyond their control; wholesale customer defections based on currency fluctuations or unfair trade; a particularly toxic or strangled culture that prevents change.

Please.

Brandt claims all unhappy companies look alike sharing five fingerprints:

  1. A belief that employees are dangerous and lazy.
  2. A conviction that customers cannot be trusted.
  3. A focus on policies, not principles.
  4. An obsession with today, not tomorrow.
  5. Leadership in all the wrong places.

Brandt does a good job elaborating on each of the five fingerprints. Take a look. While you're there, see if you recognize any of those fingerprints for your company or project.
[Reforming Project Management]

I just love Hal's blog.  Every post is a gem.

[Curiouser and curiouser!]
2:35:44 PM    trackback []     Articulate [] 

Don't Wrap and don't Clip. Better using a (web) Tooltip.

When the desired width of a Web DataGrid column and the size of the text don't get along very well, one of two things happens. Either the column is automatically enlarged to include all the text or the text wraps to the next line.

For some reason--it could just be me--I normally happen to dislike both. So I made a point to figure out a way to add an ellipsis to the text after a certain size and use a tooltip. Yep, exactly the same behavior you get for free from a WinForms treeview. By making some reasonable assumptions, I did it. Here's how. Assumptions are:

  • The DataGrid has explicit font information like font name and size in points
  • The column indicates its exact width in pixels

The first step is defining a ItemDataBound event handler to capture the string being displayed in the cell. This string is the full text for the cell--the one you have to clip and adorn with a tooltip. Based on font information, you calculate the width of the text in pixels and compare that to the expected width of the column. If the text is too large for the column, you add an ellipsis and wrap the text in a tag with a proper title attribute.

The code below demonstrate the key steps.

void ItemDataBound(object sender, DataGridItemEventArgs e)
{
   // Get the string to be displayed
   string title = GetTheString();

   // Returns the updated text for the specified column
   string newText = AdjustTextForDisplay(title, 1, grid);
 
   // Set the text including the tooltip when necessary
   e.Item.Cells[1].Text = newText;
}

string AdjustTextForDisplay(string text, int colIndex, DataGrid grid)
{
   // Calculate the dimensions of the text with the current font
   SizeF textSize = MeasureString(text, grid.Font);
 
   // Compare the size with the column's width 
   int colWidth = (int) grid.Columns[colIndex].ItemStyle.Width.Value;
   if(textSize.Width > colWidth)
   {
      // Get the exceeding pixels 
      int delta = (int) (textSize.Width - colWidth);
  
      // Calculate the average width of the characters (approx)
      int avgCharWidth = (int) (textSize.Width/text.Length);
  
      // Calculate the number of chars to trim to stay in the fixed width (approx)
      int chrToTrim = (int) (delta/avgCharWidth);
  
      // Get the proper substring + the ellipsis
      // Trim 2 more chars (approx) to make room for the ellipsis
      string rawText = text.Substring(0, text.Length-(chrToTrim+2)) + "...";
  
      // Format to add a tooltip
      string fmt = "{1}";
      return String.Format(fmt, text, rawText);
   } 
   return text;
}

SizeF MeasureString(string text, FontInfo fontInfo)
{
   SizeF size;
   float emSize = Convert.ToSingle(fontInfo.Size.Unit.Value+1);
   emSize = (emSize==0 ?12 :emSize);
   
   Font stringFont = new Font(fontInfo.Name, emSize);
   Bitmap bmp = new Bitmap(1000, 100);
   Graphics g = Graphics.FromImage(bmp);
 
   size = g.MeasureString(text, stringFont);
   g.Dispose();
   return size;
}

Here's a screenshot. (Hopefully...)

[WebLogs @ ASP.NET]
12:33:50 PM    trackback []     Articulate []