Develop a web-based CSS designer. Code reference

css|web| Reference | Design here for the previous article on the CSS Designer system key code to make some summary, if you have not seen the previous article, please see the "Development of web-based CSS Designer"


Parsing CSS style files

The main purpose of this code is to decompose the CSS file into multiple style classes and generate the Classitem object by name/Text attribute, and save it in a ArrayList (C # code)

Reading files
FileInfo thesource= New FileInfo (@m_filePath);
StreamReader reader = Thesource.opentext ();
Convert a file to text
M_csstext = reader. ReadToEnd ();
Reader. Close ();
To define a CSS text separator
Char[] delimiters = new char[] {' {', '} '};
int icheck = 1;
string className = null;
Convert Text to ArrayList
foreach (String substring in m_csstext.split (delimiters))
{
if (icheck%2==0)
When Icheck is even, the string is the Style property content
Deposit the parsed style name and attributes as Classitem objects Csslist
Csslist.add (New Classitem, className, substring. Trim ());
Else
When Icheck is odd, the string is a style name, staging
ClassName = substring. Trim ();
icheck++;
}




Interactive interface Construction

The interactive interface is dynamically generated by JavaScript reading XML files through XmlDocument.

First you read the XML file, then iterate through the XML file, walk through the style categories, and then iterate through all the style attributes under it for each category. The more critical code is the traversal of the XML, and the following is the traversal code for the style classification.


Loadxml is an XML file read function
var dom = Loadxml ("Css.xml");
Returns a Xmldomnodelist object through XPath and SelectNodes methods
var onode = dom.selectnodes ("//category/name");
Gets the length of the object, that is, the number of that path node in the XML document
var intcategory = onodes.length;
for (i=0; i<intcategory; i++)
{
Get the nodes in the collection
Onode = Onodes.nextnode;
if (Onode!= null)
{
Style classification Interface Building code-a little
......
}
}




A style input control constructor that functions by querying an XML definition based on an XPath path, generating an interactive control


function Buildinput (path)
{
var str= "";
var anode=null;
var attvalue=null;
Returns the first node that meets the criteria through selectSingleNode
var actnode = Dom.selectsinglenode (path+ "ActionType");
var namenode = Dom.selectsinglenode (path+ "Cssname");
If the property is a select input, read the Selectitems and build the Select control
if (actnode.text== "select")
{
STR + + "<select id= '" +namenode.text+ "' name= '" +namenode.text+ "' class= ' eselect ' >\n '";

Query all select list items for this item
var itemsnodes = dom.selectnodes (path+ "Selectitems/item");
STR + + "<option value= '-1 ' > Not set </option>\n";
for (ii=0;ii<itemsnodes.length;ii++)
{
Anode = Dom.selectsinglenode (path+ "selectitems/item[" +ii+ "]");

If the item contains the Name property, the Name property value is displayed in the list
Attvalue = Anode.getattribute ("Name")
var txtnode = Dom.selectsinglenode (path+ "selectitems/item[" +ii+ "]");

if (attvalue==null)
STR + + "<option value= '" +txtnode.text+ "' >" +txtnode.text+ "</option>\n";
Else
STR + + "<option value= '" +txtnode.text+ "' >" +attvalue+ "</option>\n";
}

STR + + "</select>";
}
Else

If the attribute is in another mode, build input input and set the class property to ActionType
{
str = "<input name= '" +namenode.text+ "' id= '" +namenode.text+ "' class= '" +actnode.text+ "" >\n ";
}

return (str);
}





Designer initialization

The JS script reads the style attribute value of the parse-type element and assigns a value to the control built in the designer


Designer initialization
function Init ()
{
Get the value of the style attribute assigned by the server side
var txt=document.all ("Demoshow"). Style.csstext;
if (txt.length>0)
{
var strClassName;

Parse string
var aryclass = Txt.split (/[:;] /);
For (i in Aryclass)
{
var str = aryclass[i].replace (/(^\s*) | ( \s*$)/g, "");
if (!) ( I%2==1))
{
When I is odd, the parsed string should be the style property name
STRCLASSNAME=STR;
}
Else
{
When I is even, get the property value
The property name is the control ID
Determines whether the control that corresponds to this property is an input box or a select list
if (document.all (strclassname). type== "Select-one")
{

If it's a select list, set the selection by the Setindexofvalue function
Setindexofvalue (STRCLASSNAME,STR);

}
Else
{
document.all (strClassName). Value=str;
}
}
i++;
}
}
}





Interface interaction

In XML, a total of 4 input modes are defined for Select/input_colorselect/input_sizeselect/input_borderselect (the latter 3 for color/size/Border input mode), except select for direct selection, Others are assigned to the control as the Class property when the corresponding control is initialized, similar to the class code


/* The style type of the color input mode input box * *
. input_colorselect{
width:100px;
Font-family:tahoma;
Behavior:url (HTC/EFFCOLORSELECT.HTC);
}




With the behavior attribute, the input control is associated with the corresponding component, which effcolorselect.htc the code as follows


<public:attach event= "onfocus" onevent= "getshow ()"/>
<public:method name= "Getchange"/>
<script language= "JScript" >
function Getshow ()
{
Element.blur ();

Record the ID of the current interactive control
Effelement=element.id;
Load an input control on a page
Showcontrol ("Selectcolor");
}

function Getchange ()
{
Assign values to a visual style element when the value is changed
SetAttribute (Element.id,element.value);
}
</SCRIPT>






Other

The value input pattern box in the designer is just a few layers in the page, which are triggered by the HTC component above, entered and then passed into the Style property control, and the visual style elements are also set.

Also note that XML documents can be extended or scaled up by themselves, but in practice, they cannot be defined entirely by CSS standards, because the style attribute of the visual element is automatically formatted. For example, if you define the Border-bottom-width attribute in XML, it is automatically formatted as Border-bottom when the value is taken out, which causes the control in the designer to not match. I did not find the documentation on MSDN, so it was validated by a real test.


OK, the more critical code is almost ... Hope to be helpful to everyone.


Reference

Another list of technical references, if you have some of the technical details such as HTC and Xmldom and other questions, you can study it in detail, but also welcome everyone to communicate with me linnchord@tom.com.

MSDN documentation for JS Operation XMLDOM
This is the English document, the internet did not see more detailed Chinese documents, fortunately not complicated, we will do it:)
(Recent MSDN do not know what the problem, frequent access problems, if not accessible, please login MSDN, and then enter the address to browse)

The Blue ideal HTC Tutorial
Online also did not see a more comprehensive narration, this simple and easy to learn, the basic concept is clear.