Datenlisten und Bedienfelder mit Bildlauf

Flash Catalyst CS5 enthält zwei integrierte Komponenten für die effiziente Präsentation großer Inhaltsmengen auf begrenztem Raum: Datenlisten und Bedienfelder mit Bildlauf.

Datenlisten im Überblick

Eine Datenliste ist eine Spezialkomponente zur Anzeige einer Reihe von verwandten Elementen. Beispiel: Mit einer Datenliste können Sie eine Sammlung von Miniaturbildern in einer Fotogalerie anzeigen.

  • Datenlisten können Sie auf der Seite horizontal, vertikal oder in einem Raster anordnen.

  • Durch Hinzufügen einer Bildlaufleiste können Sie die Liste auf eine beliebige Anzahl von Elementen erweitern.

  • Jede Datenlistenkomponente muss ein Master-Element enthalten. Dies ist das „wiederholte Element“. Das wiederholte Element ist eine Vorlage, die das Aussehen aller Elemente in der Liste definiert. Beispiel: Sie können ein wiederholtes Element mit einem Bild, beschreibendem Text und den Status „normal“, „darüber“ und „gedrückt“ erstellen. Alle Elemente der Liste haben diese Elemente und Eigenschaften gemeinsam. Änderungen am wiederholten Element werden zur Laufzeit automatisch auf alle Listenelemente angewendet.

  • Datenlisten werden meist mit einer Datenquelle verbunden und zur Laufzeit dynamisch mit Daten gefüllt. Diese Verbindung können Entwickler mithilfe von Adobe Flash Builder herstellen. In Flash Catalyst können Sie im Bedienfeld „Entwurfszeitdaten“ lediglich Platzhalterdaten für die Listenanzeige angeben.

Komponenten für Datenlisten erstellen

  1. Platzieren Sie eine Kopie der ersten Elemente der Datenliste auf der Zeichenfläche. Wenn die Liste einen Regler, eine Bildlaufleiste oder ein ähnliches Steuerelement erfordert, fügen Sie dieses zur Zeichenfläche hinzu. Bringen Sie das Steuerelement auf die Ihrem Designplan entsprechende Größe. Wählen Sie diese Objekte aus.

    A.
    Bilder und Text werden als wiederholte Elemente verwendet

    B.
    Bei einer Datenliste mit mehreren Elementen fügen Sie eine Bildlaufleiste hinzu

  2. Klicken Sie im HUD auf „Komponente wählen“ > „Datenliste“.

    Flash Catalyst erstellt die Datenliste und gibt im HUD eine Meldung aus. Mit dieser Meldung werden Sie aufgefordert, die für das erforderliche Teil der Datenliste zu verwendenden Grafikelemente anzugeben. Das erforderliche Teil ist ein wiederholtes Element.

  3. Behalten Sie die Auswahl der neuen Komponente in der Zeichenfläche bei und klicken Sie im HUD auf „Teile bearbeiten“.

    Flash Catalyst wechselt in den Direktbearbeitungsmodus, um das Bearbeiten der Teile und Status der Komponente zu ermöglichen.

  4. Wählen Sie die als wiederholtes Element zu verwendenden Elemente in der Zeichenfläche aus. Schließen Sie keine Bildlaufleiste oder sonstigen Steuerelemente in das wiederholte Element ein.

  5. Klicken Sie im HUD auf „Teil wählen“ > „Wiederholtes Element“ (erforderlich).

    Flash Catalyst konvertiert das ausgewählte Element in das Teil für das wiederholte Element. Standardmäßig ist die Liste vertikal ausgerichtet.

  6. Wählen Sie das wiederholte Element aus und wählen Sie im Layoutbereich des Bedienfelds „Eigenschaften“ entweder „Vertikal“, „Horizontal“ oder „Kacheln“. Zusätzliche Formatierungen, z. B. „Zellauffüllung“, wenden Sie über das Bedienfeld „Eigenschaften“ an. Mithilfe der Auswahlgriffe können Sie den Begrenzungsrahmen des wiederholten Elements auf die laut Designplan vorgesehene Größe bringen.

  7. Doppelklicken Sie auf das wiederholte Element, um es im Bedienfeld „Seiten / Status“ zu öffnen.

    Wiederholte Elemente weisen die Status „normal“, „darüber“ und „ausgewählt“ auf.

  8. Bearbeiten Sie die Status der Elemente gemäß Ihrem Designplan.

  9. Schließen Sie die Datenlistenkomponente und kehren Sie zur Zeichenfläche zurück.

    Sie haben eine Datenlistenkomponente erstellt. Zuerst zeigt diese jedoch nur dasselbe wiederholte Element mehrfach an. Im Bedienfeld „Entwurfszeitdaten“ können Sie die vorläufigen Bilder durch realistischere Daten ersetzen. Die Entwurfszeitdaten zeigen dem Entwickler, wie die Anwendung zur Laufzeit aussieht.

Entwurfszeitdaten hinzufügen

  1. Wählen Sie die Datenlistenkomponente in der Zeichenfläche aus und öffnen Sie das Bedienfeld „Entwurfszeitdaten“.

    Das Bedienfeld „Entwurfszeitdaten“ zeigt die Elemente Ihrer Liste an. Zunächst sind alle Elemente in der Liste identisch.

  2. Wenn das wiederholte Element Text enthält, können Sie den Text eines jeden Listenelements bearbeiten. Enthält das wiederholte Element ein Bild, klicken Sie im Bedienfeld „Entwurfszeitdaten“ auf eines der vorläufigen Bilder.

    Das Dialogfeld „Element wählen“ wird geöffnet.

  3. Wählen Sie im Dialogfeld „Element wählen“ ein Bild aus, das in der Datenliste angezeigt werden soll und klicken Sie auf „OK“.

    Das Bedienfeld „Entwurfszeitdaten“ wird aktualisiert und zeigt die neuen Bilder und den neuen Text an.

    Hinweis: Wenn die Projektbibliothek das für die Datenliste gewünschte Bild nicht enthält, können Sie dieses importieren.
  4. Ersetzen Sie die übrigen wiederholten Elemente durch Entwurfszeitdaten.

  5. Um weitere Elemente zur Datenliste hinzuzufügen, klicken Sie auf „Zeile hinzufügen“ und ersetzen Sie das vorläufige Bild durch ein Bild Ihrer Wahl.

Grafik in Originalgröße anzeigen
A.
Bedienfeld „Entwurfszeitdaten“ (erweitert)

B.
Dialogfeld „Element wählen“

Hinweis: Nach dem Erstellen der Datenliste können Sie dem wiederholten Element weitere Bilder bzw. zusätzlichen Text hinzufügen. Öffnen Sie das wiederholte Element und fügen Sie die erste Instanz des neuen Bildes oder Texts hinzu. Wählen Sie das neue Element und wählen Sie „Ändern“ > „Text zu Entwurfszeitdaten hinzufügen“ oder „Grafik zu Entwurfszeitdaten hinzufügen“. Dem Bedienfeld „Entwurfszeitdaten“ wird eine neue Spalte hinzugefügt. Um ein wiederholtes Element zu entfernen, wählen Sie es aus und wählen Sie „Ändern“ > „Aus Entwurfszeitdaten entfernen“.

Ein ausgezeichnetes Beispiel zum Erstellen von Datenlisten finden Sie hier: Flash Catalyst Beta 1: Building a Website II.

Bedienfelder mit Bildlauf im Überblick

Beim Webdesign tritt häufig das Problem auf, dass in einem Fenster der Platz für die Darstellung des erforderlichen Inhalts fehlt. Eine Lösung bieten Bedienfelder mit Bildlauf. Ein Bedienfeld stellt einen wohldefinierten Container für Inhalte der Benutzeroberfläche dar. Durch Hinzufügen von Bildlaufinhalten und einer Bildlaufleiste bringen Sie mehr Informationen auf begrenztem Raum unter. Um in Flash Catalyst ein Bedienfeld mit Bildlauf zu erstellen, benötigen Sie Folgendes:

  • ein Objekt, das das Bedienfeld definiert, z. B. eine Rechteckform (optional)

  • Bildlaufinhalt, z. B. einen langen Textblock oder eine Bilderreihe (erforderlich)

  • eine Bildlaufleiste für den Bildlauf durch den Inhalt (empfohlen)

    Hinweis: Es ist technisch möglich, ein „Bedienfeld mit Bildlauf“ ohne Bildlaufleiste zu erstellen. Da hierbei Teile des Inhalts nicht zugänglich sind, ist diese Variante nicht sinnvoll.

Bedienfelder mit Bildlauf erstellen

  1. Importieren oder zeichnen Sie ein Objekt, das den Bereich des Bedienfelds definiert (optional).

  2. Wählen Sie den Inhalt aus, der per Bildlauf dargestellt werden soll. Um Bildlauftext zu erstellen, verwenden Sie das Textwerkzeug im Bedienfeld „Werkzeuge“.

  3. Platzieren Sie den Bildlauftext im Bedienfeld oder richten Sie eine Objektserie aus. Lassen Sie an der rechten oder unteren Kante des Bedienfelds Platz für die Bildlaufleiste frei.

    Hinweis: Vorläufig ragt der Bildlaufinhalt über den Bereich des Bedienfelds hinaus.
  4. Erstellen Sie eine Bildlaufleiste oder ziehen Sie eine Bildlaufleiste aus dem Bedienfeld „Wireframe-Komponenten“ heraus. Platzieren Sie die Bildlaufleiste und passen Sie ihre Größe an den Bedienfeldbereich an.

    Zwei Beispiele für Teile von Bedienfeldern mit Bildlauf vor dem Erstellen der Komponente „Bedienfeld mit Bildlauf“

  5. Wählen Sie alle Teile des Bedienfelds mit Bildlauf aus. Klicken Sie im HUD auf „Komponente wählen“ > „Bedienfeld mit Bildlauf“.

    Eine HUD-Meldung erinnert Sie daran, die Teile der Komponente zu bearbeiten.

  6. Klicken Sie auf „Teile bearbeiten“.

    Eine weitere Meldung weist darauf hin, wie das Bildlaufteil des Bedienfelds erstellt wird.

  7. Wählen Sie die Objekte (Textblock oder Objektserie), durch die der Bildlauf durchgeführt werden soll.

  8. Klicken Sie im HUD auf „Teil wählen“ > „Bildlaufinhalt“.

    Ein neuer Begrenzungsrahmen definiert den sichtbaren Bereich des Bildlaufinhalts.

  9. Passen Sie gegebenenfalls die Größe des Begrenzungsrahmens des Bildlaufinhalts an, sodass er in den Bereich des Bedienfelds passt.

  10. Schließen Sie das Bedienfeld mit Bildlauf über die Breadcrumbleiste. Wählen Sie „Datei“ > „Projekt ausführen“, um die Komponente zu testen.

    Fertige Komponente „Bedienfeld mit Bildlauf“ zur Anzeige eines Textblocks auf begrenztem Raum per Bildlauf

Weitere Informationen zum Erstellen von Text in Flash Catalyst finden Sie unter Erstellen von Formen, Linien und Text.