Vaadin 7 hierarchical container and TreeComponent example with Liferay OrganizationService

I recently needed a portlet to display the Organizations/Locations a user belongs to in a Hierarchical Tree. I used Vaadin’s tree and hierarchical container components along with information from Vaadin’s book of examples to create the code below (http://demo.vaadin.com/book-examples-vaadin7/book#component.tree.itemstylegenerator).

See DmoOrgTreeUI.java for full source code.

Java

  1. private void buildMainLayout() throws SystemException, PortalException {
  2.   if (viewContent.getComponentCount() > 0) {
  3.       viewContent.removeAllComponents();
  4.   }
  6.   viewContent.setMargin(true);
  7.   viewContent.addStyleName("view");
  9.   List orgList = new ArrayList();
  10.   orgList = OrganizationLocalServiceUtil.getUserOrganizations(user.getUserId());
  11.   final HierarchicalContainer container = createTreeContent(orgList);
  13.   tree = new Tree("My Organizations", container);
  14.   tree.addStyleName("checkboxed");
  15.   tree.setSelectable(false);
  16.   tree.setItemCaptionMode(ItemCaptionMode.PROPERTY);
  17.   tree.setItemCaptionPropertyId("name");
  18.   tree.addItemClickListener(new ItemClickEvent.ItemClickListener() {
  19.     public void itemClick(ItemClickEvent event) {
  20.       if (event.getItemId().getClass() == Long.class) {
  21.         long itemId = (Long) event.getItemId();
  22.         if (checked.contains(itemId)) {
  23.           checkboxChildren(container, itemId, false);
  24.         }
  25.         else {
  26.           checkboxChildren(container, itemId, true);
  27.           tree.expandItemsRecursively(itemId);
  28.         }
  29.       }
  30.       tree.markAsDirty();
  31.     }
  32.   });
  34.   Tree.ItemStyleGenerator itemStyleGenerator = new Tree.ItemStyleGenerator() {
  35.     @Override
  36.     public String getStyle(Tree source, Object itemId) {
  37.       if (checked.contains(itemId))
  38.         return "checked";
  39.       else
  40.         return "unchecked";
  41.     }
  42.   };
  43.   tree.setItemStyleGenerator(itemStyleGenerator);
  45.   viewContent.addComponent(tree);
  46.   viewContent.setVisible(true);
  47.   setContent(viewContent);
  48. }
  50. public void checkboxChildren(HierarchicalContainer hc, long itemId, boolean bAdd) {
  51.   try {
  52.     if (bAdd) {
  53.       checked.add(itemId);
  54.     }
  55.     else {
  56.       checked.remove(itemId);
  57.       Object iParendId = hc.getParent(itemId);
  58.       while (iParendId != null) {
  59.         checked.remove(iParendId);
  60.         iParendId = hc.getParent(iParendId);
  61.       }
  62.     }
  64.     if (hc.hasChildren(itemId)) {
  65.       Collection children = hc.getChildren(itemId);
  66.       for (Object o : children) {
  67.         if (o.getClass() == Long.class) {
  68.           itemId = (Long) o;
  69.           checkboxChildren(hc, itemId, bAdd);
  70.         }
  71.       }
  72.     }
  73.   }
  74.   catch (Exception e) {
  75.       Notification.show("Unable to build Organization tree.  Contact Administrator.", Type.ERROR_MESSAGE);
  76.   }
  77. }
  79. public static HierarchicalContainer createTreeContent(List oTrees)
  80.     throws SystemException, PortalException {
  82.   HierarchicalContainer container = new HierarchicalContainer();
  83.   container.addContainerProperty("name", String.class, "");
  85.   new Object() {
  86.     @SuppressWarnings("unchecked")
  87.     public void put(List data, HierarchicalContainer container)
  88.         throws SystemException, PortalException {
  90.       for (Organization o : data) {
  91.         long orgId = o.getOrganizationId();
  93.         if (!container.containsId(orgId)) {
  94.           container.addItem(orgId);
  95.           container.getItem(orgId).getItemProperty("name").setValue(o.getName());
  97.           if (!o.hasSuborganizations()) {
  98.             container.setChildrenAllowed(orgId, false);
  99.           }
  100.           else {
  101.             container.setChildrenAllowed(orgId, true);
  102.           }
  104.           if (o.isRoot()) {
  105.             container.setParent(orgId, null);
  106.           }
  107.           else {
  108.             if (!container.containsId(o.getParentOrganizationId())) {
  109.               List sub = new ArrayList();
  110.               sub.add(o.getParentOrganization());
  111.               put(sub, container);
  112.             }
  113.             container.setParent(orgId, (Object) o.getParentOrganizationId());
  114.           }
  115.         }
  116.       }
  117.     }
  118.   }.put(oTrees, container);
  120.   return container;
  121. }

Below is the css used

SCSS

  1. .v-tree-node-caption-disabled {
  2.   color: black;
  3.   font-style: italic;
  4.   //border-style:solid;
  5.   //border-width:1px;
  6. }
  8. .v-tree-checkboxed .v-tree-node-caption-unchecked div span {
  9.   background: url("images/unchecked.png") no-repeat;
  10.   padding-left: 24px;
  11.   //border-style:solid;
  12.   //border-width:1px;
  13. }
  15. .v-tree-checkboxed .v-tree-node-caption-checked div span {
  16.   background: url("images/checked.png") no-repeat;
  17.   padding-left: 24px;
  18.   //border-style:solid;
  19.   //border-width:1px;
  20. }