"Open source framework that thing 23": Development using the Tinydb component approach

Developed using the Tinydb component approach

Steps

During the process programming development of arithmetic, the Icon described how the process orchestration can be developed quickly using existing component libraries when developing repetitive functions. For developers, simply configure the process to get the job done.
Development of the component interface for the added and censored checks. Originally this part takes time, if uses the component to reuse, can realize a development, lifetime benefit.

• Configure Curd.beans.xml and Tinydb.xml.
• Use the Process Editor to customize the component process Curd.pageflow.
• Modify the paging file: List.page and operate.page to make it conform to the process method call.
• Modify the layout file default.layout.
  
  The complete sub-project directory is as follows:
  

unnamed%20qq%20screenshot20141113141022.jpg (11.16 KB, download number: 0)

Download attachments

Uploaded 1 seconds ago

The first is the development of the interface of the component, if it is the developer's own implementation of the Componentinterface interface, and then implement the specific database logic in the component, in fact, tiny framework provides the base Component library, with Tinydb for development, can achieve no pojo, There is no DAO layer, in this example the developer does not write a single line of Java code, which can be configured to complete the sample requirements.

Base Component Resources

The tiny framework currently provides several component libraries that users can use with the process editor as needed.

• Org.tinygroup.flowbasiccomponent provides logical basic components, such as Object transformation components, calling static methods, and bean components.
• Org.tinygroup.flowservicecomponent provides logical basic services such as invoking a service, invoking a local process, invoking a page flow, and so on.
• Org.tinygroup.tinydbflowcomponent provides TINYDB database components, such as inserting components, updating components, deleting components, querying record components, and so on.
• Org.tinygroup.pageflowbasiccomponent provides basic components of the page, such as page redirection, page forwarding, and so on.
  
  Developers who want to use the built-in components in the component library must add specific dependencies to the pom.xml of the project, so that the component list can be seen in the component lists on the right using the graphical tools:
  

unnamed%20qq%20screenshot20141113143246.jpg (15.92 KB, download number: 0)

Download attachments

Uploaded 1 seconds ago

This example uses database access and page jumps, and pom.xml needs to have the following dependencies:

<dependency> <groupId>org.tinygroup</groupId> <artifactId>org.tinygroup.tinydbflowcomponent</artifactId> <version>${tiny_version}</version> </dependency> <dependency> <groupId>org.tinygroup</groupId> <artifactId>org.tinygroup.pageflowbasiccomponent</artifactId> <version>${tiny_version}</version> </dependency>

Configuration Crud.beans.xml can reuse a previously tinydb configuration file that uses the service mode, just delete the following:

<bean id= "Tinydbcrudservice" class= "Org.tinygroup.crud.service.impl.TinyDbCrudService" scope= "singleton" > <property name= "Beantype" value= "TUser"/> </bean>

Because this example does not configure Tinydbcrudservice, the Web app will report an exception when it starts without deleting it. As for the Tinydb.xml file without any modification, you can reuse the previous example directly.

Next, press the "New"-"other"-"Tiny Frame"-"page Flow" order, create the Crud.pageflow, and then press the drag component:

unnamed%20qq%20screenshot20141113144524.jpg (8.45 KB, download number: 0)

Download attachments

Uploaded 1 seconds ago

Next, modify the basic information of the component: Identity, English name, and Chinese name. Taking the Insert component as an example, the mouse selects "Insert Component" in the artboard, and at the bottom of Eclipse "Properties" you can see the following:

unnamed%20qq%20screenshot20141113145248.jpg (17.32 KB, download number: 0)

Download attachments

Uploaded 1 seconds ago

The five components are modified and the interface is displayed as follows:

unnamed%20qq%20screenshot20141113145525.jpg (8.65 KB, download number: 0)

Download attachments

Uploaded 1 seconds ago

Then is the extended properties of the configuration component, each component's extended properties are customized according to its own function, the specific component parameters please refer to the Help documentation for each component. Here's an example of a "new user":

unnamed%20qq%20screenshot20141113150154.jpg (7.42 KB, download number: 0)

Download attachments

Uploaded 1 seconds ago

Description: Here the type is the database table value object type Tuser, the schema refers to the database schema, several other components are similar.

Configuring the extended properties of five components is the extended properties of the Configuration page component. The extended property of the page component is one: the page path.

Page redirection is configured as follows:

unnamed%20qq%20screenshot20141113150706.jpg (5.93 KB, download number: 0)

Download attachments

Uploaded 1 seconds ago

Query single user corresponding page forwarding configuration is as follows:

unnamed%20qq%20screenshot20141113150811.jpg (5.42 KB, download number: 0)

Download attachments

Uploaded 1 seconds ago

The query user list corresponds to the following page forwarding configuration:

unnamed%20qq%20screenshot20141113151009.jpg (5.53 KB, download number: 0)

Download attachments

Uploaded 1 seconds ago

The contents of the complete Curd.pageflow are as follows:

<flow id= "crud" enable= "true" private-context= "false" > <parameters/> <nodes> <node id= "Start" NA Me= "Start" title= "Begin" > <next-nodes> <next-node next-node-id= "addUser"/> <next-node NE Xt-node-id= "UpdateUser"/> <next-node next-node-id= "Deleteuserbyid"/> <next-node next-node-id= "ge Tuserbyid "/> <next-node next-node-id=" redirectcomponent "/> <next-node next-node-id=" queryUsers "/  > </next-nodes> </node> <node id= "AddUser" name= "AddUser" title= "new users" > <component Name= "Tinydbaddservice" title= "Insert Component" > <properties> <flow-property name= "Beantype" value= "Tuse      R "/> <flow-property name=" schema "value=" sample "/> </properties> </component>     <next-nodes> <next-node next-node-id= "redirectcomponent"/> </next-nodes> </node> <node id= "UpdateuSer "name=" UpdateUser "title=" Update user "> <component name=" tinydbupdateservice "title=" Update component "> <properti es> <flow-property name= "Beantype" value= "TUser"/> <flow-property name= "schema" value= "Sampl E "/> </properties> </component> <next-nodes> <next-node next-node-id=" Redi Rectcomponent "/> </next-nodes> </node> <node id=" Deleteuserbyid "name=" Deleteuserbyid "title= "Delete User" > <component name= "tinydbdeleteservice" title= "Remove Components" > <properties> <flow-prop Erty name= "Beantype" value= "TUser"/> <flow-property name= "schema" value= "sample"/> </propertie s> </component> <next-nodes> <next-node next-node-id= "Redirectcomponent"/> < /next-nodes> </node> <node id= "Getuserbyid" name= "Getuserbyid" title= "Query single user" > <component name = "TinydbqueryservicewithId "title=" single Record query Component "> <properties> <flow-property name=" Beantype "value=" TUser "/> &           Lt;flow-property name= "schema" value= "sample"/> <flow-property name= "PrimaryKey" value= "${primarykey}"/> <flow-property name= "Resultkey" value= "user"/> </properties> </component> &lt ;next-nodes> <next-node next-node-id= "forwardcomponent"/> </next-nodes> </node> &lt Node id= "forwardcomponent" name= "forwardcomponent" title= "page Forwarding" > <component name= "forwardcomponent" title= "page Forwarding "> <properties> <flow-property name=" path "value="/crud/operate.page "/> </prope rties> </component> <next-nodes> <next-node next-node-id= "End"/> </next-node s> </node> <node id= "redirectcomponent" name= "redirectcomponent" title= "page redirection" > <component na Me= "Redirectcomponent" Title= "page redirection" > <properties> <flow-property name= "path" value= "Crud.pageflow?tiny_flow_id=queryus ERs "/> </properties> </component> <next-nodes> <next-node next-node-id=" en D "/> </next-nodes> </node> <node id=" queryusers "name=" queryusers "title=" Query user list "> &L T;component name= "Tinydbqueryservice" title= "Query Components" > <properties> <flow-property name= "Beantype "Value=" TUser "/> <flow-property name=" schema "value=" sample "/> <flow-property name=" RESULTK EY "value=" users/> </properties> </component> <next-nodes> <next-node NEX T-node-id= "forwardcomponent_1"/> </next-nodes> </node> <node id= "forwardcomponent_1" name= "fo          Rwardcomponent "title=" page Forwarding "> <component name=" forwardcomponent "title=" page forwarding "> <properties> <flow-propertyName= "path" value= "/crud/list.page"/> </properties> </component> <next-nodes> <next-node next-node-id= "End"/> </next-nodes> </node> <node id= "End" name= "End" title= "ends "> <next-nodes/> </node> </nodes></flow>

The Operation page Operate.page code is as follows:

<form action= "${tiny_context_path}/crud.pageflow" > Name: <input type= "text" name= "name" Value= "${user?. Name} "/><br/> Ages: <input type=" text "name=" Age "value=" ${user? Age} "/><br/> <input type=" hidden "name=" id "value=" ${user?. ID} "/> #if ($user) <input type=" hidden "name=" tiny_flow_id "value=" UpdateUser "/> #else <input type=" hidden " Name= "tiny_flow_id" value= "AddUser"/> #end < input type= "submit" value= "Submit" ></form>

The list page list.page code is as follows:

User Management interface:<form>< div> <p> <input type= "button" id= "Add" value= "adding"/> <input type= "button" ID = "Update" value= "Modify"/> <input type= "button" id= "delete" value= "delete"/> </p> <table cellpadding= "0" cel lspacing= "1" border= "0" bgcolor= "#ebebeb" width= "500px" > <tbody> <tr bgcolor= "#ffffff" > <th width= "><input type=" checkbox "id=" SelectAll "/></th> <th width=" 100px "height=" > Name </th> & lt;th width= "365px" > Age </th> </tr> #foreach ($user in $users) <tr bgcolor= "#ffffff" > <td A lign= "center" ><input type= "checkbox" Name= "id" value= "$user. Id"/></td> <td align= "center" height= " "> $user .name</td> <td align=" center "> $user .age</td> </tr> #end </tbody> </ta ble></div>< form>< script>$ (document). Ready (function () {$ ("#selectAll"). Click (function () {V Ar checked=$ (this). Get (0). Checked;        $ (": Checkbox:not (' #selectAll ')"). each (function () {$ (this). Get (0). checked=checked;     });   });    $ ("#add"). Click (function () {location.href= "${tiny_context_path}/crud/operate.page";   }   );    $ ("#update"). Click (function () {var checkboxs=$ (": Checked:not (' #selectAll ')");        var size=checkboxs.size ();        if (size==0) {alert ("Please select a record before modifying");        }else if (size>1) {alert ("Only one record can be selected for modification");         }else{var checkbox=checkboxs.get (0);        location.href= "${tiny_context_path}/crud.pageflow?primarykey=" +checkbox.value+ "&tiny_flow_id=getUserById";    }     }   ); $ ("#delete"). Click (function () {if (confirm) ("OK" to delete the selected record?               ") {var checkboxs=$ (": Checked:not (' #selectAll ') ");               var size=checkboxs.size ();               if (size==0) {alert ("Please select a record before deleting");               }else if (size>1) {alert ("Only one record can be selected for deletion"); }else{var CheckboX=checkboxs.get (0);             location.href= "${tiny_context_path}/crud.pageflow?id=" +checkbox.value+ "&tiny_flow_id=deleteuserbyid"; }        }    }   );}); </script>

The default layout file Default.layout is configured as follows:

<table border= "1" width= "100%" >   <tr>      <td colspan= "2" >        <a href= "${tiny_context_ Path}/crud.pageflow?tiny_flow_id=queryusers "> User management </a><br/>      </td>    </tr>    <tr>        <td width= "20%" >tinydb process mode </td>      <td>         ${pagecontent}      </td>   </tr></table>

In this step, the process Orchestration example is developed.
Demo effect

unnamed%20qq%20screenshot20141113152410.jpg (10.3 KB, download number: 0)

Download attachments

Uploaded 1 seconds ago

Specific additions and deletions to check the effect, the user can be based on the tutorial to try.

Welcome to the Open source technology community: http://bbs.tinygroup.org . The Code and framework information in this example will be shared in the community. "Self-write framework" member QQ Group: 228977971, Hands-on, understand the secrets of the Open source framework! Or click Join QQ Group:Http://jq.qq.com/?_wv=1027&k=d0myfX

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

"Open source framework that thing 23": Development using the Tinydb component approach