DE102016202636A1 - Verfahren und Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser - Google Patents

Verfahren und Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser Download PDF

Info

Publication number
DE102016202636A1
DE102016202636A1 DE102016202636.4A DE102016202636A DE102016202636A1 DE 102016202636 A1 DE102016202636 A1 DE 102016202636A1 DE 102016202636 A DE102016202636 A DE 102016202636A DE 102016202636 A1 DE102016202636 A1 DE 102016202636A1
Authority
DE
Germany
Prior art keywords
browser
user interface
functional component
web user
primitives
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
DE102016202636.4A
Other languages
English (en)
Inventor
Björn Müller
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Captaincasa GmbH
Original Assignee
Captaincasa GmbH
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Captaincasa GmbH filed Critical Captaincasa GmbH
Priority to DE102016202636.4A priority Critical patent/DE102016202636A1/de
Publication of DE102016202636A1 publication Critical patent/DE102016202636A1/de
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Stored Programmes (AREA)

Abstract

Im Hinblick auf eine weitestgehend browserunabhängige Erstellung einer Web-Benutzeroberfläche ist ein Verfahren zur Erstellung einer Web-Benutzeroberfläche mit einem Browser mit den folgenden Schritten bereitgestellt: Bereitstellen einer vorgebbaren Anzahl grafischer Grundelemente in dem Browser, Aufbau oder Bereitstellung mindestens einer Funktionskomponente auf Basis mehrerer Grundelemente und Aufbau oder Bereitstellung der Web-Benutzeroberfläche aus der mindestens einen Funktionskomponente, wobei der Browser zur Verarbeitung und/oder Ausführung der Grundelemente dient und der Aufbau oder die Bereitstellung der mindestens einen Funktionskomponente in einer vom Browser unabhängigen oder separaten Komponenten-Schicht erfolgt. Des Weiteren ist eine entsprechende Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser angegeben.

Description

  • Die vorliegende Erfindung betrifft ein Verfahren und eine Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser.
  • In herkömmlicher Weise bieten Browser zur Erstellung von Web-Benutzeroberflächen beispielsweise HTML-Elemente in Verbindung mit CSS (Cascading Style Sheet) an, wobei hierdurch die Definition und das Styling von Oberflächen über das Zusammensetzen von vorgegebenen Elementen erfolgt. Als Programmiersprache und Laufzeitumgebung, mit der auf HTML-Elemente zugegriffen werden kann, wird beispielsweise JavaScript® verwendet.
  • Die Historie von HTML besteht aus einer stetigen Weiterentwicklung insbesondere der HTML-Elemente und CSS-Style-Definitionen. Mittlerweile existiert eine sehr hohe Anzahl an verschiedenen Elementen, wobei jedes Element wiederum selbst eine hohe Anzahl an Eigenschaften und Funktionen aufweist.
  • Trotz einer Standardisierung von HTML ist bei einer Entwicklung von Web-Benutzeroberflächen ein hoher Aufwand zu betreiben, um diese Web-Benutzeroberflächen auf verschiedenen Browsern in gleicher Weise ablaufen zu lassen. In der Regel ergeben sich hierbei Browser-Inkompatibilitäten, die zu einem unterschiedlichen Ablauf auf unterschiedlichen Browsern führen. Jeder Browser-Wechsel beim Endnutzer bedeutet ein Risiko und bedingt einen entsprechenden Test- und Wartungsaufwand, um Inkompatibilitäten weitestgehend zu vermeiden.
  • Bei existierenden Ansätzen zur Beseitigung dieses Problems geht es darum, die Vielfalt der HTML-Elemente in abstrahierter Form zur Verfügung zu stellen und dann innerhalb der hierdurch erzeugten Abstraktionsschicht Browser-Inkompatibilitäten auszugleichen. Diese Abstraktionsschicht muss bei Hinzukommen neuer Browser-Versionen ständig geprüft und angepasst werden.
  • Des Weiteren ist bei bekannten Browsern problematisch, dass die im Browser enthaltenen Elemente zum Anordnen von anderen Elementen – beispielsweise TABLE-Elemente, in deren Zellen INPUT-Elemente verwendet werden, oder DIV-Elemente mit Anordnungsbeziehungen – bestimmte Szenarien nur ungenügend abdecken, insbesondere im Bereich der flexiblen vertikalen Anordnung von Elementen.
  • Der vorliegenden Erfindung liegt daher die Aufgabe zugrunde, ein Verfahren und eine Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser derart auszugestalten und weiterzubilden, dass eine Web-Benutzeroberfläche weitestgehend browserunabhängig und mit umfassender Funktionalität auf einfache und sichere Weise erstellt werden kann.
  • Erfindungsgemäß wird die voranstehende Aufgabe durch ein Verfahren mit den Merkmalen des Anspruchs 1 gelöst. Danach ist ein Verfahren zur Erstellung einer Web-Benutzeroberfläche mit einem Browser mit den folgenden Schritten bereitgestellt:
    • – Bereitstellen einer vorgebbaren Anzahl grafischer Grundelemente in dem Browser,
    • – Aufbau oder Bereitstellung mindestens einer Funktionskomponente auf Basis mehrerer Grundelemente und
    • – Aufbau oder Bereitstellung der Web-Benutzeroberfläche aus der mindestens einen Funktionskomponente,
    wobei der Browser zur Verarbeitung und/oder Ausführung der Grundelemente dient und der Aufbau oder die Bereitstellung der mindestens einen Funktionskomponente in einer vom Browser unabhängigen oder separaten Komponenten-Schicht erfolgt.
  • Des Weiteren wird die voranstehende Aufgabe durch eine Vorrichtung mit den Merkmalen des Anspruchs 10 gelöst. Danach ist eine Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser bereitgestellt, wobei die Vorrichtung zur Durchführung der folgenden Schritte aufgebaut ist:
    • – Bereitstellen einer vorgebbaren Anzahl grafischer Grundelemente in dem Browser,
    • – Aufbau oder Bereitstellung mindestens einer Funktionskomponente auf Basis mehrerer Grundelemente und
    • – Aufbau oder Bereitstellung der Web-Benutzeroberfläche aus der mindestens einen Funktionskomponente,
    wobei der Browser zur Verarbeitung und/oder Ausführung der Grundelemente aufgebaut ist und wobei die Vorrichtung eine vom Browser unabhängige oder separate Komponenten-Schicht für den Aufbau oder die Bereitstellung der mindestens einen Funktionskomponente aufweist.
  • In erfindungsgemäßer Weise ist erkannt worden, dass durch geschickte Aufteilung der für die Erstellung einer Web-Benutzeroberfläche erforderlichen Funktionalitäten und deren geschickte Nutzung die voranstehende Aufgabe auf überraschend einfache Weise gelöst wird. In weiter erfindungsgemäßer Weise wird hierzu der Browser nicht im vollen Umfang seiner Funktionen genutzt, sondern werden lediglich eine vorgebbare Anzahl grafischer Grundelemente in dem Browser bereitgestellt, zu deren Verarbeitung und/oder Ausführung der Browser dann dient. Dabei kann es sich um einfachste Grundelemente handeln, die von allen gängigen Browsern in gleicher Weise verarbeitet und/oder ausgeführt werden. Derartige Grundelemente können auch als Minimalelemente bezeichnet werden, die in ihrer Struktur sehr einfach und von jedem Browser in gleicher Weise problemlos verarbeitet und/oder ausgeführt werden können. Browser-Inkompatibilitäten werden hierdurch in effektiver Weise umgangen, wobei in einem nächsten Schritt ein Aufbau oder eine Bereitstellung mindestens einer Funktionskomponente auf Basis mehrerer Grundelemente erfolgt. Ein derartiger Aufbau oder eine derartige Bereitstellung kann im Konkreten ein Aggregieren mehrerer Grundelemente zu mindestens einer Funktionskomponente umfassen. Dieser Aufbau oder diese Bereitstellung der mindestens einen Funktionskomponente auf Basis mehrerer Grundelemente erfolgt in einer vom Browser unabhängigen, insbesondere von der grafischen Browserverarbeitung unabhängigen, oder separaten Komponenten-Schicht. Diese Komponenten-Schicht ist von der grafischen Browserverarbeitung komplett entkoppelt.
  • Auf derartige Funktionskomponenten kann von einer Web-Anwendung zugegriffen werden, um einen Aufbau oder eine Bereitstellung der Web-Benutzeroberfläche zu realisieren. Auch der Aufbau oder die Bereitstellung der Web-Benutzeroberfäche aus der mindestens einen Funktionskomponente kann in der unabhängigen oder separaten Komponenten-Schicht erfolgen. In erfindungsgemäßer Weise erfolgt eine Nutzung des Browsers lediglich im Hinblick auf die vorgebbare Anzahl grafischer Grundelemente oder Minimalelemente und nicht im Hinblick auf alle im jeweiligen Browser in üblicher Weise enthaltenen Elemente, wobei diese Anzahl zur Vermeidung von Inkompatibilitäten zwischen unterschiedlichen Browsern klein gehalten werden kann. Dabei hat sich gezeigt, dass mit dem erfindungsgemäßen Verfahren in eleganter Weise auch eine generelle Schwäche von HTML im Bereich des flexiblen, vertikalen Layoutings überwunden werden kann.
  • Folglich ist mit dem erfindungsgemäßen Verfahren und mit einer zugehörigen und in geeigneter Weise ausgebildeten Vorrichtung eine Web-Benutzeroberfläche weitestgehend browserunabhängig und mit umfassender Funktionalität auf einfache und sichere Weise erstellbar.
  • An dieser Stelle darf darauf hingewiesen werden, dass der hier verwendete Ausdruck „aggregieren“ im weitesten Sinn zu verstehen ist und im Rahmen dieser Beschreibung der vorliegenden Erfindung gleichbedeutend mit einem Ansammeln, Vereinigen oder Zusammenführen verwendet wird.
  • Im Hinblick auf einen besonders sicheren Zugriff auf die Grundelemente können die Grundelemente in einer gekapselten oder abgegrenzten Library bereitgestellt werden. Die Kapselung oder Abgrenzung kann in vorteilhafter Weise über JavaScript® erfolgen.
  • Die Library kann die Definition der Grundelemente umfassen. Daneben kann die Library in vorteilhafter Weise mindestens eine Funktion zum Ausmessen von Textinhalten aufweisen, wobei diese Funktion oder Funktionen Nutzern der Library zur Verfügung gestellt werden können.
  • Weiterhin im Hinblick auf einen besonders sicheren Zugriff auf die Grundelemente kann auf die Grundelemente über eine geeignete Schnittstelle, vorzugsweise eine Programmierschnittstelle oder API, Application Programming Interface, zugegriffen werden. Sämtliche Abhängigkeiten der Browser-Technologie können in dieser Schnittstellte verborgen sein. Die Komponenten-Schicht hat somit keinen direkten Zugang zu der Grafikverarbeitung des Browsers, sondern lediglich den Zugang über die Schnittstelle der Grundelemente.
  • Im Hinblick auf ein besonders browserunabhängiges Verfahren ist es von Vorteil, wenn die grafischen Grundelemente in ihrer Struktur sehr einfach sind. In diesem Zusammenhang können die Grundelemente in vorteilhafter Weise Rechtecke und/oder ein- oder mehrzeilige Text-Eingabefelder aufweisen. Derartige Rechtecke und/oder Text-Eingabefelder bilden einfachste Grundelemente, die von jedem Browser problemlos zur Verfügung gestellt werden können. Vorzugsweise können die Rechtecke mit Hintergrund-Styling belegt werden. Weiter vorzugsweise kann in die Rechtecke Text hineingeschrieben werden. Mittels derartiger Grundelemente lassen sich auf einfache Weise höherwertige Komponenten in Form der Funktionskomponenten erstellen.
  • Unter einem Rechteck kann hierbei ein rechteckiger Rendering-Bereich verstanden werden, innerhalb dessen das Hintergrund-Styling oder der Text ausgegeben werden. Je nach Hintergrund-Styling können in dem Rechteck beliebige Formen platziert werden. D.h., das Rechteck kann optisch auch „rund“ erscheinen.
  • Im Hinblick auf ein besonders einfaches Verfahren können die Grundelemente über eine absolute Angabe positioniert werden, vorzugsweise über eine x,y,width,height-Definition oder x,y,width,height,z-Definition. Der Browser dient zur Ausführung einer derartigen Positionierung.
  • In weiter vorteilhafter Weise kann eine Logik der Komponenten-Schicht über eine vorzugsweise im Browser enthaltene Programmiersprache erfolgen, wobei es sich hier vorzugsweise um JavaScript® handeln kann. JavaScript® ist hinsichtlich seiner aktuellen Entwicklung auch für komplexe Aufgaben geeignet und insoweit effektiv für den Aufbau oder die Bereitstellung einer Funktionskomponente und/oder für das Aggregieren der Grundelemente und/oder die Durchführung einer Logik in der Komponenten-Schicht geeignet.
  • Zur Durchführung der Aufgaben in der Komponenten- oder Funktionskomponenten-Schicht wird in vorteilhafter Weise eine Rendering-Intelligenz in der Komponenten-Schicht bereitgestellt. Die Rendering-Intelligenz kann das Wissen um die grafische Anordnung der aggregierten Grundelemente beinhalten. Die Rendering-Intelligenz kann das Wissen beinhalten, wie Ereignisrückmeldungen der Grundelemente zu Änderungen am Aufbau und an der Ausgestaltung der in der Funktionskomponente verwendeten Grundelemente führen können. Das heißt beispielsweise, dass ein Benutzer auf einen Knopf drückt und darunter ein Auswahlmenü erscheint. Diese Rendering-Intelligenz kann quasi aus der HTML-Schicht hinein in die vom Browser unabhängige Komponenten-Schicht verschoben werden. An dieser Stelle darf darauf hingewiesen werden, dass die Komponenten-Schicht in synonymer Weise auch als Funktionskomponenten-Schicht, Komponenten-Library oder Komponenten-Ebene bezeichnet werden kann.
  • Zur sicheren Durchführung des Verfahrens kann die mindestens eine Funktionskomponente das oder die Grundelemente in vorgebbarer Weise anordnen oder ein Layout für die Web-Benutzeroberfläche durchführen.
  • Bei dem erfindungsgemäßen Verfahren und der erfindungsgemäßen Vorrichtung werden letztendlich nur Kernfunktionen des entsprechenden Browsers genutzt, um eine weitestgehend browserunabhängige Erstellung einer Web-Benutzeroberfläche zu ermöglichen. Daher können die Grundelemente auch als Nukleus-Elemente bezeichnet werden, die in einer Nukleus-Library gekapselt oder abgegrenzt bereitgestellt werden können.
  • Es gibt nun verschiedene Möglichkeiten, die Lehre der vorliegenden Erfindung in vorteilhafter Weise auszugestalten und weiterzubilden. Dazu ist einerseits auf die nachgeordneten Ansprüche und andererseits auf die nachfolgende Erläuterung bevorzugter Ausführungsbeispiele der Erfindung anhand der Zeichnung zu verweisen. In Verbindung mit der Erläuterung der bevorzugten Ausführungsbeispiele der Erfindung anhand der Zeichnung werden auch im Allgemeinen bevorzugte Ausgestaltungen und Weiterbildungen der Lehre erläutert. In der Zeichnung zeigen
  • 1 in einer schematischen Darstellung ein Diagramm zur Erläuterung eines Ausführungsbeispiels des erfindungsgemäßen Verfahrens zur Erstellung einer Web-Benutzeroberfläche mit einem Browser,
  • 2 in einer schematischen Darstellung eine aus Grundelementen gebildete höherwertige Funktionskomponente in Form einer Button-Komponente,
  • 3 in einer schematischen Darstellung eine aus Grundelementen gebildete höherwertige Funktionskomponente in Form einer Menu-Bar und
  • 4 in einer schematischen Darstellung einen Vergleich eines erfindungsgemäßen Verfahrens gemäß dem Ausführungsbeispiel aus 1 mit einem herkömmlichen Verfahren.
  • 1 zeigt in einer schematischen Darstellung ein Ausführungsbeispiel eines erfindungsgemäßen Verfahrens zur Erstellung einer Web-Benutzeroberfläche mit einem Browser. In dem in der 1 unten dargestellten Browser sind grafische Grundelemente in einer Nukleus-Library bereitgestellt. Mehrere Grundelemente werden in der darüberliegenden Komponenten-Schicht zu mindestens einer Funktionskomponente aggregiert. Die Funktionskomponente wird aufgebaut. Ein Aufbau oder eine Bereitstellung der Web-Benutzeroberfläche aus der mindestens einen Funktionskomponente erfolgt über einen Zugriff durch eine Web-Anwendung. Der Browser wird hier lediglich zur Verarbeitung und/oder Ausführung der Grundelemente in der Nukleus-Library genutzt.
  • 1 zeigt also drei Ebenen: die Nukleus-Ebene, die Komponenten-Ebene und die Ebene der Web-Anwendung.
  • Das erfindungsgemäße Verfahren kann als RISC(Reduced Instruction Set Client)-Verfahren bezeichnet werden. Der Browser wird nicht im vollen Umfang seiner Funktionen – HTML, CSS – genutzt. Er wird vielmehr dazu genutzt, einfachste Grundelemente – Rechtecke und Eingabefelder – zu zeichnen, über deren Aggregation dann letztendlich Benutzeroberflächen gestaltet werden können. Die vom Browser gegebenen Mittel zur Gestaltung von Web-Benutzeroberflächen – HTML, CSS – werden bei diesem Ausführungsbeilspiel nur in minimaler Weise verwendet, d.h. lediglich die Nukleus-Elemente werden verwendet.
  • Diese Elemente werden in der Nukleus-Library gekapselt und sind nur über deren Schnittstelle (API) zu verwenden. Dabei umfasst die Nukleus-Library die Definition der Nukleus-Elemente und wenige Funktionen zum Ausmessen von Textinhalten, die Nutzern der Library zur Verfügung gestellt werden.
  • Auf der Nukleus-Ebene wird der Browser als reine „Rendering-Execution“-Umgebung verwendet: Der Browser führt über die Schnittstelle – hier API – definierte Anweisungen aus – beispielsweise „Zeichne Rechteck an Koordinate!“ – und führt bestimmte Ereignisse über das API an die verwendende Ebene zurück.
  • Auf Basis der Nukleus-Elemente werden nun höherwertige Komponenten – die Funktionskomponenten – aggregiert. Diese höherwertigen Komponenten ordnen die enthaltenen Nukleus-Elemente an – übernehmen also das „Layouting“.
  • Ein Nukleus-Element weiß demnach nicht, warum es an eine bestimmte Stelle positioniert ist. Das „Warum“ der Positionierung liegt in der Verantwortung der Funktionskomponente.
  • 2 zeigt in einer schematischen Darstellung ein Beispiel einer Funktionskomponente in Form einer Button-Komponente. Der Button besteht aus einem äußeren Rechteck, einem inneren, linken Rechteck für den angezeigten Icon und einem inneren, rechten Rechteck für den Text. Diese Funktionskomponente ist also aus drei Rechtecken aufgebaut, wobei ein Icon und ein Text innerhalb der betreffenden Rechtecke geeignet positioniert sind.
  • 3 zeigt in einer schematischen Darstellung ein weiteres Beispiel für eine Funktionskomponente in Form einer Menu-Bar. Die Menu-Bar-Zeile besteht aus einem äußeren Rechteck und jeweils einem enthaltenen Rechteck für die einzelnen Texte – „File“, „Help“. Bei Druck auf einen Text wird eine Menu-Liste aufgebaut und entsprechend positioniert (x,y,width,height – und hier: z-Koordinate). Die Liste selbst besteht dann ihrerseits aus einem äußeren Rechteck, jeweils inneren Rechtecken für die einzelnen Menu-Einträge und jeweils Image-Rechteck und Text-Rechteck für den Eintrag (hier: „Save“ und „Close“).
  • Auf Basis dieser Funktionskomponenten werden nun konkrete Web-Benutzeroberflächen für Anwendungen erstellt.
  • 4 zeigt in einer schematischen Darstellung einen Vergleich zwischen dem erfindungsgemäßen Verfahren und einem herkömmlichen Verfahren, wobei das erfindungsgemäße Verfahren gemäß dem Ausführungsbeispiel aus 1 in der linken Hälfte der 4 und das herkömmliche Verfahren in der rechten Hälfte der 4 dargestellt sind. Innerhalb des Ausführungsbeispiels des RISC-Verfahrens werden Funktionen, die „normalerweise“ direkt im Browser liegen, nun innerhalb einer eigenen Schicht, der Komponenten-Schicht oder Komponenten-Library, durchgeführt.
  • Beispielsweise wird ein „BUTTON“ in herkömmlicher Weise über ein entsprechendes HTML-Element zur Verfügung gestellt (BUTTON) und ist somit direkter Bestandteil des HTML-Funktionsumfangs. Bei dem erfindungsgemäßen RISC-Verfahren wird der BUTTON durch eine eigene Komponente, basierend auf Rechtecken, erstellt.
  • Die „Rendering-Intelligenz“ wird somit aus der HTML-Schicht hinein in die vom Browser unabhängige Komponenten-Schicht verschoben.
  • Der konkret verwendete Browser wird nur über die Nukleus-Funktionen oder Grundelemente angesprochen. Es gibt also per se nur eine sehr begrenzte Schnittstelle, innerhalb derer Browser-Inkompatibilitäten zu beachten sind. Die Nukleus-Funktionen oder Grundelemente sind jedoch derart einfach, dass beispielsweise alle zurzeit gängigen HTML5-basierten Browser diese Funktionen oder Grundelemente in normierter Weise zur Verfügung stellen.
  • Auf Basis der Erfindung ergeben sich neue Freiheitsgrade durch eine Entkopplung von HTML. Auf Basis der Nukleus-Funktionen oder Grundelemente können beliebige Funktionskomponenten aufgebaut werden. Diese Funktionskomponenten sind explizit nicht gebunden an gängige Layout-Mechanismen, die HTML-Komponenten mit sich bringen. Eine generelle Schwäche von HTML im Bereich des flexiblen, vertikalen Layoutings wird somit überwunden.
  • Die bekannten Browser werden im Rahmen der Erfindung in einer Art und Weise genutzt, die sie hochperformant ausführen können. Der Browser muss nur noch einfache Elemente an vorgegebenen Koordinaten positionieren. Die Ausführung der Logik der Komponenten-Ebene oder Komponenten-Schicht kann in einfacher Weise über das im Browser enthaltene JavaScript® erfolgen. Die Performance von JavaScript® ist mittlerweile auch für komplexe Aufgaben geeignet.
  • Im Folgenden werden Beispiele von Nukleus-Funktionen oder Grundelementen angegeben:
  • Verwendete HTML-Elemente:
    • • DIV-Element (Rechteckbereiche)
    • • INPUT-Element (einzeilige Texteingaben), Variante „type=password“ für Kennworteingaben
    • • TEXTAREA-Element (mehrzeilige Texteingaben)
  • Verwendete HTML-Element-Methoden:
    • • „appendChild“, „removeChild“ – zum Schachteln
  • Verwendete HTML-Element-Properties:
    • • „enabled“, „readOnly“ (bei Eingabefeldern)
    • • „innerHTML“ bzw. „value“ (Text)
    • • „className“ (CSS Klasse als Grundlage der Hintergrundgestaltung)
  • Verwendete HTML-Style-Attribute:
    • • „left“, „top“, „width“, „height“, „zIndex“ – zur absoluten Positionierung
    • • „transform“ (zum Drehen, bspw. für „gekippten“ Text)
    • • „tooltip“
    • • „fontsize“, „fontfamily“, „fontweight“, „fontstyle“, „textdecoration“, „textAlign“ (Format von Textausgaben)
    • • „background“, „backgroundImage“, „backgroundRepeat“, „backgroundPosition“, „backgroundSize“
    • • „borderColor“, „borderLeftWidth“, „borderTopWidth“, „borderRightWidth“, „borderBottomWidth“, „borderRadius“ (Rahmengestaltung)
    • • „tabIndex“ (Fokussierung von Komponenten)
    • • „scrollableX“, „scrollableY“ (Scrollverhalten eines Rechtecks, wenn der hineingeschachtelte Content zu groß ist)
  • Verwendete Events:
    • • „mousedown“, „mouseup“, „mouseclick“, „mouseover“, „mouseout“, „contextmenu“, “mousewheel”
    • • „dragstart”, „dradover”, „dragend”, „drop”
    • • „keydown”, „keyup”
    • • „focus”, „blur”
  • Utility-Funktionen:
    • • „CanvasContext.measureText” (zum Ausmessen der Größe von Textinhalten)
    • • „document.body.clientWidth/Height“ (Ermittlung der Größe des aktuellen Browserfensters)
  • Bei dem hier gezeigten Ausführungsbeispiel werden die Nukleus-Funktionen oder Grundelemente über JavaScript® gekapselt und über eine explizite API dem Verwender zur Verfügung gestellt.
  • Alle Abhängigkeiten von der Browser-Technologie werden in dieser API verborgen. Die verwendende Ebene hat somit keinen direkten Zugang zu den Nukleus-Funktionen und damit verbundenen Objekten, beispielsweise Event-Objekte.
  • Die Nukleus-Library kann vom Umfang her sehr klein gehalten werden. Beispielsweise kann sie 700 Codezeilen aufweisen.
  • Auf Basis der Nukleus-Library wird bei dem Ausführungsbeispiel eine Komponenten-Library erstellt, die Funktionskomponenten oder höherwertige Komponenten zur Verfügung stellt. Beispiele für diese Komponenten sind:
    • • Button, ComboBox, Felder mit Formatprüfung.
    • • Grids, Listen, Trees.
    • • Layout-/Pane-Komponenten.
  • Die Komponentenbibliothek selbst ist von ihrer API-Gestaltung her von der Nukleus-Library unabhängig. Eine beispielhafte typische Gestaltung enthält Merkmale wie folgt:
    • • Komponenten-Instanzen sind schachtelbar („Component-Tree“).
    • • Komponenten kennen ihre minimale sowie ihre präferierte Größe (minimum size, preferred size), um es Komponenten zu ermöglichen, ein Layouting durchzuführen.
    • • Im Komponentenbaum gibt es Konzepte zum effektiven Layouting. Beispielsweise führt eine Größenänderung einer inneren Komponente zu einem Re-Layout des betreffenden Teils des Komponentenbaums.
    • • Es gibt Dialoge (Fenster) in verschiedenen Formen.
  • Bei dem Ausführungsbeispiel greift eine Web-Anwendung zur Erstellung von Web-Oberflächen auf die Komponenten-Library zu. Die Art und Weise der Anwendung ist höchst individuell. In sogenannten Rich Client Systemen läuft nur ein Teil der Anwendung direkt im Browser ab und kommuniziert über Schnittstellen mit der Server Anwendung. In sogenannten Fat Client Systemen läuft hingegen die gesamte Anwendung direkt im Browser ab. Das erfindungsgemäße Verfahren macht hier keinerlei Vorgaben.
  • Das erfindungsgemäße Verfahren nutzt zwar selbst nur einen Bruchteil des vom Browser zur Verfügung gestellten Technologieumfangs, es kann aber selbstverständlich bei weiteren Ausführungsbeispielen auf den gesamten Funktionsumfang zugreifen. Somit sind Integrationsszenarien mit bestehenden Web-Verfahren problemlos möglich.
  • Beispielsweise kann in einem Rechteck-Grundelement beliebiger „normaler“ HTML-Content eingebettet werden. Beispielsweise kann innerhalb einer erfindungsgemäßen RISC-Oberfläche ein bestehendes Reporting System eingebettet werden, das seine Masken in „normalem“ HTML gestaltet.
  • Bei einem weiteren Ausführungsbeispiel kann in eine „normale“ HTML-Seite beliebiger RISC-Content direkt eingebunden werden. Beispielsweise kann in einem HTML-Portal eine Anwendung mit RISC-basierter Oberfläche gestartet werden.
  • Hinsichtlich weiterer vorteilhafter Ausgestaltungen des erfindungsgemäßen Verfahrens oder der erfindungsgemäßen Vorrichtung wird zur Vermeidung von Wiederholungen auf den allgemeinen Teil der Beschreibung sowie auf die beigefügten Ansprüche verwiesen.
  • Schließlich sei ausdrücklich darauf hingewiesen, dass die voranstehend beschriebenen Ausführungsbeispiele lediglich zur Erörterung der beanspruchten Lehre dienen, diese jedoch nicht auf die Ausführungsbeispiele einschränken.

Claims (10)

  1. Verfahren zur Erstellung einer Web-Benutzeroberfläche mit einem Browser mit den folgenden Schritten: – Bereitstellen einer vorgebbaren Anzahl grafischer Grundelemente in dem Browser, – Aufbau oder Bereitstellung mindestens einer Funktionskomponente auf Basis mehrerer Grundelemente und – Aufbau oder Bereitstellung der Web-Benutzeroberfläche aus der mindestens einen Funktionskomponente, wobei der Browser zur Verarbeitung und/oder Ausführung der Grundelemente dient und der Aufbau oder die Bereitstellung der mindestens einen Funktionskomponente in einer vom Browser unabhängigen oder separaten Komponenten-Schicht erfolgt.
  2. Verfahren nach Anspruch 1, dadurch gekennzeichnet, dass die Grundelemente in einer vorzugsweise über JavaScript® gekapselten oder abgegrenzten Library bereitgestellt werden.
  3. Verfahren nach Anspruch 2, dadurch gekennzeichnet, dass die Library mindestens eine Funktion zum Ausmessen von Textinhalten aufweist.
  4. Verfahren nach einem der Ansprüche 1 bis 3, dadurch gekennzeichnet, dass auf die Grundelemente über eine geeignete Schnittstelle, vorzugsweise eine Programmierschnittstelle oder API, zugegriffen wird.
  5. Verfahren nach einem der Ansprüche 1 bis 4, dadurch gekennzeichnet, dass die Grundelemente Rechtecke und/oder ein- oder mehrzeilige Text-Eingabefelder aufweisen, wobei vorzugsweise die Rechtecke mit Hintergrund-Styling belegt werden können und/oder wobei vorzugsweise in die Rechtecke Text hineingeschrieben werden kann.
  6. Verfahren nach einem der Ansprüche 1 bis 5, dadurch gekennzeichnet, dass die Grundelemente über eine absolute Angabe, vorzugsweise über eine x,y,width,height-Definition oder x,y,width,height,z-Definition, positioniert werden.
  7. Verfahren nach einem der Ansprüche 1 bis 6, dadurch gekennzeichnet, dass eine Logik der Komponenten-Schicht über eine vorzugsweise im Browser enthaltene Programmiersprache, vorzugsweise JavaScript®, erfolgt.
  8. Verfahren nach einem der Ansprüche 1 bis 7, dadurch gekennzeichnet, dass eine Rendering-Intelligenz in der Komponenten-Schicht bereitgestellt wird.
  9. Verfahren nach einem der Ansprüche 1 bis 8, dadurch gekennzeichnet, dass die mindestens eine Funktionskomponente das oder die Grundelemente in vorgebbarer Weise anordnet oder ein Layout für die Web-Benutzeroberfläche durchführt.
  10. Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser, insbesondere zur Durchführung des Verfahrens nach einem der Ansprüche 1 bis 9, wobei die Vorrichtung zur Durchführung der folgenden Schritte aufgebaut ist: – Bereitstellen einer vorgebbaren Anzahl grafischer Grundelemente in dem Browser, – Aufbau oder Bereitstellung mindestens einer Funktionskomponente auf Basis mehrerer Grundelemente und – Aufbau oder Bereitstellung der Web-Benutzeroberfläche aus der mindestens einen Funktionskomponente, wobei der Browser zur Verarbeitung und/oder Ausführung der Grundelemente aufgebaut ist und wobei die Vorrichtung eine vom Browser unabhängige oder separate Komponenten-Schicht für den Aufbau oder die Bereitstellung der mindestens einen Funktionskomponente aufweist.
DE102016202636.4A 2016-02-19 2016-02-19 Verfahren und Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser Pending DE102016202636A1 (de)

Priority Applications (1)

Application Number Priority Date Filing Date Title
DE102016202636.4A DE102016202636A1 (de) 2016-02-19 2016-02-19 Verfahren und Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
DE102016202636.4A DE102016202636A1 (de) 2016-02-19 2016-02-19 Verfahren und Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser

Publications (1)

Publication Number Publication Date
DE102016202636A1 true DE102016202636A1 (de) 2017-08-24

Family

ID=59522359

Family Applications (1)

Application Number Title Priority Date Filing Date
DE102016202636.4A Pending DE102016202636A1 (de) 2016-02-19 2016-02-19 Verfahren und Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser

Country Status (1)

Country Link
DE (1) DE102016202636A1 (de)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6973625B1 (en) * 2001-07-06 2005-12-06 Convergys Cmg Utah Method for creating browser-based user interface applications using a framework
US20090259949A1 (en) * 2008-04-15 2009-10-15 Microsoft Corporation Cross-browser rich text editing via a hybrid client-side model
US20100070887A1 (en) * 2008-09-15 2010-03-18 Apple Inc. Method and apparatus for providing an application canvas framework
US20130086151A1 (en) * 2011-09-30 2013-04-04 Oracle International Corporation Enterprise tools enhancements

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6973625B1 (en) * 2001-07-06 2005-12-06 Convergys Cmg Utah Method for creating browser-based user interface applications using a framework
US20090259949A1 (en) * 2008-04-15 2009-10-15 Microsoft Corporation Cross-browser rich text editing via a hybrid client-side model
US20100070887A1 (en) * 2008-09-15 2010-03-18 Apple Inc. Method and apparatus for providing an application canvas framework
US20130086151A1 (en) * 2011-09-30 2013-04-04 Oracle International Corporation Enterprise tools enhancements

Similar Documents

Publication Publication Date Title
DE10351351B4 (de) Verfahren und System zur dynamischen Generierung von User Interfaces
WO2006013161A1 (de) Verfahren, programm und system zur dynamischen, template basierten generierung von internetseiten
DE202016107451U1 (de) Systeme zur interaktiven Darstellung eines sichtbaren Teils einer Rendering-Oberfläche auf einem Benutzergerät
EP2629187A2 (de) Verfahren zur Anpassung der graphischen Darstellung auf der Bedienoberfläche einer Computeranwenderstation
EP3080668B1 (de) Verfahren zur beeinflussung eines steuerprogramms eines steuergeräts
EP2171582B1 (de) Fernbedienung eines browser-programms
DE112013007637T5 (de) Systementwicklungs-Unterstützungsvorrichtung
EP3438774B1 (de) Verfahren zur bereitstellung von funktionen innerhalb eines industriellen automatisierungssystems und automatisierungssystem
DE102016202636A1 (de) Verfahren und Vorrichtung zur Erstellung einer Web-Benutzeroberfläche mit einem Browser
EP3528473A1 (de) Verfahren, client-computer und computerprogramm zur ausführung von quellcode an einem client-computer
DE102014019368A1 (de) Einrichtung zur Verwaltung und Konfiguration von Feldgeräten einer Automatisierungsanlage
EP2252942A1 (de) Verfahren und vorrichtung zur textattribuierung in textgrafiken
DE202012013449U1 (de) System für In-Line-Einfügung von Scriptabhängigkeiten
EP3764210A1 (de) Darstellen von anzeigebereichen auf einem desktop
DE112015004642T5 (de) Erzeugen von Webbrowseransichten für Anwendungen
Binner Industry 4.0: defining the working world of the future
DE202021103037U1 (de) System zur Darstellung von Prozessgrafiken in der Prozess- und Anlagenautomatisierung
EP3117303B1 (de) Container mit einheitlichem look and feel mehrerer applikationen
WO2022058164A1 (de) Benutzerschnittstelle, verfahren und html-code zur parametrierung einer automatisierungseinheit
EP3048777B1 (de) Verfahren zum webbasierten zugriff auf ein automatisierungsgerät, computerprogramm zur ausführung des verfahrens und system
DE102013204245A1 (de) Verfahren und Vorrichtung zum Bereitstellen von extrahierten Daten
CH715128A2 (de) Verfahren und Gerät zur Anzeige von HTML-Seiten auf industriellen Anzeigegeräten.
AT513368B1 (de) Vorrichtung und Verfahren zur Erstellung einer webbasierten Seite für ein Bediengerät als Mensch-Maschine-Schnittstelle
DE102021133223A1 (de) System und verfahren zur konfigurierbaren visualisierung einer technischen anlage
EP3715974A1 (de) Steuerprogrammerstellung mit temporärer darstellung von anschlüssen

Legal Events

Date Code Title Description
R012 Request for examination validly filed
R016 Response to examination communication