Javascript: Fenstererstellungs-Snippet

Hoi ich brauche mal eure Kritik, Wünsche und Anregungen.

Ich habe für ein Ajax-Projekt ein bißchen mit Javascript rumgespielt und da ist dann diese Fensterklasse entstanden:

http://snippets.galaxy-news.de/javascript:fensterklasse

Mein Problem ist nun noch, dass der IE (wie immer ) einen Fehler bringt und deren Anzeige so gut ist, dass man den Fehler ewig suchen müsste (aufpassen: Ironie). Wenn nun mir jemand sagen könnte, woran es liegt wäre ich dankbar.

Was alles noch in der Zukunft in dieses Snippet kommen soll:

fenstertemplates mittels Grafiken

bessere Fensterverwaltung (focusieren soll dann gehen)

transparenzeffekte auch im IE

was noch so gewünscht ist

Wenn die Klassen ein wenig durcheinander erscheinen tuts mir leid. Im Endeffekt soll diese Klasse am Ende so nen Dublikat von JFrame werden. Nur halt nicht so komplex, da man ja nicht den traffix sprengen will.

Also immerher mit den Anregungen

Ciao KoMtuR


P.S.: getestet in Firefox, Opera und IE(fehlerhaft)

Hast du auch eine URL, wo du die Sache am Laufen hast?

Hmm nee leider nicht. Müsste ich mich mal irgendwo registrieren, so dass ich das da drauf packen kann.

edit: http://home.arcor.de/komtur123/

Da nun kann man es online anguckn

htmlfile: Mitglied nicht gefunden

http://img505.imageshack.us/img505/2723/unbenannt4re.png

Callstack:
JScript anonymous function JScript
JScript anonymous function JScript: this._attributes(celement, arguments[1])
JScript anonymous function JScript : var body = node.add('div', {id: this.id, style: sstyle + "z-index:1;", className:"window"}, [
node.add('div', {id: this.id + 'caption', className: 'windowcaption'}, [
node.add('a', {style: 'float:right; cursor:pointer;', href: "javascript:jsWindow.close(\'" + this.id + "\');"}, 'X'),
this.caption
]),
node.add('div', {id: this.id+"content", className: 'windowcontent'})
]);
_jsWindow JScript: this.body = this._createBody();
JScript anonymous function JScript : var newwin = new _jsWindow(caption, options, context)
JScript global code JScript : var win1 = jsWindow.add('Fenstertest1', '', 1);

Mehr kann ich dir leider nicht anbieten.

Ah ok da hab ich wenigstens schonmal was zum suchen. Hoffe der IE7 gibt ne genauere Fehlermeldung aus. Die anderen Browser habens ja vorgemacht.

Mal schauen, ob ich da irgendwas machen kann

edit: ist halt so, wenn man nur ne Funktion mal rauskopiert. Ich glaub ich mach mal ne eigene Funktion, die dann auch geht im IE. Die Originalversion geht auch im IE, aber ich weiß nicht, was da der Unterschied sein soll

So nun sollte es mit dem Code soweit gehen. Habe nun eine andere Funktion gebaut, welche mir mittels DOM Elemente erstellt.

Coole Sache

Wollte eigentlich heute noch das mit den Templates fertigbekommen, aber leider sollte man den Computer nicht runterfahren, bevor man die Bilder abgespeichert hat und somit verschiebt sich das nen bissl

So nun gibts wieder ein Update, aber erstmal nur unter http://home.arcor.de/komtur123/ zu bewundern. Muss das morgen mal in die Snippetdatenbank legen.

Da sind 2 Fenster, welche einen unterschiedlichen Style haben. Im quellcode seht ihr dann, dass dieses grafische Fenster eine abgeleitete Klasse von der Fensterklasse ist.

Wer irgendwelche Anregungen hat, was man besser/anders/hinzufügen könnte, kann es ruhig loswerden

Das sieht schon sehr nett aus, muss ich zugeben.
Was jetzt noch schön wäre, wenn der z-Index sich anpassen würde... jetzt ist ja immer fenster2 über fenster1 .. das wenn man ein fenster gerade aktiv verschiebt es das höchste Z-index bekommt

Für mich sieht das ganze schon jetzt zu verworren und aufgebläht aus...
Welche funktionen soll das Framework später mal übernehmen?

Ich finde es jedenfalls reichlich sinnlos die neuen verschiebbaren layer in tabellenform aufzubauen und dann auch noch die styles hardcoded über javascript festzulegen (zumindest laut dem letzten beispiel)

Auch find ich es ein wenig seltsam, die layer gleich über das script zu erzeugen, anstatt erstmal layer in html zu schreiben und sich voll und ganz darauf zu konzentrieren die Funktionen für das verschieben, fokusieren, schließen, verändern etc. zu erstellen und das script browserübergreifend zum laufen zu bringen.

soviel zu meinen anmerkungen

reg4rds
chojin

Das mit der Tabellenform ist einfach nur so entstanden, um zu zeigen, dass man halt auch dies nehmen kann. Sicherlich kannste auch divs nehmen und sicherlich kannste auch eindeutige IDs vergeben. Das sind alles nur beispiele.

Klar sieht es ein wenig verworren aus - ich bin selber immer mal am umsortieren, da es mich nervt.

Das Framework soll halt später so eine Art backend liefern, wenn man dynamisch fenster erstellen will. Es kommt demnächst noch diverse EventListener hinzu, welche dann das Minimieren/maximieren/verschieben/vergrößern/focusieren(was ich heute machen werde, weil mich der z-index auch nervt) steuern werden.

Ich werde mich nun auch erstmal auf die Verarbeitung stürzen, aber ich brauchte erstmal ein layout, womit ich arbeiten konnte (bin aber noch nicht zufrieden)

Also in Mozilla (1.7) habe ich 100% CPU-Last während dem Verschieben der Fenster, die noch nichtmal Inhalt haben (flüssiges Verschieben ist auch nicht möglich, sondern es ruckelt sehr) O.o

In Opera geht das Verschieben zwar flüssig, aber dafür sind die Fenster nicht transparent.

Die neue Gecko-Engine hat insbesondere bei komplizierteren, dynamischen Seiten schwere Performance-Probleme. Dies ist mir schon öfters aufgefallen. Möchte mal wissen, was nun wieder verbockt wurde.

Im IE bekomm ich übrigens einen Fehler:
jsWindowStack is undefined

Original von BLUESCREEN
Also in Mozilla (1.7) habe ich 100% CPU-Last während dem Verschieben der Fenster, die noch nichtmal Inhalt haben (flüssiges Verschieben ist auch nicht möglich, sondern es ruckelt sehr) O.o

In Opera geht das Verschieben zwar flüssig, aber dafür sind die Fenster nicht transparent.

Bei mir klappt das draggen im Mozilla 1.7.12 super. Allerdings ist das zweite "gründe" Fenster fehlerhaft.

ich sags ja. Opera is immo der Beste Browser. Im IE läufts bei mir.

Linux Firefox, geht relativ vernuenftig, wobei ich den Eindruck habe, es ging vor 1-2 Tagen besser?

Ich habe eine X.org Auslastung von 80% oder so.. zeichnest du das Fenster vielleicht ziemlich oft neu? (habe nicht in den Source geschaut).

nee das Fenster wrd normalerweise nur einmal gezeichnet und dann halt nur beim bewegen wird das div, indem ein Fenster liegt, nur verschoben. also nicht wirklich neugezeichnet. man könnte mal versuchen dieses "transparente" auszuschalten. vielleicht geht es dann besser.

Edit: Ich hätte noch ne andere Idee. Man könnte beim "draggen" noch ein neues Div generieren, welches ohne Hintergrund+Inhalt ist und nur einen Rahmen besitzt (wie es beim Windows ist, wenn man Fenster verschiebt). Vielleicht hat ja Mozilla einfach nur probleme die Sachen schnell genug neu darzustellen, wenn die verschoben wurden.

Original von TheUndeadable
Die neue Gecko-Engine hat insbesondere bei komplizierteren, dynamischen Seiten schwere Performance-Probleme. Dies ist mir schon öfters aufgefallen. Möchte mal wissen, was nun wieder verbockt wurde.

Im IE bekomm ich übrigens einen Fehler:
jsWindowStack is undefined

hmm welchen IW nutzt du? ich hatte das mehrfach bei mir im IE, Firefox und Opera getestet (wo opera natürlich der überzeugenste war) und da lief es überall. Konnte leider gestern nicht uploaden, weil meinem Internetprovider die Glasfaserleitungen ausgehen und eine anscheinend gestern vom Bagger überfahren wurde

http://img224.imageshack.us/img224/2292/unbenannt8mi.png

IE 6 in der Standardeinstellung.

hmm dann versuch mal anstatt dieses "include('jsWindowManager')" einfach das Script per normalen Script-Tag einzubinden. Der include-Konstrukt scheint wohl doch nicht ohne weiteres zu funktionieren. Komisch aber auch, da ich auch den IE6 nutze und ich da irgendwie keine Fehler erhalte.

So nun sollte das beim Firefox keine so große auslastung mehr sein. Bei mir läuft das nun auf ca. 30%, wenn man wie ein Psycho das Fenster bewegt. Hatte leider diese Woche etxrem wenig zeit und kann heute erst wieder dran weiterarbeiten.

edit: Focusieren geht nun und die Fenster werden nun korrekt im Vordergrund angezeigt

Neues Update auf http://home.arcor.de/komtur123/

Nun kann man (zumindest erstmal an 2 Seiten) das Fenster vergrößern und verkleinern. Nur kommt da ein Fehler zustande, den ich mir nicht ganz erklären kann. Wie man sieht ist das auswahlrechteck für die Standardversion nicht korrekt. Irgendwie fehlen da immer paar Pixel zu der richtigen Größe. Nun hab ich aber leider keine Ahnung, wieso das gerade passiert. Hab es auch mal versucht über offsetHeight zu lösen, was auch kein Ergebnis brachte, was zufriedenstellend ist. Woran könnte das nun liegen?

Das Auswahlrechteck wird in der jsEventListener.js (in der Klassenfunktion _addDragBox) erstellt. Bei dem Table-Design geht es aber gut. Achja und es gibt noch keine wirklichen Grenzen, in wie weit man das Fenster minimieren kann. Dies werd ich Später mal einbauen

Wenn man das blaue Fenster auf Breite 0 schiebt verlängert es sich nach unten

Wenn man das grüne Fenster zu schmal macht, dann kann man es nur noch in vertikaler Richtung vergrößern/verkleinern

So dieses Phänomen sollte nun nicht mehr auftreten. Ich hab mal eine DTD mit ins Spiel gebracht und ab da versagt der IE. Hat denn jemand eine Idee, wie man das Table-Design in ein Div-Layout umsetzen könnte? (Achja ich weiß nun warum dieses Auswahlrechteck mistig ist bei dem Standardfenster. liegt an dem height: 100%

Am besten auch noch einen Check einbauen, um zu verhindern, dass das Fenster über den linken bzw. den oberen Rand verschoben wird.

Ansonsten bekommt man das Fenster nicht mehr wieder ;-)


Für das Stämme-Tutorial nutzen wir auch JS-Fenster, die Position wird dabei automatisch per Cookie gespeichert, so dass die Position auch nach Aufruf einer neuen Seite gleich bleibt. Wenn jetzt ein Spieler das Fenster über den oberen Rand hinausgeschoben hatte, konnte er das Fenster dauerhaft nicht mehr zurückverschieben.


Den Fehler haben wir glücklicherweise noch einige Tage vor Serverstart bemerkt, ansonsten hätte das bestimmt ne Menge Supportanfragen gegeben ;-)

Um mal ein weiteres Beispiel zu geben:

http://www.bindows.net/bindows/samples/applauncher/

WindowTest3.xml (rechts unten auf 'open' klicken)
Sein Ziel war es JavaScript genauso zu nutzen, wie man es unter der Forms-Programmierung unter Windows macht.

Wenn ich auf den Link klicke haengt sich mein FF auf...

Opera läd die Seite einfach net, braucht aber 100% CPU.

@komtur: Es nimmt langsam Formen an. Der blaue Rahmen um das Fenster herum ist beim Vergrößern / Verkleinern noch nicht genauso groß wie das Fenster einmal war.

seite lädt aber im hauptframe werden nur xml daten angezeigt ist das normal?


Browser: Firefox 1.5

klick mal unten auf open
dann öffnet der nen fenster und lädt das programm da rein..
schaut echt nett aus =)

Ich denke wenn man sowas weiter denkt, dann haben wir bald ein multi-user-system mit einem zentralen desktop über browser gesteuert *g*

Original von Kampfhoernchen

@komtur: Es nimmt langsam Formen an. Der blaue Rahmen um das Fenster herum ist beim Vergrößern / Verkleinern noch nicht genauso groß wie das Fenster einmal war.

Das kommt daher (ich nehme mal an du meinst das Fenster, welches sehr undekoriert aussieht), weil ich da irgendwelche prozentangaben für die größe genommen habe, aber dies nun nicht wirklich sehr ideal ist

Wenn man im IE ein Fenster verschiebt wird der Inhalt markiert, dass sieht unschoen aus. Weiss jemand woran das liegt bzw. wie man das beheben kann?

Komtur: Kuck mal was passiert, wenn du die Windows Asynchron lädst
Das ist teilweise abschreckend; hat meine erste Windows-Library zur Sau gemacht.

WAs heist das?
N Frame machen. Nach XY Sekunden in diesem Frame ne Seite laden.
Diese Seite öffnet im Haupt-Frame 1 Fenster.

Gibt teilweise lustische Effekte


@TuD: Die Library ist geil - aber kommerziell


Gruss

Original von schokofreak
Komtur: Kuck mal was passiert, wenn du die Windows Asynchron lädst
Das ist teilweise abschreckend; hat meine erste Windows-Library zur Sau gemacht.

WAs heist das?
N Frame machen. Nach XY Sekunden in diesem Frame ne Seite laden.
Diese Seite öffnet im Haupt-Frame 1 Fenster.

Gibt teilweise lustische Effekte

@TuD: Die Library ist geil - aber kommerziell

Gruss

Das könnte ich doch bestimmt auch normal machen, wenn ich nen Timeout setze, der nach 10 sekunden zum beispiel ein Fenster öffnet oder? Oder kommt da der Effekt nicht?

edit: also ich hab Fenster nach 10 Sekunden und noch eins nach 20 Sekunden erstellen lassen, aber irgendwie ist nichts passiert, was mich bedenklich machen sollte

Habe ich gerade entdeckt:

Eine Seite voller JS-Tools:
www.cross-browser.com/

Da gibt's auch ein Fenster-System (Das nutzt z.B. Dogs of the seas):

Demo 1

Demo 2

Komtur: Nei geht leider nicht.
Wenn du mehrere Frames hast, bedeutet dass in den meisten Browsern, dass diese auch in mehreren Threads arbeiten.
Somit kann es zu recht interessanten effekten kommen - kann. Mach doch mal n frame; entweder es funzt dann oder es funzt dann ned

Bei mir hats ned gefunzt, ev. hatte ich einfach pech - oder du hast einfach glück
Auf jeden Fall musst ich da ne Thread-Schwelle einbauen und sehr viel mit der Fenster-Library spielen bis sie auch dann passte... das CSS wurde nicht korrekt interpretiert. frag mich einfach ned wieso...

Gruss

css wird nach meinen erfahrung eh nicht richtig verarbeitet, solange es zwischen steht im header. Also natürlich in Verbindung mit javascript und generiertem Code.

Werd das dann mal mitn Frame ausprobieren. Mal schauen obs klappt

Kann gut sein, dass das das Problem war. Ehrlich gesagt weiss ich nämlich nimmer was ich ändern musst. Nur noch dass es mich 3, 4 Stunden fluchen gekostet hat

Gruss

Ich weiß dass mich jetzt alle kloppen werden, aber:
Warum nimmt man nicht die eingebauten GUI Elemente, anstatt zu versuchen sie mit JS,html und CSS nachzubilden?
Browserfenster haben z.B. schon fix und fertige Rahmen, Vergrößer/Verkleinerfunktionen und den ganzen Fokus-Kram.
Das einzige kleine Problem ist halt, das man die Farbe der Titelleiste und der Rahmen (noch) nicht ändern kann, wobei ich aber denke, dass man das verschmerzen kann.

Die Frage finde ich gut und da sollte man auch nicht lachen. Generell hast du vollkommen recht. Man kann die normalen Pop-Up Boxen nehmen und Fertig. Doch für Webdesigner und BG-Admins gibts halt eben mehr als den Internet Explorer in Frontpagedesign.

Designerische Aspekte:
Wenn du Beispielsweise Infos aufpoppen lassen willst, dann macht so wirkt so ein Pop-Up-Fenster oftmals "fremd". Da geht so ein neues Fenster auf (wo man nicht sicher sein kann wie es nun aussieht - mit Adressleiste, Menüs usw.) und was quasi als Spielfremdes Objekt wahrgenommen wird. Bei vielen alten BGs oder ehr "neuen" BGs findet man das Pop-Up Konzept und zumindest ich empfand es immer als störend - was natürlich Ansichtssache ist. Auch sind viele Browser so eingestellt das ne Box nicht als Box aufgeht sonderen als volle Seite (z.B. Crazybrowser - IE mit Tabbing, oder wenn die User es so eingestellt haben)

Performence-/Sicherheitsaspekte
Je nach Struktur und was man wirklich anzeigen will ist es oftmals auch ne Frage der Performence und der Sicherheit (Userkontrolle). Einfache Hilfe-Pop-Ups kann man zwar als platte HTML-Dateien reinladen aber wenn man nun z.B. Nachrichten- oder Baumenü anzeigen will so muss man entsprechend Kontrollen mit integrieren. Diese Probleme sind zwar auch mehr älterer Natur aber ich habe es mehr als einmal erlebt, dass ich auf einmal ne Loginseite (im Grossformat) per Pop-Up aufgetischt bekam. Gegenzug waren diese Pop-Up-Seiten auch oftmals ungeschützt und nen super Hacker-Ansatzpunkt.

JS-Fenster sind einfach Bestandteil des Design und es stört keine fremde Box die je nach User und Browser unterschiedlich aussieht. Stattdessen hat man ne Box die im eigenen Interface erscheint und wo der User "beeindruckt" ist, dass er seine Schiffe in kleinen Boxen hin und herschieben kann..


Kurzum.. Webdesigner wollen damit das Design kontrollieren und die User mit was besonderem beeindrucken..

Original von Mudder

Kurzum.. Webdesigner wollen damit das Design kontrollieren und die User mit was besonderem beeindrucken..

Genau um das gehts

Es geht aber auch da drum, dass man vielleicht mal Langeweile hatte und sich dann dachte, dass man dies mal versuchen könnte umzusetzen.

Ich weiß nun nicht, inwieweit man einfluss auf den Dom-Baum, des neuen Fensters hat. Aber ich hab mir halt gedacht, dass man es auch so hinbekommen könnte. Die Designfrage ist auch sehr wichtig, wie ich finde. Die heutigen Neuerscheinungen sind nicht mehr das Niveau, welches es vor paar Jahren hatte. Es ist nun halt mal so, dass das Auge meistens mitentscheidet, wie man ein Spiel bewertet. Zumindest habe ich so den Eindruck. Wenn das Design stimmt und einen beeindruckt ists nicht mehr so schlimm, was dahinter steckt. Wenn man Tabellen über Tabellen vor sich hat, dann findet man schneller irgendwas störendes.

Meine Meinung.

edit: Ach noch was. Ich wollte halt ein größeres Ajax-Projekt machen und da brauch ich ja nen bissl Übung, was man so in Javascript alles machen kann. So diese Kenntnisse mit "Form überprüfen" etc. sind ja nun nicht wikrlich dafür ausreichend. Da ich ein kleines Frontend in Javascript machen wollte, kamen halt auch Fenster dazu

Naja, man kann ja Menüleisten etc abschalten...
Aber es stimmt, Sachen wie Farben und Layout der Titelleiste kann man (noch) nicht ändern :-(

Vielleicht kommt ja mal in Javascript eine offizielle Methode für interne Fenster :-) Andere Steuerelemente wie Textbox, Listbox und Buttons gibt's ja auch schon, die man auch recht flexibel gestalten kann.