Saturday 25 February 2017

CRUD on recursive item list bound to JSF UI component like p:tree or jqxtree

Performing a CRUD operation simplified on UI Tree with recursive nth node. 

Introduction

You can Create Retrieve Update Delete a recursive list item using UITree.  
Extends draganddrop, context listing functionalities as seen below.









View -: Primefaces, jqxwidgets
Model -: MySQL or any db
Controller: JEE8 (JPA, JSF, Jersey)



Getting started.

Table: Organisationunit (Structure cloned from popular open source HMIS www.dhis2.org)



Entity from table : -Organisationunits 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
package com.dhis;

import java.io.Serializable;

import java.sql.Timestamp;

import java.util.Date;

import java.util.List;

import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.NamedQueries;
import javax.persistence.NamedQuery;
import javax.persistence.OneToMany;
import javax.persistence.Table;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;

@Entity
@NamedQueries({ @NamedQuery(name = "Organisationunit.findAll", query = "select o from Organisationunit o order by o.name") })
@Table(name = "\"organisationunit\"")
public class Organisationunit implements Serializable {
    private static final long serialVersionUID = -3968423246581384889L;
    @Column(name = "address")
    private String address;
    @Temporal(TemporalType.DATE)
    @Column(name = "closeddate")
    private Date closeddate;
    @Column(name = "code", unique = true)
    private String code;
    @Column(name = "comment")
    private String comment;
    @Column(name = "contactPerson")
    private String contactPerson;
    @Column(name = "coordinates")
    private String coordinates;
    @Column(name = "created")
    private Timestamp created;
    @Column(name = "description")
    private String description;
    @Column(name = "email")
    private String email;
    @Column(name = "featureType")
    private String featureType;
    @Column(name = "hierarchylevel")
    private int hierarchylevel;
    @Column(name = "lastUpdated")
    private Timestamp lastUpdated;
    @Column(name = "name", nullable = false, unique = true)
    private String name;
    @Temporal(TemporalType.DATE)
    @Column(name = "openingdate")
    private Date openingdate;
    @Id
    @Column(name = "organisationunitid", nullable = false)
    private int organisationunitid;
    @Column(name = "parentid", nullable = false)
    private int parentid;
    @Column(name = "path", unique = true)
    private String path;
    @Column(name = "phoneNumber")
    private String phoneNumber;
    @Column(name = "shortname", nullable = false)
    private String shortname;
    @Column(name = "uid", unique = true)
    private String uid;
    @Column(name = "url")
    private String url;
    @Column(name = "userid")
    private int userid;
    @Column(name = "uuid")
    private String uuid;
   /* @ManyToOne
    @JoinColumn(name = "parentid",updatable=false,insertable=false)
    private Organisationunit organisationunit;
    @OneToMany(mappedBy = "organisationunit", cascade = { CascadeType.PERSIST, CascadeType.MERGE })
    private List<Organisationunit> organisationunitList;*/

    public Organisationunit() {
    }

    public Organisationunit(String address, Date closeddate, String code, String comment, String contactPerson,
                            String coordinates, Timestamp created, String description, String email, String featureType,
                            int hierarchylevel, Timestamp lastUpdated, String name, Date openingdate,
                            int organisationunitid,String path, String phoneNumber,
                            String shortname, String uid, String url, int userid, String uuid,int parentid) {
        this.address = address;
        this.closeddate = closeddate;
        this.code = code;
        this.comment = comment;
        this.contactPerson = contactPerson;
        this.coordinates = coordinates;
        this.created = created;
        this.description = description;
        this.email = email;
        this.featureType = featureType;
        this.hierarchylevel = hierarchylevel;
        this.lastUpdated = lastUpdated;
        this.name = name;
        this.openingdate = openingdate;
        this.organisationunitid = organisationunitid;
       // this.organisationunit = organisationunit;
        this.path = path;
        this.phoneNumber = phoneNumber;
        this.shortname = shortname;
        this.uid = uid;
        this.url = url;
        this.userid = userid;
        this.uuid = uuid;
        this.parentid = parentid;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public Date getCloseddate() {
        return closeddate;
    }

    public void setCloseddate(Date closeddate) {
        this.closeddate = closeddate;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getComment() {
        return comment;
    }

    public void setComment(String comment) {
        this.comment = comment;
    }

    public String getContactPerson() {
        return contactPerson;
    }

    public void setContactPerson(String contactPerson) {
        this.contactPerson = contactPerson;
    }

    public String getCoordinates() {
        return coordinates;
    }

    public void setCoordinates(String coordinates) {
        this.coordinates = coordinates;
    }

    public Timestamp getCreated() {
        return created;
    }

    public void setCreated(Timestamp created) {
        this.created = created;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getFeatureType() {
        return featureType;
    }

    public void setFeatureType(String featureType) {
        this.featureType = featureType;
    }

    public int getHierarchylevel() {
        return hierarchylevel;
    }

    public void setHierarchylevel(int hierarchylevel) {
        this.hierarchylevel = hierarchylevel;
    }

    public Timestamp getLastUpdated() {
        return lastUpdated;
    }

    public void setLastUpdated(Timestamp lastUpdated) {
        this.lastUpdated = lastUpdated;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Date getOpeningdate() {
        return openingdate;
    }

    public void setOpeningdate(Date openingdate) {
        this.openingdate = openingdate;
    }

    public int getOrganisationunitid() {
        return organisationunitid;
    }

    public void setOrganisationunitid(int organisationunitid) {
        this.organisationunitid = organisationunitid;
    }


    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }

    public String getPhoneNumber() {
        return phoneNumber;
    }

    public void setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
    }

    public String getShortname() {
        return shortname;
    }

    public void setShortname(String shortname) {
        this.shortname = shortname;
    }

    public String getUid() {
        return uid;
    }

    public void setUid(String uid) {
        this.uid = uid;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public int getUserid() {
        return userid;
    }

    public void setUserid(int userid) {
        this.userid = userid;
    }

    public String getUuid() {
        return uuid;
    }

    public void setUuid(String uuid) {
        this.uuid = uuid;
    }

  /*  public Organisationunit getOrganisationunit() {
        return organisationunit;
    }

    public void setOrganisationunit(Organisationunit organisationunit) {
        this.organisationunit = organisationunit;
    }

    public List<Organisationunit> getOrganisationunitList() {
        return organisationunitList;
    }

    public void setOrganisationunitList(List<Organisationunit> organisationunitList) {
        this.organisationunitList = organisationunitList;
    }

    public Organisationunit addOrganisationunit(Organisationunit organisationunit) {
        getOrganisationunitList().add(organisationunit);
        organisationunit.setOrganisationunit(this);
        return organisationunit;
    }

    public Organisationunit removeOrganisationunit(Organisationunit organisationunit) {
        getOrganisationunitList().remove(organisationunit);
        organisationunit.setOrganisationunit(null);
        return organisationunit;
    }*/


    public void setParentid(int parentid) {
        this.parentid = parentid;
    }

    public int getParentid() {
        return parentid;
    }
}


JPA/EJB


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
package com.dhis;

import java.util.List;

import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.EntityTransaction;
import javax.persistence.Persistence;
import javax.persistence.Query;

public class JavaSF {
    private final EntityManager em;

    public JavaSF() {
        final EntityManagerFactory emf = Persistence.createEntityManagerFactory("dhisPU");
        em = emf.createEntityManager();
    }

    /**
     * All changes that have been made to the managed entities in the
     * persistence context are applied to the database and committed.
     */
    public void commitTransaction() {
        final EntityTransaction entityTransaction = em.getTransaction();
        if (!entityTransaction.isActive()) {
            entityTransaction.begin();
        }
        entityTransaction.commit();
    }

    public Object queryByRange(String jpqlStmt, int firstResult, int maxResults) {
        Query query = em.createQuery(jpqlStmt);
        if (firstResult > 0) {
            query = query.setFirstResult(firstResult);
        }
        if (maxResults > 0) {
            query = query.setMaxResults(maxResults);
        }
        return query.getResultList();
    }

    public <T> T persistEntity(T entity) {
        em.persist(entity);
        commitTransaction();
        return entity;
    }

    public <T> T mergeEntity(T entity) {
        entity = em.merge(entity);
        commitTransaction();
        return entity;
    }

    public void removeOrganisationunit(Organisationunit organisationunit) {
        organisationunit = em.find(Organisationunit.class, organisationunit.getOrganisationunitid());
        em.remove(organisationunit);
        commitTransaction();
    }

    /** <code>select o from Organisationunit o</code> */
    public List<Organisationunit> getOrganisationunitFindAll() {
        return em.createNamedQuery("Organisationunit.findAll", Organisationunit.class).getResultList();
    }
}



Managed Beans

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
package com.dhis.beans;

import com.dhis.JavaSF;
import com.dhis.Organisationunit;
import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean(name = "OrgBean")
@ViewScoped
public class Organisationunits {
    private List<Organisationunit> organisationUnitSubList, organisationUnitSubList2 = new ArrayList<Organisationunit>();
    private List<Organisationunit> organisationUnitList = new ArrayList<Organisationunit>();
    private TreeNode root;
    private TreeNode subList;
    private TreeNode selectedNode;
    
    public Organisationunits() {
        HRTree();
    }
    
    
    public List<Organisationunit> OrganisationUnitSubList(int i) {
        organisationUnitSubList2 = new ArrayList<Organisationunit>();
        for (Organisationunit hue : getOrganisationUnitList()) {
            if (hue.getParentid() == i)
                organisationUnitSubList2.add(hue);
        }

        return organisationUnitSubList2;
    }
    
    private void HRTree() {
        root = new DefaultTreeNode("Root", null);
        JavaSF jsf = new JavaSF();
        setOrganisationUnitList(new ArrayList<Organisationunit>());
        setOrganisationUnitList(jsf.getOrganisationunitFindAll());
        recursiveList(getOrganisationUnitList(), 0, root);
    }

    public void recursiveList(List<Organisationunit> liste, int id, TreeNode node) {
        organisationUnitSubList = new ArrayList<Organisationunit>();
        organisationUnitSubList = OrganisationUnitSubList(id);
        
        for (Organisationunit hue : organisationUnitSubList) {
            TreeNode childNode =
                new DefaultTreeNode(new Organisationunit(hue.getAddress(), hue.getCloseddate(),
                                                       hue.getCode(), hue.getComment(), hue.getContactPerson(),
                                                       hue.getCoordinates(), hue.getCreated(),
                                                       hue.getDescription(), hue.getEmail(), hue.getFeatureType(),
                                                       hue.getHierarchylevel(), hue.getLastUpdated(), 
                                                       hue.getName(), hue.getOpeningdate(), hue.getOrganisationunitid(),
                                                       hue.getPath(), hue.getPhoneNumber(),
                                                       hue.getShortname(), hue.getUid(),hue.getUrl(),hue.getUserid(),hue.getUuid(),hue.getParentid()), node);
            recursiveList(organisationUnitSubList, hue.getOrganisationunitid(), childNode);
            childNode.setExpanded(false);

        }
        
       
    }

    public void setOrganisationUnitList(List<Organisationunit> organisationUnitList) {
        this.organisationUnitList = organisationUnitList;
    }

    public List<Organisationunit> getOrganisationUnitList() {
        return organisationUnitList;
    }


    public void setRoot(TreeNode root) {
        this.root = root;
    }

    public TreeNode getRoot() {
        return root;
    }

    public void setSelectedNode(TreeNode selectedNode) {
        this.selectedNode = selectedNode;
    }

    public TreeNode getSelectedNode() {
        return selectedNode;
    }

}


Bound to UI
1. (Primefaces Tree)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core" 
xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui">
        <h:head></h:head>
        <h:body>
            <h:form>
            <h:panelGrid columns="1" >
                <p:scrollPanel style="height:1500px;border:none" mode="native" >
                    <p:tree value="#{OrgBean.root}" var="node" dynamic="false" id="HRTree_id" style="width:100%"
                            selectionMode="single" selection="#{OrgBean.selectedNode}" draggable="true"
                            droppable="true">
                        <!--p:ajax event="dragdrop" listener="#{OrgBean.onDragDrop}" update=":mainForm:spm"/-->
                        
                        <p:treeNode>
                            <p:commandLink value="#{node.name}" />
                         </p:treeNode>
                        
                        <!--p:ajax event="select" listener="#{OrgBean.onTreeSelection}"
                                update=":mainForm:hustab:pnid"/-->
                                
                    </p:tree>
                    </p:scrollPanel>
                </h:panelGrid>
            
            </h:form>
        </h:body>
    </html>


2. JQxWidget


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">
    <head jsf:id="hd">
        <title id='Description'>In this demo the jqxInput is bound to JSON data.</title>
        <link rel="stylesheet" href="resources/jqwidgets/styles/jqx.base.css" type="text/css"/>
        <script type="text/javascript" src="resources/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="resources/scripts/demos.js"></script>
        <script type="text/javascript" src="resources/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="resources/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="resources/jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="resources/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="resources/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="resources/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="resources/jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="resources/jqwidgets/jqxradiobutton.js"></script>
        <script type="text/javascript" src="resources/jqwidgets/jqxcheckbox.js"></script>
    </head>
    <body>
    
    
    <script type="text/javascript">
            $(document).ready(function () {
            var url = 'http://127.0.0.1:7101/jhtml/faces/rest/PEws/orgunits'
            // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'organisationunitid' },
                        { name: 'parentid' },
                        { name: 'name' },
                        { name: 'organisationunitid' },
                        { name: 'shortname' },
                    ],
                    id: 'organisationunitid',
                    url: url,
                    async: false
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                var records = dataAdapter.getRecordsHierarchy('organisationunitid', 'parentid', 
                'items', [{ name: 'shortname', map: 'label'},
                          { name: 'organisationunitid', map: 'id'}
                          ]);
                $('#jqxWidget').jqxTree(
                                        { source: records, 
                                          width: '300px',
                                          checkboxes: false});
            });
        </script>
        <div id='jqxWidget'>
        </div>
    
    </body>
</html>


Bind the JQxWidget Tree to a json


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.test;

import com.dhis.JavaSF;
import com.dhis.Organisationunit;

import java.util.List;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

@Path("/PEws")
public class PEws {
    @GET
    @Path("orgunits")
    @Produces(MediaType.APPLICATION_JSON)
    public List<Organisationunit> orgunit() {
        JavaSF jsf = new JavaSF();
       return jsf.getOrganisationunitFindAll();

    }
}

web.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = '1.0' encoding = 'UTF-8'?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <context-param>
        <param-name>javax.faces.FACELETS_VIEW_MAPPINGS</param-name>
        <param-value>*.jsf;*.xhtml</param-value>
    </context-param>
    <servlet>
        <servlet-name>Jersey REST Service</servlet-name>
        <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
        <init-param>
            <param-name>jersey.config.server.provider.packages</param-name>
            <param-value>com.test</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <context-param>
        <param-name>facelets.SKIP_COMMENTS</param-name>
        <param-value>true</param-value>
    </context-param>
    <servlet-mapping>
        <servlet-name>Jersey REST Service</servlet-name>
        <url-pattern>/rest/*</url-pattern>
    </servlet-mapping>
</web-app>

A hybrid Android and IOS Mobile Chat app

Project :   Development of a simple extensible chat  Technologies and Frameworks Oracle Mobile Application Framework (MAF) Oracle Java ...