Here is some summary of the CSS designer system for the previous article. If you haven't seen the previous article, please refer to "Developing Web-based CSS Designer".
Analysis of CSS style files
The main role of this code is to break down the CSS file into multiple style classes, and generate the ClassItem object by name / text property, and save it in an arraylist (csslist) (C # code)
// Read file fileInfo thiesource = new fileInfo (@m_filepath); streamreader reader = THHESOURE.OpenText (); // Transform file stream into text m_csstext = reader.readToEnd (); reader.close (); // Define CSS Text split Char [] Delimiters = new char [] {'{', '}'}; int icheck = 1; string classname = null; // Transform text into ArrayList Foreach (String Substring In M_CSSText.Split (Delimiters) ) {if (iCHECK% 2 == 0) // When ICHECK is an even number, the string is stored as the style attribute content // as the CSSList Csslist.Add (New ClassItem (ClassName, Substring. Trim ())); Else // When Icheck is odd, the string is a style name, temporary ClassName = Substring.trim (); iCheck ;}
Interaction interface construction
The interactive interface is dynamically generated by JavaScript to read XML files via XMLDocument. First read the XML file, then traverse the entire XML file, traverse the style classification, and then traverse all style properties of each classification. The comparison critical code is the traversal of XML, below is the traversal code classified in style.
// loadXML is the XML file read function var DOM = loadingXML ("css.xml"); // Returns an XMLDomnodeListNodes ("// category / name"); ////// category / name Get the length of the object, the number of path nodes in the XML document VAR INTCATEGORY = Onodes.Length; for (i = 0; i Function buildinput (path) {var str = ""; var anode = null; var attvalue = null; // Return the first node of eligibility by selectsinglenode var ActNode = Dom.selectsinglenode (Path "ActionType"); var namenode = Dom.selectsinglenode (Path "CSSNAME"); // If the property is selected, read SelectItems, and build the SELECT control if (actnode.text == "select") {str = " namenode.text " 'Name = '" namenode.text " "> / n"; // Query all selection list items of the item VAR itemsnodes = Dom.selectNodes (Path "SelectItems / item"); Str = "Not set / N"; for (II = 0; II // Designer Initialization Function init () {// Get the style attribute value VAR txt = document.all ("Demoshow"). Style.csstext; if (txt.length> 0) {var strclassname; / / Parrse string var aryclass = txt.Split (/ [:;] /); for (i in aryclass) {var str = aryclass [i] .replace (/ (^ / s *) | (/ s * $) / g, ""); if i (i% 2 == 1)) {// When i is an odd number, the resolved string should be the style attribute name strclassName = Str;} else {// When i is an even number When the property value // attribute name, the control ID // determines that the corresponding control corresponding to the input box or the selection list if (Document.all (strclassname) .Type == "Select-one") {// If it is selected setting option list setIndexOfValue (strClassName, str) by setIndexOfValue function;} else {document.all (strClassName) .value = str;}} i ;}}} interactive interface in XML has defined a select / input_ColorSelect / input_SizeSelect / Input_borderselect (the latter color / size / border input mode) Total 4 input modes, except that SELECT is directly selective, other in the corresponding control initialize the value to the control, similar to the Class code is as follows / * color input Pattern INPUT box style class * / .INPUT_COLORSELECT {width: 100px; font-family: Tahoma; Behavior: URL (htc / effcolistryselect.htc);} By the Behavior property, the input control is associated with the corresponding component, the component EFFCOLORSELECT.HTC code is as follows
