.. _ref-possize: Position, Größe und Form =============================================================================== **Location** (Point) --------------------------------- Default: ``0,0`` Die Eigenschaft ``Location`` verankert das Widget im Koordinatensystem des Elternwidgets:: 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:: 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. **X** (Number, read-only) --------------------------------- In dieser Eigenschaft ist die aktuelle horizontale Position des Widgets im Koordinatensystem des Parent-Widgets gespeichert. **Y** (Number, read-only) --------------------------------- In dieser Eigenschaft ist die aktuelle vertikale Position des Widgets im Koordinatensystem des Parent-Widgets gespeichert. **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. **Width** (Number, read-only) --------------------------------- In dieser Eigenschaft ist die aktuelle Breite des Widgets bzw. der ``Bounding-Box`` gespeichert. **Height** (Number, read-only) --------------------------------- In dieser Eigenschaft ist die aktuelle Höhe des Widgets bzw. der ``Bounding-Box`` gespeichert. **Shape** (Shape) --------------------------------- Default: ``R 0 0 100 100`` Werte: ``Shape`` (SVG(+)-Notation), ``Path`` (Pfad), ``Rectangle`` (Rechteck), ``Circle`` (Kreis), ``Ellipse`` (Ellipse), ``Polygon`` (Vieleck) vgl. :ref:`ref-types` Die Form eines Widgets wird von der Eigenschaft ``Shape`` bestimmt:: oder: oder: Das Default-Rechteck wird automatisch gezeichnet, sobald ein Widget angelegt wurde und keine Shape-Eigenschaft spezifiziert wird:: 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. .. image:: ../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:: Die Angabe von ``"0 0"`` ist optional. Allgemeine Formulierung:: Beispiel:: 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: * http://de.wikipedia.org/wiki/Scalable_Vector_Graphics * http://www.w3.org/Graphics/SVG/ * http://www.w3.org/TR/SVG11/ Im Folgenden stellen wir SVG-Syntax und Maongo-Schreibweise für die verschiedenen Shape-Typen dar: Pfad:: Polygon:: Kreis:: Ellipse:: **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. .. image:: ../images/4_3_2_toucan.png Das entsprechende :download:`Mad Dokument <../../reference/07_toucan.mad>`. **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:: 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:: 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. **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. **BorderWidth** (Number) --------------------------------- Default: ``0`` (beim ButtonWidget: ``1``) ``BorderWidth`` legt die Breite des Rahmens eines Widgets fest:: 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:: Der Rahmen wird mittig auf den Rand der Form (Shape) gezeichnet. **Visible** (Boolean) --------------------------------- Default: ``true`` Werte: ``true``, ``false`` Mit der Eigenschaft ``Visible`` legen Sie fest, ob das Widget angezeigt wird oder nicht:: **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:: **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 :ref:`ref-layout`. 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