Tag cloud in webapp?

Has anybody experiences in programming a tag cloud in a Xojo WebApp?

I think it could work with a canvas, g.DrawString and RealBasic.Rect for each tag to identify the clicked tag. The right boundary of the canvas should be considered to write tags in a new “line” when it doesn’t fit into the remaining space of the canvas.

My wish is to program something like this:

I searched the developer library and this forum. Perhaps someone has already programmed a tag cloud? Or there is a public code snippet I overlooked?

Thanks

Frank

No public code that I’m aware but I just implemented a similar thing for a client project. It turned out to be not that difficult to do.

You have an array of tags. The tags are a class that have the data (caption and tag), width, height and position data. It also has a simple method to draw into the graphics object from the containing canvas.

I’d start off with a canvas subclass. A Tag class and start slow by creating a single tag to view. And then start adding them into an array.

I realize it’s outside of normal Xojo WE coding but this type of layout is exactly what CSS “float:left” is perfect at doing.

You can read more here:

https://css-tricks.com/all-about-floats/

This makes items slide up to the right of other items and “return” to the beginning of the next line if they don’t fit.

I haven’t tried overriding the style of a Xojo WE element to be float:left but it might work if applied to all the tag elements.

Oops, just realized this was web. I have not done this specifically in a web app but I think I would approach it in the same manner.

[quote=236308:@Steve Upton]I realize it’s outside of normal Xojo WE coding but this type of layout is exactly what CSS “float:left” is perfect at doing.

You can read more here:

https://css-tricks.com/all-about-floats/

This makes items slide up to the right of other items and “return” to the beginning of the next line if they don’t fit.

I haven’t tried overriding the style of a Xojo WE element to be float:left but it might work if applied to all the tag elements.[/quote]

Thanks Steve, I know CSS but have no idea how to use it in XOJO WE.

I thought about including a CSS-formated PHP-Skript but don’t think that a click in HTMLViewer could correspond with my webapp.

Thank you Bob, I think I’ll give it a try.

I’ve been playing with it in the last few min and I think I have something… hang on…

It’s surprisingly easy, I’ll be using this in the future. Follow these steps:

  • open the “Scrolling Container” demo WE project
  • create a new Web Style called “floaty”
  • set the style of the SimpleContainer to floaty
  • paste the following style into the app.header:
<style>
.floaty{
float:left;
position:relative !important;
top:0 !important;
}
</style>

then run it.

when the page loads, click “Add Container” multiple times and also try resizing the window.

Note the floating goodness.

Thanks a lot Steven! You made my day :slight_smile:

I modified the “Scrolling container” example project in the way Steven suggested. I use weblabels that are styled by webstyles for displaying the tags. You can download the modified project here:

https://dl.dropboxusercontent.com/u/15373144/ScrollingContainer.xojo_binary_project

You’ll find a method “LabelWidth” to adjust the size of a tag. Thanks to Dave S, see https://forum.xojo.com/4195-autosize-labels-find-text-width/0

Glad you liked it. As I said, I’ll be using it in our stuff as well.

Also, thanks for the LabelWidth link, that looks handy too.

LabelLink is a Desktop method. In Xojo Web, StringWidth is unreliable, because unless your host is a Mac or a PC with all the fonts, Linux hosts have no GUI therefore stringwidth cannot be used.

See http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery instead.

Does anybody know, why I can’t close each embedded webcontainer with the following code?

[code] dim s as string

for i as integer = 0 to ScrollingContainer.ControlCount -1
s = ScrollingContainer.ControlAtIndex(i).Name
ScrollingContainer.ControlWithName(s).close

next i[/code]

I placed a button with the code above to the modified scrolling container example project. But not every embedded control will be closed (“deleted”). I have to press the button several times.

You may want to do

[code]dim s as string

for i as integer = ScrollingContainer.ControlCount -1 to 0 step -1
s = ScrollingContainer.ControlAtIndex(i).Name
ScrollingContainer.ControlWithName(s).close

next i[/code]

Thanks Michel,

that’s working. Great!

the rick here is WHY doe michels work and yours doesnt
if you dont know then you’re no further ahead

Say you start with 5 items
0 = a
1 = b
2 = c
3 = d
4 = e

now in the loop you start at position 0
and remove that one
And you assume that leaves things as
1 = b
2 = c
3 = d
4 = e

BUT it doesn’t !
It leaves them as
0 = b
1 = c
2 = d
3 = e

The next time through the loop you delete item 1 and then have
0 = b
1 = d
2 = e

Now you delete item 2
0 = b
1 = d

And you have missed some items

IF you work backwards from 4 downto 0 you wont have this issue