Activiti Integration of custom Processes (iii): Integration of custom form creation models

It was supposed to be a list of forms and previews after the form was created, but I looked at the integrated code, and there was no change in the basic angularjs, and some very small changes were based on the ANGULARJS syntax, so it's entirely possible to refer to the list of previously mentioned lists to show the relevant content. This also goes directly to the next step, creating a process model.

In the previous creation Process Model section, I say the code is more, actually here also has very important one aspect not to elaborate, that is is the custom flowchart, the process of drawing the flowchart also has a lot of matters needing attention, in this section I will be appropriate to add explanation to explain.

And in the process of creating the process model, because it is also used in Java, Spring, ANGULARJS, etc., so there is actually no change in the code, the difference is in the flowchart, there is the Activiti internal implementation, we do not have to control him, So the emphasis here is to call Activiti-modeler to draw a flowchart.

Our creation model is the first to fill out the model's name, key, description, etc., and then submit it to the backstage, then jump to the Activiti-modeler flowchart making interface. Custom pages such as:

Fill in the data this page code is as follows:

[HTML]View PlainCopy  

2. <div id= "create"style= "Margin-top:100px;margin-left:290px;background-color: #9cc; height:350px; Width:40%;font-size:26px;position:relative;float:left; " >
4. <p style="font-size:30px"> Create Model </P>
6. Name:<input type="text" name= "name"ng-model="activiti.name"/>
8. </br>
10. </br>
12. Key:<input type="text" name= "key"ng-model="Activiti.key"/>
14. </br>
16. </br>
18. Description:<input type="text" name= "Description"ng-model=" Activiti.description "/>
20. </br>
22. </br>
24. <input style="font-size:28px;cursor:pointerborder:1px solid;border-radius:0.5em;" type= "button"value= "Create Model" ng-click="Createto (Activiti);" />
28. <input style="font-size:28px;cursor:pointer;cursor:pointerborder:1px solid;border-radius:0. 5em; " type= "button"value= "return"/>
30. </div>

After we fill in the relevant data, click Submit, will touch the Createto method into the JS code, corresponding to the entire JS code as follows:

[JavaScript]View PlainCopy  

2. Angular.module (' Activitiapp ')
4. . Controller (' createctr ', [' $rootScope ',' $scope ',' $http ',' $location ',' $state ', function ($rootScope, $scope, $http, $location, $state) {
6. //Create Model
8. $http. Post ("Createflush.do"). Success (function (result) {
10. if (result.islogin==="yes") {
12. $rootScope. Username=result.username;
14. }else{
16. $location. Path ("/login");
18. }
20. });
22. $scope. createto=Function (activiti) {
24. //Submit data to the background
26. $http. Post ("./create.do", Activiti,{headers:' Content-type:application/json '}). Success (function ( Createresult) {
28. Console.log (Createresult);
30. $location. Path ("/modellist");
32. window.open ("Http://localhost:8080/activitiTest1" +createresult.path+createresult.modelid);
34. });
38. }
42. }])

In the above code can be seen in the Createto method is directly called $http to send a POST request to the background, and then the page data objects directly to the background, and did not do more processing, here involves angularjs two-way data binding, if you do not understand, you can understand the following.

Note that after sending the request and receiving the background return data, take the path and modelid from the return data and then jump to the Activiti-model Flowchart design page, here you can look at the background code below and then return to see.

After the HTTP request, the operation will run to the background, the corresponding background code is as follows:

[Java]View PlainCopy 

2. /**
4. * Create a model
6. *
8. * @author: Tuzongxun
10. * @Title: Create
12. * @[email protected] Activiti
14. * @[email protected] Request
16. * @[email Protected] Response
18. * @[email protected]
20. * @return Object
22. * @date Mar, 201612:30:29 PM
24. * @throws
26. */
28. @RequestMapping (value = "/create.do", method = Requestmethod.post, produces = "application/json;charset= Utf-8 ")
30. @ResponseBody
32. Public Object Create (@RequestBody activitimodel activiti,
34. HttpServletRequest request, HttpServletResponse response) {
36. map<string, string> map = new hashmap<string, string> ();
38. Boolean IsLogin = this.islogin (request);
40. if (islogin) {
42. Model Newmodel = Repositoryservice.newmodel ();
44. try {
48. Objectmapper objectmapper = new Objectmapper ();
50. Objectnode Modelobjectnode = Objectmapper.createobjectnode ();
52. Modelobjectnode.put (Modeldatajsonconstants.model_name,
54. Activiti.getname ());
56. Modelobjectnode.put (Modeldatajsonconstants.model_revision, 1);
58. Modelobjectnode.put (Modeldatajsonconstants.model_description,
60. Stringutils.defaultstring (Activiti.getdescription ()));
62. Newmodel.setmetainfo (Modelobjectnode.tostring ());
64. Newmodel.setname (Activiti.getname ());
66. Newmodel.setkey (Stringutils.defaultstring (Activiti.getkey ()));
68. Repositoryservice.savemodel (Newmodel);
70. Objectnode Editornode = Objectmapper.createobjectnode ();
72. Editornode.put ("id", "canvas");
74. Editornode.put ("ResourceId", "canvas");
76. Objectnode Stencilsetnode = Objectmapper.createobjectnode ();
78. Stencilsetnode.put ("namespace",
80. "http://b3mn.org/stencilset/bpmn2.0#");
82. Editornode.put ("Stencilset", Stencilsetnode);
84. Repositoryservice.addmodeleditorsource (Newmodel.getid (),
86. Editornode.tostring (). GetBytes ("Utf-8"));
88. } catch (Exception e) {
90. E.getstacktrace ();
92. }
94. //response.sendredirect (Request.getcontextpath () +
96. //"/service/editor?id="
98. //+newmodel.getid ());
100. Map.put ("IsLogin", "yes");
102. Map.put ("UserName",
104. (String) Request.getsession (). getattribute ("UserName"));
106. Map.put ("path", "/service/editor?id=");
108. Map.put ("ModelID", Newmodel.getid ());
110. } Else {
112. Map.put ("IsLogin", "no");
114. }
116. return map;
118. }

This section of the code involves more things, some of which I do not understand, but this code is basically how it will not change, and I do not have in-depth understanding, you can see this code is the same as before said column, then here I would like to say that the last piece of code to return data to the foreground.

You can see that there is a path property and ModelID, which is the two properties returned to the foreground, the foreground angularjs again control the route jumps to the Activiti-model Flowchart design page (This page is completely integrated, not self-created). The interface following the jump based on path and ModelID is as follows:

This interface is integrated, in the process of jumping will automatically bring the data we filled in before, of course, there are modelid, this time the database has actually had data.

Enter this interface, then the following will formally start the design flowchart, first as shown in the creation of the start node, the creation method is to find the Startevent button, hold down the left mouse click to drag to the right margin.

Then there are many buttons at the beginning of this node can be clicked, we select the personal task referred to in the arrow, then create a new task node, of course, if you can learn the custom flowchart This step, I think we should have been on the basis of the flowchart have a certain understanding, At least the flow chart in eclipse should be no problem, so it is not difficult to understand here, otherwise, it is better to first use the Eclipse plug-in to understand.

In this case, we can create a prototype of the flowchart, including the start node, two task nodes, and then the end node, according to the above steps:

Then the next step is more important, and begin to enter the custom form integration.

You can see the right I use the arrow pointed to a place, attributes, as the name implies, is the attribute, here is can be opened, if we can go to this step, you can see in different circumstances here shows the difference.

First we do not select any nodes, we can see the following attributes:

And we select the Start node and the task node are attributes, respectively, such as 1 and Figure 2:

Figure 2:

But both the start node and the task node have the Formkey attribute, where we can specify the name of the custom form file that each node needs to use, usually in the form of Xxx.form. After you specify the Formkey, you can click Save, or you can set other properties, such as assignment and name, key, and so on in the task.

and the whole page here is not written by themselves, save the related methods are not written by themselves, as long as the database configuration is correct, Activiti-modeler will automatically save the data to the database, the model was created.

Activiti Integration of custom Processes (iii): Integration of custom form creation models