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

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.
Ausserdem schönes Layout. Wie hast du die Tabsheets gemacht?
"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:

[Phoenix]

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.

[MasterEvil]

danke für eure netten Kommentare

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 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 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.

[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]

is klar.

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

[jfheins]

Zitat von MasterEvil:

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 ...