Introducing Nifty Controls

At the moment there are not many actual controls in Nifty. Besides from clicking on elements, f.i. an Image, there was so far not a lot of interaction possible.

Well, it's about time to change this with Nifty Controls :)

To allow as much freedom as possible I've decided against predefining </scrollbar></code> new control types that let you only change color or customize some images. Instead the idea is, that you use the already existing elements (Text, Image, Panel) and combine them to create the control you like.</p>

You can create your own control with the Tag:</p>

  </p>

      <img id="scrollposition" filename="ball.tga" />

    </panel>

  </controldefinition></pre>

With this xml t</code>ag you can define a control like it is illustrated in figure 1.</p>
</a></p>
<img src="http://nifty-gui.lessvoid.com/images/blog-controldefinition-small.png" alt="blog-controldefinition.png" border="0" hspace="10" vspace="10" /></a></p>

A controldefinition actually defines a couple of things:</p>

The name of the new control with the name</code> attribute.</li>
The control logic class with the controller</code> attribute.</li>
The actual look of the control with a combination of panel, image and text elements. You can even add effects. So if you want a hover effect you can simply add it to the control definition :)</li>

</ol>

With the mandatory attribute "name" you give your new control a name so that you can refer to it later. There's another new tag to use your newly created control, the control</code> tag:</p>
  </control></pre>

So you define the look and feel as well as the control logic once and then use it everywhere you need it like figure 2 shows.</p>
</a></p>
<img src="http://nifty-gui.lessvoid.com/images/blog-control-small.png" alt="blog-control.png" border="0" hspace="10" vspace="10" /></a></p>

That's all for now. This just covers the basic idea. More on controls later.</p>
Have Fun!