Solkar: Radneuerfindung? CSS Manip zur Entwicklungszeit - Lib gesucht

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

  1. Programmieren mit Javascript macht Spass!

    Der Witz des Tages für Gourmets unter den Massochisten.

    mfg Beat

    --
                     /|
      <°)))o><      / |    /|
                ---- _|___/ |     ><o(((°>
               OvVVvO    __ |         ><o(((°>
    <°)))o><  /v    v\/  |
     <°)))o>< ^    ^/_/_         ><o(((°>
               ^^^^/___/
    ><o(((°>    ----       ><o(((°>
       <°)))o><                      ><o(((°>o
    1. Programmieren mit Javascript macht Spass!

      »»

      Der Witz des Tages für Gourmets unter den Massochisten.

      Javascript ist Plain Vanilla.

      Der wahre Fetischfreund implementiert RegEx in Assembler oder trägt beim Programmieren freiwillig Handschellen.

      Grüsse

      Solkar

      --
      ~~~c /*
          In the beginning, the Giver Of Data created the Kernel and the C, and the C was without main() and (void*).
          Thus spake the Giver Of Data:
          "Thou shalt indent with four spaces! No more, no less. Four shall be the number of spaces thou shalt indent, and the number of thy indenting shall be four. Eight shalt thou not indent, nor either indent thou two, excepting that thou then proceed to four.
          Tabs are right out."
      */ ~~~
      ie:} fl:{ br:> va:{ ls:} fo:# rl:( n4:? ss:} de:> js:) ch:? sh:( mo:? zu:(
  2. Hallo,

    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

    Da kenne ich keines und würde mich auch wundern, wenn du so etwas finden würdest. Deine Anforderungen scheinen so spezifisch zu sein, dass das vielleicht mal jemand umgesetzt hat, aber nicht als wiederverwendbare Script veröffentlicht hat.

    Allerdings würde ich den Aufwand, das rudimentär selbst zu programmieren, auch nicht sonderlich hoch einschätzen. Es kommt natürlich darauf an, wie umfangreich, präzise und »intelligent« das Ganze sein soll. Wenn du die gesamte CSS-Logik reinbauen willst (z.B. dass eine Eigenschaft nur auf bestimmte Elemente anwendbar ist, dass der Wert gewissen Regeln folgen muss), sodass die Formatierung schnell und intuitiv erfolgen kann, dann wird es freilich komplizierter. Wenn es aber nur ein hilfreiches Entwicklungstool zur Generierung von CSS-Regeln sein soll, dann würde eine einfache Implementierung, mit denen sich die wichtigsten Formatierungen komfortabel umsetzen lassen, in ein paar Manntagen wohl ausreichen.

    Mathias

    1. [...]

      Wenn es aber nur ein hilfreiches Entwicklungstool zur Generierung von CSS-Regeln sein soll, dann würde eine einfache Implementierung, mit denen sich die wichtigsten Formatierungen komfortabel umsetzen lassen, in ein paar Manntagen wohl ausreichen.

      Danke für die Einschätzung; das deckt sich in etwa mit meinem Voranschlag; ich hatte dafür inklusive eines kleinen Back-Ends grob 5 Manntage abgeschätzt.

      Grüsse

      Solkar

  3. Hi,

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

    cssRule() wird u.a. für letzteres eingesetzt. Könnte also auch dir weiterhelfen.

    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;

    Ja, da gibt es nicht so viel ...

    Gruß, Cybaer

    --
    Man muß viel gelernt haben, um über das, was man nicht weiß, fragen zu können.
    (Jean-Jacques Rousseau, Philosoph u. Schriftsteller)
    1. (seufz)

      cssRule() ist der richtige Link!

      Gruß, Cybaer

      --
      Man muß viel gelernt haben, um über das, was man nicht weiß, fragen zu können.
      (Jean-Jacques Rousseau, Philosoph u. Schriftsteller)
      1. Hallo,

        (seufz)

        Selbst schuld, kein Mitleid.

        (Falls es an deinen Frames lag. ;))

        Mathias

        1. Hi,

          Selbst schuld, kein Mitleid.

          Aber sicher. :)

          (Falls es an deinen Frames lag. ;))

          Pah - Du mich auch! ;)

          Zusätzlich zur neuen "Einfüg-Button-Leiste" habe ich eine Extra-Leiste. Nur sollte ich nach dem Klicken auf den dortigen "Coding"-Buttons, nicht noch das Eintragen des URLs vergessen ... =%-)

          Gruß, Cybaer

          --
          Man muß viel gelernt haben, um über das, was man nicht weiß, fragen zu können.
          (Jean-Jacques Rousseau, Philosoph u. Schriftsteller)
      2. (seufz)

        cssRule() ist der richtige Link!

        Danke für den Link, aber z.Zt. brauch ich eher ein Frontend für rein deklaratorische Konfiguration; dieses aber halt komplett für alle möglichen Attribute.

        Trotzdem Danke!

        Grüsse

        Solkar