Is there a good tutorial to create C++ widgets

[matt]

Hello!

I need to realize a calendar button widget with 3 strings as text parameters (day, month and year).
For the moment I reused a simple PushButton, and use "\n" to have 3 lines of text.

But I'm trying to find a more elegant way of achieving it, and I would like to create a button, that could have something like:

Code: Select all

widget.SetProperty("DayDisplayText", "5");
widget.SetProperty("MonthDisplayText", "march");
widget.SetProperty("YearDisplayText", "2012");


and layout these textFields in a looknfeel definition.

Is there some good resources to create a C++ widget from scratch, or inherit from another, and skin it in a looknfeel. I couldn't manage to find such a tutorial
Is it hard to create custom widgets ?

Thanx in advance for your help

[CrazyEddie]

Hi,

It's really, really hard for me say whether something is 'easy' in relation to CEGUI due to my involvement Same situation applies as to judging tutorials - especially if I wrote them. Anyway...

There's a couple of articles that cover the general technique for adding new / subclassed widgets to the system. Obviously these articles are tutorials for rather specific scenarios, so some information will not apply to the generic case:
http://www.cegui.org.uk/wiki/index.php/ ... right_time
http://www.cegui.org.uk/wiki/index.php/ ... andard_one

The key part in both is the WindowFactoryManager::addFactory call, and the need for the WidgetTypeName static string (needed when using the template based approach to adding new window types).

For your specific query regarding multiple strings, if that's pretty much the limit of what you want to achieve, then it's do-able in looknfeel XML alone. You define three new properties for the strings, and then define either a single ImagerySection with three TextComponent definitions, or three ImagerySections each with a single TextComponent (which you choose depends on the flexibility you need, if all three are always drawn together, prefer a single ImagerySection).

The general approach to the ImagerySection might be similar to what follows here (untested). You would then mention the ImagerySection name "labels" in the appropriate states. Obviously you're likely to want to play around with the areas to get the desired positioning and what have you (the required PropertyDefinition elements for the labels are not shown here). You can also add colours, either specified directly, or sourced from properties.

Code: Select all

...
<ImagerySection name="labels">
  <TextComponent>
    <Area>
      <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
      <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
      <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
      <Dim type="Height" ><FontDim type="LineSpacing" /></Dim>
    </Area>
    <TextProperty name="DayDisplayText" />
  </TextComponent>
  <TextComponent>
    <Area>
      <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
      <Dim type="TopEdge" ><FontDim type="LineSpacing" /></Dim>
      <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
      <Dim type="Height" ><FontDim type="LineSpacing" /></Dim>
    </Area>
    <TextProperty name="MonthDisplayText" />
  </TextComponent>
  <TextComponent>
    <Area>
      <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
      <Dim type="TopEdge" >
        <FontDim type="LineSpacing" >
          <DimOperator op="Add"><FontDim type="LineSpacing"/></DimOperator>
        </FontDim>
      </Dim>
      <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
      <Dim type="Height" ><FontDim type="LineSpacing" /></Dim>
    </Area>
    <TextProperty name="YearDisplayText" />
  </TextComponent>
</ImagerySection>
...

HTH

CE

[matt]

Thanx Eddy for your reply!

[matt]

Hi Eddy!

I used the links you've mentionned above to create some custom widgets, and it's working quite well

I've a little more question about custom widgets:
In the example you gave, how are added the "Text" properties to the widget? Is it from .cpp, or from .looknfeel?
For example, if I add a TextField in a widget from looknfeel like that:

Code: Select all

....
<TextComponent>
    <Area>
      <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
      <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
      <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
      <Dim type="Height" ><FontDim type="LineSpacing" /></Dim>
    </Area>
    <TextProperty name="CustomDisplayField" />
  </TextComponent>
.....


where could I specify that we can set the value 'Text' of "CustomDisplayField", to use after like:

Code: Select all

CustomWidget->setProperty("CustomDisplayFieldText", "Hello");


Thanx in advance for your help

[CrazyEddie]

Hi,

The properties can be added via xml in the looknfeel. At the top of the WidgetLook, you might have something like:

Code: Select all

<PropertyDefinition name="CustomDisplayField" initialValue="" redrawOnWrite="true" />

CE