1. Home
2. Developer Center
3. Flex Developer Center
4. Einführung in Flex

Einführung in Flex: Erste Schritte

Inhalt

• Programmieren mit MXML und ActionScript
• Ihre erste Anwendung
• Verarbeitung von Ereignissen
• Position und Layout von Flex-Komponenten
• Einbetten von Anwendungsobjekten

---

Position und Layout von Flex-Komponenten

Die meisten Flex-Container verwenden eine Reihe vordefinierter Regeln, um alle von Ihnen definierten untergeordneten Komponenten automatisch zu positionieren. Wenn Sie einen Canvas-Container, einen Application-Container oder einen Panel-Container verwenden, dessen layout -Eigenschaft auf "absolute" gesetzt ist, können Sie absolute Positionen für die untergeordneten Elemente des Containers festlegen oder ein Constraint-basiertes Layout verwenden.

Komponenten lassen sich auf drei Arten in einer Flex-Anwendung positionieren:

• Mittels automatischer Positionierung
• Mittels absoluter Positionierung
• Mittels Constraint-basiertem Layout

Automatische Positionierung

Bei den meisten Containern positioniert Flex die untergeordneten Container-Elemente automatisch entsprechend den Layout-Regeln des Containers, d. h. unter Berücksichtigung von Layout-Richtung, Container-Auffüllung und der Abstände zwischen den untergeordneten Elementen des jeweiligen Containers.

Bei Containern mit automatischer Positionierung hat die direkte Festlegung der x bzw. y -Eigenschaft ihrer untergeordneten Komponenten bzw. das Aufrufen der move() -Methode keinerlei oder nur vorübergehende Auswirkung, da die Layout-Berechnungen die Positionen der Komponenten auf ein berechnetes Ergebnis setzen, nicht auf den angegebenen Wert.

Sie können bestimmte Layout-Aspekte durch die Angabe von Container-Eigenschaften steuern. Folgende Eigenschaften sind am häufigsten vertreten:

• layout: Mögliche Werte sind: "horizontal", "vertical" oder "absolute"verwenden. Hat die Eigenschaft den Wert "horizontal", ordnet der Container seine untergeordneten Elemente in einer Reihe an. Hat die Eigenschaft den Wert "vertical", ordnet der Container seine untergeordneten Elemente in einer Spalte an. Informationen zur Einstellung "absolute" finden Sie in den Abschnitten zum absoluten Positionieren und zum Constraint-basierten Layout.
• horizontalAlign: Mögliche Werte sind: "left", "center" oder "right".
• verticalAlign: Mögliche Werte sind: "top", "middle" oder "bottom".

Das folgende Beispiel überschreibt die Standardeinstellungen von "left" für die Eigenschaft horizontalAlign sowie von "top" für die Eigenschaft verticalAlign des Application-Containers, um Folgendes festzulegen: "center" und "middle"

Dieses Beispiel überschreibt zudem die Standardeinstellung von "vertical" für die Eigenschaft layout des Panel-Containers, sodass die Label- und Button-Steuerelemente waagerecht angezeigt werden. Die Funktion padding -Eigenschaften des Panel-Containers definieren den Randbereich des Containers in Pixeln.

Beispiel

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutAutomatic/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="380" height="150"

>
    <mx:Panel 
        title="My Application" 
        paddingTop="10" paddingBottom="10" 
        paddingLeft="10" paddingRight="10" 
        layout="horizontal" verticalAlign="middle"
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button 
            id="myButton" label="Click Me!" 
            click="myLabel.text = 'Hello, World!';" 
        />

    </mx:Panel>
</mx:Application>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

Absolute Positionierung

Die absolute Positionierung wird von drei Containern unterstützt:

• Application- und Panel-Steuerelemente verwenden die absolute Positionierung, wenn Sie die Eigenschaft layout auf folgende Wert setzen: "absolute".
• Der Canvas-Container verwendet die absolute Positionierung immer.

Mit der absoluten Positionierung legen Sie die Position des untergeordneten Steuerelements mittels seiner x und y -Eigenschaften fest, oder Sie geben ein Constraint-basiertes Layout an. Andernfalls positioniert Flex das untergeordnete Element an Position 0,0 des übergeordneten Containers. Wenn Sie die x- und y-Koordinaten angeben, ändert Flex die Position der Steuerelemente nur dann, wenn Sie die Eigenschaftswerte ändern.

Im folgenden Beispiel wird die Eigenschaft layout des Panel-Containers auf den folgenden Wert gesetzt: "absolute". Anschließend wird die Eigenschaft x und y sowohl für das Label- als auch das Button-Steuerelemente so gesetzt, dass sich beide Steuerelemente überlappen.

Beispiel

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutAbsolute/index.html"
    horizontalAlign="center" verticalAlign="middle"
    width="280" height="170"

>
    <mx:Panel 
        title="My Application" layout="absolute"
        width="220" height="90" 
    >
        <mx:Label 
            id="myLabel" 
            x="10" y="10" width="180" 
            fontWeight="bold" fontSize="24"
        />

        <mx:Button 
            id="myButton" 
            x="60" y="10" 
            label="Click Me!" 
            click="myLabel.text = &apos;Hello, World!&apos;;" 
        />

    </mx:Panel>
</mx:Application>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

Constraint-basiertes Layout

Mit dem Constraint-basierten Layout verwalten Sie die Größe und Position untergeordneter Komponenten gleichzeitig. Dabei verankern Sie die Seiten oder den Mittelpunkt einer Komponente an Positionen, die in Relation zum Container der Komponenten stehen.

Mithilfe des Constraint-basierten Layouts bestimmen Sie die Position und Größe der unmittelbaren untergeordneten Elemente aller Container, die die absolute Positionierung unterstützen.

Sie legen die Constraints über die top, bottom, left, right, horizontalCenter oder verticalCenter -Stileigenschaften der untergeordneten Komponente fest.

Kanten von Komponenten verankern

Sie können eine oder mehrere Kanten einer Komponente in einem Pixelabstand zur entsprechenden Kante ihres Containers verankern. Die Kante des verankerten untergeordneten Elements hält beim Ändern der Containergröße denselben Abstand zur übergeordneten Kante ein.

Die Funktion top, bottom, left und right sind Stileigenschaften, die die Abstände zwischen den Seiten der Komponenten und den Seiten der entsprechenden Container in Pixeln festlegen.

Beim Button-Steuerelement im nachfolgenden Beispiel sind die untere und die rechte Kante in einem Abstand von 10 Pixeln zu den Kanten seines übergeordneten Panel-Containers verankert.

Beispiel

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsBottomRight/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Button 
            id="myButton" 
            label="A button" 
            bottom="10" 
            right="10"
     
		/>

    </mx:Panel>
</mx:Application>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Dehnen von Komponenten

Wenn Sie zwei Kanten einer Dimension verankern (z. B. obere und untere Kante), ändert sich die Größe der Komponente, wenn die Größe des Containers geändert wird. Beim Button-Steuerelement im nachfolgenden Beispiel sind alle vier Kanten in einem Abstand von 10 Pixeln zu den Kanten seines übergeordneten Panel-Containers verankert.

Beispiel

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsEdges/index.html"
    horizontalAlign="center" verticalAlign="middle"
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Button 
            id="myButton" 
            label="A button" 
            top="10"
            bottom="10" 
            left="10"
            right="10"
			

			/>

    </mx:Panel>
</mx:Application>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Verankern des Mittelpunkts von Komponenten

Sie können auch den waagerechten und/oder senkrechten Mittelpunkt einer untergeordneten Komponente in einem Pixelabstand zum Mittelpunkt des Containers verankern. Die Größe des untergeordneten Elements wird nur dann in den angegebenen Dimensionen geändert, wenn Sie auch die auf Prozent basierte Größenänderung verwenden.

Die Klammern horizontalCenter und verticalCenter -Stile geben den Abstand zwischen dem Mittelpunkten der Komponente und des Containers in der angegebenen Richtung an. Eine negative Zahl verschiebt die Komponente nach links vom Mittelpunkt oder über den Mittelpunkt.

Die Klammern horizontalCenter und verticalCenter -Stile geben den Abstand vom Mittelpunkt eines Containers in Pixeln an, um den ein Steuerelement positioniert werden soll. Die Stile des Button-Steuerelements im nachfolgenden Beispiel sind beide auf 0 (null) gesetzt, um es genau in der Mitte des Panel-Containers zu positionieren.

Beispiel

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsCenter/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"
>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >

        <mx:Button 
            id="myButton" 
            label="A button" 
            verticalCenter="0"
            horizontalCenter="0"
           />
    </mx:Panel>

</mx:Application>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Komplexeres Beispiel

Das nachfolgende Beispiel zentriert das Label-Steuerelement mithilfe des Constraint-basierten Layouts und dehnt das Button-Steuerelement auf nahezu die gesamte Länge des Panels. Setzen Sie die Eigenschaft top des Label-Steuerelements auf 10, um es in einem Abstand von 10 Pixeln zur oberen Kante des Panels zu positionieren. Setzen Sie seine horizontalCenter -Eigenschaft auf 10, um es genau in der Mitte des Panels zu zentrieren.

Setzen Sie die Eigenschaft left und right des Button-Steuerelements auf 10, um es um 10 Pixel zu beiden Seiten des Panels zu dehnen. Setzen Sie seine bottom-Eigenschaft auf 10, um seine untere Kante in einem Abstand von 10 Pixeln zur unteren Kante des Panels zu positionieren.

Die folgende Abbildung veranschaulicht die Effekte der von Ihnen visuell gesetzten Eigenschaften. Die visuellen Layout-Steuerelemente sind Teil der Design-Ansicht in Flex Builder 2.

Eine mit dem Constraint-basierten Layout bestimmte Größe überschreibt alle expliziten oder Prozent-basierten Größenangaben. Wenn Sie z. B. left und right -Stileigenschaften festlegen, überschreibt die daraus resultierende Constraint-basierte Breite jede Breite, die mit der Eigenschaft width bzw. percentWidth festgelegt wurde.

Beispiel

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraints/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Label 
            id="myLabel" 
            fontWeight="bold" 
            fontSize="24" 
            top="10" 
            horizontalCenter="0"
        />

        <mx:Button 
            id="myButton" 
            label="Click Me!" 
            click="myLabel.text = &apos;Hello, World!&apos;;" 
            bottom="10" 
            height="22" 
            left="10"
            right="10" 
           />

    </mx:Panel>
</mx:Application>

Funktion

Klicken Sie zur Anzeige aller Quelldaten mit der rechten Maustaste auf die Flex-Anwendung und wählen Sie im Kontextmenü die Option "View Source" (Quelle anzeigen) aus.

Zurück zum Anfang

---

Weitere Informationen

Weitere Informationen zum Einbetten von Objekten finden Sie im Entwicklerhandbuch Flex 2 Developer's Guide* im Abschnitt "Sizing and Positioning Components" (Größenänderung und Positionierung von Komponenten).

Die Autoren