Ein Widget ist der Grundbaustein im Maongo System. Es ist eine graphische Komponente, die eine Reihe von veränderbaren Eigenschaften (Properties) besitzt, die Daten empfangen und weiterleiten kann, die durch Funktionen (Actions) erweiterbar ist, und die sich animieren lässt. Es existieren unterschiedliche Widgets mit unterschiedlichen Eigenschaften für spezifische Einsatzzwecke (siehe die folgenden Kapitel).
Das einfachste Widget ist quadratisch (100x100) und hat seinen Ursprung (0,0 Koordinate des Widgets) in der oberen linken Ecke seines Parents:
<widget name="ErstesWidget" type="Widget" />
Das zweite Widget wird 10 Einheiten (Pixel) vom linken und 20 Einheiten vom oberen Rand des übergeordneten Widgets platziert. Es hat eine rechteckige Form und ist 400x300 Einheiten gross. Die Angabe des Typs “Widget” ist optional und kann weggelassen werden:
<widget name="ZweitesWidget" type="Widget" x="10" y="20" shape="R 400 300" />
Die Attribute x und y bezeichnen die Position des Widgets im Koordinatensystem des übergeordneten Widgets (“parent”). Das Attribut shape erlaubt, die Gestalt des Widgets zu setzen (hier in Form eines Rechtecks).
Die interne Struktur von Widgets lässt sich in Form mehrerer Ebenen beschreiben:
(hinten)
Füllebene (Hintergrundfarbe)
Texturebene (Bild als Texture)
Zeichenebene (widgetspezifische Inhalte, z.B. Text, Video, ...)
Kinderebene (alle Child-Widgets)
Rahmenebene (Border)
(vorn)
In einer Anwendung werden Widgets häufig hierarchisch ineinander verschachtelt. Vom Root-Knoten aus lässt sich dann ein Widget-Baum mit parent-child-Relationen beschreiben:
<presentation>
<widget name="widget1">
<widget name="widget2" />
<widget name="widget3" />
</widget>
</presentation>
widget1 ist Kind (child) von presentation; widget2 und widget3 sind Kinder von widget1. Entsprechend ist widget 1 parent von widget2 und widget3.
Befinden sich mehrere Widgets auf derselben hierarchischen Ebene, bestimmt die Definitionsreihenfolge auch die Zeichenreihenfolge: Die zuerst definierten Widgets liegen “hinter” den später definierten Widgets: widget2 liegt hier hinter widget3.