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

Developed using the Tinydb component approach

Steps

In the introduction of arithmetic's process programming development, the Icon described the process orchestration in the development of repetitive functions. Ability to develop at high speed with existing component libraries. For developers, simply configure the process to complete the work.
Development of the component interface for the added and censored checks. This part of the time is very expensive, assuming that the use of component reuse, you can achieve a development, lifelong benefit.

• Configure Curd.beans.xml and Tinydb.xml.
• Use the Process Editor to customize the component process Curd.pageflow.

• Change the paging file: List.page and Operate.page. Make it conform to the process method call.
• Change the layout file default.layout.

  
  
  The Complete Child project folder is as follows:
  

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

Download attachments

Uploaded 1 seconds ago

The first is to develop the interface of the component, which is to implement the Componentinterface interface, and then implement the detailed database logic in the component. In fact, the tiny framework provides the base Component library for development with TINYDB. can achieve no pojo, no DAO layer. In this demo sample, the developer does not have to write a single line of Java code, and the configuration is complete to demonstrate the sample requirements.

Base Component Resources

Icon right now the tiny framework provides a library of components such as the following, which users can actually use with the process editor.

• 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 the 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 detailed dependencies to project Pom.xml. This allows you to see the component manifest in the component list on the right side using the graphical tool:
  

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

Download attachments

Uploaded 1 seconds ago

This demo sample uses the database access and page jumps, pom.xml need to have such as 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>

Configure Crud.beans.xml to re-use the configuration file of the previous Tinydb service mode, simply delete the following:

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

Because this demo sample does not have tinydbcrudservice configured. If you do not delete it, the Web app will report an exception when it starts.

As for the Tinydb.xml file, it is possible to reuse the previous sample directly, no matter what changes are made.

Next Press "New"-"other"-"Tiny Frame"-"page Flow" order. Create a 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, change the basic information of the component: logo, English name and Chinese name. As an example of inserting a component, the mouse selects Insert component in the artboard. "Properties" at the bottom of eclipse. You can see such things as the following:

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

Download attachments

Uploaded 1 seconds ago

Five components are changed, and the interface is displayed for example:

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

Download attachments

Uploaded 1 seconds ago

Then the extended properties of the configuration component. The extended properties of each component are customized according to their own functionality. For detailed component references, 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, and 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.

The configuration for page redirection is as follows:

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

Download attachments

Uploaded 1 seconds ago

Query the corresponding page forwarding configuration for a single user such as the following:

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

Download attachments

Uploaded 1 seconds ago

Query the user list for the corresponding page forwarding configuration such as the following:

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

Download attachments

Uploaded 1 seconds ago

The contents of the complete curd.pageflow such as the following:

<flow id= "crud" enable= "true" private-context= "false" > <parameters/> <nodes> <node id= "Start" NA Me= "Start" title= "Start" > <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 action page operate.page code such as the following:

<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 such as the following:

User Management interface:<form>< div> <p> <input type= "button" id= "Add" value= "Add"/> <input type= "button" ID = "Update" value= "Change"/> <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 record before change");        }else if (size>1) {alert ("can only select a record to make changes");         }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 configuration of the default layout file Default.layout is 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 sample of the process orchestration is developed.
Demo effect

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

Download attachments

Uploaded 1 seconds ago

Detailed 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 Add QQ Group:Http://jq.qq.com/?_wv=1027&k=d0myfX

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