In this year, I participated in an ASP.NET-based medium-sized application development, and they experienced all kinds of peers. A web-based CSS designer was made a few days ago. Although the technology is not complicated, it integrates C # / XML / HTC and other technologies. It should have a certain reference value for everyone; and the designer is relatively independent, so here Share with you, for your reference, and please contact us!
The main function of the designer is to design an operational CSS style sheet on the web interface, which is to facilitate user-defined system interfaces.
I believe that people who have been developed by Web have used Dreamweaver or do ASP.NET development should also be used vs.net, so they should be familiar with the style designer in the Web, which is on the web. This designer is implemented.
System flow
Let's first learn about the entire system process.
Process is later
· Pre-passing parameters include file name / style name / operation method / visual style element; where the visual style element is to appear to appear in the designer, the effect preview is also the elements of the bearer definition content (the style is loaded Element's style attribute).
· The designer then operates according to the incoming parameter, according to the operation method - new file / new style / modified style, the front two do not need to read the style file when initialization, the last person needs to read the style for initialization; use a design C # class To operate the style files and style classes.
· Read the XML defined style file using JavaScript operations XMLDocument objects to make designer build.
· Using JavaScript to read style values through the CSSText property of the style element, the designer is initialized.
· User operator designer, using HTC component operation design style.
· Save, use C # class operations.
2. CSS Designer Table Operation Class
Below, let's detail each link of the process.
In order to operate the style sheet, a simple style sheet operation class is designed. The function is mainly parsing the operation specified style sheet file to achieve addition, modification, deletion, saving of style classes.
Mechanism: Read a pattern table file on the web server, convert the text into an arraylist, array element to custom ClassItem object, contain Name and Text properties (Name, style name, text, then style); then by arraylist Operation, control style, and finally saved.
Since we don't make specific style definitions in the server segment, this class is only operating to the style class level, does not involve style properties and values.
The UML chart ClassItem, which is provided below, is a structure, contains only two attributes;
3. XML style attribute definition of CSS Designer
The CSS style contains many attribute settings, and must all be included in the designer; where is these attribute information from?
Using XML definition is a way that naturally thinks.
DW and VS.NET are often used, so similar patterns are used in interaction design; first, the style properties are classified, and the detailed properties are set.
The CSS attribute is more complicated. If you want to follow DW or VS.NET mode, it will be more complicated. To simplify, I simplify the value of the value into two forms, select, and text input. For selection, define directly in the XML file; for text input, abstract input type, set different HTC component operations according to the type when the designer is generated. This will encapsulate some complex attributes into the HTC component, and the entire architecture is simple.
XML file description
First of all, attribute classification
