EW-CSSDesigner

[MasterEvil]

Hi leutz,

will hier mein momentanes Main-Project vorstellen.
Es handelt sich um einen CSS Designer (Cascading Style Sheets).

Er verfügt über die normale Code Ansicht und über eine spezielle Baumansicht.
In der Baumansicht werden alle Klassen mit ihren Properties angezeigt.
Wenn man in eine Klasse klickt werden alle Properties in einen PropertiesEditor (wie der ObjectInspector in Delphi) geladen und können dort editiert, bzw neue hinzugefügt werden.
So bekommt man eine wunderbare Übersicht und es lassen sich leicht alle Sachen ändern und neu hinzufügen.

Der Designer verfügt noch über eine Menge mehr Funktionen, steht aber noch am Anfang.

Eine detailliertere Beschreibung findet ihr hier.
Mehr Projekte von mir: www.ew-projects.de

Download und Screenshot sind im Anhang.

Ich hoffe ich bekomme viele Kommentare von euch :)
Ideen, Kritiken und Verbesserungsvorschläge sind mir immer sehr willkommen.

Update (25.02.2005):
Neue Version hochgeladen (0.6) und neuer Screenshot
- Validator
- viele, viele kleinere Änderungen

Update (04.03.2005):
Neue Version hochgeladen
- Interne Preview
- Validator checkt jetzt auch Values
- Validatorfiles stark verbessert
- viele, viele kleinere Änderungen

Update (24.04.2005):
Nach langer Pause und Entwicklungszeit eine neue Version (0.7)
- komplette überarbeitung des parsens
- preview jetzt auch mit Mozilla/Gecko Engine
- Validatorfiles überarbeitet
- Bei einem doppelklich auf einen fehler springt er zu der betreffenden zeile
- viele änderungen mit dem PropertiesEditor
- design änderungen

Mehr zu den Updates in den Posts weiter unten.

greetz
Steffen

[arbu man]

Sieht gut aus :thumb:

Lässt sich nur nicht richtig Maximieren oben is noch en bissel rand

[tonZen]

Schönes Teil. Gefällt mir sehr gut und kann ich als PHP-Progger wunderbar einsetzen.
Sehr übersichtlich durch die Baumstruktur und was ich nicht brauche kann ich wegklappen. Fein.

Bißchen vermisst habe ich eine visuelle Vorschau des Stils. Könnte vielleicht noch rein ... so als drittes Register vielleicht oder so.
Paar Tastendrücke könntest du vielleicht auch noch abfangen, z.B. wenn eine Klasse markiert ist und ich ENTF drücke, dann will ich sie weg haben.

Könnt mich aber echt dran gewöhnen. :zwinker:
Ausserdem schönes Layout. Wie hast du die Tabsheets gemacht? :gruebel:
"Objektinspektor" ist auch cool

Hast du dir alle Properties die möglich sind irgendwie rausgesucht oder hast du dafür eine Quelle gefunden? Denke schon seit längerem darüber nach in der nächsten Version von meinem CMS eine CSS-Editor mit PHP und JavaScript einzubauen ... da brauche ich die denn auch.

Also: :hello:

[Phoenix]

Zitat:

Zitat von tonZen

Bißchen vermisst habe ich eine visuelle Vorschau des Stils. Könnte vielleicht noch rein ... so als drittes Register vielleicht oder so.

Stimmt. Das wär cool. Allerdings brauchste dann denn passenden html-Code dazu.

[tonZen]

@Phoenix: Naja, nicht unbedingt. Kannst ja auch einen Standard ausgeben und nur die Handvoll Besonderheiten rausfischen, wie z.B. Formularelemente die gesondert dargestellt werden ... zumal ja auch schon nach Keyclasses etc. unterschieden wird.

Das dürfte sich doch eigentlich leicht generieren und ausgeben lassen. Soll ja nur eine Vorschau sein ... am geilsten wäre natürlich, wenn man direkt eine HTML-Quelle angeben könntest, auf die der Stil dann in der Vorschau angewendet wird ... meintest du das?
Das wäre ja wirklich fetzig. :lol:

[MasterEvil]

danke für eure netten Kommentare :)

Zitat:

Zitat von arbu man

Lässt sich nur nicht richtig Maximieren oben is noch en bissel rand

Wie? könntest du davon einen Screen machen?
Das hab ich bislang noch nich gehört, bzw gesehen.
Das Prog maximiert sich am anfang auch noch von allein.

Zitat:

Zitat von tonZen

Bißchen vermisst habe ich eine visuelle Vorschau des Stils. Könnte vielleicht noch rein ... so als drittes Register vielleicht oder so.
Paar Tastendrücke könntest du vielleicht auch noch abfangen, z.B. wenn eine Klasse markiert ist und ich ENTF drücke, dann will ich sie weg haben.

Bin noch am Anfang mit dem prog. Vorschau funktion soll auch noch rein. Dafür auch in den Options schon der Tab "Browser". Wie ich das allerdings anstelle weiss ich noch nicht so genau. Tastenkürzel kommen natürlich auch noch alle rein.

Tabsheet und ObjectInspector muss ich gestehen hab ich nicht selber gemacht ;)
Von mir sind nur ein paar Flat Komponenten.
Die beiden oberen sind von Berg Software. Sind aber nicht kostenlos.
Die Firma macht aber 1A Komponenten.

Zitat:

Zitat von tonZen

am geilsten wäre natürlich, wenn man direkt eine HTML-Quelle angeben könntest, auf die der Stil dann in der Vorschau angewendet wird

Das is ne gute Idee. Werd ich auch jedenfall einbaun. Aber die Klassen müssen schon irgendwie eingebaut sein in dem HTML File. Kann die ja nicht wahrlos setzen.

[tonZen]

Zitat:

Das is ne gute Idee. Werd ich auch jedenfall einbaun. Aber die Klassen müssen schon irgendwie eingebaut sein in dem HTML File. Kann die ja nicht wahrlos setzen.

Stimmt wohl, wär schon ein doller Zufall, wenn alles in einer Datei vorkommen würde und im Zeitalter der dynamischen Seiten wird die Sache damit ohnehin schwieriger. Also bietet sich wohl doch eher eine "Standard"-Vorschau an. :roll:

[MasterEvil]

man kann ja verschiedene möglichkeiten einbauen ;)
werd mir da nochma genauer gedanken machen.

was auch auf jedenfall noch rein soll ist ein Syntax Checker (zeigt fehler an, weist auf browser eigenheiten bzw fehler hin, etc) und einen Wizard zum schnellen erstellen eines standard css files.
später soll das prog dann auch inline css können (sprich css in html dateien).

ach und zu deiner frage woher ich die infos hab:
ganz einfach - von w3c.org den "Erfindern" von CSS.
Dort findet man alle Infos für die Standard Sachen.
Problematisch sind Browser spezifische Sachen, die aber auch noch rein sollen.

btw:
mehr projekte von mir findet ihr unter www.evils-world.de
;)


greetz
Steffen

[tonZen]

:wall: is klar.

hätte ich auch gleich dran denken können. :oops:

[jfheins]

Zitat:

Zitat von MasterEvil

Zitat:

Zitat von arbu man

Lässt sich nur nicht richtig Maximieren oben is noch en bissel rand

Wie? könntest du davon einen Screen machen?
Das hab ich bislang noch nich gehört, bzw gesehen.

Et voilá, der Screen. Das Programm ist irgendwie 'runtergerutscht ... (oben nicht am Rand und unten zuweit ...)

Ist aber alles auch markiert ... :mrgreen:

[MasterEvil]

mhhh, das is komisch
is in Delphi nur einfach WindowState auf Maximized.
Sprich: ich mach da eigentlich gar nichts.
Liegt das vielleicht am XP Theme?
Hat noch jemand XP Theme an und das selbe Prob?
hab hier zu hause nur Win2k, deswegen kann ichs net testen.

Bleibt der Fehler auch wenn du es einmal auf normal setzt und dann wieder maximierst?

Danke jedenfalls erstmal für den Screen. Werde das mal verfolgen. :)

greetz
Steffen

[jfheins]

Zitat:

Zitat von MasterEvil

Bleibt der Fehler auch wenn du es einmal auf normal setzt und dann wieder maximierst?

Du meinst, wen ich es wiederherstelle und dann wieder maximiere? Ja.

[MasterEvil]

mhhh komisch. Wüsste nicht was ich falsch gemacht hab.
Mal gucken.

[tonZen]

Zitat:

Zitat von MasterEvil

Liegt das vielleicht am XP Theme?
Hat noch jemand XP Theme an und das selbe Prob?

Habe XP-Theme OpusOSX und bei mir ist der Desktop im Spalt auch zu sehen. :|
Hab noch nicht getestet, wie es sich verhält, wenn man das auf Standard umstellt.

[MasterEvil]

also hab das jetzt hier in der arbeit an einem WinXP Rechner mit angeschaltetem XP Theme getestet und es hat wunderbar funktioniert.
Vielleicht ist der Fehler bei mir schon draussen (meine Version is ja scho etwas neuer).

Wenn ich die neue version hier poste könnt ihr das ja nochmal testen wenns geht.

Bastel grad am CSS Validator. Ders schon soweit fertig, muss ihn nurnoch mit Informationen füttern und Einstellungen bauen (kompatibilität anzeigen für IE,Netscape,Opera).
Falls dazu jemand Informationen hat, wäre ich ihm sehr verbunden wenn er sie mir zur verfügung stellt ;)

greetz
Steffen

[MasterEvil]

So, hab die neue Version hochgeladen (1. Post in diesem Thread).

Der CSS Validator ist jetzt enthalten:
Er checkt den CSS Quellcode nach Fehler und weist auf Wunsch auf Kompatibilitätsproblemen bei Browsern hin.
Kompatibilitätscheck liegen für folgende Browser bis jetzt vor:
IE 5.0, 5.5, 6.0, Mac
Opera 5.0, 6.0, 7.0, 7.5
Netscape 4.0, 6.0, 7.0
Mozilla 1.0
Firefox 0.8
Safari 1.0
Konqueror 3.1

Er checkt bislang auf alle W3C Properties und auf mehrere erweiterte Properties.
Values werden NOCH nicht gecheckt.

Mehrere andere kleinere Änderungen gab es ebenfalls.

Wäre schön wenn ihr es mal testen könntet und eventuell Nachbesserungen wisst.

greetz
Steffen

[MasterEvil]

keiner ne meinung zum validator? :(

in der nächsten version ist er auch nochmal etwas überarbeitet und checkt dann auch die values.

Im Moment arbeite ich gerade an der Internen Preview Version, erstmal nur mit der IE Engine, später kommt aber dann auch die Mozilla Engine (Gecko) hinzu.
Die Interne Vorschau wird so sein:
extra tab für preview.
in diesem tab gibt es einen treeview in dem alle klassen aufgezeigt sind, klickt man auf eine Klasse zeigt er eine beispielseite (entsprechend der klasse, z.B. für die klasse h1 eine seite mit einem h1 text drauf) mit den properties der klasse an.
ist es keine gebundene klasse (z.B. .news), dann fragt er auf welche klasse er die properties anwenden soll und zeigt diese dann an.
es wird auch möglich sein eigene beispiel html seiten dafür einzubinden und eine "allround"-seite (möglichst alle grundklassen auf einer html seite) wird es ebenfalls geben.

wie findet ihr die idee?
irgendwelche vorschläge?

wäre über ein paar meinungen sehr dankbar.

greetz
Steffen

[tonZen]

Zitat:

Zitat von MasterEvil

keiner ne meinung zum validator? :(

doch, mir gefällt er gut! :thumb:
Hab auch (fast) nix dran auszusetzen. Falls möglich könnte er bei Doppelklick auf die Meldung an die Position im Dokument springen. Und "filter" kennt er zwar nicht, aber das ist ja eh M$-spezifisch. :wink:

Das Problem mit den Kommentaren kennst du ja schon. :| --> Anhang

Zitat:

Zitat von MasterEvil

extra tab für preview.
in diesem tab gibt es einen treeview in dem alle klassen aufgezeigt sind, klickt man auf eine Klasse zeigt er eine beispielseite (entsprechend der klasse, z.B. für die klasse h1 eine seite mit einem h1 text drauf) mit den properties der klasse an.

Die Idee ist super, solange es nicht jedesmal "im neuen Fenster" aufgeht, was man dann immer wieder zumachen muss ... sollte also wenn möglich alles auf dem tab bleiben, nach meiner Meinung.

Also, weiter so. Freu mich auf die Preview. :lol:

[MasterEvil]

das mit dem doppelklick im validator hätt ich auch gern so, nur leider keine ahnung wie ich es umsetzen soll.

und die previes gehen natürlich nicht in einem neuen fenster auf ;)
bleibt alles im tab

bei den kommentaren hab ich leider auch noch keine lösung, aber ich arbeite dran

greetz
Steffen

[MasterEvil]

so, und da is das nächste update:

- Interne Preview funktion:
In einer weiteren Ebene kann man nun seine Klassen antesten.
Momentan erstmal nur mit der InternetExplorer Engine, Mozilla Engine folgt aber noch.
In der Preview Ansicht werden alle Klassen angezeigt. Wenn man auf die Klassen klickt wird rechts daneben eine Beispielseite passend zur Klasse geladen (z.B. für eine h3 klasse eine seite mit text in h3).
Ist keine Klasse angegeben (z.B. .news) wird abgefragt auf welche Klasse er es anwenden soll.
Es können auch klassen kombiniert werden - dafür markiert man mit Strg einfach mehrere Klassen (z.B. table, tr und td) und wählt per rechtsklick "preview with" aus und sagt ihm auf welche html seite er es anwenden soll.

- validator checkt jetzt auch values
- validator files stark überarbeitet
- viele neue properties im propertieseditor
- viele, viele kleinere Änderungen

Ich hoffe euch gefällts ;)

Download ist im ersten Post.

Bin wie immer gespannt auf eure Anregungen, Kritiken und Ideen.

greetz
Steffen

[Meflin]

Hi,

der validator meckert, wenn man negative pixelwerte angibt, z.b. bei margin-top oder margin-left.
die werden aber von jedem browser korrekt interpretiert und ich denke auch dass sie nicht als invalid gelten. da bin ich mir aber nicht ganz sicher, der w3c validator jedenfalls meckert da nicht.

ausserdem kann man in deinen eingabefeldern im property editor auch keine minuswerte eingeben.

also das würde ich an deiner stelle noch ändern ;)

[MasterEvil]

ohh ja, danke
dadran hab ich noch gar net gedacht ;)
wird eingebaut.

greetz
Steffen

[mh166]

Mir is noch was aufgefallen: er kennt min-height und co nich. Und er kennt die Maßeinheit em nicht! Am besten du schaust dich auf www.css4you.de nochn bissel nach neuen attribs und den entsprechenden Eigenschaften um!

Wegen dem Doppelklick und dann Sprung zur Zeile: Wenn du das CSS validierst kannste doch zu jeder Fehlermeldung die Zeilenzahl im Code hinzufügen, also z.B. ins Tag der Liste. Sollte doch kein Problem sein, oder? Und wenn man dann Doppelklick macht, dann liest du die Zeilennummer aus und springst da hin.

Und noch was: wenn man verschachtelte Klassen nutzt (also z.B. ".content .heading h1") wäre es schön, wenn diese auch dementsprechend verschachtelt angezeigt werden würden.

mfg, mh166

[MasterEvil]

Ein paar Sachen fehlen noch. Das ist wahr. Arbeite ja dran ;)

Wegen Zeilenspringen:
Das ginge ja wunderschön, wäre mir auch klar.
Nur ist da wieder das problem mit den Kommentaren.
Ich mach es momentan so, dass ich, bevor ich für validieren parse, erstmal alle Kommentare rausnehmen.
Und schwubs: da stimmen die zeilen nicht mehr.
Sprich: um das mit den Zeilen einzubaun muss ich erstmal mein Kommentar Problem lösen.

Verschachtelte Klasse:
Was genau meinst du damit?

greetz
Steffen

[mh166]

Zitat:

Zitat von MasterEvil

Ich mach es momentan so, dass ich, bevor ich für validieren parse, erstmal alle Kommentare rausnehmen.
Und schwubs: da stimmen die zeilen nicht mehr.

Ich versteh das irgendwie nich: wo is das Problem bei der Sache ein bestimmtes Pattern für die Kommentare einfach vom "richtigen" Parsen bzw. validieren auszunehmen. Es gibt ja nich so viele Möglichkeiten Kommentare zu verwenden...

Zitat:

Verschachtelte Klasse:
Was genau meinst du damit?

Naja, angenommen ich hab folgende Style Definitionen:

Code:

.content {
  ..Attributes..
}
.content .heading {
  ..Attributes..
}
.content .heading h1 {
  ..Attributes..
}

Dann isses ja im Prinzip so, dass diese Klassen verschachtelt sind. Also wäre es doch schön, wenn du es so machen könntest, dass nun .heading als Unterelement von .content und h1 als Child von .heading in deinem TreeView angezeigt werden würde. Das würde die Semantik noch mehr verdeutlichen. Außerdem kann man dann noch eifacher nicht benötigte Blöcke ausblenden. In diesem Falle wären bspw. mit dem Ausblenden von .content auch die beiden anderen Definitionen verschwunden.

Hoffe du verstehst, was ich meine.

mfg, mh166

[mh166]

Ich hab noch ne Seite gefunden, die für dich sicher sehr hilfreich sein könnte, um die CSS-Tag-Liste zu vervollständigen. Insbesondere ist hier auch die Kompatibilität der verschiedenen Browser mit aufgeführt: http://www.biene-award.de/award/index.html

mfg, mh166

[MasterEvil]

das prob mit den kommentaren liegt in meiner momentanen art es zu parsen, ich muss alles neuschreiben.
das prob ist, da hängt sehr viel mittlerweile schon drin.
also muss man sich erstmal aufraffen ;)

kommt aber noch.

das mit den verschachtelten klassen überleg ich mir noch.
da müsste ich nämlich ebenfalls eine menge konzepte umwerfen
und ich weiss nicht obs das wert ist.

ich selber seh die form grade das erste mal ausserhalb der theorie.
weiss net ob das wirklich so oft benutzt wird.
ist für mich erstmal ne sache zum hinten dran hängen.

die seite ist für mich komplett unbrauchbar, da ich absolut keinen bezug zu irgendwas mit css finde.
wenn ich nur zu blind bin, dann weise mich bitte jemand darauf hin ;)

greetz
Steffen

[jfheins]

Was mich noch ein bisschen stört, ist, dass die Scrollbar so unproportional ist ...

[MasterEvil]

meinst du von den properties? also das der balken so klein bleibt?

wegen der langen pause:
war im urlaub und danach musste ich erstmal was anderes fertig machen
jetzt fang ich aber wieder an am CSSD zu basteln ;)

greetz
Steffen

[DGL-luke]

du könntest neben diener eigenen prüffunktion auch nen link zum w3c css-validator setzen, so dass die datei dann da automatisch durchgejagt wird.

[MasterEvil]

jo, is ne gute idee.

werd ich auf jedenfall einbaun, wenns geht.

greetz
Steffen

[MasterEvil]

hi leutz,

so, hatte urlaub, dann wenig zeit und nun hab ich nach eine längeren entwicklungszeit ein neues update draussen.
Immernoch Beta Version, aber schon wesentlich dichter dran am releasen.

Version 0.7:

• komplette überarbeitung des css parsens, dadraus folgt:
  • kommentare funktionieren jetzt einwandfrei und überall
  • schneller beim einlesen
  • fehlerunanfälliger (hoffnungsvoll)
• preview funktion:
  • preview jetzt auch mit Mozilla/Gecko Engine möglich
  • preview files werden jetzt dynamisch eingelesen, so dass ihr selber preview dateien machen könnt, legt dafür einfach die .html datei in den data/preview ordner ab und wählt mit "Preview with ..." mit einem rechtklick auf die klasse aus
• validator:
  • validator files wurden überarbeitet
  • mit einem doppelklick auf einen fehler springt er jetzt zur zeile bzw baumknoten in dem er auftritt (nur solange nichts am code geändert wurde)
• properties editor:
  • negative zahlen können nun eingegeben werden
  • der standard wert wird jetzt fett angezeigt
  • änderungen werden nun sofort übernommen ohne den zwischenweg mit dem save button, es sei denn man möchte es (einstellbar)
• die object ansicht zeigt auf wunsch typ icons vor den properties an (in den optionen einstellbar)
• neues programm icon (nicht mehr standard)
• kleinere design änderungen

Für die Preview Funktion mit Mozilla/Gecko Engine muss die Engine auf dem Rechner installiert sein, download gibt es hier:
Mozilla/Gecko Engine

Ist sicher immernoch nicht alles, aber ich arbeite ja dran ;)
Würd mich freuen wenn ihr es wieder auffühlich testet und kein blatt vor den mund nehmt und mir alles sagt was euch auffällt.

Download und neuen Screenshot gibt es wie immer im ersten Post.

greetz
Steffen

[mh166]

So, mal kurz drüber getestet. Was mit auffällt: der kennt immer noch nicht die Maßeinheit em. Und ansonsten wie gesagt: Verschachtelte Klassen wären cool, wenn du sie so anzeigen würdest...

mfg, mh166

[MasterEvil]

em hab ich vergessen muss ich gestehen, habs aber in meine to-do liste ganz nach oben gemacht jetzt.
und zu dem verschachtelte hab ich weiter oben schon etwas geschrieben.
seh den nutzen zum aufwand noch nicht, da es meine komplette struktur über den haufen wirft.
nichts würde dann mehr gehn was mit der objekt ansicht zu tun hat.

Aber em kriegste ;)

greetz
Steffen

[proitsystems]

Echt nette Geschichte! :-)

Schon mal daran gedacht das Programm als "Open Source" Version herauszugeben? Dann könnten mehrere daran mitarbeiten. Könnte vielleicht eine ganz interessante Sache sein. Auch für deine anderen Projekte.


LG,

Marc

[PierreB]

Gefällt mir wirklich gut dein Programm, echt klasse. :thumb:

[MasterEvil]

Hallo :)

Nach so langer Zeit mal wieder ein Post hier ;)
Die Version, die hier angehängt ist, ist ja leider eine stark verbuggte.
Bei der kann man den Aufbau des PropertiesEditors noch miterleben :D
Naja, in der Version ist jedenfalls ein ziemlich dicker Bug drin.

Allerdings habe ich wegen dem EW-ProjectManager die Arbeit am CSSDesigner momentan eingefroren. Der hängt jetzt zwischen 2 Versionen, deswegen hab ich hier auch noch keine aktuellere Version gepostet, da diese Zwischenversion noch einige Baustellen hat.
Falls sie trotzdem jemand haben möchte, soll er es sagen ;)

@ proitsystems:
Danke :)
Gibt ein paar Gründe weshalb ich es nicht OpenSource mache.
Vorallem tu ich es nicht, da ich eine kommerzielle Komponente benutze, die ihr kaufen müsstet, damit es läuft.
Zum anderen behalte ich meinen Quellcode allerdings auch lieber für mich ;)

@ PierreB
Ebenfalls Danke ;)
Hoffe ich komme bald mal wieder dazu, dadran weiter zu arbeiten. Der ProjectManager schluckt allerdings momentan meine meiste Zeit.

greetz
Steffen

[capo]

hallo...verdammt gut, welche komponenten hast du verwendet?
gruss vom capo

[capo]

Hallo...
ich würde nur gerne wissen wie du den Properties-Editor gebaut hast, selber oder mit einer Komponente?
Gruss vom Capo

[DGL-luke]

Sieht mir ziemlich nach Virtualstringtrre aus, der baum rechts auf jeden fall.
links könnte auch eins sein.