《開源框架那點事兒23》：採用TinyDB組件方式開發

原創 j2eetop 2018-09-11 03:01

 

採用TinyDB組件方式開發

步驟

Icon 前文介紹四則運算的流程編程開發時，說過流程編排在開發重複功能時，可以利用已有的組件庫快速開發。對於開發人員而言只需要簡單配置流程就可以完成工作了。
開發增刪改查的組件接口。本來這部分很花費時間，如果採用組件複用的話，就可以實現一次開發，終生受益。

  • 配置curd.beans.xml和tinydb.xml。

  • 使用流程編輯器定製組件流程curd.pageflow。

  • 修改頁面文件：list.page和operate.page，使之符合流程方式調用。

  • 修改佈局文件default.layout。

    完整的子工程目錄如下：


首先是開發增刪改查的組件接口，如果是開發人員自己實現的話就是實現ComponentInterface接口，然後在組件裏實現具體的數據庫邏輯，其實Tiny框架提供基礎組件庫，配合TinyDB進行開發，可以實現無Pojo，無Dao層，在本示例中開發人員不用寫一行Java代碼，通過配置就可以完成示例需求。

基礎組件資源

Icon目前Tiny框架提供如下幾種組件庫，用戶可以根據實際需要配合流程編輯器使用。

  • org.tinygroup.flowbasiccomponent 提供了邏輯基本組件，如對象轉換組件、調用靜態方法和bean組件等。

  • org.tinygroup.flowservicecomponent 提供了邏輯基本服務，如調用服務、調用本地流程、調用頁面流程等。

  • org.tinygroup.tinydbflowcomponent 提供了TinyDB數據庫組件，如插入組件、更新組件、刪除組件、查詢記錄組件等。

  • org.tinygroup.pageflowbasiccomponent 提供了頁面基本組件，如頁面重定向、頁面轉發等。

    開發人員想要使用使用組件庫中的內置組件，必須將具體的依賴加入到工程的pom.xml，這樣在使用圖形化工具，在右側的組件列表就能看到組件清單：

 


本示例用到了數據庫訪問和頁面跳轉，pom.xml裏面需要有如下依賴：

<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>


配置crud.beans.xml可以複用先前TinyDB採用服務方式的配置文件，只需要把如下內容刪除：

<bean id="tinyDbCrudService" class="org.tinygroup.crud.service.impl.TinyDbCrudService" scope="singleton">
<property name="beanType" value="TUser" />
< /bean>



因爲本示例並沒有配置tinyDbCrudService，如果不刪除的話，Web應用啓動時會報異常。至於tinydb.xml文件無需任何修改，可以直接複用先前例子。

接下來按“New”-“Other”-“Tiny框架”-“頁面流程”順序，創建crud.pageflow，然後按下圖拖曳組件：

 


接下來修改組件的基本信息：標識、英文名和中文名。以插入組件爲例，鼠標選中畫板裏的“插入組件”，在Eclipse的下方的“Properties”，就可以看到如下內容：

 


五個組件修改完畢，界面如下圖展示：

 



然後是配置組件的擴展屬性，每個組件的擴展屬性是根據自身功能定製的，具體的組件參數請參考各組件的幫助文檔。這裏還是以“新增用戶”爲例：

 


說明：這裏類型就是數據庫表的值對象類型TUser，模式是指數據庫的schema，其他幾個組件也是類似。

配置好五個組件的擴展屬性，就是配置頁面組件的擴展屬性。頁面組件的擴展屬性就一個：頁面路徑。

頁面重定向的配置如下：

 



查詢單用戶對應的頁面轉發配置如下：

 


查詢用戶列表對應的頁面轉發配置如下：

 


完整的curd.pageflow的內容如下：

 

[html] view plaincopyprint?

  1. <flow id="crud" enable="true" private-context="false">

  2. <parameters/>

  3. <nodes>

  4. <node id="start" name="start" title="開始">

  5. <next-nodes>

  6. <next-node next-node-id="addUser"/>

  7. <next-node next-node-id="updateUser"/>

  8. <next-node next-node-id="deleteUserById"/>

  9. <next-node next-node-id="getUserById"/>

  10. <next-node next-node-id="redirectComponent"/>

  11. <next-node next-node-id="queryUsers"/>

  12. </next-nodes>

  13. </node>

  14. <node id="addUser" name="addUser" title="新增用戶">

  15. <component name="tinydbAddService" title="插入組件">

  16. <properties>

  17. <flow-property name="beanType" value="TUser"/>

  18. <flow-property name="schema" value="sample"/>

  19. </properties>

  20. </component>

  21. <next-nodes>

  22. <next-node next-node-id="redirectComponent"/>

  23. </next-nodes>

  24. </node>

  25. <node id="updateUser" name="updateUser" title="更新用戶">

  26. <component name="tinydbUpdateService" title="更新組件">

  27. <properties>

  28. <flow-property name="beanType" value="TUser"/>

  29. <flow-property name="schema" value="sample"/>

  30. </properties>

  31. </component>

  32. <next-nodes>

  33. <next-node next-node-id="redirectComponent"/>

  34. </next-nodes>

  35. </node>

  36. <node id="deleteUserById" name="deleteUserById" title="刪除用戶">

  37. <component name="tinydbDeleteService" title="刪除組件">

  38. <properties>

  39. <flow-property name="beanType" value="TUser"/>

  40. <flow-property name="schema" value="sample"/>

  41. </properties>

  42. </component>

  43. <next-nodes>

  44. <next-node next-node-id="redirectComponent"/>

  45. </next-nodes>

  46. </node>

  47. <node id="getUserById" name="getUserById" title="查詢單用戶">

  48. <component name="tinydbQueryServiceWithId" title="單記錄查詢組件">

  49. <properties>

  50. <flow-property name="beanType" value="TUser"/>

  51. <flow-property name="schema" value="sample"/>

  52. <flow-property name="primaryKey" value="${primaryKey}"/>

  53. <flow-property name="resultKey" value="user"/>

  54. </properties>

  55. </component>

  56. <next-nodes>

  57. <next-node next-node-id="forwardComponent"/>

  58. </next-nodes>

  59. </node>

  60. <node id="forwardComponent" name="forwardComponent" title="頁面轉發">

  61. <component name="forwardComponent" title="頁面轉發">

  62. <properties>

  63. <flow-property name="path" value="/crud/operate.page"/>

  64. </properties>

  65. </component>

  66. <next-nodes>

  67. <next-node next-node-id="end"/>

  68. </next-nodes>

  69. </node>

  70. <node id="redirectComponent" name="redirectComponent" title="頁面重定向">

  71. <component name="redirectComponent" title="頁面重定向">

  72. <properties>

  73. <flow-property name="path" value="crud.pageflow?tiny_flow_id=queryUsers"/>

  74. </properties>

  75. </component>

  76. <next-nodes>

  77. <next-node next-node-id="end"/>

  78. </next-nodes>

  79. </node>

  80. <node id="queryUsers" name="queryUsers" title="查詢用戶列表">

  81. <component name="tinydbQueryService" title="查詢組件">

  82. <properties>

  83. <flow-property name="beanType" value="TUser"/>

  84. <flow-property name="schema" value="sample"/>

  85. <flow-property name="resultKey" value="users"/>

  86. </properties>

  87. </component>

  88. <next-nodes>

  89. <next-node next-node-id="forwardComponent_1"/>

  90. </next-nodes>

  91. </node>

  92. <node id="forwardComponent_1" name="forwardComponent" title="頁面轉發">

  93. <component name="forwardComponent" title="頁面轉發">

  94. <properties>

  95. <flow-property name="path" value="/crud/list.page"/>

  96. </properties>

  97. </component>

  98. <next-nodes>

  99. <next-node next-node-id="end"/>

  100. </next-nodes>

  101. </node>

  102. <node id="end" name="end" title="結束">

  103. <next-nodes/>

  104. </node>

  105. </nodes>

  106. < /flow>

<flow id="crud" enable="true" private-context="false">
  <parameters/>
  <nodes>
    <node id="start" name="start" title="開始">
      <next-nodes>
        <next-node next-node-id="addUser"/>
        <next-node next-node-id="updateUser"/>
        <next-node next-node-id="deleteUserById"/>
        <next-node next-node-id="getUserById"/>
        <next-node next-node-id="redirectComponent"/>
        <next-node next-node-id="queryUsers"/>
      </next-nodes>
    </node>
    <node id="addUser" name="addUser" title="新增用戶">
      <component name="tinydbAddService" title="插入組件">
        <properties>
          <flow-property name="beanType" value="TUser"/>
          <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="更新用戶">
      <component name="tinydbUpdateService" title="更新組件">
        <properties>
          <flow-property name="beanType" value="TUser"/>
          <flow-property name="schema" value="sample"/>
        </properties>
      </component>
      <next-nodes>
        <next-node next-node-id="redirectComponent"/>
      </next-nodes>
    </node>
    <node id="deleteUserById" name="deleteUserById" title="刪除用戶">
      <component name="tinydbDeleteService" title="刪除組件">
        <properties>
          <flow-property name="beanType" value="TUser"/>
          <flow-property name="schema" value="sample"/>
        </properties>
      </component>
      <next-nodes>
        <next-node next-node-id="redirectComponent"/>
      </next-nodes>
    </node>
    <node id="getUserById" name="getUserById" title="查詢單用戶">
      <component name="tinydbQueryServiceWithId" title="單記錄查詢組件">
        <properties>
          <flow-property name="beanType" value="TUser"/>
          <flow-property name="schema" value="sample"/>
          <flow-property name="primaryKey" value="${primaryKey}"/>
          <flow-property name="resultKey" value="user"/>
        </properties>
      </component>
      <next-nodes>
        <next-node next-node-id="forwardComponent"/>
      </next-nodes>
    </node>
    <node id="forwardComponent" name="forwardComponent" title="頁面轉發">
      <component name="forwardComponent" title="頁面轉發">
        <properties>
          <flow-property name="path" value="/crud/operate.page"/>
        </properties>
      </component>
      <next-nodes>
        <next-node next-node-id="end"/>
      </next-nodes>
    </node>
    <node id="redirectComponent" name="redirectComponent" title="頁面重定向">
      <component name="redirectComponent" title="頁面重定向">
        <properties>
          <flow-property name="path" value="crud.pageflow?tiny_flow_id=queryUsers"/>
        </properties>
      </component>
      <next-nodes>
        <next-node next-node-id="end"/>
      </next-nodes>
    </node>
    <node id="queryUsers" name="queryUsers" title="查詢用戶列表">
      <component name="tinydbQueryService" title="查詢組件">
        <properties>
          <flow-property name="beanType" value="TUser"/>
          <flow-property name="schema" value="sample"/>
          <flow-property name="resultKey" value="users"/>
        </properties>
      </component>
      <next-nodes>
        <next-node next-node-id="forwardComponent_1"/>
      </next-nodes>
    </node>
    <node id="forwardComponent_1" name="forwardComponent" title="頁面轉發">
      <component name="forwardComponent" title="頁面轉發">
        <properties>
          <flow-property name="path" value="/crud/list.page"/>
        </properties>
      </component>
      <next-nodes>
        <next-node next-node-id="end"/>
      </next-nodes>
    </node>
    <node id="end" name="end" title="結束">
      <next-nodes/>
    </node>
  </nodes>
< /flow>


操作頁面operate.page代碼如下：

[html] view plaincopyprint?

  1. <form action="${TINY_CONTEXT_PATH}/crud.pageflow">

  2. 姓名:<input type="text" name="name" value="${user?.name}" /><br/>

  3. 年齡:<input type="text" name="age" value="${user?.age}" /><br/>

  4. <input type="hidden" name="id" value="${user?.id}"/>

  5. #if($user)

  6. <input type="hidden" name="tiny_flow_id" value="updateUser"/>

  7. #else

  8. <input type="hidden" name="tiny_flow_id" value="addUser"/>

  9. #end

  10. < input type="submit" value="提交">

  11. < /form>

<form action="${TINY_CONTEXT_PATH}/crud.pageflow">
姓名:<input type="text" name="name" value="${user?.name}" /><br/>
年齡:<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="提交">
< /form>



列表頁面list.page代碼如下：

[html] view plaincopyprint?

  1. 用戶管理界面:

  2. <form>

  3. < div>

  4. <p>

  5. <input type="button" id="add" value="添加"/>

  6. <input type="button" id="update" value="修改"/>

  7. <input type="button" id="delete" value="刪除"/>

  8. </p>

  9. <table cellpadding="0" cellspacing="1" border="0" bgcolor="#ebebeb" width="500px">

  10. <tbody>

  11. <tr bgcolor="#ffffff">

  12. <th width="35"><input type="checkbox" id="selectAll"/></th>

  13. <th width="100px" height="35">名稱</th>

  14. <th width="365px" >年齡</th>

  15. </tr>

  16. #foreach($user in $users)

  17. <tr bgcolor="#ffffff">

  18. <td align="center"><input type="checkbox" name="id" value="$user.id"/></td>

  19. <td align="center" height="30">$user.name</td>

  20. <td align="center">$user.age</td>

  21. </tr>

  22. #end

  23. </tbody>

  24. </table>

  25. < /div>

  26. < form>

  27. < script>

  28. $(document).ready(function(){

  29. $("#selectAll").click(function(){

  30. var checked=$(this).get(0).checked;

  31. $(":checkbox:not('#selectAll')").each(function(){

  32. $(this).get(0).checked=checked;

  33. });

  34. });

  35. $("#add").click(function(){

  36. location.href="${TINY_CONTEXT_PATH}/crud/operate.page";

  37. }

  38. );

  39. $("#update").click(function(){

  40. var checkboxs=$(":checked:not('#selectAll')");

  41. var size=checkboxs.size();

  42. if(size==0){

  43. alert("修改前請先選擇記錄");

  44. }else if(size>1){

  45. alert("只能選擇一條記錄進行修改");

  46. }else{

  47. var checkbox=checkboxs.get(0);

  48. location.href="${TINY_CONTEXT_PATH}/crud.pageflow?primaryKey="+checkbox.value+"&tiny_flow_id=getUserById";

  49. }

  50. }

  51. );

  52. $("#delete").click(function(){

  53. if(confirm("確定要刪除選擇的記錄嗎？")){

  54. var checkboxs=$(":checked:not('#selectAll')");

  55. var size=checkboxs.size();

  56. if(size==0){

  57. alert("刪除前請先選擇記錄");

  58. }else if(size>1){

  59. alert("只能選擇一條記錄進行刪除");

  60. }else{

  61. var checkbox=checkboxs.get(0);

  62. location.href="${TINY_CONTEXT_PATH}/crud.pageflow?id="+checkbox.value+"&tiny_flow_id=deleteUserById";

  63. }

  64. }

  65. }

  66. );

  67. });

  68. < /script>

用戶管理界面:
<form>
< div>
 <p>
  <input type="button" id="add" value="添加"/>
     <input type="button" id="update" value="修改"/>
     <input type="button" id="delete" value="刪除"/>
 </p>
 <table cellpadding="0" cellspacing="1" border="0" bgcolor="#ebebeb" width="500px">
  <tbody>
   <tr bgcolor="#ffffff">
    <th width="35"><input type="checkbox" id="selectAll"/></th>
    <th width="100px" height="35">名稱</th>
    <th width="365px" >年齡</th>
   </tr>
   #foreach($user in $users)
   <tr bgcolor="#ffffff">
    <td align="center"><input type="checkbox" name="id" value="$user.id"/></td>
    <td align="center" height="30">$user.name</td>
    <td align="center">$user.age</td>
   </tr>
   #end
  </tbody>
 </table>
< /div>
< form>
< script>
$(document).ready(function(){
   $("#selectAll").click(function(){
        var 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("修改前請先選擇記錄");
        }else if(size>1){
           alert("只能選擇一條記錄進行修改");
        }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("確定要刪除選擇的記錄嗎？")){
              var checkboxs=$(":checked:not('#selectAll')");
               var size=checkboxs.size();
               if(size==0){
                alert("刪除前請先選擇記錄");
               }else if(size>1){
                 alert("只能選擇一條記錄進行刪除");
               }else{
              var checkbox=checkboxs.get(0);
             location.href="${TINY_CONTEXT_PATH}/crud.pageflow?id="+checkbox.value+"&tiny_flow_id=deleteUserById";
             }
        }
    }
   );
});
< /script>



默認佈局文件default.layout的配置如下：

[html] view plaincopyprint?

  1. <table border="1" width="100%">

  2. <tr>

  3. <td colspan="2">

  4. <a href="${TINY_CONTEXT_PATH}/crud.pageflow?tiny_flow_id=queryUsers">用戶管理</a><br/>

  5. </td>

  6. </tr>

  7. <tr>

  8. <td width="20%">tinydb流程方式</td>

  9. <td>

  10. ${pageContent}

  11. </td>

  12. </tr>

  13. < /table>

<table border="1" width="100%">
   <tr>
      <td colspan="2">
        <a href="${TINY_CONTEXT_PATH}/crud.pageflow?tiny_flow_id=queryUsers">用戶管理</a><br/>
      </td>
    </tr>
    <tr>  
      <td width="20%">tinydb流程方式</td>
      <td>
         ${pageContent}
      </td>
   </tr>
< /table>



到這一步，流程編排的例子算是開發完畢。
演示效果

 


具體的增刪改查效果，用戶可以根據教程自行嘗試。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Filter

矮油不錯哦_ab60 2019-02-24 14:12:49

Spring中你可能不知道的事（二）

CoderBear 2019-02-24 14:10:43

Spring中你可能不知道的事（一）

CoderBear 2019-02-24 14:10:42

三種方式實現觀察者模式 及 Spring中的事件編程模型

CoderBear 2019-02-24 14:10:42

C#中爲什麼會出現空靜態構造方法的寫法

CoderBear 2019-02-24 14:10:42

劍指Spring源碼（一）

CoderBear 2019-02-24 14:10:42

劍指Spring源碼（二）

CoderBear 2019-02-24 14:10:42

有點深度的聊聊JDK動態代理

CoderBear 2019-02-24 14:10:42

簡單的單例模式其實也不簡單

CoderBear 2019-02-24 14:10:42

Volatile的那些事

CoderBear 2019-02-24 14:10:42

產品監控指標

Real_man 2019-02-24 13:58:13

sql語法、關係建模

死瘦宅 2019-02-24 22:35:22

MySQL 事務、函數、觸發器、數據庫備份、權限管理

死瘦宅 2019-02-24 22:35:12

包、異常

死瘦宅 2019-02-24 19:31:11

MongoDB索引優化詳解

geekpy 2019-02-24 14:20:06