{"id":349,"date":"2011-01-20T23:07:00","date_gmt":"2011-01-20T23:07:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/advanced-smartgwt-tutorial-part-2.html"},"modified":"2012-10-21T19:32:58","modified_gmt":"2012-10-21T19:32:58","slug":"advanced-smartgwt-tutorial-part-2","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2011\/01\/advanced-smartgwt-tutorial-part-2.html","title":{"rendered":"Advanced SmartGWT Tutorial, Part 2"},"content":{"rendered":"

This is the second part of my tutorial regarding rapid UI development with SmartGWT<\/a>. In the first part of the tutorial<\/a>, we created the basic interface layout and added some basic components. It is now time to take it up a notch and use the real power of SmartGWT<\/a>.<\/p>\n

Before we proceed, let’s remember how the UI we have created so far looks like:<\/p>\n

\"\"<\/a><\/p>\n

After we have completed this tutorial, here is what the UI will have transformed into:<\/p>\n

\"\"<\/a><\/p>\n

We will have to revisit some of the existing classes in order to define additional functionally to them. Let’s start with the NavigationArea class. There we used the SectionStack<\/a> class for the creation of an accordion. However, each of the stack sections contained just a plain label. We are going to add something more useful, navigation wise. We will use a tree for the navigation pane, where each leaf will essentially represent an action. For this, we are going to extend the TreeGrid<\/a> class by defining specific characteristics to out implementation. Hence, here is the \u201cNavigationTreeGrid\u201d class:<\/p>\n

package com.javacodegeeks.smartgwt.appui.client.ui.widgets;\r\n\r\nimport com.smartgwt.client.types.SelectionStyle;\r\nimport com.smartgwt.client.types.TreeModelType;\r\nimport com.smartgwt.client.util.SC;\r\nimport com.smartgwt.client.widgets.tree.Tree;\r\nimport com.smartgwt.client.widgets.tree.TreeGrid;\r\nimport com.smartgwt.client.widgets.tree.TreeNode;\r\nimport com.smartgwt.client.widgets.tree.events.NodeClickEvent;\r\nimport com.smartgwt.client.widgets.tree.events.NodeClickHandler;\r\n\r\npublic class NavigationTreeGrid extends TreeGrid {\r\n    \r\n    public NavigationTreeGrid() {\r\n        \r\n        setNodeIcon(\"arrow_down.png\");  \r\n        setFolderIcon(\"arrow_up.png\");  \r\n        setShowOpenIcons(false);\r\n        setShowDropIcons(false);\r\n        setShowSelectedStyle(true);  \r\n        setShowPartialSelection(true);  \r\n        setCascadeSelection(false);\r\n        setCanSort(false);\r\n        setShowConnectors(true);\r\n        setShowHeader(false);\r\n        setLoadDataOnDemand(false);\r\n        setSelectionType(SelectionStyle.SINGLE);\r\n        \r\n        Tree data = new Tree();\r\n        data.setModelType(TreeModelType.CHILDREN);\r\n        \r\n        data.setRoot(\r\n                new TreeNode(\"root\", \r\n                        new TreeNode(\"File\",\r\n                                new TreeNode(\"FileChild\")), \r\n                        new TreeNode(\"Edit\",\r\n                                new TreeNode(\"EditChild\",\r\n                                        new TreeNode(\"EditGrandChild\"))), \r\n                        new TreeNode(\"Window\"))\r\n        );\r\n\r\n        setData(data);\r\n        \r\n        addNodeClickHandler(new NodeClickHandler() {            \r\n            @Override\r\n            public void onNodeClick(NodeClickEvent event) {\r\n                String name = event.getNode().getName();\r\n                SC.say(\"Node Clicked: \" + name);\r\n            }\r\n        });\r\n        \r\n    }\r\n\r\n}\r\n<\/pre>\n
We first define some attributes for our tree, the more important being: <\/p>\n