OrgaMon-next: Unterschied zwischen den Versionen

Aus OrgaMon Wiki
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
 
(148 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
* Dies ist die Konzept-Sammlung für die nächste Version des OrgaMon "OrgaMon 9"
* Dies ist die Konzept-Sammlung für die nächste Version des OrgaMon 9, "OrgaMon [[Polyzalos]]"
* OrgaMon setzt wo immer möglich die Programmiersprache "Object-Pascal", auch bei Dingen die in Wirklichkeit mit "JavaScript" implementiert werden müssen (CrossCompile).
* OrgaMon setzt wo immer möglich die Programmiersprache "Object-Pascal", auch bei Dingen die in Wirklichkeit als "JavaScript" im Browser des Anwenders laufen (CrossCompile).
* Als Compiler wird nur noch Free-Pascal eingesetzt, Wegfall von "Delphi"
* Als Compiler wird nur noch Free-Pascal eingesetzt, Wegfall von "Delphi"
* Es werden nur noch Open-Source Komponenten eingesetzt
* Es werden nur noch Open-Source Komponenten eingesetzt
* Die mit der Delphi-IDE erstellte UI entfällt, der cOrgaMon übernimmt die Funktion eines WebServers
* Die mit der Delphi-IDE erstellte UI entfällt, der cOrgaMon übernimmt die Funktion eines WebServers und führt Funktionen des eCommerce-Kernel aus
* dazu ist das [[HTTP2]]-Projekt ein wesentlicher Anteil von OrgaMon 9 [[Polyzalos]]
* cOrgaMon wird vorrangig auf Linux Maschinen installiert, unter systemd als (Type=notify) mit "READY=1" nach lesen der ini
* cOrgaMon wird vorrangig auf Linux Maschinen installiert, unter systemd als (Type=notify) mit "READY=1" nach lesen der ini
* der eCommerce-Kernel soll Schritt für Schritt Kopplungspunkte bekommen wobei Kunden dann Anpassungen machen können. Das Customizing sollte aber auch wieder Open-Source sein und auch Test-Cases beinhalten so dass es für andere Kunden Regeressionsfrei bleibt.  
* der eCommerce-Kernel soll Schritt für Schritt Kopplungspunkte bekommen wobei Kunden dann Anpassungen machen können. Das Customizing sollte aber auch wieder Open-Source sein und auch Test-Cases beinhalten so dass es für andere Kunden Regeressionsfrei bleibt.  
* Die Lazarus-IDE soll auch für Kunden eine Möglichkeit sein, auf den Code einfluss zu nehmen. Dabei soll die neue Paket-Verwaltung von Lazarus den OrgaMon mit wenigen Klicks "installieren" können
* Die Lazarus-IDE soll auch für Kunden eine Möglichkeit sein, auf den Code Einfluss zu nehmen. Dabei soll die neue Paket-Verwaltung von Lazarus den cOrgaMon mit wenigen Klicks "installieren" können


== OrgaMon UI ==
== OrgaMon UI ==
Zeile 25: Zeile 26:
* Es gibt einen Neu Tab.
* Es gibt einen Neu Tab.
* Ein Langer gehaltener Klick auf einen Tab erzeugt einen "Drag"-Event
* Ein Langer gehaltener Klick auf einen Tab erzeugt einen "Drag"-Event
* https://addons.mozilla.org/de/firefox/addon/tab-kit/


==== Tab-Funktionen ====
==== Tab-Funktionen ====
Zeile 31: Zeile 31:
* Anklicken: Der Tab-Inhalt kommt nach vorne, jetzt erst wenn der TabInhalt sichtbar ist wird das kleine "close" sichtbar.
* Anklicken: Der Tab-Inhalt kommt nach vorne, jetzt erst wenn der TabInhalt sichtbar ist wird das kleine "close" sichtbar.
* Schliesst man den Browser mit offenen Tabs muss am nächsten Tag ein reconnect erfolgen mit allen Inhalten parat!!!
* Schliesst man den Browser mit offenen Tabs muss am nächsten Tag ein reconnect erfolgen mit allen Inhalten parat!!!
==== Tabellen ====
* Spaltenbreiten sollen gezogen werden können oder "auto"
* <code>Titel ^v</code> wenn Hoch + Runter zu sehen ist, dann ist KEINE Sortierung aktiv
* <code>Titel v</code> aufsteigende Sortierung
* <code>Titel ^</code> absteigende Sortiertung
* Spaltenlayout soll auf "default" zurückgesetzt werden können
* Spaltenlayout, wie es im Moment ist, soll gespeichert werden können
* 1. Rang, 2. Rang: Idee : Ev. durch den vertikalen Abstand zur Tabelle den Rang symbolisieren, also je höher desto hochrangiger
* Markieren sollte immer gleich funktionieren, "M" dann wird es blau ...


==== Progressbereich ====
==== Progressbereich ====
Zeile 39: Zeile 50:
==== Suchbereich ====
==== Suchbereich ====


OrgaMon ist (wieder) über Hotkeys steuerbar: <ctrl>PN macht "Person" "neu" der Focus steht beim Vornamen usw.
* OrgaMon ist (wieder) über Hotkeys steuerbar: <ctrl>PN macht "Person" "neu" der Focus steht beim Vornamen usw.
* Kann man die oft in Anleitungen oder Bugreports verwendeten Bedienungsketten, also Eingaben benutzten?
* Baustelle &#129046; Reiter "Verfügbar" &#129046; Haken bei [v] Senden &#129046; Button OK


==== SVG woimmer es geht ====
==== SVG woimmer es geht ====
Zeile 49: Zeile 62:


der Start-knopf des OrgaMon, hier kommen die ganzen früheren Menü Möglichkeiten
der Start-knopf des OrgaMon, hier kommen die ganzen früheren Menü Möglichkeiten
==== ARIA Keyboard Support ====
* die Bedienung sollte rein via Keyboard möglich sein, dazu stehen Accessabilty Regeln vor Gutem Aussehen
** https://www.w3.org/TR/wai-aria-1.2/
==== Datenbank Edits ====
Textfeldfarben
weiss: kam so vom server
rosa: ist auf dem Server inzwischen anders
gelb: wurde hier local verändert
es soll so sein, dass eine edit gruppe einen ID bekommt, wenn der DB-Server eine Änderung der Dateninhalte erkannt hat, soll die Ungültigkeit dieser ID durch einen Farbwechsel in GUI angezeigt werden. Die dazugehörige Notification sollte per PUSH Technologie von HTTP/2 erfolgen. Dies ist aber unmöglich, da PUSH von Chrome gar nicht unterstützt wird, es ist auch so, dass es im "Service Worker" hier sicher andere Möglichkeiten gibt.


=== UI Implementierung ===
=== UI Implementierung ===
Zeile 54: Zeile 82:
* 22.12.2016: Das Konzept des OrgaMon 9 steht:
* 22.12.2016: Das Konzept des OrgaMon 9 steht:
* GUI ist ...
* GUI ist ...
* immer ein Firefox-Client ab Rev. 50+ (KEINE AUSREDEN, KEIN EDGE, KEIN CHROME, einfach eine Blank Screen in dem Fall!! PUNKT)
* immer ein Chrome-Client ab Rev. 119+
* immer https:// (HTTP/2)
* immer https:// (HTTP/2)
** immer window.isSecureContext  
** immer window.isSecureContext  
Zeile 61: Zeile 89:
* eigene Session Verwaltung über die Datenbank
* eigene Session Verwaltung über die Datenbank
* Die Bedienelemente sollen ganz einfach beginnen und dann Schritt für Schritt mächtiger werden
* Die Bedienelemente sollen ganz einfach beginnen und dann Schritt für Schritt mächtiger werden
* Als Icons sollen immer SVG Symbole verwendet werden
** https://github.com/ionic-team/ionicons
* Ein erster Start könnte https://github.com/xtermjs/xterm.js sein
* ag-grid könnte für data Grids eine gute Ersparniss sein
* dabei soll mit Hilfe des Codes von Michael Van Canneyt JavaScript für den Client aus Pascal Programmierung erstellt werden, die JavaScript Tatsache soll versteckt bleiben
* dabei soll mit Hilfe des Codes von Michael Van Canneyt JavaScript für den Client aus Pascal Programmierung erstellt werden, die JavaScript Tatsache soll versteckt bleiben
** der Document - DOM soll versteckt werden das ist Sache des JavaScripts
** also es gibt keine HTML Templates, das wird alles auf dem Client erzeugt
** https://vuejs.org/
** https://reactjs.org/
** https://angularjs.org/
** https://quasar.dev/
** https://getbootstrap.com/
** https://www.w3schools.com/


* INfo-Link:  
* INfo-Link:  
** https://www.freepascal.org/~michael/articles/extjs1/extjs1.pdf
** https://www.freepascal.org/~michael/articles/extjs1/extjs1.pdf
** https://www.freepascal.org/~michael/articles/extpascal/extpascal.pdf
** https://www.freepascal.org/~michael/articles/extpascal/extpascal.pdf
** https://www.mediawiki.org/wiki/OOUI oder https://doc.wikimedia.org/oojs-ui/master/php/
** https://entwickler.de/online/web/web-app-tutorial-ionic-579898855.html


==== automatisierte Tests ====
==== automatisierte Tests ====
Zeile 78: Zeile 120:
** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
[[Datei:Button-Wait.png]]
* Also ein gedrückter Knopf bedeutet
** sofortige Deaktivierung, das ist das Feedback für die Annahme des Auftrags des UI
** die UI darf nicht blockieren, weitere Knöpfe sind weiterhin aktiv
** folgender Status Feedback, dass der Request in die Datenbank eingetragen ist
** folgender Status Feedback, dass der Request zum Server übertragen werden konnte (mit Offline-Zeiten ist hier zu rechnen, das darf kein Problem sein)
** folgender Status Feedback, dass eine Antwort des Servers da ist mit neuem Status für diesen Button (Ein Erfolg, Ein Misserfolg, ein Fortschritt)


==== erste Schritte ====
==== erste Schritte ====


* ein Fenster mit einer Schaltfläche:
* ein Fenster mit einer Schaltfläche:
* ein Text-Editfeld das mit einer Datenbank verbunden ist


==== offene Fragen: ====
==== offene Fragen: ====


* Wie das lokale Dateisystem angesprochen werden soll weiss ich noch nicht
* Unter Linux hätte ich gerne eine "ordentlichen" systemd Integration also
* Wie das Design der Fomulare erfolgen soll weiss ich noch nicht (also mit welcher IDE, XML Definitionen, ...) Formulare sollen jedoch in der Datenbank stehen
** Running-Notfification, Ini-Read Successfully oder "Die"
* In einer Übergangsphase soll ein Webkit in den OrgaMon.exe integriert werden (der OrgaMon wird z.B. auch einen Magnetstreifen scannen müssen, oder Datensicherung machen, oder den Computernamen abfragen, oder?)
** Watchdog-Notification, alive or being killed
** Info about a HANDLE, also accept() soll systemd machen, wir bekomme einfach im Programms


  HTML5-
  HTML5-
Zeile 95: Zeile 148:
=== Das User-Interface-Grundgesetz ===
=== Das User-Interface-Grundgesetz ===


Im Zentrum einer GUI müssen unverhandelbare Grundrechte des Benutzers / Bedieners stehen. Auswüchse die es im Moment gibt (Wir sind immer noch in der IT-Steinzeit) müssen verhindert werden. Ich will für die Tatsache sensibilisieren das heute Webinhalte den User im Unklaren lassen was er auf einem Screen machen kann. Grafisch möglicherweise perfekt muss er erst mal mit der Maus rumsuche was anklickbar ist. Wenn er dann anklickt kommt kein Feedback. Er muss nun hoffen dass sich was tut in den nächsten 5 Sekunden.
Im Zentrum einer GUI müssen unverhandelbare Grundrechte des Benutzers / Bedieners stehen. Die Optik des UI muss klare Signale an den Benutzer senden so dass dieser sich 100% auf Funktionen des Interface verlassen kann. Auswüchse die es im Moment gibt (Wir sind immer noch in der IT-Steinzeit) müssen verhindert werden. Ich will für die Tatsache sensibilisieren das heute Webinhalte den User im Unklaren lassen was er auf einem Screen machen kann. Grafisch möglicherweise perfekt muss er erst mal mit der Maus rumsuchen was anklickbar ist. Wenn er dann anklickt kommt kein Feedback. Er muss nun hoffen dass sich was tut in den nächsten 5 Sekunden.


==== Negativ-Beispiele die vermieden werden sollen ====
==== Negativ-Beispiele die vermieden werden sollen ====


* Beispiel: Edge: Während man in der Adresszeile des Browsers ist wechselt der Eingabefokus in ein anderes Control
* Beispiel: Edge: Während man in der Adresszeile des Browsers ist wechselt der Eingabefokus in ein anderes Control
* Beispiel: Bevormundung: Verschiedene PRogramme: Eine Eingabehilfe ergänzt die Eingaben "i" zu "intelligent". "i" <ENTER> ergibt also den Eingabewert "intelligent". Man muss "i" <BLANK> <BS> <ENTER> eingeben um einfach nur "i" zu erhalten, das darf nicht sein!
* Beispiel: Bevormundung: Verschiedene Programme: Eine Eingabehilfe ergänzt die Eingaben "i" zu "intelligent". "i" <ENTER> ergibt also den Eingabewert "intelligent". Man muss "i" <BLANK> <BS> <ENTER> eingeben um einfach nur "i" zu erhalten, das darf nicht sein!
* Beispiel: Delphi: Suchbegriffe werden immer vervollständigt, will man nur nach "S" suchen, ist die Eingabe nicht möglich. "S" <Enter> sucht nach "String", da "S" nach "String" vervollständigt wird.
* Beispiel: Delphi: Suchbegriffe werden immer vervollständigt, will man nur nach "S" suchen, ist die Eingabe nicht möglich. "S" <Enter> sucht nach "String", da "S" nach "String" vervollständigt wird.
* Beispiel: Man Klickt auf ein Button, jedoch wenige ms zuvor überdeckt ein unmotiviert eingeblendetes Fenster den Button, nunmehr verarbeitet dieses neue Fenster den Click auf einen zufällig deckungsgleichen Button. Und das obwohl eine gewolltes Anklicken gar nicht möglich ist.
* Beispiel: Man Klickt auf ein Button, jedoch wenige ms zuvor überdeckt ein unmotiviert eingeblendetes Fenster den Button, nunmehr verarbeitet dieses neue Fenster den Click auf einen zufällig deckungsgleichen Button. Und das obwohl eine gewolltes Anklicken gar nicht möglich ist.
Zeile 106: Zeile 159:
* Beispiel: App "VR Networld Banking": Besteht eine Session, diese hat aber keine Fokus, und es kommt eine Pushj nachricht wird man in einen neuen Anmeldeschirm geleitet obwohl eine gültige Session da ist. Es wird eine weitere Instanz der App gestartet anstelle den Eingabefokus auf die laufende aktuelle Session zu lenken
* Beispiel: App "VR Networld Banking": Besteht eine Session, diese hat aber keine Fokus, und es kommt eine Pushj nachricht wird man in einen neuen Anmeldeschirm geleitet obwohl eine gültige Session da ist. Es wird eine weitere Instanz der App gestartet anstelle den Eingabefokus auf die laufende aktuelle Session zu lenken
* Beipsile: App "VR Networld Banking": geht der Anmeldevorgang sehr lange und das Handy schaltet das Display ab wird der anmeldevorgang nicht im Hintergrund zuende geführt, es gibt einen "technischen" Fehler. Ich muss immer aufs Display tippen um die App am Leben zu halten solange sie sich anmeldet.
* Beipsile: App "VR Networld Banking": geht der Anmeldevorgang sehr lange und das Handy schaltet das Display ab wird der anmeldevorgang nicht im Hintergrund zuende geführt, es gibt einen "technischen" Fehler. Ich muss immer aufs Display tippen um die App am Leben zu halten solange sie sich anmeldet.
* Beispiel: App "VR Secure Go": Wird eine TAN erhalten verdeckt ein Fenster "aktualisiere Push Daten" diese TAN, das ist nicht zielführend
* Beispiel: App "VR Secure Go": Wird eine TAN erhalten verdeckt ein Fenster "aktualisiere Push Daten" diese TAN
* Beispiel: Unwetterzentrale: man sieht eine karte, oben ist die Werbung am Laden, man klickt auf die Karte just in dem Moment rattert die Karten nach unten, man triff einen Bereich mit dem Klick, den man nicht wollte
* Beispiel: Unwetterzentrale: man sieht eine karte, oben ist die Werbung am Laden, man klickt auf die Karte just in dem Moment rattert die Karten nach unten, man triff einen Bereich mit dem Klick, den man nicht wollte
* Beispiel: Cookie-Warnungen: Wichtige Teile der Seite werden einfach überblendet, es ist keine echte Position für die Meldung vorgesehen
* Beispiel: Cookie-Warnungen: Wichtige Teile der Seite werden einfach überblendet, es ist keine echte Position für die Meldung vorgesehen
* Beispiel: interne App-Makros: Apps werden intern teilweise durch Klicks gesteuert. Beispiel tunein Radio-App, mann wählt seinen Sender und sieht das "Play" Symbol. Eine Sekunde lang passiert nichts. Dann per Geisterhand dreht sich plötzlich das Rad. Der Playknopf wurde intern gedrückt, jetzt spielt das Radio los. Besser wäre es gewesen den Screen mit dem "Rad" zu beginnen, ev. mit dem Pause Symbol.


==== §1 Klickbarkeit ====
==== §1 Klickbarkeit ====
Zeile 114: Zeile 168:
Ist ein Text oder ein Bild oder ein Icon anklickbar, so muss es in einer deutlich sichtbaren Weise grafisch <i>anders</i> ausgeprägt werden, dass dies deutlich wird. Bei einem MoveOver muss sich auch der Zeiger ändern. Ein Button muss von einem immer gleichen Rahmen umfasst sein, innerhalb des Textes muss "["Begriff"]" stehen oder #Begriff. <u>Unterstreichen</u> ist keine erlaubte Link-Symbolisierung. Einfärben (es wird gerne "Blau" genommen) ist keine erlaubte Link-Symbolisierung.
Ist ein Text oder ein Bild oder ein Icon anklickbar, so muss es in einer deutlich sichtbaren Weise grafisch <i>anders</i> ausgeprägt werden, dass dies deutlich wird. Bei einem MoveOver muss sich auch der Zeiger ändern. Ein Button muss von einem immer gleichen Rahmen umfasst sein, innerhalb des Textes muss "["Begriff"]" stehen oder #Begriff. <u>Unterstreichen</u> ist keine erlaubte Link-Symbolisierung. Einfärben (es wird gerne "Blau" genommen) ist keine erlaubte Link-Symbolisierung.


==== §2 Fokus ====
==== §2 Bewegungsmelder ====
 
Die beobachtete Fläche muss klar ausgewiesen werden. Bei MouseEntry / Leaf muss optisch die Fläche aufleuchten (ON/OFF). Bei ON darf die Fläche nicht verschoben werden, die GUI muss fixiert werden. Bei ON dürfen umliegende Bereiche verändert werden, bei OFF muss der "Originalzustand" wieder herstellt werden.
 
==== §3 Fokus ====


Der Eingabefokus darf niemals programmgesteuert dem aktuell sichbaren Eingabefeld entzogen werden, während die GUI Benutzereingaben erwartet. Das Einblenden eines Meldungsfensters während der Benutzer eine Eingabe tätigt ist ein solcher Fokusentzug. Ein Notifikationsbereich der sich verändert ist erlaubt.
Der Eingabefokus darf niemals programmgesteuert dem aktuell sichbaren Eingabefeld entzogen werden, während die GUI Benutzereingaben erwartet. Das Einblenden eines Meldungsfensters während der Benutzer eine Eingabe tätigt ist ein solcher Fokusentzug. Ein Notifikationsbereich der sich verändert ist erlaubt.


==== §3 Eingabesicherheit ====
==== §4 Eingabesicherheit ====


Direktes Abändern/Verfälschen der Eingabe, also automatisches Vervollständigen, automatisches Setzen eines Punktes usw. ist nicht erlaubt.
Direktes Abändern/Verfälschen der Eingabe, also automatisches Vervollständigen, automatisches Setzen eines Punktes usw. ist nicht erlaubt.


==== §4 Sichtbarkeit ====
==== §5 Sichtbarkeit ====


Eingabebereiche dürfen nicht unmotviert überdeckt oder verschoben werden. Bei einer Grössenänderung muss das Zentrum (=Position des Eingabe-Cursors) beibehalten werden.
Eingabebereiche dürfen nicht unmotviert überdeckt oder verschoben werden. Bei einer Grössenänderung muss das Zentrum (=Position des Eingabe-Cursors) beibehalten werden.
Info Texte die den Sinn des aktuellen Eingabefeldes beschreiben müssen oberhalb des EIngabefeldes stehen, es muss damit gerechnet werden dass ein Touch Keyboard direkt unter dem Eingabefeld eingeblendet wird.
Info Texte die den Sinn des aktuellen Eingabefeldes beschreiben müssen oberhalb des EIngabefeldes stehen, es muss damit gerechnet werden dass ein Touch Keyboard direkt unter dem Eingabefeld eingeblendet wird.


==== §5 Klicksichtbarkeit ====
==== §6 Klicksichtbarkeit ====


Ein Klick auf Controls, die erst wenige ms sichtbar sind, darf nicht als Eingabe gewertet werden. Also wenn ein neu sichtbares Fenster eine alte GUI überdeckt und sich der Benutzer für einen Klick entschieden hat darf das neue Fenster diesen Klick-Event nicht verarbeiten.
Ein Klick auf Controls, die erst wenige ms sichtbar sind, darf nicht als Eingabe gewertet werden. Also wenn ein neu sichtbares Fenster eine alte GUI überdeckt und sich der Benutzer für einen Klick entschieden hat darf das neue Fenster diesen Klick-Event nicht verarbeiten.


==== §6 Reaktivität ====
==== §7 Reaktivität ====


Die GUI darf niemals auf Ergebnisse des Arbeitsprozesses warten, der Job wird an der Theke abgegeben, die GUI ist sofort wieder aktiv.
Die GUI darf niemals auf Ergebnisse des Arbeitsprozesses warten, der Job wird an der Theke abgegeben, die GUI ist sofort wieder aktiv.


==== §7 Feedback ====
==== §8 Feedback ====


Ausgelöste Aktionen ("Tastendruck", "Klick", "Mausbewegung") muss ein Feedback auf der GUI erzeugen.
Ausgelöste Aktionen ("Tastendruck", "Klick", "Mausbewegung") muss ein Feedback auf der GUI erzeugen. Es darf nicht der Eindruck erweckt werden weitere, andere, derselbe Klick wäre nochmal möglich (zero Feedback). Optimalerweise sollte ein Button-Symbol eine "Action" symbolisieren (ausführen, stempeln, senden), nach dem Auslösen der Aktion sollte es zu einem Feedback-Symbol werden (Wartesymbol, grüner Haken) das NICHT Klickbar ist.


==== §8 Pausen ====
==== §9 Pausen ====


Jede Eingabe muss zurückgestellt werden können. Eingaben auf anderen Formularen müssen dann möglich sein. Verbot von "Topmost". Verbot von Modal.
Jede Eingabe muss zurückgestellt werden können. Eingaben auf anderen Formularen müssen dann möglich sein. Verbot von "Topmost". Verbot von Modal.


==== §9 Variante ====
==== §10 Variante ====


Jedes Formular muss dupliziert werden können. Es muss Testeingabe / Versuche verkraften ohne dass eine Aktion durchgeführt wird, erst anschließendes "Buchen" führt zur Aktion oder eben "Abbruch"
Jedes Formular muss dupliziert werden können. Es muss Testeingabe / Versuche verkraften ohne dass eine Aktion durchgeführt wird, erst anschließendes "Buchen" führt zur Aktion oder eben "Abbruch"


==== §10 Rückgängig ====
==== §11 Rückgängig ====


Jede lokale Eingabe die noch nicht "abgeschickt" ist, muss rückgängig gemacht werden können
Jede lokale Eingabe die noch nicht "abgeschickt" ist, muss rückgängig gemacht werden können


== HTTP/2 Server ==
==== §12 Barrierefreiheit ====
 
Im Moment entsteht der HTTP2 Server in FreePascal auf GitHub. Eine erste Beta Version soll erscheinen sobald openssl 1.1.1 erschienen ist.
 
https://github.com/Andreas-Filsinger/OrgaMon/tree/master/HTTP2
 
 
=== Inbetriebnahme ===
 
==== openSSL ====
 
Windows
 
* http://slproweb.com/products/Win32OpenSSL.html
* Downloade und Installiere die 64bit Light Version (im Moment "Win64 OpenSSL v1.1.0f Light")
** Standard-Ziel akzeptieren, "in das Systemverzeichnis" angekreuzt lassen
 
Linux
 
* selbst aus den Quellen compilieren, da zumeist 1.0 Teil der Distributionen ist
 
==== Zertifikat ====
 
* mit openssl erst mal key.pem und cert.pem erstellen (hier im Beispiel für die Server-Identität "localhost")
** <code>openssl req -x509 -nodes -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -subj '/CN=<b><i>localhost</i></b>'</code>
* ein Hauptverzeichnis ausdenken und dort ein Verzeichnis pro CN erstellen
* jeweils die 2 Dateien dort rein
* Beispiel: Dein Server ist als "localhost" auf der Maschine selbst, und als "rom" im eigenen Netz, und als "orgamon-2.dyndns.org" von aussen ansprechbar, dann must Du 3x openssl rifen wir oben angegeben mit wechselnder CN
 
\srv\hosts\
  .\localhost\
      key.pem
      cert.pem
  .\rom\
      key.pem
      cert.pem
  .\orgamon-2.dyndns.org\
      key.pem
      cert.pem
 
==== Port 443 auf dem eigenen System öffnen ====
 
Wenn Du einen von aussen sichtbaren Webserver (HTTPS) auf dem eigenen Rechner betreiben willst musst Du Port :443 öffnen.
 
* http://praxistipps.chip.de/windows-10-ports-in-der-firewall-oeffnen-so-gehts_42589
 
* Auf deinem Router brauchst Du eine feste IP oder ein Dyndns
* Auf deinem Router musst Du eingehenden Netzwerkverkehr auf Port :443 auf deinen lokalen Rechner leiten (AVM nennt das "Freigabe")
 
=== Informationsquellen ===
 
==== RFC ====
 
* <b>HPACK</b> https://tools.ietf.org/html/rfc7541
* <b>HTTP/2</b> https://tools.ietf.org/html/rfc7540
 
==== HTTP/2 ====
 
* https://github.com/nghttp2/nghttp2
* https://github.com/nginx/nginx
 
==== TLS ====
 
* https://wiki.openssl.org/index.php/Simple_TLS_Server
* http://openssl.6102.n7.nabble.com/TLS-1-3-client-hello-issue-td72449.html#a72460
* http://slproweb.com/products/Win32OpenSSL.html
* https://github.com/openssl/openssl/blob/master/include/openssl/tls1.h
* https://www.openssl.org/blog/blog/2017/05/04/tlsv1.3/
* http://gnutls.org/manual/gnutls.html#Server-name-indication
* https://github.com/jay/http2_blacklisted_ciphers
 
=== Konzept ===
 
 
* cOrgaMon ist ein https:// Server nach HTTP/2 Standard ohne UI
* <u>eine</u> Instanz von cOrgaMon kümmert sich um <u>eine</u> langbestehende TCP-Clientverbindung (KEEP_ALIVE)
* HTTPS:// TLS 1.2 (nichts anderes!) TLS 1.3 wenn von openSSL angeboten wird
* Clients, die NICHT die "Server Name Indication (SNI) extension" liefern werden abgelehnt
* Target ist win64 und linux
* openSSL Lib der Version 1.1 "e" oder besser wird verwendet
* die Verbindung bleibt ständig bestehen
* Test https://tools.keycdn.com/http2-test
 
=== Implementierung TCP ===
 
{|
|[[Datei:HTTP2.png|220px]]
|[[Datei:SrvOrgaMon.png|220px]]
|}
 
* unit HPACK.pas erstellen (Quelle github)
* testen mit https://github.com/http2jp/hpack-test-case (uses json)
* unit HTTP2Server.pas erstellen (https://github.com/nghttp2/nghttp2)
* ev. auch mit https://python-hyper.org/h2/en/stable/index.html und Kopplung über das WSGI Interface
 
==== Test ====
 
Sollte dein cOrgaMon-Host ROM heissen:
 
* openssl s_client -debug -servername <i><b>rom</b></i> -connect <b><i>rom</i></b>:443
 
Sollte interessant sein, was der Server so liefert, kann man das in eine Datei umleiten:
 
 
#
# openssl s_client -servername rom -nextprotoneg "h2,h3" -sess_out out.http2 -connect rom:443 >o.http2
#
#
# hexdump -C o.http2
# (leider ist ein openssl interner Prefix nicht vermeidbar, aber ab einer gewissen Position gehts los!)
#
00000df0  28 73 65 6c 66 20 73 69  67 6e 65 64 20 63 65 72  |(self signed cer|
00000e00  74 69 66 69 63 61 74 65  29 0a 2d 2d 2d 0a 50 52  |tificate).---.PR|
00000e10  49 20 2a 20 48 54 54 50  2f 32 2e 30 0d 0a 0d 0a  |I * HTTP/2.0....|
00000e20  53 4d 0d 0a 0d 0a 00 00  18 04 00 00 00 00 00 00  |SM..............|
00000e30  01 00 00 10 00 00 03 00  00 00 65 00 04 00 00 ff  |..........e.....|
00000e40  ff 00 05 00 10 00 00 00  00 04 08 00 00 00 00 00  |................|
00000e50  00 0a 00 00                                      |....|
00000e54
 
=== Aufbau ===
 
[[Datei:HTTP2-Units.png|300px]]
 
==== HTTP2 ====
 
* Zentrale Steuerunit für den HTTP2 Server
* Öffnet und Schliesst die Verbindung, dabei wird die openSSL entsprechend Konfiguriert
* Beobachtet die Verbindungsaushandlung
* Lehnt ungeeignetes ab
* Verhindert Fallbacks in unsichere Technik
* Verarbeitet den Server-Domain Namen Callback
* Stellt .pem und .cert zur Verfügung
 
* implementiert den Datenmultiplexer laut RFC, fügt also den fragmentierten Netzwerkverkehr wieder in geordnete Bahnen
* Feuert Events wenn Daten "fertig" vorliegen an HTTP2
 
typischer HTTP/2 Content am Anfang der Verbindung.
 
Client -> Server
50 52 49 20 2A 20 48 54 54 50 2F 32 2E 30 0D 0A  PRI.*.HTTP/2.0..
0D 0A 53 4D 0D 0A 0D 0A
00 00 12 (18 Bytes Content)
04 00 00 00 00 00 SETTINGS, also 3 Settings!)
00 01 00 01 00 00
00 04 00 02 00 00
00 05 00 00 40 00
00 00 04 (4 Bytes content)
08 00 00 00 00 00 WINDOW_UPDATE
00 BF 00 01 
00 00 05 (5 Bytes Content)
02 00 00 00 00 03 PRIO
00 00 00 00 C8
00 00 05 (5 Bytes Content)
02 00 00 00 00 05 PRIO
00 00 00 00 64
00 00 05 (5 Bytes Content)
02 00 00 00 00 07 PRIO
00 00 00 00 00
00 00 05 (5 Bytes Content)
02 00 00 00 00 09  PRIO
00 00 00 07 00
00 00 05 (5 Bytes Content)
02 00 00 00 00 0B PRIO
00 00 00 03 00
 
FRAME_SETTINGS
  HEADER_TABLE_SIZE 65536
  INITIAL_WINDOW_SIZE 131072
  MAX_FRAME_SIZE 16384
FRAME_WINDOW_UPDATE
  0 has Window_Size_Increment 12517377
FRAME_PRIORITY
  Stream 3.0 has 200
FRAME_PRIORITY
  Stream 5.0 has 100
FRAME_PRIORITY
  Stream 7.0 has 0
FRAME_PRIORITY
  Stream 9.7 has 0
FRAME_PRIORITY
  Stream 11.3 has 0
 
==== openSSL - Installation ====
 
* der HTTP/2 server benötigt OpenSSL für den Verbindungsaufbau zum Client
 
 
wget https://www.openssl.org/source/openssl-1.1.0d.tar.gz
tar -xzf openssl-1.1.0d.tar.gz
cd openssl-1.1.0d/
./config
make
cp -p libcrypto.so.1.1 /usr/lib64
cp -p libssl.so.1.1 /usr/lib64
 
 
* Prüfen, welche API zur Verfügung gestellt wird
 
nm --defined-only -g /usr/lib64/libssl.so.1.1 >libssl.def
 
==== HMUX ====
 
<i>Entfällt, wurde in HTTP2 integriert</i>
 
==== HPACK ====
 
* implementiert die Header Compression laut RFC
 
==== cryptossl ====
 
* spricht mit der openSSL Bibliothek und implementiert dabei nur was gebraucht wird.
 
==== Informationsquellen ====
 
* https://stackoverflow.com/questions/19029647/ssl-ctx-use-privatekey-file-failed
* https://letsencrypt.org
* https://github.com/certbot/certbot
* Der Client MUSS den Servername mitteilen damit cOrgaMon erkennen kann welcher Mandant geladen werden soll
** https://tools.ietf.org/html/rfc6066
* auf diesen Server-Namen MUSS Certifikat Pinnig angewendet werden, er darf also KEIN anderes Zertifikat verwendet werden
** https://tools.ietf.org/html/rfc7469
 
==== Schritt für Schritt mit Lets Encrypt ====
 
Wir sind als in Besitz einer Domain und haben es geschafft Port 80 auf die eigene WIndows 10 Kiste zu lenken
 
* Sorry, aber wir brauchen als erstes einen HTTP Webserver
* https://www.windowspro.de/wolfgang-sommergut/web-server-iis-windows-10-installieren-konfigurieren
 
* letsencrypt-win-simple.V1.9.3.zip
* https://github.com/Lone-Coder/letsencrypt-win-simple/releases
 
=== Paralleles Arbeiten ===
 
 
* Ein einzelner OrgaMon-Prozess ist für eine dauerhafte TCP/Connection zuständig
 
==== Thread: SSL_read() ====


* Ein Thread sollte SSL_read ausführen, wenn da ein Datenblock oder FRAME fertig ist, sollte dieser als "EventProc" an den Main-Thread übergeben werden
https://www.heise.de/newsticker/meldung/Firefox-mit-neuen-Tools-fuer-ein-barrierefreies-Web-4571249.html
** https://github.com/BeRo1985/pasmp
 
==== Thread: JOBs ====
 
* Möglicherweise startet OrgaMon wiederum SubProgramme mit langen Laufzeiten, diese SubProgramme schreiben Status Infos in memcached
* Rückmeldungen dieser lang laufenden Prozesse ev. über https://developer.mozilla.org/de/docs/Web/API/Push_API
 
=== Pascal -> JavaScript ===
 
Durch den Wegfall der GUI muss Code auf der Client GUI autark laufen können. Dieser soll im OrgaMon Programm als FreePascal-Code aufnotiert werden, die compilierung teilt den Code auf (Client Code / Server Code) und verteilt das Java-Script über den HTTP2 Server. Freepascal hat schon eine Implementierung die Pascal nach JS ermöglicht.
 
Details:
 
* Die Tatsache "JavaScript" auf der Clientside wird der Lazarus-IDE scheinbar verheimlicht
** Es muss also der Pascalcode in JavaScript umgewandelt werden
** Für den Client muss eine Art Code-Lib zur Verfügung stehen, die Pascal rufen kann und umgekehrt
* Die IDE soll denken/vorleben das Client-Seitig auch "Pascal" gesprochen wird
** Debugging: Hier muss der WebClient in den remote-Debugging Modus gebracht werden
*** https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging
** Es könnte die Infrastruktur der "Source maps" verwendet werden, also "komprimierte" Zeilen des JavaScript Quellcodes zeigen auf die entsprechenden Zeilen, die in FreePascal formuliert sind. Es werden also "fake"-Source-Maps zur Verfügung gestellt, so das eine korrekte 1:1 Beziehung zwischen Pascal und Javascript bestehen kann.
** FreePascal und die Lazarus IDE müssen lernen, dass Teile vom Quelltext "remote" executables sind
** FreePascal Lazarus  muss Möglichkeiten bieten von einem eintretendem JAvaScript Breakpoint gerufen zu werden
 
** Es soll alles auch in der Lazarus IDE mit Break-Points programmierbar sein, die IDE soll ein Verständnis haben welche Zeile welchen Code verbirgt
* Die IDE sollte den Client-Side Part ev. farblich hinterlegen?!
* Es muss so sein, dass eine Unit weiterhin ServerSide- / ClientSide- Code mischen kann
 
program SimpleCalculator;
var
  Panel : TPanel;
  Button1 : TButton;
  Button2 : TButton;
 
procedure Panel.OnClick;
begin
  beep; // This goes to JavaScript Client Code
end;
procedure Button1.OnClick;
begin
  Button2.Disable; // This goes to JavaScript Client Code
end;
procedure Button1.OnClick;
begin
  Button2.Disable; // This goes to JavaScript Client Code
end;
begin
  App.add(Panel);
  App.add(Button1);
  App.add(Button2);
end.
 
 
* die IDE soll ein Verständnis haben dass auf Client-Seite nicht "alles" Programmierbar ist
* aus den JavaScript Parts soll über einen Dispatcher der nonGUI Code aufbar gemacht werden
* In einer Datenbank soll das Know-How für die Web Objekte gespeichert sein
 
=== Retry-, Reconnect- Fähig ===
 
* immer eine lang stehende Keep-Alive TCP Verbindung, mit "Full Reconnect"- und "Client-IP-Change"- Möglichkeit
* Ein kleines Symbol oder eine Uhr, oder ich weis noch nicht, soll symbolisieren wenn es sich um eine frisch aufgebaute Verbindung handelt
* Es. soll eine Reconnect auch visualisiert werden, oder auch ein Verbindungsende / Abbruch
* In der Anfangszeit brauche ich aber ein Feedback das mir beweist dass NICHT immer neue TCP verbindungen aufgebaut werden
* Der HTTP/2 Server soll eine Modus haben, wo er nur EINE Verbindung EINER IP akzetiert
 
=== Meilensteine ===
 
26.06.2018 Firefox 61 mit nativ aktiviertem TLS 1.3 ist erschienen
24.11.2017 Erster Client Hello via Read-Thread
23.08.2017 Erster Client Hello von Chrome
14.08.2017 Erster Client Hello von Firefox
 
=== todo ===
SETTINGS ACK!
nach HEADER_TABLE_SIZE dann so eine TABLE erstellen
HEADERS und DATA an den richtigen STREAM senden! Content!!!
HPACK encoder
STREAM Objekt
HTTP2 Objekt
 
== TO DO ==
 
* OLAP -> Migration auf Console
* Auswertung -> Migration auf Console
* Wegfall "AUSGANGSRECHNUNGEN"
* Integration Pascal-Skript mit "Rückgängig"
* OrgaMon Workflow Sheet?!
* Idee zu "Rückgängig": Pascal-Code erstellen der den Original-Zustand wieder herstellt. Bei veränderten Dateien ein Snapshot-Unterverzeichnis generieren mit der "GEN-RUECKGAENGIG" als Name. Dies ist die Quelle für das Zurück-Kopieren der Original-Version. (ev. auch für FTP-Aktionen ermöglichen)
* Vorbereiten auf Release von OpenSSL 1.1.1 (TLS 1.3)


== Client Konzepte ==
== Client Konzepte ==
Zeile 528: Zeile 251:
** Dies darf aber niemals zum Problem werden
** Dies darf aber niemals zum Problem werden


== Entwicklungs Konzepte ==
=== Netzwerk ===
 
* WAMP-formatted WebSocket messages (JSON, MsgPack and CBOR) are now nicely decoded for inspection in the Network panel.
 
== Roadmap ==
== Roadmap ==


Zeile 541: Zeile 267:
=== kommende Aufgaben ===
=== kommende Aufgaben ===


* HTTP/2 openSSL TLS 1.2 Connection
* HTTP/2 Multiplexer
* HTTP/2 erster statischer Content "/"
* HTTP/2 erste Login Seite
* "Eingabefeld",  
* "Eingabefeld",  
* "Tabelle"
* "Tabelle"
Zeile 550: Zeile 272:
== Links ==
== Links ==


* [[Chrome]]
* http://wiki.lazarus.freepascal.org/
* http://wiki.lazarus.freepascal.org/
* https://developer.gnome.org/gtk3/stable/gtk-broadway.html
* https://developer.gnome.org/gtk3/stable/gtk-broadway.html
* http://www.phoronix.com/scan.php?page=news_item&px=ODgzMA
* http://www.phoronix.com/scan.php?page=news_item&px=ODgzMA
* http://www.micrel.cz/Dx/
* https://www.vertex42.com/blog/help/excel-help/using-unicode-character-symbols-in-excel.html
* http://www.foss-group.ch/de/Anwendungen/OSBD/
* https://uxframework.pearson.com/
* http://opensilvershowcase.azurewebsites.net/#/XAML_Controls
* https://github.com/bigstepinc/jsonrpc-bidirectional
* https://www.jshero.net/home.html
* https://theia-ide.org/
* https://ninjarockstar.dev/css-hex-grids/
* Authentifizierung: https://github.com/fido-alliance/webauthn-demo
* CSS-Animation https://whistlr.info/2021/box-model-animation/
* https://web.dev/progressive-web-apps/
* https://github.com/GoogleChrome/workbox
* https://stackoverflow.blog/2022/03/28/picture-perfect-images-with-the-modern-element/
* https://frontend.horse/articles/realistic-art-with-css/
* https://designmodo.com/html-css-emails/
* OpenSSL will do QUIC https://github.com/openssl/openssl/commit/cb629550cdab518c925e9b402e11b86497a03845
* https://cockpit-project.org/
* https://cloudscape.design/get-started/integration/using-cloudscape-components/
* https://www.youtube.com/watch?v=8p5SDI4TNDc
* https://github.com/nacular/doodle
* SQLite: https://developer.chrome.com/blog/sqlite-wasm-in-the-browser-backed-by-the-origin-private-file-system/
* WebUI: https://www.patternfly.org/v4/
* https://www.youtube.com/watch?v=nkI8QanTjLs
* https://green-hill.srl/
* https://publish.illinois.edu/hpvm-project/
 
=== noch zu lesen ===
 
* https://solovyov.net/blog/2020/a-tale-of-webpage-speed-or-throwing-away-react/
* https://web.dev/local-fonts/
* https://skia.org/
* https://developer.chrome.com/blog/colrv1-fonts/
* https://www.leemeichin.com/posts/yes-i-can-connect-to-a-db-in-css.html
* https://css-tricks.com/getting-started-with-the-file-system-access-api/
* https://developer.chrome.com/docs/workbox/
* https://gitlab.engr.illinois.edu/llvm/hpvm-release
* https://web.dev/state-of-css-2022/
* https://www.solidjs.com/
* https://medium.com/@lodestar-design/the-dark-yellow-problem-in-design-system-color-palettes-a0db1eedc99d
* https://motif.land/blog/syncing-text-files-using-yjs-and-the-file-system-access-api
* https://jenniferdaniel.substack.com/p/what-is-black-and-white-and-read?s=r
* https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/
* https://stackdiary.com/centering-in-css/

Aktuelle Version vom 10. Dezember 2023, 18:34 Uhr

  • Dies ist die Konzept-Sammlung für die nächste Version des OrgaMon 9, "OrgaMon Polyzalos"
  • OrgaMon setzt wo immer möglich die Programmiersprache "Object-Pascal", auch bei Dingen die in Wirklichkeit als "JavaScript" im Browser des Anwenders laufen (CrossCompile).
  • Als Compiler wird nur noch Free-Pascal eingesetzt, Wegfall von "Delphi"
  • Es werden nur noch Open-Source Komponenten eingesetzt
  • Die mit der Delphi-IDE erstellte UI entfällt, der cOrgaMon übernimmt die Funktion eines WebServers und führt Funktionen des eCommerce-Kernel aus
  • dazu ist das HTTP2-Projekt ein wesentlicher Anteil von OrgaMon 9 Polyzalos
  • cOrgaMon wird vorrangig auf Linux Maschinen installiert, unter systemd als (Type=notify) mit "READY=1" nach lesen der ini
  • der eCommerce-Kernel soll Schritt für Schritt Kopplungspunkte bekommen wobei Kunden dann Anpassungen machen können. Das Customizing sollte aber auch wieder Open-Source sein und auch Test-Cases beinhalten so dass es für andere Kunden Regeressionsfrei bleibt.
  • Die Lazarus-IDE soll auch für Kunden eine Möglichkeit sein, auf den Code Einfluss zu nehmen. Dabei soll die neue Paket-Verwaltung von Lazarus den cOrgaMon mit wenigen Klicks "installieren" können

OrgaMon UI

User Interface (UI) Ideen

ein Projekt, das zum Ziel hat den OrgaMon mit einer Plattform-übergreifenden GUI anzubieten

farbige Tabs

  • Tab sind erst mal nicht da, können aber aus einem Suchbegriff oder einem Befehl frisch erzeugt werden. Wird z.B. ein Vertrag angewendet entstehen ev. ganz viele neue Beleg, ein Beleg wir als ein einzelner Tab angezeigt.
  • Standard-Aktionen sind auf Tabs anwendbar und können als transaktion auf Gruppen von TAbs angewendet werden.
  • Eine aktuell eingerichtete Tab-Gruppe (3 Personen und 2 Beleg und 1 Vertrag) kann in einer Tab-Historie gespeichert werden.
  • Tab-Favoriten gibt es auch, auf die "Umgeschaltet" werden kann aber auch "dazugeladen" werden kann.
  • man kann mehrere Belege öffnen und gleichzeitig bearbeiten. Dazu "Zieht" man sich einen neuen Tab. Tabs aus der selben Gruppe haben die gleiche Farbe und sind immer zusammen angeordnet (Gruppe schliessen).
  • Es gibt einen Neu Tab.
  • Ein Langer gehaltener Klick auf einen Tab erzeugt einen "Drag"-Event

Tab-Funktionen

  • Anklicken: Der Tab-Inhalt kommt nach vorne, jetzt erst wenn der TabInhalt sichtbar ist wird das kleine "close" sichtbar.
  • Schliesst man den Browser mit offenen Tabs muss am nächsten Tag ein reconnect erfolgen mit allen Inhalten parat!!!

Tabellen

  • Spaltenbreiten sollen gezogen werden können oder "auto"
  • Titel ^v wenn Hoch + Runter zu sehen ist, dann ist KEINE Sortierung aktiv
  • Titel v aufsteigende Sortierung
  • Titel ^ absteigende Sortiertung
  • Spaltenlayout soll auf "default" zurückgesetzt werden können
  • Spaltenlayout, wie es im Moment ist, soll gespeichert werden können
  • 1. Rang, 2. Rang: Idee : Ev. durch den vertikalen Abstand zur Tabelle den Rang symbolisieren, also je höher desto hochrangiger
  • Markieren sollte immer gleich funktionieren, "M" dann wird es blau ...

Progressbereich

  • zeigt zentral aktuelle Wartezeiten an, im Hilfehinweis oberhalb laufen Log meldungen
  • ich bin unsicher, ob dies durchführbar ist, aber ich will eine Unstoppable GUI die einfach nur Anforderungen an eine Exekutive weitergibt. In dem Progressbereich stapeln sich einfach Aufgaben, die im Moment am laufen sind und noch nicht abgeschlossen (Beispiele Dafür: Tagwache auf einem Server, Tagesabschluss auf einem Server, Anwendung von Verträgen usw.)

Suchbereich

  • OrgaMon ist (wieder) über Hotkeys steuerbar: <ctrl>PN macht "Person" "neu" der Focus steht beim Vornamen usw.
  • Kann man die oft in Anleitungen oder Bugreports verwendeten Bedienungsketten, also Eingaben benutzten?
  • Baustelle 🠖 Reiter "Verfügbar" 🠖 Haken bei [v] Senden 🠖 Button OK

SVG woimmer es geht

blauer Aqua-Button

der Start-knopf des OrgaMon, hier kommen die ganzen früheren Menü Möglichkeiten

ARIA Keyboard Support

Datenbank Edits

Textfeldfarben

weiss: kam so vom server
rosa: ist auf dem Server inzwischen anders
gelb: wurde hier local verändert

es soll so sein, dass eine edit gruppe einen ID bekommt, wenn der DB-Server eine Änderung der Dateninhalte erkannt hat, soll die Ungültigkeit dieser ID durch einen Farbwechsel in GUI angezeigt werden. Die dazugehörige Notification sollte per PUSH Technologie von HTTP/2 erfolgen. Dies ist aber unmöglich, da PUSH von Chrome gar nicht unterstützt wird, es ist auch so, dass es im "Service Worker" hier sicher andere Möglichkeiten gibt.

UI Implementierung

  • 22.12.2016: Das Konzept des OrgaMon 9 steht:
  • GUI ist ...
  • immer ein Chrome-Client ab Rev. 119+
  • immer https:// (HTTP/2)
    • immer window.isSecureContext
  • immer html5 und JavaScript, immer generiert aus eigenen Quellen, nach Möglichkeit keine Meta-Ebene auf dem Client, alles direkt und "nativ"
  • kein HTTPS Server dazwischen (z.B. Apache oder nxing)
  • eigene Session Verwaltung über die Datenbank
  • Die Bedienelemente sollen ganz einfach beginnen und dann Schritt für Schritt mächtiger werden
  • Als Icons sollen immer SVG Symbole verwendet werden
  • Ein erster Start könnte https://github.com/xtermjs/xterm.js sein
  • ag-grid könnte für data Grids eine gute Ersparniss sein
  • dabei soll mit Hilfe des Codes von Michael Van Canneyt JavaScript für den Client aus Pascal Programmierung erstellt werden, die JavaScript Tatsache soll versteckt bleiben

automatisierte Tests

Asynchrone UI

  • Also ein gedrückter Knopf bedeutet
    • sofortige Deaktivierung, das ist das Feedback für die Annahme des Auftrags des UI
    • die UI darf nicht blockieren, weitere Knöpfe sind weiterhin aktiv
    • folgender Status Feedback, dass der Request in die Datenbank eingetragen ist
    • folgender Status Feedback, dass der Request zum Server übertragen werden konnte (mit Offline-Zeiten ist hier zu rechnen, das darf kein Problem sein)
    • folgender Status Feedback, dass eine Antwort des Servers da ist mit neuem Status für diesen Button (Ein Erfolg, Ein Misserfolg, ein Fortschritt)

erste Schritte

  • ein Fenster mit einer Schaltfläche:
  • ein Text-Editfeld das mit einer Datenbank verbunden ist

offene Fragen:

  • Unter Linux hätte ich gerne eine "ordentlichen" systemd Integration also
    • Running-Notfification, Ini-Read Successfully oder "Die"
    • Watchdog-Notification, alive or being killed
    • Info about a HANDLE, also accept() soll systemd machen, wir bekomme einfach im Programms
HTML5-
Client  <--https/2--> systemd Socket Activation <---sd_listen_fds()---> hOrgaMon Web Server    <--fbclient----> FirebirdSQL
                                                                        (links libsystemd.so)   +--file I/O---> .\OrgaMon\

Das User-Interface-Grundgesetz

Im Zentrum einer GUI müssen unverhandelbare Grundrechte des Benutzers / Bedieners stehen. Die Optik des UI muss klare Signale an den Benutzer senden so dass dieser sich 100% auf Funktionen des Interface verlassen kann. Auswüchse die es im Moment gibt (Wir sind immer noch in der IT-Steinzeit) müssen verhindert werden. Ich will für die Tatsache sensibilisieren das heute Webinhalte den User im Unklaren lassen was er auf einem Screen machen kann. Grafisch möglicherweise perfekt muss er erst mal mit der Maus rumsuchen was anklickbar ist. Wenn er dann anklickt kommt kein Feedback. Er muss nun hoffen dass sich was tut in den nächsten 5 Sekunden.

Negativ-Beispiele die vermieden werden sollen

  • Beispiel: Edge: Während man in der Adresszeile des Browsers ist wechselt der Eingabefokus in ein anderes Control
  • Beispiel: Bevormundung: Verschiedene Programme: Eine Eingabehilfe ergänzt die Eingaben "i" zu "intelligent". "i" <ENTER> ergibt also den Eingabewert "intelligent". Man muss "i" <BLANK> <BS> <ENTER> eingeben um einfach nur "i" zu erhalten, das darf nicht sein!
  • Beispiel: Delphi: Suchbegriffe werden immer vervollständigt, will man nur nach "S" suchen, ist die Eingabe nicht möglich. "S" <Enter> sucht nach "String", da "S" nach "String" vervollständigt wird.
  • Beispiel: Man Klickt auf ein Button, jedoch wenige ms zuvor überdeckt ein unmotiviert eingeblendetes Fenster den Button, nunmehr verarbeitet dieses neue Fenster den Click auf einen zufällig deckungsgleichen Button. Und das obwohl eine gewolltes Anklicken gar nicht möglich ist.
  • Beispiel: App "VR Networld Banking": Ist die App lange unbenutzt läuft die Session im Hintergrund ab, es ist keine Verbindung mehr vorhanden. Beendet man jetzt die App kommt die Frage "Abmelden"
  • Beispiel: App "VR Networld Banking": Besteht eine Session, diese hat aber keine Fokus, und es kommt eine Pushj nachricht wird man in einen neuen Anmeldeschirm geleitet obwohl eine gültige Session da ist. Es wird eine weitere Instanz der App gestartet anstelle den Eingabefokus auf die laufende aktuelle Session zu lenken
  • Beipsile: App "VR Networld Banking": geht der Anmeldevorgang sehr lange und das Handy schaltet das Display ab wird der anmeldevorgang nicht im Hintergrund zuende geführt, es gibt einen "technischen" Fehler. Ich muss immer aufs Display tippen um die App am Leben zu halten solange sie sich anmeldet.
  • Beispiel: App "VR Secure Go": Wird eine TAN erhalten verdeckt ein Fenster "aktualisiere Push Daten" diese TAN
  • Beispiel: Unwetterzentrale: man sieht eine karte, oben ist die Werbung am Laden, man klickt auf die Karte just in dem Moment rattert die Karten nach unten, man triff einen Bereich mit dem Klick, den man nicht wollte
  • Beispiel: Cookie-Warnungen: Wichtige Teile der Seite werden einfach überblendet, es ist keine echte Position für die Meldung vorgesehen
  • Beispiel: interne App-Makros: Apps werden intern teilweise durch Klicks gesteuert. Beispiel tunein Radio-App, mann wählt seinen Sender und sieht das "Play" Symbol. Eine Sekunde lang passiert nichts. Dann per Geisterhand dreht sich plötzlich das Rad. Der Playknopf wurde intern gedrückt, jetzt spielt das Radio los. Besser wäre es gewesen den Screen mit dem "Rad" zu beginnen, ev. mit dem Pause Symbol.

§1 Klickbarkeit

Ist ein Text oder ein Bild oder ein Icon anklickbar, so muss es in einer deutlich sichtbaren Weise grafisch anders ausgeprägt werden, dass dies deutlich wird. Bei einem MoveOver muss sich auch der Zeiger ändern. Ein Button muss von einem immer gleichen Rahmen umfasst sein, innerhalb des Textes muss "["Begriff"]" stehen oder #Begriff. Unterstreichen ist keine erlaubte Link-Symbolisierung. Einfärben (es wird gerne "Blau" genommen) ist keine erlaubte Link-Symbolisierung.

§2 Bewegungsmelder

Die beobachtete Fläche muss klar ausgewiesen werden. Bei MouseEntry / Leaf muss optisch die Fläche aufleuchten (ON/OFF). Bei ON darf die Fläche nicht verschoben werden, die GUI muss fixiert werden. Bei ON dürfen umliegende Bereiche verändert werden, bei OFF muss der "Originalzustand" wieder herstellt werden.

§3 Fokus

Der Eingabefokus darf niemals programmgesteuert dem aktuell sichbaren Eingabefeld entzogen werden, während die GUI Benutzereingaben erwartet. Das Einblenden eines Meldungsfensters während der Benutzer eine Eingabe tätigt ist ein solcher Fokusentzug. Ein Notifikationsbereich der sich verändert ist erlaubt.

§4 Eingabesicherheit

Direktes Abändern/Verfälschen der Eingabe, also automatisches Vervollständigen, automatisches Setzen eines Punktes usw. ist nicht erlaubt.

§5 Sichtbarkeit

Eingabebereiche dürfen nicht unmotviert überdeckt oder verschoben werden. Bei einer Grössenänderung muss das Zentrum (=Position des Eingabe-Cursors) beibehalten werden. Info Texte die den Sinn des aktuellen Eingabefeldes beschreiben müssen oberhalb des EIngabefeldes stehen, es muss damit gerechnet werden dass ein Touch Keyboard direkt unter dem Eingabefeld eingeblendet wird.

§6 Klicksichtbarkeit

Ein Klick auf Controls, die erst wenige ms sichtbar sind, darf nicht als Eingabe gewertet werden. Also wenn ein neu sichtbares Fenster eine alte GUI überdeckt und sich der Benutzer für einen Klick entschieden hat darf das neue Fenster diesen Klick-Event nicht verarbeiten.

§7 Reaktivität

Die GUI darf niemals auf Ergebnisse des Arbeitsprozesses warten, der Job wird an der Theke abgegeben, die GUI ist sofort wieder aktiv.

§8 Feedback

Ausgelöste Aktionen ("Tastendruck", "Klick", "Mausbewegung") muss ein Feedback auf der GUI erzeugen. Es darf nicht der Eindruck erweckt werden weitere, andere, derselbe Klick wäre nochmal möglich (zero Feedback). Optimalerweise sollte ein Button-Symbol eine "Action" symbolisieren (ausführen, stempeln, senden), nach dem Auslösen der Aktion sollte es zu einem Feedback-Symbol werden (Wartesymbol, grüner Haken) das NICHT Klickbar ist.

§9 Pausen

Jede Eingabe muss zurückgestellt werden können. Eingaben auf anderen Formularen müssen dann möglich sein. Verbot von "Topmost". Verbot von Modal.

§10 Variante

Jedes Formular muss dupliziert werden können. Es muss Testeingabe / Versuche verkraften ohne dass eine Aktion durchgeführt wird, erst anschließendes "Buchen" führt zur Aktion oder eben "Abbruch"

§11 Rückgängig

Jede lokale Eingabe die noch nicht "abgeschickt" ist, muss rückgängig gemacht werden können

§12 Barrierefreiheit

https://www.heise.de/newsticker/meldung/Firefox-mit-neuen-Tools-fuer-ein-barrierefreies-Web-4571249.html

Client Konzepte

Datenhaltung

  • Tabellenwerte oder Eingabefelder sollen auf der Client Seite bereits mit dem HTML initial gehalten werden
    • Die JSON Daten sind Teil des HTML und wandern in die "Lokale Datenbank"
    • Dazu zusammen erhalten Sie einen ETAG, dieser kann einzeln abgefragt werden, das Resultat ist eine Info ob sich dieser ETAG geändert hat
    • Ev. auch ein COntext-ID mit einem ETAG, also wenn BEIDE gleich geblieben sind ist die Version in der Datenbank noch aktuell
    • Der Server soll bei Datenabfragen "ETAG" fähig sein, insbesondere für Daten-Requests, Also: Der Client frägt ein Dataset ab, ist es unverändert bekommt er nur das ETAG, das ist in der lokalen DB
  • Server liefert neue Daten nicht im HTML sondern in der Form, http://abral.altervista.org/apps/libri/elibri.json.php
  • Client benutzt eine Datenbank, die allen TABs zur verfügung stehen

sagen wir mal, wir haben:

type
 DataModuleeCommerce = class(GhostAbleInterface)
 
 published
  TodaySettings : TStringList;
 end;

wir sagten ja ein lokaler OrgaMon kann auf TodayStrings zugreifen, als wäre das lokal

fetch()

https://fetch.spec.whatwg.org/

  • Alle Server Anforderungen gehen sofort zunächst in einen Sync-Buffer
  • Wenn mögich wird der Sync-Buffer Asynchron abgearbeitet
  • Mit dem Server wird per fetch() gesprochen
  • Ein Fetch kann misslingen
    • IP Change
    • Server Process Crash
    • Client Internet Connection Gab
    • Dies darf aber niemals zum Problem werden

Netzwerk

  • WAMP-formatted WebSocket messages (JSON, MsgPack and CBOR) are now nicely decoded for inspection in the Network panel.

Roadmap

im Einsatz

aktuell in Arbeit

  • HTTP/2 HPACK (Andreas)
  • erste Modelle des UI (Andre)
    • erster OrgaMon-Dialog ist "System"

kommende Aufgaben

  • "Eingabefeld",
  • "Tabelle"

Links

noch zu lesen