css|web| Design has been involved in the development of a medium-sized application system based on ASP.net, which has gained a lot in the past six months. I made a web-based CSS designer a while ago, although the technology is not complicated, but the integration of C#/XML/HTC and other technologies, for everyone should have a certain reference value, and the design is relatively independent of the system, so here and everyone to share, for your reference, and please give more advice!
The main function of the designer is to design and manipulate CSS stylesheets on the Web interface, which is designed to make it easier for users to customize the system interface.
Believe that the people who have done web development have mostly used Dreamweaver or do asp.net development should also be used vs.net, then should be familiar with the style of the designer, here is to implement this designer on the web.
1. System Flow
Now let's take a look at the entire system process
The process simply explains
• Incoming arguments include file name/style name/action method/visual style element, where visual style elements are to appear in the designer immediately for the effect to preview, as well as the elements that host the style definition content (the style is loaded on the element's Style property).
• The designer then operates on an incoming parameter, based on the action method-new File/new style/Modify style, the first two do not have to read the style file when initializing, the last person needs to read the style to initialize; use a design C # class to manipulate style files and style classes.
• Designer build by reading XML-defined style files using JavaScript manipulation XmlDocument objects on the client.
• Use JavaScript to initialize the designer by reading the style value from the Csstext property of the style element.
• User Action Designer, using HTC components to manipulate design styles.
• Save, use C # class operations.
2.CSS Designer style Sheet action class
Next, let's look at each part of the process in detail.
To manipulate the stylesheet, a simple style sheet action class is designed. function is mainly to parse the operation of the specified style sheet file, to achieve the style of adding, modify, delete, save.
Mechanism: Reads a stylesheet file on a Web server, converts text to a ArrayList, the array element is a custom Classitem object, contains the name and Text property (name is the style name, text is the content of the style), and then the ArrayList action , control style, and finally save.
Because we do not make a specific style definition in the server segment, the class operates only to the style class level and does not involve style attributes and values.
The UML diagram for this class is provided below Classitem is a struct that contains only two attributes;
3.CSS designer XML style attribute definition
CSS styles contain a lot of property settings, and of course the designer should include the corresponding attributes, so where does the property information come from?
Using XML definitions is a natural way to think about them.
Using DW and vs.net frequently, similar patterns are used in interactive design, and style attributes are sorted by application, and detailed properties are set.
CSS properties are more complex, and if you want to follow the DW or vs.net pattern completely, the implementation will be more complex. To simplify, I simplified the input of the value to two forms, selection and text input. For selection, define directly in the XML file, for text input, abstract several input types, and set different HTC component operations according to type when the designer is generated. This encapsulates some of the complex attribute inputs into the HTC component, and the entire architecture is simple.
XML File Description
First, attribute classification
<CSSDesign>
<Category>
<Name> text </Name>
<Style>
<Name> Fonts </Name>
......
</Style>
<Style>
<Name> Styles </Name>
......
</Style>
......
</Category>
<Category>
<Name> background </Name>
<Style>
<Name> Color </Name>
......
</Style>
......
</Category>
</CSSDesign>
The system is divided into text, background, text, position, layout, boxes, borders, and others, each of which has a name child element and several style child elements.
Each style child element represents a style property, which is structured as follows
<Style>
<Name> Fonts </Name>
<CssName>font-family</CssName>
<ActionType>select</ActionType>
<SelectItems>
<Item>verdana,arial</Item>
<item name= "Song Body" >SimSun</Item>
<item name= "Bold" >SimHei</Item>
</SelectItems>
</Style>
<Style>
<Name> size </Name>
<CssName>font-size</CssName>
<ActionType>select</ActionType>
<SelectItems>
<Item>12px</Item>
<Item>14px</Item>
<Item>9px</Item>
</SelectItems>
</Style>
<Style>
<Name> Color </Name>
<CssName>background</CssName>
<ActionType>input_ColorSelect</ActionType>
</Style>
Name is the description name of the attribute, described in the designer for text;
Cssname is the name of the property, the ID of the field is entered in the designer, and the value is assigned to the initialization.
ActionType sets the method for the property, in the designer, for the style class name of the input field, which contains the behavior attribute, and sets the HTC component;
Selectitems is the selection, and if ActionType is select, the selection is listed here, and its child element item, if it contains the Name property, is displayed in the designer, otherwise the text content of the element is displayed directly
Frame Chart
This is a thumbnail, please click to open
Interface interaction of 4.CSS designers
The entire operation interaction process, in addition to the last save the file, the other is done by JavaScript.
First, the Designerbuild function constructs the entire designer interface by reading the XML style attribute definition file xmldocumnet. The INIT function then reads the Style.csstext attribute assigned to the design element on the server side and finds and assigns the property as an input control ID in the designer to complete initialization.
In the course of operation, according to the style class of the input control, trigger the bundled HTC component and do the corresponding client action.
Finally, the style property of the design element is read and saved.
Designer interface
Different design elements
Different class attributes of different input controls (based on ActionType generated in XML) trigger different HTC components to implement different input modes.
For business reasons, it is not convenient to provide source code, I will provide some key code for reference later.
As time is limited, can not be completed at one time, please forgive me.
Thank you for watching this for so long:)
