Re: List items with variable heights - Catalin [API Guru] - com.googlegroups.google-desktop-developer

12 messages in com.googlegroups.google-desktop-developerRe: List items with variable heights

From	Sent On	Attachments
Nick	16 Apr 2008 08:23
Teo	16 Apr 2008 09:30
Nick	16 Apr 2008 10:18
Nick	16 Apr 2008 13:46
amer pcs	16 Apr 2008 18:17
Catalin [API Guru]	16 Apr 2008 22:21
Nick	17 Apr 2008 11:20
Nick	17 Apr 2008 12:57
Catalin [API Guru]	17 Apr 2008 13:51
Nick	17 Apr 2008 14:22
Catalin [API Guru]	17 Apr 2008 21:31
Catalin [API Guru]	17 Apr 2008 22:12

Subject:	Re: List items with variable heights
From:	Catalin [API Guru] (cata...@gmail.com)
Date:	04/17/2008 09:31:23 PM
List:	com.googlegroups.google-desktop-developer

Well, the good news is, you can create your own objects in C++ and put them in the gadget through activex. Here is an article that will help you get started: http://code.google.com/support/bin/answer.py?answer=76586&topic=13819

On Apr 18, 12:22 am, Nick <nick...@gmail.com> wrote:

I'm sure that the control was on top of the edit.

On my machine, even with the same font & font size the edit still displays differently than the label. I have clear-type enabled, and the edit box definitely has font smoothing and a slightly smaller kerning between the characters than the label control does. It isn't always a drastic difference, but it is enough to cause the wrap to happen at times when it shouldn't...and it isn't constant (I've tried compensating for the margin differences).

I can recreate it and attach screen shots or the .gg if you're interested.

I'm back to playing around with the ContentItems now (they're close enough to what I want that I could maybe make them work). I attempted to set the gddContentFlagManualLayout in the contentArea, figuring that I could just figure out where to put them on my own. Unfortunately while they draw great, I can't figure out how to get the height out of them, so I still can't place them intelligently when some have 1 line and others have 2.

My gadget is going to be very Windows PC specific, I've gotten the impression that gadgets used to be via COM or ActiveX or some non JavaScript/XML technology (there are .idl files in the SDK). I haven't found may references to it in the docs on the site however. If I could create my own objects in C++/.NET/etc. and had access to the HDC myself, I would have been done with this yesterday...any thoughts on where I might find information on going that route? A small sample project would be ideal.

On Apr 17, 3:51 pm, "Catalin [API Guru]" <cata...@gmail.com> wrote:

Hi Nick,

The behavior of the first workaround (adding an item over an edit box) seems weird. I haven't tried it out myself yet. Are you sure you set it over the edit element not under it ? You have to declare it in the xml after or create it in js later than the edit box you are trying to cover. The IdealBoundingRect bug is known and will probably get fixed. It usually works if you call it more than once, or if you add a timer as you have. The rendering in an edit element and label element is the same as long as you set both the font and size attributes the same. There may be a different margin for the 2 controls, but that should always be the same (so just add/substract a value to the idealBoundingRect dimensions). I'll look more into it later and provide some code example too if I get it to work.

Catalin.

On Apr 17, 10:57 pm, Nick <nick...@gmail.com> wrote:

Ok, so I found a bit of a workaround. I go through and create the controls and set their text, and create an editbox for each control I want to size. I then set a timer for 1ms, and do all of the layout then. Thus far, the layout seems to be happening before the controls actually get drawn for the first time, so I'm not seeing any jumpy behavior.

The problem I'm having with this is that the edit box & label boxes obviously have different drawing code. When I set them both to a size of 8, the edit control has smaller characters, resulting in it sometimes giving me a height that holds one line, when the label field really needs two.

This is getting very frustrating...I'm not a JavaScript programmer by trade (I do mostly C/C++). I'm tempted to just create myself an ActiveX control and just do everything myself...would that work? I didn't really want to have to go that route, but the APIs seem to be very limited at this point unless you want a cookie-cutter gadget that doesn't have too many elements/lists.

On Apr 17, 1:20 pm, Nick <nick...@gmail.com> wrote:

I wasn't able to get option 1 to work. No matter what I put on top of the edit box, I could still select & move the text...even if the object wasn't transparent.

For option 2, I'm not having any luck due to a bug in the IdealBoundingRect. It only appears to work when the label is created at design time with a width. If I attempt to append the element, the IdealBoundingRect always assumes that I have a width of 1. This is easy to reproduce. by adding the following to line 25 of the IdealBoundingRect sample. editbox.width = 80; // This causes a problem. It is still sized as if it was 160 wide, even though we changed it to 180. You end up with a bounding box of 142x26.

Would anybody be willing to attempt to produce some sample javascript that can determine the height given the width & text?

Here is what I have that isn't working:

lblText.innerText = "Testing string that is long enough to wrap over to the next line.\nnewline";

var editSizingLabel = divBody.appendElement( "<edit/>" ); editSizingLabel.multiline = true; editSizingLabel.wordWrap = true;

editSizingLabel.x = 0; editSizingLabel.y = 0; editSizingLabel.width = lblText.width; editSizingLabel.height = 20; // This shouldn't matter, it is what I want to change editSizingLabel.size = lblText.size; // I want the text size to be the same as the label editSizingLabel.value = lblText.innerText; var rect = editSizingLabel.idealBoundingRect;

debug.trace( "size " + rect.width + " x " + rect.height ); // This always reports a width of 12 lblText.height = rect.height;

On Apr 17, 12:22 am, "Catalin [API Guru]" <cata...@gmail.com> wrote:

Hi Nick,

The control problem is mainly because the content area is from way back, before the basicElement and it's derivates were even added. All of it's functionality can be reproduced with lists or divs. As for your problem I see 2 workarounds: 1. Use readonly edit boxes and put a transparent element over them (an empty div, or transparent image if the div doesn't work) to make it non selectable. This will however have some complications if you need a transparent background for your elements. 2. Use normal labels and have an invisible (or outside the viewing area) edit box. Then make a function to determine the number of lines a label uses by copying the label's text inside the invisible edit box and using the idealBoundingRect property of that edit. For the sake of argument and since I've given the downside to the first solution, this solution uses more CPU, although it shouldn't be noticeable.

Hope this helps, Catalin.

On Apr 17, 4:17 am, amer pcs <amer...@yahoo.com> wrote:

Nick <nick...@gmail.com> wrote:

Thanks for the quick response. I was hoping for a bit more control over what controls get added. It looks like the content items just take some strings and format them according to 3 predefined methods. I'm trying to create a list item that looks like:

<1 or 2 line string> <1 line string, italics>

Thanks, -Nick

On Apr 16, 11:31 am, Teo wrote:

Hi, i think the gadget you're referring to uses something called contentArea. It contains '*ContentItem's* which vary their heights relative to the text within them.

Thanks, Teo

On Wed, Apr 16, 2008 at 6:23 PM, Nick wrote:

I'm wanting to create a list with variable lengths. I know it must be possible since the Google created news gadget does it. It is easiest to see if you undock it so some news entries are one line and others are two. The one line items aren't as tall.

I tried doing this by not creating a list, but instead just having a div with the items in it, which leads me to my second question, how do I determine the ideal height for a label? I can do it for an edit box, but don't want the text to be editable/selectable. I was able to make it non-editable, but not non-selectable.

--------------------------------- Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now.-
Hide quoted text -

- Show quoted text -- Hide quoted text -

- Show quoted text -