1) Is it possible to control the component's tag name?

By default, name of your component is the name of the xml file, or, in other words, name of the component class. But you can control this behavior by defining tagName attribute in qxt:component.

<qxt:component

    xmlns:qx="http://www.qxtransformer.org/qooxdoo/0.8"

    xmlns:qxt="http://www.qxtransformer.org/extension/0.4"

    className="feedback.FeedbackForm"

    extend="feedback.FeedbackFormClass"

    tagName="form">

....

</qxt:component>

Now instead of <fb:FeedbackForm/> you will use <fb:form/>.

2) Can I use any attributes from base class of my component or define my own attributes?

Yes, sure. As you can see from sample above, feedback form has qx.ui.groupbox.GroupBox base class (or to be precise,  feedback.FeedbackFormClass and it has qx.ui.groupbox.GroupBox base class). You can define any attributes for this class. For example qx.ui.groupbox.GroupBox has legend and icon attributes:

<fb:FeedbackForm legend="My feedback form" icon="icon/16/actions/mail-send.png"/>

If you would like to define an own attribute for your component, you can do it in your code behind. For example, let’s add message which will be shown after submitting feedback.

feedback.FeedbackFormClass

qx.Class.define("feedback.FeedbackFormClass",

{

      extend : qx.ui.groupbox.GroupBox,

      construct: function() {

          this.base(arguments);

      },

      properties: {

          sendMessage: {

              check: "String",

              init: null

          }

      },

      members: {

          processForm: function() {

              var name = this.name.getValue();

              var message = this.message.getValue();

              

              //transport code goes here...

              

              if (this.getSendMessage())

                alert(this.getSendMessage());

          }

      }

});

And now define a send message in each feedback form.

<?xml version="1.0" encoding="UTF-8" ?>

<qx:application

    xmlns:qx="http://www.qxtransformer.org/qooxdoo/0.8"

    xmlns:qxt="http://www.qxtransformer.org/extension/0.4"

    xmlns:fb="feedback.*"

    className="feedback.Application"

    author="Siarhei Barysiuk">

    

   <qx:tabView width="500">

        <qx:page label="Feedback Page 1">

            <qx:vbox>

                <fb:form legend="Feedback form" icon="icon/16/actions/mail-send.png"

                    sendMessage="Thank you for the feedback!">

                </fb:form>

            </qx:vbox>

        </qx:page>

        <qx:page label="Feedback Page 2">

            <qx:vbox>

                <fb:form sendMessage="Thank you for the feedback, VIP user!"/>

            </qx:vbox>

        </qx:page>

        <qx:page label="Feedback Page 3">

            <qx:vbox>

                <fb:form/>

            </qx:vbox>

        </qx:page>

    </qx:tabView>

</qx:application>   

3) Can I add any child elements to my custom component?

Yes, you can. You can use the add method of the default component or override it with your own logic. Let’s take a look at both methods.

Using standard add method

As you probably remember, qxt:component has only one child element which defines the behavior of the custom component including how to add children to it. If you just add some content to your application

<fb:form legend="Feedback form" icon="icon/16/actions/mail-send.png"

sendMessage="Thank you for the feedback!">

<qx:label content="Additional Content"/>

</fb:form>

the result is the same as if you added content to the group box in the original code. The result will be a form with label at the bottom of the group box.

Using custom add method

Information coming soon