Browser-Fenster - Was ist das für eine Art von "Komponente"?

[Matze]

Hi zusammen,

teilweise ist es gar nicht leicht, modern aussehende und optisch ansprechende Anwendungen zu erstellen. Mit Ribbons etc. geht's mittlerweile aber 100% flexibel ist man da nicht.

Daher würde mich interessieren, was das Browserfenster (also das, was die Website darstellt) vom Prinzip her ist. Damit kann man so viel machen, speziell was die GUI anbelangt. Ob das nun gut oder schlecht ist, sei dahingestellt. Natürlich sollte man sich von Standard-Layouts nicht zu weit entfernen. Darüber soll hier auch nicht diskutiert werden.

Dennoch würde mich interessieren, was das genau ist. Ist das eine Art Canvas, auf dem gezeichnet wird? Nur kann man dann normalerweise keinen Text mehr markieren. Ist das eine Kombination aus vielen dynamisch generierten "Komponenten"? Also als Beispiel aus der Delphi-Welt: Eine <textarea> ist eine Art RichEdit, die in einer ScrollBox dargestellt wird o.ä.

Also, was ist das genau? :gruebel:

Grüße
Matze

[Christian Seehase]

Moin Matthias,

da ja, z.B., Firefox Opensource ist, könntest Du Dir ja mal die Sourcen ansehen.

[Matze]

Moin Chris,

daran dachte ich auch zuerst, aber das würde eine halbe Ewigkeit brauchen, sich da einzulesen ...

[Florian Hämmerle]

Wenn ich dich richtig verstehe, möchtest du an die Rendering-maschine von html ran?

die inputs, buttons, textarea werden je nach OS anders dargestellt, was darauf hindeutet, dass sie da auf die systemspezifischen Sachen zurückgreifen. andererseits kann man sie aber auch mittels CSS stylen.

Vielleicht gibt das MDN (Mozilla Developer Network) Auskunft darüber.

mfg Florian

[Matze]

Hallo,

ne ne, ich möchte keine Rendering-Engine o.ä. nachprogrammieren (das ist aussichtslos, so komplex wie die mittlerweile sind ;) ). Die bekomme ich auch fertig.
Mich hat nur interessiert, was das für ein Ausgabeelement ist, das so flexible Darstellungen ermöglicht.

[Die Muhkuh]

Es geht ihm um das Browser-UI im allgemeinen. Gerade im FireFox 4 mit verschiedenen Personas, Themes, Styles, jeder Button anpassbar etc.

[Matze]

Zitat:

Zitat von Die Muhkuh (Beitrag 1094283)

Es geht ihm um das Browser-UI im allgemeinen. Gerade im FireFox 4 mit verschiedenen Personas, Themes, Styles, jeder Button anpassbar etc.

Nö, ich will wissen, was das ist, in dem eine Website "gerendert" wird. Also das, was bei "about:blank" viereckig und weiß dargestellt wird.

[Namenloser]

Was willst du denn genau wissen? So eine Rendering Engine wie Gecko ist glaube ich zu kompliziert, als dass man mal eben in 3 Sätzen zusammenfassen könnte, wie sie funktioniert.

Für die Darstellung der Buttons und sonstigen Systemelemente greift man unter Windows wahrscheinlich auf die Theme-API zurück und zeichnet die Controls dann manuell, falls das deine Frage sein sollte. Unter Firefox wird ja sogar das komplette Frontend inklusive Menüs und allem auf diese Weise gerendert. Das siehst du auch leicht, wenn du mal mit einem Tool wie WinSpy versuchst, einzelne Controls auszuwählen – es geht nicht: Du kannst nur das gesamte Fenster auswählen.

[Matze]

Zitat:

Zitat von NamenLozer (Beitrag 1094285)

wenn du mal mit einem Tool wie WinSpy versuchst, einzelne Controls auszuwählen – es geht nicht: Du kannst nur das gesamte Fenster auswählen.

Ok, das klärt schonmal, dass es keine normalen Komponententen sind, die da dynamisch erzeugt werden.
Ich wollte eigentlich nur wissen, was das genau ist.

Dass sich das nun so entwickelt, hätte ich nicht gedacht. *g*

[Namenloser]

Zitat:

Zitat von Matze (Beitrag 1094284)

Zitat:

Zitat von Die Muhkuh (Beitrag 1094283)

Es geht ihm um das Browser-UI im allgemeinen. Gerade im FireFox 4 mit verschiedenen Personas, Themes, Styles, jeder Button anpassbar etc.

Nö, ich will wissen, was das ist, in dem eine Website "gerendert" wird. Also das, was bei "about:blank" viereckig und weiß dargestellt wird.

Die Webseite, bzw. der Browser, befindet sich in einem ganz normalen Fenster. Dieses Fenster hat – wie alle anderen Fenster auch – einen Device Context (HDC), und auf diesen wird gezeichnet.

Das „weiße Fenster“ bei about:blank ist, vereinfacht gesagt, nichts anderes als ein

Delphi-Quellcode:

Canvas.FillRect()

.

[Matze]

Aber wenn das nur eine Zeichenfläche ist, dann könnte man den Text doch nicht tippen, markieren etc. Da muss dann doch irgendwas drüber liegen.

[Namenloser]

Wieso nicht? :gruebel:

[Florian Hämmerle]

Wenn das Control Eingaben verarbeiten kann, kann es diese ja auch darstellen.

Vom Umfang her geht das hier (http://pbear.com/htmlviewers.html) um sich mal die Technik dahinter anzusehen.

mfg Florian

[Namenloser]

Im Anhang ein ganz billiges Beispiel, wie man die Selektion von Text emulieren kann.

(Der Text ist leicht gesperrt, da es sonst mit ClearType Artefakte gäbe, deren Umgehung den Code nur unnötig verkomplizieren würde)

[Florian Hämmerle]

gutes beispiel, aber man kann den text auch selektieren wenn man nacheinander an zwei stellen im text klickt und nicht zieht.. ;D

[Matze]

Danke für das Beispiel, Philip. Sehr interessant.
Vielleicht ist das wirklich eine Art Canvas.

[Namenloser]

Zitat:

Zitat von Florian Hämmerle (Beitrag 1094294)

gutes beispiel, aber man kann den text auch selektieren wenn man nacheinander an zwei stellen im text klickt und nicht zieht.. ;D

Man kann auch über den rechten Zeilenrand hinausziehen und es werden Zeichen in der Zeile darunter selektiert ;) Aber um solche Feinheiten habe ich mich jetzt hier nicht gekümmert, soll ja nur als Veranschaulichung dienen.

[Luckie]

Also letztendlich ist alles eine Zeichenfläche. Und die Kontrollelemente werden eben von dem Engine gezeichnet, deswegen habe sie auch kein Handle, weil es keine Windows Fenster sind.

[Matze]

Wobei zum Teil schon die System-Buttons eingebunden werden, vermute ich. Denn diese sehen immer so aus wie das im Betriebssystem eingestellte Theme. Bei den Scrollbalken ist es das Gleiche.

[Namenloser]

Zitat:

Zitat von Matze (Beitrag 1094299)

Wobei zum Teil schon die System-Buttons eingebunden werden, vermute ich. Denn diese sehen immer so aus wie das im Betriebssystem eingestellte Theme. Bei den Scrollbalken ist es das Gleiche.

Wie gesagt, Windows Theme API. Nochmal siehe Anhang ;)

Das gleiche geht natürlich auch für andere Controls...

[rollstuhlfahrer]

Zitat:

Zitat von NamenLozer (Beitrag 1094305)

Das gleiche geht natürlich auch für andere Controls...

Die VCL macht das intern übrigens auch: Der TSpeedButton hat nämlich kein Fenster-Handle, aber er ist trotzdem zu sehen.

Bernhard