VML Workflow Designer Workflow is a must-have function in many systems, and the workflow designer is important to users. Visual designers are better, very intuitive, and effective to reduce users. There are systems with B / S in various applications, with C / S systems. Different system workflows are similar. Today's Web is widely used, so this article will tell how to implement a workflow designer on the Web. Demo address is located at: http://www.erist.com/demo/vmlworkflow/workflowdesign.aspx
Due to its own experience, the selected technology is only on the Microsoft route. After viewing information, it is found that there are SVG, VML, and so on in WEB. The reason for choosing VML is because it can fully support by the browser IE. Do not install the plugin, SVG is to install the plugin. Although from some articles, VML is outdated, most of the documentation is 1999, but VML is a technology, it feels mature. Later, I chose VML. On the web on the designer, the graphics is available, and the rest is to control these graphic elements. There are two basic elements of workflows. One kind of we calls nodes, a little called relationship (relationship between nodes) is also the flow of workflow. The following is two basic shapes. To control graphics, because VML is a tag language, which meets the specification of basic HTML tags, all can control HTML can be used to control the VML tag object. To achieve a workflow designer, there are several points: 1. Support the addition, deletion, movement of the workflow element. 2, establish a relationship between nodes 3, saving the designed process into permanent substances (such as files, databases, etc.) 4, can read data from permanent data, and behave as graphics. First point: Comparative completion, there are more script control graphics on the network. The second point, we use the pointers that drag a node and draw line segments. When the mouse bounces, check the icon and draw relationship under the current mouse. Data Storage For convenient application, we use XML file storage (of course, when writing this article, the database has been stored, XML is just to demonstrate convenience.) The data of the database and XML can be done using XSD. In order to expose XML data as a VML tag, we use habits, XSL scalable styles, and the XML is behaving as a VML tag. Will design a well-designed graph, saved as data, we use XML data in the client to pass to the server. It is not fully implemented when writing articles. Work is still continuing, maybe it will be completed tomorrow or the day after tomorrow. Now let's take a look at the style of the workflow designer: left to the designer, right is the toolbar. The node can be added to the right work bar and increase the relationship between the drag node. The new node does not specify a department, you can specify the department in your point menu. Source files have been packaged in the article for download. The relevant files are described as follows: Control.js Control Graphic script Designer.ascx Used for Designer EDITDEPARTMENT.ASPX Select Sector Page FlowFlow.xsd The original data style Workflow.xsd converted data format Workflow.xslt will turn XML turn For the VML style sheet Workflowbll.cs business logic layer, including two data conversion formats, and initial value WorkflowDal.cs data access classes for designing workflow location information from the data, for extracting data from the database. WorkflowData.xml is used to demo the bearer page of the XML data source WorkflowDesign.aspx designer. Here is a workflow of the entire VML: 1. Display workflow rough workflow: WorkflowDal class extracts data from the database, but here data is temporarily in XML files, and actually this class is not used. Then it is transmitted to the WorkflowBLL class, which converts the data into an XMLDocument document. Generating XMLDocument is unregistered from a strong type of data. This stronger data set reads data from the corresponding XML file to the DataSet, and then performs the correspondence from a DataSet to another DataSet.
The position, name, and other corresponding information of the workflow node are saved in the Relation.xml data of the simple data model Item and Item, and the order of order. After the conversion, the relationship between the converted is converted to a single node and them. Here the conversion is just to adapt to the original data required by the company, others can store the relation of Item and Item directly in the XML or database. Next to the interface. First we have to know that the page control Designer has a control XML type to perform conversion from XML data to HTML, use XSLT conversion, can convert data to visual VML code. The correspondence between the conversion is the corresponding value in the XSLT file. After converting to a VML code, you will rely on scripts, and the script is bitten. The main principle is to control the location of the graphics. First, from the start node, it is the control line segment. Scripts can slowly think about it, talking here. Second, the design of the workflow design is complete, mainly the position of the node movement, and restrict the position of the line segment. Third, save the workflow First, click the save button when the above design workflow, and the data is stored in an HTMLHIDEN control. The temporary data is a paragraph of XML data. The generated method is the CreateXmldata method in Designer. After reading the value in the server side, the XML data is saved in the XML file with the DataSet method. Vml.onlysp.flow data = new vml.onlysp.flow (); system.xml.xmldocument doc = new system.xml.xmldocument (); doc.loadxml (xmlData); //doc.save (stem.Web.httpContext .Current.Request.mappath ("WorkflowData.xml"); http://www.erist.com/
