Freigeben über


Verhaltensrichtlinie für Renderer adaptiver Karten

Die folgende Spezifikation beschreibt die Entwurfsrichtlinien, die befolgt werden sollten, wenn das Verhalten eines Renderers in Bezug auf die Analyse der Beziehung zwischen den Kartenelementen implementiert wird.

Wichtig

Dieser Inhalt ist noch nicht final. Schau später wieder rein.

Verhalten

Der Renderer MUSS beim Rendern von Kartenelementen hinsichtlich der in diesem Dokument erwähnten Attribute die folgenden Verhaltensweisen berücksichtigen.

  1. Einschränkungen
  2. Bildgröße
  3. Action.Submit

Einschränkungen

Der Renderer sollte Einschränkungen verwalten und dabei die verschiedenen Faktoren berücksichtigen wie Rand, Abstand, Höhe und Breite usw. sowie die Konfiguration der Kartenelemente und ihrer untergeordneten Elemente.

Breite

  1. Zulässige Werte: auto, stretch und feste Werte in Bezug auf pixels und weight
  2. auto bietet ausreichend Platz für die Ausdehnung der Breite (unterstützt minimale Ausdehnung )
  3. stretch nimmt die verbleibende Breite in Anspruch (unterstützt die maximale Ausdehnung )

In den folgenden Szenarien wird beschrieben, wie sich unterschiedliche Breitenkombinationen für Spalten auf die Einschränkungen auswirken.

auto vs. stretch

  1. Spalten mit einer auto- und stretch-Breite.

Spalte mit „auto“- und „stretch“-Breite

  • Die erste Spalte mit auto-Breite verwendet ausreichend Platz, um den Inhalt anzuzeigen, und die zweite Spalte mit stretch-Breite nimmt den gesamte Platz ein.
  1. Spalten mit nur stretch-Breite

Spalte mit nur „stretch“-Breite

  • Spalten mit nur „stretch“-Breite nehmen den verbleibenden Platz ein, nachdem sie den Platz gleichmäßig untereinander aufgeteilt haben.
  1. auto, stretch und auto

Spalte mit Kombination aus „auto“- und „stretch“-Breite

Die Breite der ersten und dritten Spalte wird zuerst so angepasst, dass die Elemente ausreichend aufgenommen werden, und die zweite Spalte mit „stretch“-Breite beansprucht den verbleibenden Platz.

  1. Reihenfolge der Anzeige von Elementen mit Spalten mit auto-Breite

Spalten mit einer „auto“-Breite

  • Spalten mit auto-Breite positionieren sich selbst so, dass ausreichend Platz vorhanden ist, um den zu rendernden Inhalt aufzunehmen.
  • Im Falle von Bildansichten werden Bilder so herunterskaliert, dass sie in die verbleibende Breite passen.
  • Hinweis: Bilder werden nur für die Bildgrößen stretch und auto herunterskaliert, aber nicht für feste Breiten und Höhen in Pixel.

weights vs. pixels

  1. Spalten mit Kombination aus weight- und pixel-Breite

Spalten mit einer Kombination aus gewichteter und Pixel-Breite

  • Die obige Karte enthält drei Spalten mit der folgenden Breitenkonfiguration:
  • Column1: Weight 50, Column2: 100pxColumn3: Weight 50
  • Die Breite von Spalte 2 wird vom pixel value bestimmt.
  • Die Breite von Spalte 1 und 3 wird auf Grundlage von weights und der berechneten weight ratio angepasst.
  1. Spalten mit den Attributen weight, pixel width und auto

Spalten mit einer Kombination aus „weight“, „pixel width“ und „auto“

  • Die obige Karte enthält vier Spalten mit der folgenden Breitenkonfiguration:
  • Column1: Weight 50, Column2: 100px, Column3: Weight 50 und Column4: auto
  • Hinweis: Eine Bildansicht mit einer Spalte mit auto-Breite wird so herunterskaliert, dass sie in den verbleibenden Platz passt.

Die Rangfolge der Anzeige von Elementen mit „width“-Attribut

px > weight > auto > stretch

Höhe

Zulässige Werte: auto und stretch

In den folgenden Szenarien wird beschrieben, wie sich unterschiedliche Breitenkombinationen für Spalten auf die Einschränkungen auswirken.

  1. Elemente dehnen sich vertikal frei aus, wenn die Karte keine feste Höhe hat.

Spalten mit „auto“- und „stretch“-Höhe

  • Beide Spalten können sich unabhängig von auto- und stretch-Werten ausreichend vertikal ausdehnen.
  • Dies ist der Fall bei für den Textblock deaktivierter Eigenschaft wrap.
  1. Bei der folgenden Karte ist für den Textblock die Eigenschaft wrap aktiviert.

Spalte mit „wrap“-Eigenschaft für Textblock

Abstände und Trennzeichen

  1. Spacing (Abstände): Zulässige Werte: none, small, default, medium, large, extra large und padding
  • Das Attribut „spacing“ fügt Abstand zwischen diesem Element und dem vorangehenden Element hinzu.

Elemente mit unterschiedlicher „spacing“-Kombination

  • Das Attribut „spacing“ hat keine Auswirkung, wenn es das erste Element im Ansichtscontainer ist.

Element, bei dem „spacing“ keine Auswirkung hat

  • Die mit einem Pfeil markierten Elemente sind die ersten Elemente unter ihren nebengeordneten Elementen, sodass „spacing“ keine Auswirkung hat.
  1. Separator (Trennzeichen): Mögliche Werte: Ein-/Aus-Umschalter
  • Zeichnet eine Trennlinie am oberen Rand des Elements.

Elemente mit „separator“-Attribut

  1. Kombination aus „spacing“ und „separator“
  • Die Einschränkungen der Kombination aus „spacing“ und „separator“ sind unten dargestellt.

Kombination aus „spacing“ und „separator“

  • Der Gesamtabstand wird in Bezug auf die angegebenen Werte beibehalten.
  • Das Trennzeichen wird in der Mitte der Abstandsentfernung hinzugefügt.

[Hinweis: Der Abstand, bei dem das Trennzeichen in den Abstandsbereich eingefügt wird, muss bestätigt werden. Scheint die Mitte zu sein.]

Containerstile

  • Stellt Formatierungshinweise für Container wie Spalten und Spaltensätze (ColumnSet) bereit.
  • Zulässige Werte: none, default, emphasis, good, attention, warning und accent
  • Diese vordefinierten Stiloptionen bieten Abstand für die Elemente innerhalb des Containers und die Hintergrundfarbe.

Kombination aus den Stilen „columns“ und „ColumnSet“

  1. Karte A veranschaulicht „columns“ und „columnset“ ohne Stiloptionen
  2. Karte B veranschaulicht „columnset“ mit dem Attention-Stil (Achtung). Beachten Sie den Abstand innerhalb des „columnset“-Containers und die Änderung der Hintergrundfarbe.
  3. Karte C veranschaulicht nur „columns“ mit Formatierung. Ähnlich wie im vorherigen Beispiel beinhaltet „columns“ Abstand und Änderung des Hintergrunds.
  4. Karte D veranschaulicht „columns“ und „columnset“, beide mit Stiloptionen.

[Hinweis: Die Methode zur Bestimmung des Abstands muss überprüft werden. Wird er vom Host bestimmt? ]

Bleed (Anschnitt)

  • Diese Eigenschaft ermöglicht es einem Container wie „columns“ und „columnset“, in sein übergeordnetes Element überzugehen.
  • Mögliche Werte: on und off.

Spalte mit Eigenschaft „bleed“

  1. Karte A veranschaulicht „columns“ und „columnset“ mit normaler Formatierung.
  2. Karte B veranschaulicht die erste Spalte mit Option „bleed“. Der Inhalt schneidet so gerade die Ränder zu seinem übergeordneten Element an.

Bildgröße:

Size-Attribut

  • Zulässige Werte: auto, stretch, small, medium, large
  • auto : Bilder werden nach unten skaliert, soweit erforderlich, aber nicht nach oben skaliert, um den Bereich auszufüllen.
  • stretch : Bild, das sowohl nach unten skaliert als auch nach oben passt.
  • smallund mediumlarge: Das Bild wird mit einer festen Breite angezeigt, wobei die Breite vom Host bestimmt wird.
  1. auto vs. stretch

Bild mit „auto“- und „stretch“-Verhalten

  1. Kombination aus Spaltenbreite und Bildgröße

Screenshot, der die Kombination aus Spaltenbreite und Bildgröße zeigt.

  • Im Allgemeinen ermöglichen Spalten mit stretch-Breite Bildern das freie Skalieren gemäß der stretch-Größe.
  • Spalten mit auto-Breite gestatten es dem Bild, einen exakten Raum einzunehmen, unabhängig von der auto- und stretch-Größe des Bilds.
  • Die Spaltenbreite hat Vorrang bei der Bestimmung der Bildgröße in dieser Anordnung.

Bildattribut Width (in pixels)

  • Dieses bietet die gewünschte Breite des Bilds auf dem Bildschirm.
  • Die size-Eigenschaft wird außer Kraft gesetzt, wenn ein Wert angegeben wird.

Kombination aus Spaltenbreite und Bildbreite in Pixel

  • Die Spalte mit auto-Breite hat Vorrang vor stretch bei der Bereitstellung von Raum für Bildinhalte in dieser Anordnung.

Kombination aus Spaltenbreite („weight“ und „pixel“) und Bildgröße („auto“ und „stretch“)

Kombination aus Spaltenbreite und Bildgröße

  • Bilder mit auto-Größe nehmen ausreichend Platz zum Ausdehnen (oder für eine Herunterskalierung) ein, innerhalb der Spalteneinschränkungen durch die Breiten weight und pixel.
  • Bilder mit der stretch-Größe können so ausgedehnt werden, dass sie den verbleibenden Platz einnehmen, innerhalb der Einschränkungen durch die Spaltenbreiten weight und pixel.

Aktion.Absenden

  • Das Action.Submit-Element sammelt Eingabefelder, führt diese mit einem optionalen Datenfeld zusammen und sendet ein Ereignis an den Client.
  • Ein signifikanter Unterschied beim Verhalten des Elements zeigt sich von Version 1.x auf 2.x des ACL-Renderers.

Kombination aus Spaltenbreite und Bildbreite

  • 1.x Renderer: Die Eingaben werden aus allen Feldern gesammelt, unabhängig davon, wo in der Hierarchie sich das Eingabefeld befindet.
  • 2.x Renderer: Die Eingaben werden aus Feldern gesammelt, die im übergeordneten Container oder als nebengeordnetes Element des Action.Submit-Elements vorhanden sind.

Zusammenfassung

  • Die Spaltenbreite hat Vorrang bei der Bestimmung der Größe des Bilds als seine Bildgröße („auto“, „stretch“, „min width“ usw).
  • Die Rangfolge der Spaltenbreite, die zur ausreichenden Anzeige des Inhalts verwendet wird: px>weight>auto>stretch
  • Bild-size („auto“, „stretch“) wird ignoriert, wenn Bild-width und -height in Pixel (px) bereitgestellt werden.
  • Das Größenattribut stretch des Bilds führt nur dann zu einer Hochskalierung des Bilds, wenn noch Platz übrig ist und „auto“ der Spalte nicht den Wert auto hat.
  • Ein Bild dehnt sich selbständig bis zu der Grenze aus, bei der es sein Seitenverhältnis in dem in der Spalte verfügbaren Raum beibehält. Die Höhe wiederum wird frei ausgedehnt.
  • Das Attribut Spacing hat keine Auswirkung, wenn es das erste oder einzige Element unter seinen nebengeordneten Elementen ist.