About Listbox & ItemListbox

[Impz0r]

Hey there, i've just stumbled over Listbox & ItemListbox in my search for the appropriate class to build a chat box.

I've read some post and the GameChatBox article. And im not quite sure what to use.. hopefully you could point me in one direction.
Heres what i want to achive:

Code: Select all

[Icon][Name][Text]
[Icon][Name][Text]
etc..


So [Icon] have to be an actual image within the size of 32x32 or 16x16 (not decided as of now), [Name] is a String identifier and [Text] is obviously the chat message but should support word-wrapping. Both text components should be able to change their fonts/color.

So as far is i have read the articles right, i'm able to extend a listbox entry to actually contain other controls. Thus i would use the StaticImage for the Icon, StaticText for Name and the Text.

But the question remains, with what Listbox do i meet all the criteria, if any?


Thanks in advance!

Mfg Imp

[CrazyEddie]

I guess the solution here is tied to how you want the wrapping to appear. If you want this:

Code: Select all

+----------------------------+
| [X] [CrazyEddie] This is a |
| wrapped line               |
+----------------------------+

Then a custom ListboxItem where you have additional fields to set the icon, the name and the chat message is the way to go.

If you want this:

Code: Select all

+----------------------------+
| [X] [CrazyEddie] This is a |
|                  wrapped   |
|                  line      |
+----------------------------+

Then it's more suited to an Item entry containing separate sub-windows for the icon and two text fields.

If you intend updating to version 0.7.0 at all, this will be achievable by way of the new text markup support, so you could get option one above simply with the existing ListboxTextItem.

Hope this points you in the right direction

CE.

[Impz0r]

First off, thanks for your answer CE!

I tend to use the first example of yours, because it looks better.

Right now I'm using CEGUI 0.6.3 and i wasn't quite aware that the new Version 0.7 is already available. I've read some posts about it and especially about the font rendering tuning and i was happy to see the new font formating stuff. But I'm a little afraid of changing from 0.6 to 0.7 because my codebase is quite big and I'm not sure how much the new Version will break.

Is there a list or something which states what has changed from 0.6 to 0.7 to give me an idea how much code i have to rewrite? And btw when will it released officially?

Anyways, if I'm going to use ListboxItem I'm not quite sure how to do the "wrapping" so the text starts right beneath the icon. If I'm using a StaticText control i don't see how this is going to happen because its in rectangular form.. am I overlooking something :=?

PS: Is there a pre-version of 0.7 so i may have a look into it?

Thanks in advance!

Mfg Imp

[CrazyEddie]

The 0.7.0 version is not released yet - it's going to be released over this coming weekend, and it's an exciting time for all involved The v0-7 branch in subversion is where the code is at currently - there is no pre-release or unstable package available, although we are hopefully going to start unstable snapshot releases once 0.7.0 is released (basically, as you might guess, at the moment most of our available 'CEGUI time' is being spent on the 0.7.0 code and related things).

It's very hard to gauge the extent of issues that 0.7.0 will cause - there will be issues, this much is certain. The new code is a major change - hopefully it's mostly for the good, but due to the extent of the changes, I think it will take a point release or two for the code to settle back down again while issues are reported and fixed. The porting notes from 0.6.x to 0.7.x are available either on the Wiki or in the updated docs here: http://www.cegui.org.uk/docs/0.7.0/porting6to7.html

If you're using ListboxItem, this is the lightweight, non-window based item (which maybe is confused with ItemListbox? The listbox variant that has Window based items!?). You're correct if you use the ItemEntry based items, the use of embedded StaticText will enforce the second option on you, so you want the old style Listbox using ListboxItem based items. You need a subclass of that which will allow you control over the rendering process - you'll basically be performing the formatting and rendering for the item yourself - the first line part of the message text should be split off (internally, not in reality) and rendered separately from the rest of the text (which can be drawn using regular wordwrapped text beneath).

So, you need a ListboxItem or ListboxTextItem based subclass, that has extra fields so you can set an icon image, a 'user name' text and a message text. You need to override the functions that report the item size and also the functions for drawing.

If I wasn't so tied up with the above mentioned stuff, I would provide a more concrete example, but at the moment I'm otherwise engaged. Regardless, I hope this answer is useful.

CE.

[Impz0r]

Thanks CE for you're rather detailed explanation!

Btw I would like to thank you and you're team member for building such a great GUI. It's by far the best you can get out there.

Anyways, I looked over the porting article and it seems that there has been some changes. I was wondering if i have to rewrite my own XML & Texture factory and if the LookNFeel/Schemes/Layouts have to be adjusted? Because as I'm stated before, I'm afraid that I've to change quite some code to get there where i was with my currently codebase based on 0.6. However I would realy like to have the all new Font renderer

You said that there will be a release of 0.7 over THIS weekend? Wow haven't expected it thus close i will definitely give it a try!
That being said, you also stated that the all new Font renderer would make it much easier to achive the thing i want in just using the ListboxTextItem?
If so I guess I'll wait for the release then..


Thanks in advance!

Mfg Imp

[CrazyEddie]

You said that there will be a release of 0.7 over THIS weekend? Wow haven't expected it thus close i will definitely give it a try!

This past weekend was the target, unfortunately some last minute issues came up (literally, last minute! ) and we had to take the decision to delay in order that we can resolve these issues, since we could not in good conscience issue a release with such problems.

That being said, you also stated that the all new Font renderer would make it much easier to achive the thing i want in just using the ListboxTextItem?
If so I guess I'll wait for the release then..

Yes this is correct. You might set a text such as:

Code: Select all

myItem->setText("[image='set:MyIcons image:smile'][colour='FFFF00FF'] CrazyEddie: [colour='FF00FF00']This is a test message");

and it might appear like:

CrazyEddie: This is a test message

CE.

[Impz0r]

Thanks CE!

Thats awesome that it would be so easy to format a string. I was wondering tho how it behaves performance wise?
I read the font renderer was overhauled and a string will be cached or something along that line. How exacetly does it work?

Any chance of a new release date ?


Thanks in advance!

Mfg Imp

[CrazyEddie]

We'll try and improve any performance issues as the 0.7.x series progresses. The entire rendering system has been replaced, and Window content can now be cached to texture - when enabled, this means that after the initial render, whatever is on the window will be drawn using just two triangles as opposed to perhaps thousands of triangles. We have also improved other areas of the renderer so that where possible only a minimum of work is done in order to redraw content (this is a substantial saving over the previous approach).

We're currently hoping to get a release some time this week

CE.

[Impz0r]

Sounds really great, can't wait to get my hands on it!

Thanks CE for your help and ofc. for the lib!


Mfg Imp

[Impz0r]

Hey there, I've managed to port my application over to ver. 0.7 which worked out easier then i thought

Anyways i was trying to use the new string formating and it works like a charm to some point. And thats word-wrapping.
I didn't manage to get word-wrapping working on ListBox Items. They render just fine, but always within one line.
How exactely do i have to format the string to get the wrap effect :=?


Thanks in advance!

Mfg Imp

[CrazyEddie]

It's good you found the port to 0.7.0 relatively painless

Ok. After checking some code, the ListboxTextItem implementation does not have formatting support built in (and it never did) - sorry if my earlier posts caused confusion in that regard. So to get this you need to create a small subclass of your own that will accept formatting options. If you're totally lost as to how you might do this, I can post a functioning example, although it may not be until either this afternoon or sometime tomorrow (let me know if you want it though, then I"ll know I'm not wasting my time!).

CE.

[Impz0r]

Hey CE, thanks for your answer.

I would be glad if you could post a short snipped how to get word-wrapping up running. I guess I'm not the only one who has interest in such an example, but don't hurry I have enough other on my todo list to do, i guess you do too


Thanks in advance!

Mfg Imp

[CrazyEddie]

I have enough other on my todo list to do, i guess you do too

Yeah, I'm currently operating on a rolling schedule of: design project A, code project A and design project B concurrently, code project B and design project C concurrently, code project C and so on...

Ok. I'm posting a fairly complete solution for this, though it's not been tested extensively.

Header portion:

Code: Select all

#include "CEGUI.h"

namespace CEGUI
{
//! A ListboxItem based class that can do horizontal text formatiing.
class FormattedListboxTextItem : public ListboxTextItem
{
public:
    //! Constructor
    FormattedListboxTextItem(const String& text,
                    const HorizontalTextFormatting format = HTF_LEFT_ALIGNED,
                    const uint item_id = 0,
                    void* const item_data = 0,
                    const bool disabled = false,
                    const bool auto_delete = true);

    //! Destructor.
    ~FormattedListboxTextItem();

    //! Return the current formatting set.
    HorizontalTextFormatting getFormatting() const;
    /*!
        Set the formatting.  You should call Listbox::handleUpdatedItemData
        after setting the formatting in order to update the listbox.  We do not
        do it automatically since you may wish to batch changes to multiple
        items and multiple calls to handleUpdatedItemData is wasteful.
    */
    void setFormatting(const HorizontalTextFormatting fmt);

    // overriden functions.
    Size getPixelSize(void) const;
    void draw(GeometryBuffer& buffer, const Rect& targetRect,
              float alpha, const Rect* clipper) const;

protected:
    //! Helper to create a FormattedRenderedString of an appropriate type.
    void setupStringFormatter() const;
    //! Current formatting set
    HorizontalTextFormatting d_formatting;
    //! Class that renders RenderedString with some formatting.
    mutable FormattedRenderedString* d_formattedRenderedString;
    //! Tracks target area for rendering so we can reformat when needed
    mutable Size d_formattingAreaSize;
};

}

Implementation portion (don't forget to include the header from above!):

Code: Select all

namespace CEGUI
{
//----------------------------------------------------------------------------//
FormattedListboxTextItem::FormattedListboxTextItem(const String& text,
                const HorizontalTextFormatting format,
                const uint item_id,
                void* const item_data,
                const bool disabled,
                const bool auto_delete) :
    // initialise base class
    ListboxTextItem(text, item_id, item_data, disabled, auto_delete),
    // initialise subclass fields
    d_formatting(format),
    d_formattedRenderedString(0),
    d_formattingAreaSize(0, 0)
{
}

//----------------------------------------------------------------------------//
FormattedListboxTextItem::~FormattedListboxTextItem()
{
    delete d_formattedRenderedString;
}

//----------------------------------------------------------------------------//
HorizontalTextFormatting FormattedListboxTextItem::getFormatting() const
{
    return d_formatting;
}

//----------------------------------------------------------------------------//
void FormattedListboxTextItem::setFormatting(const HorizontalTextFormatting fmt)
{
    if (fmt == d_formatting)
        return;

    d_formatting = fmt;
    delete d_formattedRenderedString;
    d_formattedRenderedString = 0;
    d_formattingAreaSize = Size(0, 0);
}

//----------------------------------------------------------------------------//
Size FormattedListboxTextItem::getPixelSize(void) const
{
    if (!d_owner)
        return Size(0, 0);

    // reparse text if we need to.
    if (!d_renderedStringValid)
        parseTextString();

    // create formatter if needed
    if (!d_formattedRenderedString)
        setupStringFormatter();

    // get size of render area from target window, to see if we need to reformat
    const Size area_sz(static_cast<const Listbox*>(d_owner)->
        getListRenderArea().getSize());
    if (area_sz != d_formattingAreaSize)
    {
        d_formattedRenderedString->format(area_sz);
        d_formattingAreaSize = area_sz;
    }

    return Size(d_formattedRenderedString->getHorizontalExtent(),
                d_formattedRenderedString->getVerticalExtent());
}

//----------------------------------------------------------------------------//
void FormattedListboxTextItem::draw(GeometryBuffer& buffer,
                                    const Rect& targetRect,
                                    float alpha, const Rect* clipper) const
{
    // reparse text if we need to.
    if (!d_renderedStringValid)
        parseTextString();

    // create formatter if needed
    if (!d_formattedRenderedString)
        setupStringFormatter();

    // get size of render area from target window, to see if we need to reformat
    // NB: We do not use targetRect, since it may not represent the same area.
    const Size area_sz(static_cast<const Listbox*>(d_owner)->
        getListRenderArea().getSize());
    if (area_sz != d_formattingAreaSize)
    {
        d_formattedRenderedString->format(area_sz);
        d_formattingAreaSize = area_sz;
    }

    // draw selection imagery
    if (d_selected && d_selectBrush != 0)
        d_selectBrush->draw(buffer, targetRect, clipper,
                            getModulateAlphaColourRect(d_selectCols, alpha));

    // factor the window alpha into our colours.
    const ColourRect final_colours(
        getModulateAlphaColourRect(ColourRect(0xFFFFFFFF), alpha));

    // draw the formatted text
    d_formattedRenderedString->draw(buffer, targetRect.getPosition(),
                                    &final_colours, clipper);
}

//----------------------------------------------------------------------------//
void FormattedListboxTextItem::setupStringFormatter() const
{
    // delete any existing formatter
    delete d_formattedRenderedString;
    d_formattedRenderedString = 0;

    // create new formatter of whichever type...
    switch(d_formatting)
    {
    case HTF_LEFT_ALIGNED:
        d_formattedRenderedString =
            new LeftAlignedRenderedString(d_renderedString);
        break;

    case HTF_RIGHT_ALIGNED:
        d_formattedRenderedString =
            new RightAlignedRenderedString(d_renderedString);
        break;

    case HTF_CENTRE_ALIGNED:
        d_formattedRenderedString =
            new CentredRenderedString(d_renderedString);
        break;

    case HTF_JUSTIFIED:
        d_formattedRenderedString =
            new JustifiedRenderedString(d_renderedString);
        break;

    case HTF_WORDWRAP_LEFT_ALIGNED:
        d_formattedRenderedString =
            new RenderedStringWordWrapper
                <LeftAlignedRenderedString>(d_renderedString);
        break;

    case HTF_WORDWRAP_RIGHT_ALIGNED:
        d_formattedRenderedString =
            new RenderedStringWordWrapper
                <RightAlignedRenderedString>(d_renderedString);
        break;

    case HTF_WORDWRAP_CENTRE_ALIGNED:
        d_formattedRenderedString =
            new RenderedStringWordWrapper
                <CentredRenderedString>(d_renderedString);
        break;

    case HTF_WORDWRAP_JUSTIFIED:
        d_formattedRenderedString =
            new RenderedStringWordWrapper
                <JustifiedRenderedString>(d_renderedString);
        break;
    }
}

//----------------------------------------------------------------------------//
}

Hope it's useful You can probably improve it a bit by adding some padding to the items and such things.

CE.

[Impz0r]

Awesome, thanks CE for your effort!

I'll will implement it today and will give you a feedback


Mfg Imp

[Impz0r]

Hey CE, as of now your implementation works like a charm. I've yet to test it with icons and the like


Thanks!