search

rowe42 / lhm_animad_admin_html5

0 stars 6 forks source link

Elemente nebeneinander abbilden #55

Closed rowe42 closed 6 years ago

rowe42 commented 6 years ago

Problem: Bei Objekten mit vielen Feldern wird eine Seite schnell lang und unübersichtlich. Zur Verbesserung könnte man bei genügend Platz (z.B. Desktop) die Elemente nebeneinander anordnen.

Vgl. https://www.webcomponents.org/element/PolymerElements/app-layout/demo/app-grid/demo/index.html

Optionen

  1. Generell ein Grid-Layout festlegen. Elemente werden nebeneinander ansortiert, so lange Platz ist. Damit wird Platz gespart, aber es gibt keine spezifische Semantik, welche Objekte nebeneinander liegen. Dafür könnte man dies auch generell einführen.
  2. Fachlich festlegen, welche Elemente nebeneinander gestellt werden sollen. Dazu müsste man aber an generierte Seiten Hand anlegen, um sie zu strukturieren. Dies würde wohl auch die Übergenerierung unmöglich machen (?).
rowe42 commented 6 years ago

Fragen:

xdoo commented 6 years ago

Zu den Optionen:

  1. Durch ein Gridlayout werden die Elemente nicht per default nebeneinander angeordnet.
  2. Das ist genau der Punkt: es wird Hand an der Seite (!!!) angelegt, nicht aber an den Komponenten. Die Komponenten können jederzeit übergeneriert werden. In die Komponente kommst du mit CSS Mixins rein. Genau so ist das Konzept: Die Seite wird einmal generiert, die Komponenten jedesmal und alle sind glücklich.

Dadurch stellen sich m. M. nach die obigen Fragen nicht mehr.

xdoo commented 6 years ago

Ich nehme mal die Kollegen mit in die Diskussion: @dragonfly28 @ejcsid

rowe42 commented 6 years ago

Nach meinem Verständnis generiert der Generator sowohl

Ich verstehe, dass die Komponenten jederzeit ohne Probleme übergeneriert werden können. Ich verstehe aber auch, dass der Generator die "View" nach Vorgabe der DSL erzeugt. Und wenn ich an der View Änderungen mache, kann ich sie zukünftig nicht mehr übergenerieren (oder ich verliere meine Änderungen und muss diese erneut einarbeiten).

Es wäre nun mein Anspruch, auch möglichst viele Views so zu generieren, dass ich sie nicht mehr weiter bearbeiten muss. Das hätte den Vorteil, dass ich zu dieser View später mal z.B. eine neue Komponente hinzufügen kann und das Ganze ohne Verlust neu generieren lassen könnte.

Unter diesem Anspruch wäre es doch Beste, wenn die View möglichst so generiert wird, dass sie in vielen Fällen ohne weitere Bearbeitung genutzt werden kann. Und deshalb sollten wir überlegen, ob wir generell auf den Views für die Felder nicht ein floating layout einführen, das standardmäßig die Felder nebeneinander setzt. Und das ist der Hintergrund dieses Issues und der o.g. Fragen.

Verständlich?

xdoo commented 6 years ago

Ja, verstehe ich. Ich glaube das Hauptproblem hierbei ist, dass sich unsere Erwartungshaltungen an die Views fundamental unterscheiden :) Ich habe in #52 erläutert, was ursprünglich die Idee war. Die finde ich auch noch gut. D.h. aber nicht, dass man sie nicht nochmal hinterfagen kann. Wir sollten aus meiner Sicht erst einmal klären mit welchen Erwartungen/Ideen wir an den Generator heran gehen, bevor wir eine Ebene tiefer diskutieren.

DirkGern commented 6 years ago

Aus dem Bauch raus würde ich sagen, dass mit der MSA auch zu kleinteiligeren Oberflächen kommen und deshalb weniger vollgepackte Oberflächen, die mehrere Elemente nebeneinander benötigen, reden. Ich kenne allerdings auch die Anforderung von Power-Usern, die möglichst viel auf einem Bildschirm sehen wollen. Ich würde trotzdem die Anforderung erstmal nach hinten schieben.

xdoo commented 6 years ago

Wie gesagt - es gibt einen Weg (den wir auch schon verwenden) um allen Anforderungen gerecht zu werden:

  1. Durch ein Gridlayout werden die Elemente nicht per default nebeneinander angeordnet.
  2. Das ist genau der Punkt: es wird Hand an der Seite (!!!) angelegt, nicht aber an den Komponenten. Die Komponenten können jederzeit übergeneriert werden. In die Komponente kommst du mit CSS Mixins rein. Genau so ist das Konzept: Die Seite wird einmal generiert, die Komponenten jedesmal und alle sind glücklich.

Durch CSS Mixins können wir die Formulare auch nachträglich noch sortiern, wie wir das benötigen. Ich werde dazu mal einen Proof of Concept machen.

xdoo commented 6 years ago

Die Diskussion wie kleinteilig eine View generiert werden soll, würde ich aus diesem Issue heraus halten.

dragonfly28 commented 6 years ago

KISS!!! Mein Anspruch wäre, dass in den Views ein Default-Workflow abgebildet ist (CRUD). Ich sehe nicht, dass wir in der DSL umfangreiche Möglichkeiten für Navigation/Workflows benötigen. Die View ist der Ort, an dem der Entwickler seine Arbeit mit den Komponenten beginnt, ich glaube, es ist sehr viel einfacher hier im Code zu arbeiten, denn auf einer Modellierungsebene.

xdoo commented 6 years ago

Habe ein Beispiel gebaut. Das Ergebnis sieht im Firefox so aus:

screenshot-2018-1-15 animad

Ich habe hier die beiden Input Felder nebeneinander abgebildet und den Namen (das ist eigentlich das erste Feld) in die die zweite Spalte platziert, die Zeit in die erste Spalte. Gemacht habe ich das ganze in der View. Natürlich werden hierdurch alle gleichartigen Formulare gesteuert, die sich auf der View befinden.

So sieht der Code aus:

<dom-module id="animad-enclosures-view">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
        --animad-enclosure-form: {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-column-gap: 5px;
        }

        --animad-enclosure-name-field: {
          grid-column: 2;
          grid-row:1;
        }

        --animad-enclosure-cleaningTime-field: {
          grid-column: 1;
          grid-row:1;
        }
      }
    </style>
    ...

Ich habe dafür den commit https://github.com/xdoo/lhm_animad_admin_html5/commit/5c67b2851de0323765a6bcdded9e627d4b79b65d im Branch _#55 genutzt. Den CSS Demo Code werde ich nicht in den Master mergen, da es sich nur um den Beweis handelt, dass das was ich behauptet habe auch funktioniert :)

Das Issue sollte aus meiner Sicht damit geschlossen werden. Ggf. sollte aber ein Issue eröffnet werden, um die angewendete Technik zu dokumentieren. Hier stellt sich nur die Frage wo wir das dokumentieren.

rowe42 commented 6 years ago

Habe ich mir angeschaut. Leuchtet mir ein und macht Sinn. Der Generator müsste dann für jedes eingebaute Feld einen Class-Name vergeben und diesen im Feld und im style-Bereich setzen, damit man das von außen steuern kann, richtig?

Am 15. Januar 2018 um 17:19 schrieb Claus Straube notifications@github.com :

Habe ein Beispiel gebaut. Das Ergebnis sieht im Firefox so aus:

[image: screenshot-2018-1-15 animad] https://user-images.githubusercontent.com/712911/34951411-8698ab7c-fa16-11e7-9960-3f8f2e91e64e.png

Ich habe hier die beiden Input Felder nebeneinander abgebildet und den Namen (das ist eigentlich das erste Feld) in die die zweite Spalte platziert, die Zeit in die erste Spalte. Gemacht habe ich das ganze in der View. Natürlich werden hierdurch alle gleichartigen Formulare gesteuert.

So sieht der Code aus: