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.
1. Let's first learn about the entire system process.
Process further illustrates that the first incoming parameters include file name / style name / operation method / visual style element; where visual style elements are to appear to appear in the designer, the effect preview, but also the elements of the bearer style definition (The style is loaded on the style attribute of the element). · 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
Writing
???????????? font ???????????? .......??????
???????????? style ???????????? ......??????
......background
???????????? colour???????????? ......???????
......
The system is divided into text, background, text, location, layout, box, border, and other, each type there is a Name child element and a number of style child elements.
Each Style child represents a STYLE attribute, the structure is as follows
?? Font ?? font-family ?? SELECT ?? ????? verdana, arial ????? SIMSUN ????? simhei ??
?? Size ?? font-size ?? SELECT ?? ????? 12px ????? 14px ????? 9px ??
?? color ?? background ?? Input_colorselect
Name is a description name of this property, which is a text description in the designer;
CSSName is the attribute name, which is assigned to the design in the designer, which is initialized.
ActionType is the property setting method, in the designer, the style class name of the input field, which contains the Behavior property to formulate HTC components;
SelectItems is the selection, if ActionType is Select, the selection will be listed here; if the child elements Item is displayed in the designer, otherwise the text content of the element is displayed directly.
Frame diagram This is a thumbnail, please click to open
4. The interface of the CSS Designer interacts the entire operation interaction process. In addition to the final saving file, others are done by JavaScript. First, the DesignerBuild function reads the XML style property definition file through the XMLDocumnet, and builds the entire designer interface. Then the init function reads the server-side style.csstext attribute and finds the property as the input control ID in the designer and assigns the initialization. During the operation, the binding HTC component is triggered according to the style class class of the input control, and the corresponding client operation is made. Finally, read the style attribute of the design element, save. Designer interface
Different design elements
Different Class properties of different input controls (based on the ActionType generated in XML) trigger different HTC components to implement different input modes. Due to business reasons, source code is not convenient; I will provide some key code for reference later. Due to the limited time, I can't complete it once, please forgive me.
Thank you for everyone to see it for so long :)
