Laden...

Dynamic CSS Gen

Erstellt von sakanoue vor 13 Jahren Letzter Beitrag vor 13 Jahren 1.830 Views
S
sakanoue Themenstarter:in
46 Beiträge seit 2009
vor 13 Jahren
Dynamic CSS Gen

Hi,

ich möchte zu Testzwecken eine Klasse erstellen die mir dynamisch einen oder später mehrere CSS Selektoren mit Attributen und Werten in einer CSS Datei erstellt.

x Selektoren { y Attribute: Werte };

Es können mehrere Selektoren benutzt werden, mehrere Attribute die auch mehrere Werte haben können.

Wie gehe ich da am Anfang erstmal vor. Einer eine Idee?

EDIT:
Ich habe eine Liste von Selektoren mit Attributen wo die Werte der Attribute später dynamisch eingetragen werden.

Dabei ist zu beachten das mehrere Selektoren nacheinander folgen können (z.B. body, h1) darauf dann das {, dann mehrere Attribute, die mehrere Werte haben können und am Ende wieder das End-Tag }

beispiel: css.Add("body, h1", "color", textbox1.Text); // textbox1.Text = "Dynamischer" Wert

Gruß

2.298 Beiträge seit 2010
vor 13 Jahren

In wie weit soll denn die Dynamik gehen?

Ob das wirklich dynamisch gelöst werden sollte / kann stell ich in Frage, jedoch weiss ich ja auch noch nicht was genau du vorhast.

Fakt ist ja, du musst ja von vornherein wissen, welche Selektoren du brauchst, und die Werte sollen sicher auch nicht per Random ermittelt werden.

Ansonsten gib mal bitte eine genauere Beschreibung, vorallem welchen Zweck du damit verfolgst.

Wissen ist nicht alles. Man muss es auch anwenden können.

PS Fritz!Box API - TR-064 Schnittstelle | PS EventLogManager |

E
395 Beiträge seit 2007
vor 13 Jahren

ich kann mir vorstellen das es eine art css editor mit vorschaufunktion werden soll

im grunde must du nur eine liste mit den zusammengehörigen html tags haben und dazu eine liste mit den dazugehörigen wertepaaren.

ich verstehe nicht so recht wo dein problem ist.

krall dir ein stift (vorzugsweise scharz oder blau) und ein blat papier (weiß oder kariert) und mach dir mal paar gedanken zu deine problem. teile es in teilprobleme auf und löse diese. danach quellcode einhacken 😉

MfG Paul

S
sakanoue Themenstarter:in
46 Beiträge seit 2009
vor 13 Jahren

Ja genau es wird eine Art CSS Editor wo der Benutzer x Farben angeben kann wofür bestimmte CSS Selektoren und Attribute geändert werden.

Ich bin natürlich selber fleißig dabei 😃 Nur jeder Tipp ist natürlich super 😃

1.433 Beiträge seit 2006
vor 13 Jahren

Möchtest Du was wie hier beschrieben erstellen?

Grüsse
Daniel
Space Profile
Wer nicht fragt, der nicht gewinnt

1.002 Beiträge seit 2007
vor 13 Jahren

Hallo sakanoue,

ich würde das gar nicht so kompliziert machen: Ersetze einfach im CSS-Stylesheet die Farbangaben durch Platzhalter (à la [background_light]) und tausche diese dann gegen die Farbrepräsentationen (z.B. #fefefe) aus.

m0rius

Mein Blog: blog.mariusschulz.com
Hochwertige Malerarbeiten in Magdeburg und Umgebung: M'Decor, Ihr Maler für Magdeburg

S
sakanoue Themenstarter:in
46 Beiträge seit 2009
vor 13 Jahren

Der erste Überblick:


public string path = @"Stylesheet.css";
        Style style;
        AttrProp attrProp;
        
        public Form1()
        {
            InitializeComponent();
        }

        public string AddColorToMany()
        {
            List<string> Selectors = new List<string>();
            Selectors.Add("body");
            Selectors.Add("h4");
            Selectors.Add("legend");

            attrProp = new AttrProp();
            attrProp.Add("color", textBox1.Text);
            attrProp.Add("border", "1px solid "+ textBox2.Text);
            attrProp.Add("background-color", textBox3.Text);

            style = new Style(Selectors, attrProp.AttrAndProp);
            return style.CSSCode;
        }
        // Read and Write CSS File


    public class Style
    {
        private string strAttribute;
        private string strSelector;
        private string strProperty;

        // Propertys
        #region Propertys
        private string cssCode;
        public string CSSCode
        {
            get { return cssCode; }
            set { cssCode = value; }
        }

        public List<string> Selectors;
        public string propSelector
        {
            get
            {
                string selectors = "";
                int i = 1;
                foreach (string item in Selectors)
                {
                    if (Selectors.Count == i)
                    {
                        selectors += item;
                    }
                    else
                    {
                        selectors += item + ", ";
                    }
                    i++;
                }
                return selectors;
            }
        }

        public List<string> AttributeProperty;
        public string propAttributeProperty
        {
            get
            {
                string attrprop = "";
                foreach (string item in AttributeProperty)
                {
                        attrprop += item;
                }
                return attrprop;
            }
        }
        #endregion

        // Constructors
        #region Constructors

        public Style(string selector, string attribute, string property)
        {
            this.strSelector = selector;
            this.strAttribute = attribute;
            this.strProperty = property;

            CSSCode = strSelector + " { " + strAttribute + ": " + strProperty + "; } ";
        }

        public Style(List<string> selectorList, string attribute, string property)
        {
            this.Selectors = selectorList;
            this.strAttribute = attribute;
            this.strProperty = property;

            CSSCode = propSelector + " { " + strAttribute + ": " + strProperty + "; } ";
        }

        public Style(string selector, List<string> attributeProperty)
        {
            this.strSelector = selector;
            this.AttributeProperty = attributeProperty;

            CSSCode = strSelector + " { " + propAttributeProperty + " } ";
        }

        public Style(List<string> selectorList, List<string> attributeProperty)
        {
            this.Selectors = selectorList;
            this.AttributeProperty = attributeProperty;

            CSSCode = propSelector + " { " + propAttributeProperty + " } ";
        }
        #endregion
    }
}

public class AttrProp
    {
        private string attribute;
        private string propertys;
        private List<string> attrAndProp;
        public List<string> AttrAndProp
        {
            get { return attrAndProp; }
            set { attrAndProp = value; }
        }

        public AttrProp()
        {
            attrAndProp = new List<string>();
        }

        public void Add(string attr, string prop)
        {
            this.attribute = attr;
            this.propertys = prop;

            AttrAndProp.Add(attribute + ": " + propertys + "; ");
        }
    }
E
395 Beiträge seit 2007
vor 13 Jahren

ich habs mal nur so ein bischen ausprobiert aber ja das geht ja schon richtig gut. glückwunsch

MfG Paul

S
sakanoue Themenstarter:in
46 Beiträge seit 2009
vor 13 Jahren

Hi,

hier ein paar Verbesserungen + XML Serialisierung und Deserialisierung.

AttrProp.cs = Attribute und Eigenschaften + Collection
Style.cs = Selectoren, Style + Collection


// AttrProp.cs
public class AttrProp
    {
        public string Attribute { get; set; }
        public string Property { get; set; }

        public override string ToString()
        {
            return Attribute + ": " + Property+"; ";
        }
    }

    public class AttrPropCollection : List<AttrProp>
    {
        public override string ToString()
        {
            string retval = "";
            foreach (var item in this)
            {
                retval += item.ToString();
            }
            return retval;
        }
    }

// Style.cs
public class Style
    {
        public Style()
        {
            Selectors = new List<string>();
            AttrPropCollection = new AttrPropCollection();
        }

        private List<string> selectors;
        public List<string> Selectors
        {
            get { return selectors; }
            set { selectors = value; } 
        }

        public AttrPropCollection AttrPropCollection { get; set; }

        public string CSStyle()
        {
            string retval ="";
            for (int i = 0; i < Selectors.Count; i++)
            {
                retval += Selectors[i];
                if (i != (Selectors.Count - 1))
                {
                    retval += ", ";
                }
            }
            if (Selectors.Count > 0)
            {
                retval += " {" + System.Environment.NewLine;
                retval += AttrPropCollection.ToString();
                retval += System.Environment.NewLine + "} " + System.Environment.NewLine;
            }

            return retval;
        }

        public override string ToString()
        {
            return CSStyle();
        }
    }

    public class StyleCollection : List<Style>
    {
        public override string ToString()
        {
            string retval = "";
            foreach (var item in this)
            {
                retval += item.ToString();
            }
            return retval;
        }
    }

// XMLHelper.cs
public class XMLHelper
    {
        XmlSerializer ser;

        public XMLHelper()
        {
            ser = new XmlSerializer(typeof(StyleCollection));
        }

        public void Serialize(string xmlPath, StyleCollection styleCollection) 
        {
            XmlTextWriter w = 
                new XmlTextWriter(xmlPath, Encoding.Default);
            ser.Serialize(w, styleCollection);
            w.Close();
        }

        public StyleCollection Deserialize(string xmlPath)
        {
            XmlTextReader r =
                new XmlTextReader(xmlPath);
            StyleCollection style = ser.Deserialize(r) as StyleCollection;
            r.Close();

            return style;
        }
    }
S
sakanoue Themenstarter:in
46 Beiträge seit 2009
vor 13 Jahren

Jetzt möchte ich eine Template.xml deserialisieren, in dem Objekt dann bestimmte Werte wie "[value1]" mit eigenen Werten wie "#333333" ersetzen und dann wieder serialisieren und daraus eine CSS Datei erstellen.

Hat einer für dafür einen Tipp? 😃 Danke.

1.002 Beiträge seit 2007
vor 13 Jahren

Hallo sakanoue,

ich verstehe die Frage nicht - meine Tips sind:1.deserialisiere die Datei Template.xml 1.ersetze Platzhalter wie [value1] durch entsprechende Werte wie #333333 1.generiere daraus den CSS-Code

In anderen Worten: Du musst schon etwas konkreter werden.

m0rius

Mein Blog: blog.mariusschulz.com
Hochwertige Malerarbeiten in Magdeburg und Umgebung: M'Decor, Ihr Maler für Magdeburg

S
sakanoue Themenstarter:in
46 Beiträge seit 2009
vor 13 Jahren

EDIT:.