Table Of Contents

Previous topic

4.1. Allgemeine Properties

Next topic

4.3. Farben

This Page

4.2. Position, Größe und Form

4.2.1. Location (Point)

Default: 0,0

Die Eigenschaft Location verankert das Widget im Koordinatensystem des Elternwidgets:

<property name="Location" value="16 9.2" />

Jedes Widget besitzt ein Koordinatensystem, das von links nach rechts (x-Achse) und von oben nach unten (y-Achse) wächst. Eine Einheit im Koordinatensystem entspricht im Normalfall (Bildschirmausgabe, Widget ist nicht skaliert) einem Pixel. Ein Widget kann auch auf Teilpixeln positioniert werden, also beispielsweise bei 9.2 Pixeln.

Die Eigenschaft Location wird mit dem Typ Point angegeben. Der Standardwert der Eigenschaft Location ist "0 0", die Nullpunkte der Koordinatensysteme der Eltern- und Kinder-Widgets liegen also per Default übereinander.

Angabe der Location im Widget-Tag

Die Eigenschaft Location kann auch anhand von x- und y-Attributen im Widget-Tag angegeben werden:

<widget x="16" y="9.2">
   <property .../>
</widget>

Die beiden Schreibweisen schließen sich gegenseitig aus. Sollten Sie sowohl Angaben zur Location im widget-Tag als auch mit einem property-Tag machen, wird der Maongo-Player einen Fehler ausgeben.

4.2.2. X (Number, read-only)

In dieser Eigenschaft ist die aktuelle horizontale Position des Widgets im Koordinatensystem des Parent-Widgets gespeichert.

4.2.3. Y (Number, read-only)

In dieser Eigenschaft ist die aktuelle vertikale Position des Widgets im Koordinatensystem des Parent-Widgets gespeichert.

4.2.4. Z-Index (Number)

Default: -1 (nicht aktiv)

Mittels dieser Eigenschaft ist ein manuelle Sortierung der Widgets in der Z-Achse möglich. Sofern ein Z-Index gesetzt wird, gilt nicht mehr die Reihenfolge der Widgets im Mad-Dokument, sondern der Z-Index.

4.2.5. Width (Number, read-only)

In dieser Eigenschaft ist die aktuelle Breite des Widgets bzw. der Bounding-Box gespeichert.

4.2.6. Height (Number, read-only)

In dieser Eigenschaft ist die aktuelle Höhe des Widgets bzw. der Bounding-Box gespeichert.

4.2.7. Shape (Shape)

Default: R 0 0 100 100

Werte: Shape (SVG(+)-Notation), Path (Pfad), Rectangle (Rechteck), Circle (Kreis), Ellipse (Ellipse), Polygon (Vieleck) vgl. Datentypen

Die Form eines Widgets wird von der Eigenschaft Shape bestimmt:

<widget shape="R 200 300"></widget>
oder:
<property name="Shape" value="R 200 300" />
oder:
<property name="Shape" value="R 20 20 100 100" />

Das Default-Rechteck wird automatisch gezeichnet, sobald ein Widget angelegt wurde und keine Shape-Eigenschaft spezifiziert wird:

<widget>
  <property name="Location" type="Point" value="20,20"/>
  <property name="BackgroundColor" value="red"/>
</widget>

Das Widget wird mit “Location” an Punkt “20,20” im Koordinatensystem seines Parent positioniert. Es wurde kein Shape spezifiziert, deshalb wird per Default ein Rechteck mit 100 Pixeln Breite und 100 Pixeln Höhe gezeichnet. Im Bild wird das Default-Rechteck durch die rote Hintergrundfarbe (Eigenschaft “BackgroundColor) sichtbar gemacht.

../_images/4_3_2.png

Achtung: Wird das Shape eines Widgets per Script auf ``null` gesetzt, so wird es intern auf “R 0 0 0 0” gesetzt.`

Rechteckige Shapes

Für rechteckige Shapes gibt es mehrere Beschreibungsmöglichkeiten:

<widget shape=”R 0 0 100 100” />
<widget>
  <property name="Shape" value="R 0 0 100 100" />
</widget>

Die Angabe von "0 0" ist optional.

Allgemeine Formulierung:

<property name="Shape" value="R (<x>),(<y>),<width>,<height>" />

Beispiel:

<presentation>
 <widget name="myWidget">
   <property name="Location" value="20 20" />
   <property name="Shape" type="Shape" value="R 10,30,80,80" />
   <property name="Debug" type="Boolean" value="true" />
   <property name="BackgroundColor" type="Color" value="red" />
 </widget>
</presentation>

Der Nullpunkt von myWidget wird am Punkt 20,20 des Elternsystems verankert. Gezeichnet wird das Widget mit einer rechteckigen Form, die im Punkt 10,30 des eigenen Koordinatensystems beginnt und jeweils 80 Pixel in horizontaler und vertikaler Richtung einnimmt.

Frei geformte Shapes

Shapes müssen in Maongo nicht rechteckig sein. Vielmehr können Sie freie Formen annehmen, die in Anlehnung an die SVG-Syntax für Pfad und Polygon, Kreis und Ellipse definiert werden.

Allgemeine Informationen zu „Skalierbaren Vektorgrafiken“ (SVG) finden Sie unter den folgenden URLs:

Im Folgenden stellen wir SVG-Syntax und Maongo-Schreibweise für die verschiedenen Shape-Typen dar:

Pfad:

<!-- SVG: -->
<path d="M 16,23 5,18 -5,24 -4,12 -13,4 -1,1 3,-9 9,1 22,2 13,11 16,23 z" />

<!-- Maongo: -->
<property name="Shape" value="<d>" />

<property name="Shape" value="M 16,23 5,18 -5,24 -4,12 -13,4 -1,1
3,-9 9,1 22,2 13,11 16,23 z" />

Polygon:

<!-- SVG: -->
<polygon points="100 100 100 200 150 200" />

<!-- Maongo: -->
<property name="Shape" value="P <x y> <x y>..." />

<property name="Shape" value="P 100,100 100,200 150,200" />

Kreis:

<!-- SVG: -->
<circle cx="100" cy="100" r="50" />

<!-- Maongo: -->
<property name="Shape" value="O <cx> <cy> <r>" /> <!-- der Buchstabe O steht für den Kreis -->

<property name="Shape" value="O 50" />
<!-- der Nullpunkt des umschließenden Rechtecks ist auf 0,0 -->
<property name="Shape" value="O 100,100 50" />
<!-- der Nullpunkt des umschließenden Rechtecks ist auf 100,100 verschoben -->

Ellipse:

<!-- SVG: -->
<ellipse cx="100" cy="100" rx="50" ry="20" />

<!-- Maongo: -->
<property name="Shape" value="E <cx> <cy> <rx> <ry>" />

<property name="Shape" value="E 100 50" />
<!-- der Nullpunkt des umschließenden Rechtecks ist auf 0,0 -->
<property name="Shape" value="E 100,100 100 50" />
<!-- der Nullpunkt des umschließenden Rechtecks ist auf 100,100 verschoben -->

SVG-Werkzeuge

  • Inkscape (http://www.inkscape.org) ist ein kostenloser OpenSource-Vektorgrafik-Editor für alle Plattformen.

    Tip: “Als normales SVG” speichern. Die Pfadangaben aus Inkscape können Sie dann direkt in Maongo verwenden.

  • Adobe Illustrator (http://www.adobe.com/products/illustrator) ist der Marktführer unter den Vektorgrafik-Programmen. SVG ist ein mögliches Speicherformat.

    Tip: Polygon- und Pfadangaben können Sie direkt aus Illustrator-SVGs in Maongo übernehmen.

Transforms und Style-Angaben aus SVGs können nicht direkt in Maongo übernommen werden. Die entsprechenden Mittel haben Sie in Maongo in Properties wie Location und Rotation u.a.m. SVG-Pfade können aber durchaus für komplexe grafische Elemente verwendet werden.

../_images/4_3_2_toucan.png

Das entsprechende Mad Dokument.

4.2.8. Padding (Padding)

Default: null, Padding ist ausgeschaltet.

Die Property Padding dient dazu einen Abstand (Padding) von der Bounding-Box des Shapes nach innen zu definieren. Dieser Abstand wird z.B. von einigen Layouts genutzt, die nur in der vom Padding vorgegebenen Fläche layouten:

<property name="Padding" value="20" />
<property name="Padding" value="20 30" />
<property name="Padding" value="10 8.5 20 15" />

Die Maongo-Syntax für Padding orientiert sich an der CSS-Syntax. Erlaubt sind 1, 2 und 4 Angaben, die folgendermaßen interpretiert werden:

  • Eine Angabe: Alle Innenabstände sind gleich groß.
  • Zwei Angaben: Die erste Zahl steht für die Abstände oben und unten, die zweite Angabe für die Abstände rechts und links.
  • Vier Angaben: die Abstände werden im Uhrzeigersinn zugeordnet: oben, rechts, unten, links.

Beispiel:

<widget name="widget1" shape="R 100 100">

  <property name="Padding" value="10 8 20 5" />
  <property name="BackgroundColor" value="red" />

  <property name="Layout" value="fill" />
  <widget name="widget2">
    <property name="LayoutConstraints" type="String" value="padding"/>
    <property name="BackgroundColor" type="Color" value="yellow" />
  </widget>

</widget>

widget2 wird durch ein Fill-Layout auf die Größe von widget1 (exakt: auf die Größe minus Padding) gebracht. Die Angabe für Padding bewirkt, dass das InnerShape von widget1 modifiziert wird.

4.2.9. InnerShape (Rectangle, read-only)

Die Eigenschaft InnerShape ist die Form, die aus der Kombination der Bounding-Box des Shapes und Padding entsteht. Das InnerShape ist stets ein Rectangle. Das InnerShape ist bei vielen Widget-Typen und bei Layouts die Begrenzung, innerhalb derer Inhalte dargestellt werden. So wird beispielsweise der Text im Textwidget innerhalb des Innershapes dargestellt.

4.2.10. BorderWidth (Number)

Default: 0 (beim ButtonWidget: 1)

BorderWidth legt die Breite des Rahmens eines Widgets fest:

<property name="BorderWidth" type="Number" value="10.6"/>

Die Eigenschaft BorderWidth ist vom Typ Number. Der Rahmen hat die Standardbreite 0, d.h. ohne die Angabe einer BorderWidth gibt es keinen Rahmen. Die Farbe eines Rahmens wird mit der Property BorderColor festgelegt.

Beispiel:

<widget>
  <property name="Location" type="Point" value="20 20" />
  <property name="Shape" value="R 20 20 100 100" />
  <property name="BorderWidth" value="10.6"/>
  <property name="BorderColor" value="#ffcc00"/>
  <property name="BackgroundColor" value="red"/>
</widget>

Der Rahmen wird mittig auf den Rand der Form (Shape) gezeichnet.

4.2.11. Visible (Boolean)

Default: true

Werte: true, false

Mit der Eigenschaft Visible legen Sie fest, ob das Widget angezeigt wird oder nicht:

<property name="Visible" value="false" />

4.2.12. Clipping (Boolean)

Default: true

Werte: true, false

Die Eigenschaft Clipping legt fest, ob ein Widget seine Kinder-Widgets am eigenen Rand abschneidet, oder ob die Kinder-Widgets über das Shape des Eltern-Widgets hinausragen dürfen:

<property name="Clipping" value="true" />

4.2.13. PreferredBounds (Rectangle)

Setzen der Property PreferredBounds bewirkt, dass ein Widget innerhalb eines Layouts diesen Wert an seinen Parent zurückliefert, nicht eine selbst bestimmte ideale Größe. Siehe auch Layout.

4.2.14. JavaScript

Im folgenden einige beispielhafte Zugriffe und Zuweisungen auf Properties aus diesem Kapitel dargestellt.

Javascript-Syntax:

myWidget.Location = "20,20";
myWidget.Shape    = "R 20,20";
myWidget.Shape    = Type.newRectangle(20,20);
myWidget.Shape    = Type.newRectangleAt(5,5,20,20);
myWidget.Shape    = "E 100 50";
myWidget.Shape    = Type.newEllipse(20,30);
myWidget.Padding  = "10 8.5 20 15";
myWidget.Visible  = false;

trace("Widget an: " + myWidget.X + "x" + myWidget.Y)  // ergibt bspw. "Widget an: 100x120"

Note

Siehe auch:

CLASSDOC:Shape

CLASSDOC:Point

CLASSDOC:Padding

CLASSDOC:Path

CLASSDOC:Polygon

CLASSDOC:Rectangle

CLASSDOC:Transform