Sunday, July 22, 2007

Congratulations To ILLEGALLY LOUD...

...on the completion of this Rock School session and a great concert to round it out! Great job you guys!!!

Friday, July 20, 2007

Branding The Action Bar

When you are designing a Lotus Notes client application and are using action bars with your forms and views, you should take care to format the action bar so that it becomes a harmonious part of your design. That is, make sure you use colors and borders that complement the layout of your UI rather than compete with it. If you normally just leave the default settings (especially "System" gray), then I'm definitely talking to you. ;-)

Nathan and I have talked a lot about color palettes, complementary colors and stuff like that in the past, so I'm not going to say anymore about that here. However, I did want to present an idea that might be interesting to you in certain cases.

Sometimes, it is desirable to create a certain "brand" for an application. Perhaps it is a CRM suite or some other application that you want to make a little unique. One way you can accomplish this in a fairly easy and unobtrusive way is to use the real estate of the action bar to display a logo, picture, etc. Here's an example...

A Close Up

Now that's just a quick example I threw together to demonstrate the idea. Normally, I'd use a more subtle color and graphic. Here's an shot from a real application, in this case my modified document library template.

Another Close Up

Adding this image to the action bar is very easy. Probably most of you know that in the Action Bar properties, you can specify an image resource that will be used for the background of the action bar. If you want to align the image along the right edge as I have done here, there are a few requirements:

1. Make sure that the graphics that you place within the image are in the last 1/3 of the total image width.

2. Select "Center Based Tiling" as the Repeat option.

3. Adjust the height of your action bar as necessary.

OK...that first requirement is strange, but it works.

As soon as you overlap 33% of the width, it leads to undesirable behavior like that shown below.

If you want the color of the action bar to show through, make it a transparent graphic. Here's the same example as before, with a transparent image and the background color of the action bar set to a light purple (yeah it's ugly ;-).

If the image is the correct size, then you can re-size the Notes client window and the image will stay right aligned as you do so. It might take a little playing around with at first, but if you follow the three rules above, this can be a neat little trick to add to your client UI design bag.

Have Fun!

P.S. For more action bar fun, check out Kevin Pettitt's much cooler post about Two-Row View Action Bars

Wednesday, July 18, 2007

And Then There Were Two...

And then I was broke... ;-)

Top 5 - Side 1 Track 1 - My Personal List

Off topic but fun...

Being a huge music fan, I have to profess my enjoyment of High Fidelity, not so much for all of the relationship stuff, but for the music store scenes and discussion of music in general, especially any scene with Jack Black in it! ;-) Well, Nathan was watching this movie the other day and started a new meme based on the movie, your top 5 side 1 track 1 tunes of all time. John Head tagged me, so here's my list:

6:00 -- Dream Theater's Awake (Amazing drum acrobatics from Mike Portnoy kick off this album in a dramatic way. One of my favorite DT tracks.)

Hungry Freaks, Daddy -- The Mothers of Invention's Freak Out (Frank Zappa's debut to the world...couldn't leave this out, since it represents the beginnings of an incredible musical legacy. I'd like to imagine that had I been alive at this time, I would be picking this up on vinyl from the record store and running home to throw it on the turntable! ;-)

Used -- Pain of Salvation's The Perfect Element, Part I (This is such an emotionally draining release. A concept album about two people (Him and Her) that have been abused in life, physically and sexually and their experiences as their lives become intertwined. It explores the various facets of a person who is deeply damaged. The opening tune is so visceral, it pulls you in and won't let you go.)

Aces High -- Iron Maiden's Powerslave (Love the subject matter...about the Battle of Britain during the summer of 1940...and the bombastic Iron Maiden sound here.)

Of Sin & Shadows -- Symphony X's The Divine Wings of Tragedy (My introduction to the band...never been the same since.)

How about yours?

OK...Bar Charts In Views...Last Time (I Promise)

Wow...little did I know that posting such an innocent little tip about bar charts in views would spark all the great collaboration between everyone in the community. I made a faux paux in my original post by referring to my technique as Gantt charts while in fact they are really just bar charts. Luckily, this inspired Nathan to both correct me, and better yet, got him to go off and create a real implementation of Gantt charts in Notes views. Ulrich Krause made some of his own modifications to Nathan's work as well. Quite a community effort!

In case you missed it, this isn't just proof of concept, as Warren commented that they are actually using Gantt charts in his company's own internal pipeline database. Very cool! Thanks to everyone for your comments and contributions.

I don't have anything new to add to the discussion myself, but I did want to highlight one other technique that was brought to my attention. Noel Tigcal sent me a sample database that used a neat variation of the idea. Instead of using image resources for the bars, Noel uses the "█" symbol with @Repeat. This allows you to easily change the styling of the bar by modifying the text properties of the column. In the example database, Noel uses Arial Black as the font type.

Quite a smart idea and probably one of the easiest to implement, as you don't have to mess with graphics at all. Nice job, Noel...thanks for sharing!

With that, I'll leave this topic to rest. I'm not 100% convinced that true Gantt charts in Notes views are such a good idea (might be better relegated to a traditional project management tool or to a composite application), but still I hope you see that the underlying technique could have many possible uses. the case you wondered how all this started, you can thanks Mr. Elgort for asking the question. :-)

Wednesday, July 11, 2007

Bar Charts In Views Revisited

I find it interesting that the simple posts around here generate the most interest from the community. This just goes to show that people are continually trying to find those subtle ways to improve the UI of their Lotus Notes client based applications. Either that or we're all lazy! :-D

Since I posted my little tip about Bar Charts in views using color columns, several folks have added some great comments and even shown their own implementations. Rather than rehash their content here, I'll just point you their way. Please check them out since there are some really super ideas that you can use in place of (or to enhance) my contribution.

First up is Theo Heselmans' implementation using image resources. He made some very attractive graphics to highlight his technique. If you don't mind firing up the graphics program and want to perhaps add a little bling to your application, then this is an excellent approach.

Vitor Pereira then picked up the torch and added his take on Theo's technique. This one blew me away because I learned something new. Turns out you can have more than one image in a single column in a view by specifying the column value as a list of image resources. How cool is that!

(P.S. This works with a list of column icon numbers as well. 1:2:3:4:5 will thus yield )

To round it all out, Mr. Kevin Pettitt provides us with a very nice summary of the whole affair.

Neither my technique nor the others mentioned here provide a 100% fool-proof solution for the perfectionist, but they all can greatly enhance the visual appearance of your views where some kind of progress indicator is needed. Try them out and see which one you like the best.

Thanks to Theo, Vitor and Kevin for the posts! Cheers, guys...

Update: Christian Petters shares his thoughts as well.

Update 2: Doh! Nathan smacked me upside the head in the comments and rightly noted that these aren't really Gantt charts but simple bar charts. Gantt charts are used in project planning and help you spatially see relationships and dependencies among tasks ( project manager training is flashing before my eyes). Thus, I have updated the title of this post. Thanks, Nathan...may I have another! :-D

Monday, July 09, 2007

Using Color Columns To Make A Gantt Chart

I love simple solutions. For me, application development is about solving a problem as efficiently and elegantly as possible. Some people like to write code just to write code, but I prefer getting my job done so that my users can do theirs. Today, I wanted to share a quick and simple solution that also looks cool and is very easy to implement.

You've seen several of my applications that make use of color columns. I even blogged about them awhile back. You've all probably also seen an application somewhere along the line that included a view with a "gantt chart". There are a million different ways to go about building this functionality into a view, but I like the solution of using color columns due to their simplicity. Here's an example:

The trick I used here was to create 10 color columns whose values are checked (in increments of 10) against the value on the document that shows percent complete. Here's the formula for the first color column:

@If(PercentComplete >= 10;

and the second:

@If(PercentComplete >= 20;

and so on, incrementing the check by 10 each time. Of course, if you wanted to get more granular, you could create columns in increments of 5 or even 1 (if you are a real glutton for punishment!).

As you can see, if the value of the field is greater than the column being checked, it is colored. The background and text are set to the same color values. If PercentComplete is less than the column we are checking against, the color column resets the background text and color to white.*

If you want to show the actual percentage value in the middle of the chart (as in the picture above), then make column #5 hidden and set column #6 to display the value. In order to make the text of column #6 visible, the preceding column formula is slightly different, setting the text color to black (or whatever color complements your graphic scheme).

@If(PercentComplete >= 50;

That's all there is to it really. Just don't forget to check the "Use value as color" property on your color columns.

Do you have a variation on this or other clever uses for color columns in your apps? If so, please feel free to share with the class. Cheers!

*Notice that this looks less than perfect if you are using alternating row colors. Extra Bonus Points to the person that can figure out how to set the color column to "transparent". If you are using subtle colors for your alternating rows (you should be), then it doesn't look horrible, but it would sure be nice if we could have a little more granular control over this.