Introduction to QPanel and QLabel

It may seem funny that we are "introducing" the QPanel and QLabel controls now, especially since we have already been using them a lot throughout the examples.

On the surface, it may seem that QLabel is very simple -- you specify the Text that you want it to display and maybe some styles around it, and then you can just Render it out. And while QLabel and QPanel controls should certainly be used for that purpose, they also offer a lot more in functionality.

Both the QLabel and QPanel controls extend from the QBlockControl class. The only difference between the two is that labels will render as a <span> and panels will render as a <div>. And in fact, because in HTML there is very little difference between <span> and <div> anyway, it is safe to say that a QLabel with its DisplayStyle set to "block" will be equivalent to a QPanel with its DisplayStyle set to "inline".

In addition to defining the Text to display, these controls can also use a Template file. Moreover, these controls can also have any of its unrendered child controls auto-rendered out. This offers a lot of power and flexibility, basically allowing you to render out an arbitrary number of dynamically created controls, without needing to hard code or specify these controls anywhere or on any template.

The order of rendering for block controls are:

• Display the Text (if applicable)
• Pull in the Template and render it (if applicable)
• If AutoRenderChildren is set to true, then get all child controls and call Render on all of them that have not been rendered yet

In our example below, we define a QPanel and assign textboxes as child controls. We specify a Text value and also setup a Template. Finally, we render that entire panel out (complete with the text, template and child controls) with a single Render call.

Note that even though 10 textboxes are being rendered, we never explicitly code a QTextBox->Render call anywhere in our code.