Monday, December 18, 2006

Quick Tip Update: Images In Views

Well, I had a couple of questions on how I made that view in my last post. Here it is again, just so we're all talking about the same thing:

It's not such a trick to get this working...more just playing around until you get it looking like you want it. In this case, the view design has four columns. The first is the categorized column which shows the Artist and CD Title. In this case, I'm using it as a "header" of sorts. The second column contains the CD cover image (which is the image resource referenced in the "txt_Image" field on the document) as discussed in the previous post. The third column, which I guess is what people are asking about, is just set with a multi-value separator of "New Line". In order to center the text, I just concatenated the various fields together, with some null values in front. Here's what it looks like in Designer:

There's one more column in this view and this is kind of a trick. Perhaps there is a better way to do this. If so, please let me know. In the design, the number of rows is set to 9. However, the size of the row is determined by the column with the largest text size. In this example, my icons were too big and were being cut off since the rows weren't tall enough. To correct this, I inserted a column at the far end which has a null value. The text properties for this column are important, though, since they control the height. I left the font as "Default Sans Serif" and changed the size to 130. Upon doing this, voilĂ ...the perfect spacing I wanted.

The track listing is provided via an embedded editor. The form that is being used has all of the fields hidden when embedded except for the rich text field that holds the track info. Here is the form in design mode showing the embedded editor and embedded view:

In order to associate the embedded view with the embedded editor, just set the embedded view's Target properties to the same name as the name of the embedded editor. When you do this, clicking on the entry in the view will show the corresponding document in the embedded editor, which in this case displays the track listings. Tre cool! :-)


dogu said...

Excellent explanation! It's amazing what you can do with Notes, a bit of time, and some experimenting! Keep 'em coming.


richard said...

This is fantastic Chris, thanks so much.
Any chance on a future article about how you design client applications for different screen resolutions. I have just finished a database(very much inspired by your examples!). It looks really great at 1024X768 but complete rubbish at 800X600.


Nathan T. Freeman said...

Trackback for richard

Nathan T. Freeman said...

Duh... might include the link, huh?

Chris Blatnick said...

Richard and Doug...Thanks guys! And thanks to Nathan for the pointer to his site...saved me time in writing a corresponding article! :-) And, as Nathan mentions, he'll be showing this in more detail at Lotusphere. Cheers!

Andrei Kouvchinnikov said...

It works fine to show in views, but when I try to print the view out to the printer, all images are printed as 16*16 size icons. Don't remember how it looked on web.

As the images were pictures of employees, the 16*16 image was not good enough, so I ended up creating a LotusScript agent which loops through view and copies picture and person info into a table in a new document. Getting image and creating properly formatted table was done using DXL classes, works pretty fast and the size of the printed pictures is correct.

Chris Blatnick said..., that sounds great! I usually never print, so I didn't think to test that.

Your idea of writing an agent to build a new table for printing is excellent. Perhaps you'd like to share the details on your blog? :-)


richard f said...

Thanks Nathan, very decent of you to write that tutorial,
richard f