Willkommen auf myCSharp.de! Anmelden | kostenlos registrieren
 | Suche | FAQ

Hauptmenü
myCSharp.de
» Startseite
» Forum
» Suche
» Regeln
» Wie poste ich richtig?

Mitglieder
» Liste / Suche
» Wer ist online?

Ressourcen
» FAQ
» Artikel
» C#-Snippets
» Jobbörse
» Microsoft Docs

Team
» Kontakt
» Cookies
» Spenden
» Datenschutz
» Impressum

  • »
  • Community
  • |
  • Diskussionsforum
Dynamic CSS Gen
sakanoue
myCSharp.de - Member



Dabei seit:
Beiträge: 46
Herkunft: DE

Themenstarter:

Dynamic CSS Gen

beantworten | zitieren | melden

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ß
Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von sakanoue am .
private Nachricht | Beiträge des Benutzers
inflames2k
myCSharp.de - Experte

Avatar #AARsmmPEUMee0tQa2JoB.png


Dabei seit:
Beiträge: 2360

beantworten | zitieren | melden

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 | Spielkartenbibliothek
private Nachricht | Beiträge des Benutzers
el_panter
myCSharp.de - Member



Dabei seit:
Beiträge: 406
Herkunft: Sömmerda

beantworten | zitieren | melden

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
private Nachricht | Beiträge des Benutzers
sakanoue
myCSharp.de - Member



Dabei seit:
Beiträge: 46
Herkunft: DE

Themenstarter:

beantworten | zitieren | melden

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 :)
private Nachricht | Beiträge des Benutzers
schaedld
myCSharp.de - Member

Avatar #avatar-2533.jpg


Dabei seit:
Beiträge: 1436
Herkunft: Schweiz

beantworten | zitieren | melden

Möchtest Du was wie hier beschrieben erstellen?
Grüsse
Daniel
Space Profile
Wer nicht fragt, der nicht gewinnt
private Nachricht | Beiträge des Benutzers
m0rius
myCSharp.de - Member

Avatar #avatar-3125.png


Dabei seit:
Beiträge: 1043

beantworten | zitieren | melden

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
private Nachricht | Beiträge des Benutzers
sakanoue
myCSharp.de - Member



Dabei seit:
Beiträge: 46
Herkunft: DE

Themenstarter:

beantworten | zitieren | melden

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 + "; ");
        }
    }
private Nachricht | Beiträge des Benutzers
el_panter
myCSharp.de - Member



Dabei seit:
Beiträge: 406
Herkunft: Sömmerda

beantworten | zitieren | melden

ich habs mal nur so ein bischen ausprobiert aber ja das geht ja schon richtig gut. glückwunsch
MfG Paul
private Nachricht | Beiträge des Benutzers
sakanoue
myCSharp.de - Member



Dabei seit:
Beiträge: 46
Herkunft: DE

Themenstarter:

beantworten | zitieren | melden

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;
        }
    }
Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von sakanoue am .
private Nachricht | Beiträge des Benutzers
sakanoue
myCSharp.de - Member



Dabei seit:
Beiträge: 46
Herkunft: DE

Themenstarter:

beantworten | zitieren | melden

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.
private Nachricht | Beiträge des Benutzers
m0rius
myCSharp.de - Member

Avatar #avatar-3125.png


Dabei seit:
Beiträge: 1043

beantworten | zitieren | melden

Hallo sakanoue,

ich verstehe die Frage nicht - meine Tips sind:
  1. deserialisiere die Datei Template.xml
  2. ersetze Platzhalter wie [value1] durch entsprechende Werte wie #333333
  3. 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
private Nachricht | Beiträge des Benutzers
sakanoue
myCSharp.de - Member



Dabei seit:
Beiträge: 46
Herkunft: DE

Themenstarter:

beantworten | zitieren | melden

EDIT:.
Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von sakanoue am .
private Nachricht | Beiträge des Benutzers