Solkar: Radneuerfindung? CSS Manip zur Entwicklungszeit - Lib gesucht

Beitrag lesen

Hallo!

Programmieren mit Javascript macht Spass!

Es macht mir nur im Moment etwas zu viel Spaß und ich fürchte, dass ich gerade das Rad neu erfinde:

---

Tätigkeitsbezeichnungen wie "Web-Designer" oder "Web-Entwickler" treffen auf mich wenig zu; mein Tätigkeitsschwerpunkt liegt im Bereich Middleware und Datenbanken; Berührungspunkte mit (X)HTML und Javascript war bislang die Abstimmung mit denjenigen Kollegen, die die (InTRAnet-)Oberflächen dann auch bauten und die Erstellung von XSLT - Modulen, die für PHP oder für Perl CGI:: genutzt wurden.

Das erzähl ich damit Ihr einschätzen könnt welchen Blickwinkel ich auf Applikationen habe und welchen Denkfehlern ich deshalb vielleicht in Bezug auf Javascript erliege; "Muttersprachen" sind C++, Python und Perl.

---

Ein recht großes Anwendungssystem, das wir gerade bauen, interessiert mich auch wegen des fachlichen Inhaltes und ich möchte selbst die Intranet-Oberfläche prototypisieren.

Die Anwendung nutzt Perls CGI::Application mit HTML::Template, reichlich XML und XSLT und weißt eine sehr große, aber recht flache Datenstruktur auf.

Der (Web-)Anteil ist sehr graphikintensiv; und da fängt die Herausforderung für das Oberflächendesign und Javascript an:

Wenn kreativer Content adäquat präsentiert werden soll, ist das CSS-"Feintuning" von entscheidender Bedeutung; es macht z.B. einen erheblichen Unterschied ob man 133% oder 150% font-size verwendet, ob eine rahmen 6px oder 4px hat; ganz zu schweigen von serifen oder sans-serifen fonts etc, etc, etc...

---

Deshalb hab ich probeweise mit Javascript ein kleines Online-Layouttool für divs geschrieben; z.Zt. unterstützt es - nur - Schriftarten und Größen aber das hilft schon mal erheblich.

Das Layout-Widget hab ich in einem eigenen div untergebracht und kann dies div durch einen Klick in ein anderes div ein- und ausblenden; desgleichen kann ich ein kleines (XML-) Log für die Manipulation ein- und ausblenden.

Dies Ein- und Ausblenden ist sehr wichtig, da ich die Seite beim Entwurf immer wieder überblicken können muss; irgendwelche Entwicklungsumgebungen mit 1001 Sysmbolleisten würden mir zu stark den Blick auf das Gesamt-Design verstellen.

---

Das Tool unterstützt bislang nur die Manipulation von per id selektierten divs, somit auch nur CSS-Manipulation per Element und nicht per Klasse.

Das reicht aber auch für meine Zwecke; es liegt mir fern, CSS Selektor-Logik nachbilden zu wollen.

Der Workflow soll so aussehen, dass die Anpassungen per element logged werden und ich dies Log per c&p oder per POST weiterverarbeite.

---

Das stellt auch alles kein prinzipielles Problem dar, nur haben divs halt mehr Eigenschaften als nur font-family und font-size, von anderen HTML-Elementen ganz zu schweigen.

Deshalb suche ich nach einer Bibliothek (KEINEM Framework), die pro HMTL-Typ (DOM-"Tag") mir einen Container mit Widgets für ALLE CSS-Eigenschaften befüllt; eine Integration in meinen Lösungsansatz könnte ich dann schon selbst bewerkstelligen.

Ich brauche jetzt keine Anleitung, WIE ich so etwas selbst programmieren könnte, das weiß ich, nur scheue ich den Aufwand dafür und möchte diese Funktionalität - die Abbildung von CSS-Eigenschaften pro konkretem Element auf Widgets - gerne einer fertigen Bibliothek entnehmen.

Es reicht wenn die Manipulation deklaratorisch erfolgt; die vorhandene CSS-Selektor-Logik muss nicht berücksichtigt werden!

Ferner habe ich die Möglichkeit die "id" und "name" attribute (ggf. "title" und "class" auch, aber ungern) beliebig für das Dokument in Hinblick für eine solche Bibliothek aufzubereiten; die Anwendung erhält den Content aus transformierten (LibXSLT) XML-Views (aus PostgreSQL 8.3.3., Oracle 10R2), so dass ich auf dem Weg der Daten ins DOM-Dokument genügend Möglichkeiten zur Anpassung hätte.

Das Ganze soll nur zur Entwicklungszeit benutzt werden; ein "Online-CSS Layout-Feature" für die Anwender ist nicht vorgesehen.

---

Die Frameworks dieses Beitrages dieses Beitrags und die Tools aus dieser Javascript Source Sammlung habe ich gesichtet, nur fällt mir dabei auf, dass der Schwerpunkt oft auf dem Framework-Ansatz liegt:

(jQuery) "jQuery is designed to change the way that you write JavaScript."

oder Shortcuts für vorhandene Javascript-DOM-Funktionen anbietet:

(prototype) "$('comments').addClassName('active').show()"

oder für mich gar keinen Nutzwert hat:

(dLite) "elm - find element with a certain id" (Bitte? document.getElementById()...)

--

Da der Englische und Deutsche Begriff für "Manipulation", z.B. "CSS Manipulation, gleichlauten, ist die Ergebnismenge bei Suchen schwer einzugrenzen; die meisten Links führen zu allgemeinen Javascript/DOM/CSS Tutorials; deshalb möchte ich hier Dein/Euer Know-How nutzen.

--

Also:

Welche Bibliotheken zur Generierung von Widgets(select, input, checkbox, choice) zur individuellen Manipulation von CSS-Eigenschaften eines ("irgendwie", z.B. via "id" oder "name" gefundenen) Element eines bestimmten HTML-Element-Typs ('div','table','a'...) kennst Du/kennt Ihr und würdest/würdet im Rahmen der skizzierten Anwendung empfehlen können?

Nichts großes und übermächtiges, keine IDE, keine allgemeinen Frameworks oder dergleichen.

Grüsse

Solkar