About Listbox & ItemListbox

[Dalon]

Hi!

This seems to be a good solution and I want to youse it as well. But, unfortunately, my whole ui part is scripted in lua. How would you make that new FormattedListboxItem available in lua? ^^

Edit: At the moment I wrote a simple "AddChatboxItem(windowName, text)" which creates the FormattedListboxItem for me in c++ and adds it to the listbox. It is one way to do it but I feel dirty doing it like this xD Wrapping the class for lua would be the better idea. Btw., is there any chance to get this useful class implemented in one of the next CEGUI versions? O:)

[siugar]

Hi CE,

It is my first time to ask the question here.
I read lots of discussion here but I still have some questions.
I am using cegui 0.75 and I would like to create a game chat ui which is almost like the requirement in this post. Beside, I need to add some clickable text then the user can click the text in the chat ui to open a item info like most games do.
After reading this post, my conclusion is to use ListBox + ListBoxTextItem and I notice ListBoxTextItem already supported formatted text now.
I read another newer post viewtopic.php?f=2&t=5129 and viewtopic.php?f=10&t=5353&p=25553&hilit=listbox+text+color#p25553 .
The posts mentioned about how to implement clickable text.In the posts, you said ListBoxTextItem will be obsolete in 0.8 and the click event can't be handled by
ListBoxTextItem. You suggest to use ItemEntry but as I know ItemEntry doesn't support formatted text? I am confused for these post because I need a way for game chat ui with formatted text and clickable text.
Could you give me the suggestion for how to implement it in a easier way? I am not sure. Maybe I don't need to care about 0.8.0 because I am using 0.7.5.
At the moment, I have read lots of posts and still can't make a conclusion to implement it.

[CrazyEddie]

The old style lists and list items will remain in 0.8.x because we did not get around to making the replacements.

ItemEntry based items do support the text formatting tags (the only widget types that do not support the text formatting tags are widgets that support text entry).

CE.

[siugar]

Hi CE,

Thanks for the reply and now I can use display format tag text with "itementry(LookNFeel is "ListboxItem") + itemlistbox".
There are still some problems.
When I input the long text, the horizontal scroll bar displays and I can't force it invisible. Even though I use "setShowHorzScrollbar(false)"
The text is too long and I hope the text can word wrap instead of extending out of the window.

Could you give me some suggestions?

[CrazyEddie]

You may have to make a new skin definition for the item, if you're not already doing that. Perhaps one with a fixed size, in order that you can use the text formatting (such as wordwrap and such). I'm not 100% certain, I'll run a couple of tests tomorrow and get back to you, perhaps with an example if I decide it's necessary

CE.

[CrazyEddie]

Ok, I've looked a bit closer at this (though still quite briefly), and it seems that all is not as flexible and easy as what we might like with ItemEntry when used with formatting tags and / or text alignment formatting. I think some changes could be made to the looknfeel xml to mitigate some issues, but certainly not make for a general purpose reusable 'one size fits all' item (I guess it's a case of not every part of the system getting updated totally when some new facilities were added).

The problem as it stands right now is that the looknfeel definitions are using font metrics to decide the size of an item, but the font knows nothing of formatting tags nor alignments. So the size is always reported back as being the width of the string (with formatting tags considered as plain text) and the height of one line of text. I think the best solution in the long term for these types of issues is to allow the looknfeel system access to the formatted extents of the text, this does not help you in the mean time though.

One option, of course, is to create a subclass of ItemEntry or - probably a better choice - a new WindowRenderer for ItemEntry, such that it does not access the looknfeel to get the item size, but rather calculates the size itself - I think this is currently likely to give the best results overall. I could try and make an example of this, though it may not be for a few weeks. A better choice might be if you made a start and ask for help if you get stuck once you have something semi-working

Another option is to continue to use the older style Listbox and CEGUI::ListboxItem based content, if that was working for you. I do not think it will be removed from the library for a while yet (definitely not for 0.8, and 0.9 is probably a year or more away once 0.8 is finally released).

Sorry not to be able to give more positive - or at least really easy - solutions

CE.

[siugar]

CEGUI::ListboxItem is fine but I need to put the link and you said ListBoxTextItem can't support the click button, right? That's why I need to use ItemEntry.

I am creating a new windowrenderer "FalagardItemEntry1" for item entry. I can change the function FalagardItemEntry1::getItemPixelSize() to make the size change but I don't know how to make the text wordwrap. Could you give me the suggestion again?

Hope I don't need to rewrite too much code about the widget of CEGUI.

[siugar]

BTW, I tried to add a static text in the itementry with the new renderer FalagardItemEntry1 and the text still can't wordwrap.

[CrazyEddie]

Sorry, yeah, the situation with 'link buttons' in the original Listbox is not ideal - I forgot that you said you wanted those

WordWrap and other formatting is supported at various levels - one being the looknfeel level (every TextComponent you add in a look and feel automatically supports all the formatting and alignment options, either being set directly in the looknfeel xml or being sourced from a property).

This being said, a brief look indicates that extents are not exposed from the TextComponent class (though are from the FormattedRenderedString interface, so it's a really easy thing to add that). So, that could be a fly in the ointment (but I will add code to expose these extents), but not something that is impossible to get over.

Basically all you need to be doing in the window renderer in the getItemPixelSize is to return the pixel width of the parent window[1], and the vertical extent of the item text (after formatting). The issue is that, as mentioned, if you were to access the WidgetLookFeel to get to a TextComponent that is the content text, you can't access the extents. So the solutions there are to add some simple code to TextComponent to access the extents (I will adding this in mercurial next weekend, most likely) or set things up similar to what is in the StaticText window renderer - i.e manage a FormattedRenderedString directly. Simples, right?!

To conclude, I know this likely sounds terribly complicated, especially so if you're not totally comfortable with CEGUI internals, though it's quite simple once you have the confidence to do it - perhaps 100 lines of code in total, depending on which approach you take, and if you take to copying what StaticText does, 99% of what you need to do is copy & paste (though that's ultimately the more complex approach).

CE.


[1] The ItemEntry parent should be a content pane of some kind and should be equal to the width of the "ItemRenderArea" named area of the ItemListbox - if that does not work, travel up the hierarchy until you find an ItemListbox and access the "ItemRenderArea" named area of the assigned looknfeel directly.

[siugar]

There are lots of questions
Before your previous reply, I add a static text in the item entry and set the property of static text for wordwrap and it's ok. But I change the implementation as what your mentioned so I am not sure if it's working later. I think it's not the first priority.
The first priority is now I can't see any text:
I choose the easier way to get the size for getItemPixelSize as the link. https://docs.google.com/open?id=0B-i1YK ... RkMjNmNTUz

1.I wrote a new renderer and I rewrote the function getItemPixelSize as you mentioned.
2.As the code ( from the above ), get the extends of TextComponent as the following code.
float TextComponent::getVerticalExtent() const
{
return d_formattedRenderedString->getVerticalExtent();
}

const TextComponent* ImagerySection::getTextComponent(int i) const
{
if(i>=0 && i<static_cast<int>(d_texts.size())) return &(d_texts[i]);

else return 0;
}
3. get the width of the parent of the itementry
Finally, I can't see the text.
I notice the variable "height" is always zero and I think it's the main problem though I don't know why.

There are another problem. The code is unstable and it often crashes on the line as the link above("vector subscript out of range") although I add very less code as you see.
I am not sure if I get the incorrect variable in the incorrect time ( maybe it's not initialized yet.)
I notice another problem.
When I call the function "setText" of ItemEntry from lua and I get the error "There is no Property named "text" available in the set.
I look into the ListboxItem of TaharezLook.looknfeel and there is a textcomponent in ImagerySection (the name is "label"). I don't know why I get the message. I guess that's why I can't see the text. If I use statictext ( before implement as your method), I can see the text.

Please give me suggestion again. >_<

[CrazyEddie]

I spent a couple of hours playing around with this myself. There were a few PITA things that hit me, and that made it more complex that what I might have hoped. Anyway, what I came up with was this:

Patch to add some functions and what not, this will be similar to what you added yourself, so perhaps you can skip this

Code: Select all

diff -r 24f214046285 cegui/include/falagard/CEGUIFalImagerySection.h
--- a/cegui/include/falagard/CEGUIFalImagerySection.h   Sat Oct 01 08:16:22 2011 +0100
+++ b/cegui/include/falagard/CEGUIFalImagerySection.h   Mon Nov 07 14:22:36 2011 +0000
@@ -239,6 +240,13 @@
         */
         void writeXMLToStream(XMLSerializer& xml_stream) const;
 
+
+        //! return number of TextComponents in the ImagerySection.
+        size_t getTextComponentCount() const;
+
+        //! return a reference to a TextComponent (via index).
+        const TextComponent& getTextComponent(const size_t idx) const;
+
     protected:
         /*!
         \brief
diff -r 24f214046285 cegui/include/falagard/CEGUIFalTextComponent.h
--- a/cegui/include/falagard/CEGUIFalTextComponent.h   Sat Oct 01 08:16:22 2011 +0100
+++ b/cegui/include/falagard/CEGUIFalTextComponent.h   Mon Nov 07 14:22:36 2011 +0000
@@ -235,6 +235,12 @@
         */
         void setFontPropertySource(const String& property);
 
+        //! return the horizontal pixel extent of the formatted rendered string.
+        float getHorizontalTextExtent() const;
+
+        //! return the vertical pixel extent of the formatted rendered string.
+        float getVerticalTextExtent() const;
+
     protected:
         // implemets abstract from base
         void render_impl(Window& srcWindow, Rect& destRect, const CEGUI::ColourRect* modColours, const Rect* clipper, bool clipToDisplay) const;
diff -r 24f214046285 cegui/src/falagard/CEGUIFalImagerySection.cpp
--- a/cegui/src/falagard/CEGUIFalImagerySection.cpp   Sat Oct 01 08:16:22 2011 +0100
+++ b/cegui/src/falagard/CEGUIFalImagerySection.cpp   Mon Nov 07 14:22:36 2011 +0000
@@ -28,6 +28,7 @@
 #include "falagard/CEGUIFalImagerySection.h"
 #include "CEGUIPropertyHelper.h"
 #include <iostream>
+#include "CEGUIExceptions.h"
 
 // Start of CEGUI namespace section
 namespace CEGUI
@@ -308,4 +309,18 @@
         xml_stream.closeTag();
     }
 
+    size_t ImagerySection::getTextComponentCount() const
+    {
+        return d_texts.size();
+    }
+
+    const TextComponent& ImagerySection::getTextComponent(const size_t idx) const
+    {
+        if (idx >= d_texts.size())
+            CEGUI_THROW(InvalidRequestException(
+                "ImagerySection::getTextComponent: index out of range."));
+
+        return d_texts[idx];
+    }
+
 } // End of  CEGUI namespace section
diff -r 24f214046285 cegui/src/falagard/CEGUIFalTextComponent.cpp
--- a/cegui/src/falagard/CEGUIFalTextComponent.cpp   Sat Oct 01 08:16:22 2011 +0100
+++ b/cegui/src/falagard/CEGUIFalTextComponent.cpp   Mon Nov 07 14:22:36 2011 +0000
@@ -416,4 +416,14 @@
         return d_bidiVisualMapping->getTextVisual();
     }
 
+    float TextComponent::getHorizontalTextExtent() const
+    {
+        return d_formattedRenderedString->getHorizontalExtent();
+    }
+
+    float TextComponent::getVerticalTextExtent() const
+    {
+        return d_formattedRenderedString->getVerticalExtent();
+    }
+
 } // End of  CEGUI namespace section

Probably of most interest is my getItemPixelSize implementation, which is as follows:

Code: Select all

    Size FalagardFormattedItemEntry::getItemPixelSize() const
    {
        // get WidgetLookFeel for the assigned look.
        const WidgetLookFeel& wlf = getLookNFeel();

        Size sz(0, 0);

        Window* par = d_window->getParent();
        while (par && !dynamic_cast<ItemListbox*>(par))
            par = par->getParent();

        if (par)
            sz.d_width = static_cast<ItemListbox*>(par)->
                getItemRenderArea().getWidth();

        const ImagerySection& is = wlf.getImagerySection("label");

        if (is.getTextComponentCount() > 0)
        {
            d_window->invalidate();
            d_window->render();
            const TextComponent& tc(is.getTextComponent(0));
            sz.d_height = tc.getVerticalTextExtent();
        }

        return sz;
    }

The nastiest part of this hack is the fact we invalidate and render the window in the getItemPixelSize function. This is not because we want to see it in there, but rather the formatting is done (very) lazily just before rendering. So this obviously leads us to another improvement that could be made which is to add a function / refactor TextComponent a bit to allow us to directly cause the formatting to happen.

Anyway, I tested this a little bit, with the formatting tags and word wrapped alignments and such and it was working ok for me. I obviously had to set the desired formatting in the looknfeel XML file (I used tag <HorzFormat type="WordWrapLeftAligned" /> for example, but you might want something more flexible than a hard setting like that).

There's likely a lot of other ways you could improve this too; it's just a starting point

HTH

CE.

[siugar]

Hi CE,

After using your sample code "getItemPixelSize", it is working without any problem.

Thank you for the reply and the sample code which you spent much time for.