Often times you will want to be able to combine a bunch of small controls into a larger control, also known as creating a Composite Control. In addition to this composite control containing many smaller controls, the composite control would be able to define its own layout, as well as handling its own server- or ajax-based actions.

With a modularized set of smaller controls, layout, and events/actions, an architecture utilizing Composite Controls can see a lot of modularity and reuse for commonly used, more-complex interactions throughout your entire web application.

In this example, we will create a sample SampleComposite control, which (for lack of a better example) will contain a QLabel and two QButtons. The control itself will contain an integer value, and the label will report what the integer value is. The two buttons will be triggered by QClickEvents to increment or decrement that value.

Now, notice how even though we seem to have a lot of small controls on the page (e.g. 7 buttons, each with their own event handlers!), the actual form is quite simple, because we are using the SampleComposite control over and over again. Be sure and view the source of SampleComposite.inc, which of course will contain the code for the composite control which is doing the bulk of the work in this example.