Anordnung von WIM-App-Modulen
<2013-03-28>
Innerhalb eines (BOX-)Moduls können Module in verschiedener Art und Weise angeordnet werden. Dieser Beitrag geht näher darauf ein.

Verschiedene Modi-Gruppen:

Innerhalb eines Moduls können Client-Module nach verschiedenen Positionierungs-Verfahren angeordnet werden. Für alle Clients eines Moduls sollte dabei das gleiche Verfahren anwendet werden.

Positionierungs-Verfahren:

position:static; ("herkömmlich" nacheinander aufgereihte HTML-Elemente):

Die HTML-Elemente der CLient-Module werden gemäß dem normalen Elemente-Fluß, ohne spezielle Positionierung, (untereinander) angeordnet. Es wird jedoch verfolgt /vermessen, wieviel des verfügbaren Platzes bereits verbraucht ist, um ggf, ein letztes Client-Element, dass den restlichen verfügbaren Platz einnehmen soll, mit entsprechend gesetzter (maximaler) Höhe zu versehen ("static"-Positionierung).

Wann immer möglich, sollte die Anordnung der Client-Module mit Modi dieses Positionierungs-Verfahrens erfolgen, weil die Browser derzeit dafür optimiert sind.

Modi für die static-Positionierung:

default (Default-Anordnung des Darstellungs-Elementes):
In diesem Modus angeordnete Elemente folgen den "normalen" HTML-Anordnungsregeln. So werden z.B. danach angesiedelte Elemente bei Bedarf (nach unten) verschoben, wenn die Darstellung des Inhalts des Client-Moduls mehr Platz benötigt.
limited (Element mit begrenzter [Maximal-]Höhe versehen):

Die "limited" -Clients bekommen eine Höhen-Vorgabe. Diese kann bei Überschreitung zum Einblenden einer Scrollbar genutzt werden.

Besitzt das einbettende Modul selber eine "maxHeight"-Vorgabe, aber keine "height"-Vorgabe, wird auch für das "limited"-Client-Modul eine maxHeight-Vorgabe gesetzt. Das führt dazu, dass das Client-Modul sich bis zu seinem Maximalwert ausdehnen kann und der Browser dann auch gleich das Darstellungs-Element ded einbettenden Moduls entsprechend mit ausdehnt.

  • Alle Änderungen des Platzbedarfes der Client-Module müssen dem einbettenden Modul mitgeteilt werden. Nur dann kann es den verfügbaren Platz für ein Client-Modul im limited-Modus bestimmen und die Darstellung bei Bedarf nachjustieren.
  • Innerhalb eines Darstellungs-Layers des (BOX-)Moduls dürfen entweder nur "default" und "limited" oder die anderen Modi verwendet werden !
position:absolut; (explizit platzierte HTML-Elemente):

Bei diesen Positionierungs-Modi werden die HTML-Elemente "absolut" positioniert. Der normale Elememte-Fluss ist außer Kraft gesetzt. Die Anordnungen müssen vom einbettenden Modul bei Bedarf nachgeführt werden. Durch Verwendung der CSS-Parameter "left", "top", "right" und "bottom" kann aber erreicht werden, dass bereits direkt durch den Browser Anpassungen der Darstellung gemacht werden, wenn sich die Größe oder Position der Darstellung ändert.

Bei der Platzierung kann es notwendig werden, mehrere sich überlagernde Darstellungsebenen zu verwenden. Für jede Darstellungsebene wird separat verfolgt, wie weit diese Ebene bereits mit Elementen aufgefüllt ist.

Modi für die absolute-Positionierung:

top (oben anschließend):
Element im noch verfügbaren Bereich des angegebenen Layers oben-bünd [ tbd ... ]
xxx (...):
[ tbd ... ]
xxx (...):
[ tbd ... ]
xxx (...):
[ tbd ... ]
Themen hierzuAssciated topics:

HTML Darstellungen beim Client BOX-Module CSS3 Reaktives WIM Aktives WIM WIM-App-Verfahren (techn.)

Das könnte Sie auch interessierenFurther readings:
Wann und wie werden im WIM-System Daten codiert?
<2013-08-12>
Aus technischen Gründen werden Zeichenfolgen im WIM-System für die Speicherung oder Übertragung systematisch verändert. Beispielsweise für XHTML-Daten.   Mehr »
Steuerung der Darstellung von Objekten
<2019-02-03>
Das openWIM-System bietet die Möglichkeit, die Darstellung von Themen, Dokumenten, usw. in weiten Teilen zu gestalten, ohne dass dazu Änderungen im Programmcode oder an (HTML-)Vorlagen nötig sind.   Mehr »
Anordnung von WIM-App-Modulen
<2013-03-28>
Innerhalb eines (BOX-)Moduls können Module in verschiedener Art und Weise angeordnet werden. Dieser Beitrag geht näher darauf ein.   Mehr »
Gestaltungs-Hinweise für WIM-Anwendungen
<2014-06-28>
Im Prinzip bietet eine mit dem WIM-System sehr große Freiheiten beider Gestaltung. Um jedoch eine bessere Nutzbarkeit zu erreichen, sollten einige Grundregeln beachten werden.   Mehr »
openWIM beim Handy und Tablet
Von: @VB <2015-04-23>
Die Nutzung des Internets geschieht zunehmend über mittels Smartphones und Tablett-PCs. Neben der Touch-Bedienung stellt die Darstellung auf den eher kleinen Displays signifikant andere Anforderungen.   Mehr »
Internet-Links für openWIM-Entwickler
<2020-03-10>
In den Weiten des Internets gibt es etliche hilfreiche Internetpräsenzen und Dokumente, die für die Entwickler des openWIM-Systems hilfreich sein können. Hier sind einige aufgelistet:   Mehr »
Aufbau einer Internetpräsenz mit dem WIM-System
<2013-08-04>
Mit dem WIM-System können kleine, überschaubare Internetpräsenzen leicht aufgebaut werden, aber auch sehr umfangreiche. Diese Info soll einen Überblick über den Aufbau des WIM-Systems und das Zusammenspiel seiner wichtigsten Komponenten geben.   Mehr »
Bereithalten der Verknüpfungsdaten aller wichtigen Themen in der WIM-App
<2013-05-05>
Die Verknüpfung von Themen untereinander spielt bei der Verarbeitung der Daten in der WIM-App eine wichtige Rolle. Alle dafür notwendigen Daten zumindest der wichtigsten Themen werden daher vorab in die WIM-App geladen.   Mehr »
Was ist die Rolle der "Dialoge" (einschließlich "Meldungen") im openWIM-System?
<2015-04-05>
Bei Darstellungen von Dokumenten, Themen usw. sowie zur Gesamtdarstellung können bei bestimmten Anlässen "Dialoge" (im einfachsten Fall "Meldungen") überlagernd dargestellt werden.   Mehr »
Wie werden Infos oder Themen sichtbar gemacht?
<2014-05-24>
Bei verschiedensten Anlässen wird es notwendig, bestimmte Moduldarstellungen für die Nutzer sichtbar zu machen. Dieses kann beispielsweise durch Scrollen oder intransparent machen geschehen,
Hier werden die dabei verwendeten Verfahren beschrieben.
   Mehr »
Wie geschieht das Fokus-Handling im WIM-System?
<2014-05-21>
Die Interaktionen der Nutzer mit der WIM-App erfolgen in aller Regel mit einer ganz bestimmten Darstellungs-Komponente wie beispielsweise einem Texteingabefeld eines Moduls (bzw. seiner Darstellung).
Hier wird beschrieben, wie Änderungen des Interaktionsfokus gehandhabt werden.
   Mehr »
Wie geschieht die Koordination zwischen den Modulen im Client?
Von: @VB <2015-04-18>
Die Module zur Darstellung der Informationen sind zwar in einer hierarchischen Struktur miteinander verknüpft, doch die Aufgabenteilung ist sehr kooperativ geregelt. Jedes Modul agiert möglichst autonom in seinen eigenen Aufgabenbereich, stimmt jedoch alle Aktionen, die andere Module betreffen, mit denen ab.   Mehr »
Welche Aspekte sind bei mehrsprachlichen Informationsangeboten besonders relevant?
Von: @VB <2016-10-03>
Bei der Nutzung und dem Betrieb mehrsprachlicher Informationssysteme und Internetpräsenzen sind einige Anforderungen zu beachten. In diesem Dokument werden sie aus der Anwender- und Betreiber-Perspektive diskutiert.   Mehr »
Überwachung der Sitzungen beim openWIM-System
<2017-08-15>
Die Kommunikation der Apps im Browser mit dem Server wird über "Sitzungen" (sessions) geregelt. Mit Hilfe dieses Dokumentes kann eine Übersicht über die beim Server notierten Sitzungen erstellt werden - falls die dafür notwendige Berechtigung aktiv ist.   Mehr »
Wie kann der ordnungsgemäße Betrieb von openWIM-Systemen überwacht werden?
Von: @VB <2015-03-16>
Für eine zuverlässige Nutzung von openWIM-Systemen ist es unerlässlich, dass der laufende Betrieb "in Realzeit" überwacht werden kann. Der openWIM-Monitor wird dazu verwendet und hier beschrieben.   Mehr »
Was ist die Aufgabe der RENDER-Methoden der Client-Module?
<2014-08-03>
Die RENDER-Methode stellt "das Rückgrat" der Aktionen zur Erstellung oder Aktualisierung der Darstellungen in den Client-Modulen dar. Es besteht aus einer Reihe von Abschnitten, die - meist mit Unterbrechungen - Schritt für Schritt abgearbeitet werden.   Mehr »
CSS3-Macken und Tipps
<2014-02-16>
CSS3 spielt eine wichtige Rolle bei der WIM-Darstellung - und fällt manchmal aus der Rolle. Hier werden Macken und Tipps zusammengestellt.   Mehr »
Responsive Design
<2015-01-03>
Unter der Bezeichnung "responsive design" oder "adaptive layout" etc. werden Verfahren zusammengefasst, mit deren Hilfe die Darstellung von Inhalten automatisiert an verschiedene Randbedingungen (Display-Größe, Geräte-Art, ...) angepasst werden kann.   Mehr »
Wie können CSS-Regeln im Polymer-Kontext eingesetzt werden?
Von: @VB <2016-10-02>
Die Style-Regeln gelten bei Web-Komponenten standardmäßig nur "lokal" im Bereich der Komponente und haben fixe Werte. "Globalere" Geltungsbereiche (cross-scope styling) und Änderungen können jedoch auch realisiert werden.   Mehr »
Standard-Request-Parameter
<2013-06-13>
WIM-Requests haben einen Basis-Satz von Parameter. Diese werden hier beschrieben.   Mehr »
Allgemeine Objektparameter
Von: @VB <2015-03-20>
Objekte sind Kern des WIM-Systems. Und "Parameter" (also "Datenwerte") sind essentielle Bestandteile der WIM-Objekte. In dieser Info werden Standard-Parameter kurz vorgestellt.   Mehr »
Ausfallsicherheit ("fail save") im Konzept des WIM-Systems
<2013-02-25>
Auch wenn sich die Systemdesigner und -entwickler noch so viele Mühe geben - es ist prinzipiell nicht vermeidbar, dass ein System "ausfällt". Ein wesentliches Konzept des WIM-Systems ist es, solche "Ausfälle" auf möglichst kleine Bereiche einzugrenzen und möglichst "sicher" abzufangen.   Mehr »
Die Bildrechte werden in der Online-Version angegeben.For copyright notice look at the online version.

Bildrechte zu den in diese Datei eingebundenen Bild-Dateien:

Hinweise:
1. Die Bilder sind in der Reihenfolge ihres ersten Auftretens (im Quelltext dieser Seite) angeordnet.
2. Beim Anklicken eines der nachfolgenden Bezeichnungen, wird das zugehörige Bild angezeigt.
3, Die Bildrechte-Liste wird normalerweise nicht mitgedruckt,
4. Bildname und Rechteinhaber sind jeweils im Dateinamen des Bildes enthalten.