Event Handling: Expanding a Node

 

You want the user of this application to be able to expand nodes in the tree to display the folders and files that they contain.

It was already mentioned in step 2 that there are two ways to create the contents of the tree that are to be displayed. In the less performance-efficient variant, you create the entire content of the tree during initialization and transfer a large amount of data to the browser. This would certainly be a viable option in the case of a small tree, where no event handling, no LoadChildren action, and no parameter mapping is required. Since the context is filled in the TreeView, you can expand and collapse nodes without establishing a connection to the server.

However, in this application it is possible that a very large amount of data will be displayed in the tree and that the user will not expand every node. Therefore, it is more efficient to only load the data that the user wants to see into the context. You have already made the necessary steps to meet the requirements so that data is only loaded when a node is expanded for the first time. You have defined the LoadChildren action, which contains a node element as a parameter. You have bound this action to the event onLoadChildren of the tree node. You have also implemented a parameter mapping between the UI element event and the action event handler.

You now need to carry out the last step, which is to add the required source code in the method onActionLoadChildren(…), to load data for the selected node. This method is only executed once for each node, because, as already described, the data is then available in the browser and does not have to be loaded again.

You can reuse the private method addChildren(…) that you created for context initialization purposes.

Procedure

...

       1.      To open the TreeView, double-click TreeView in the project structure in the Web Dynpro Explorer.

       2.      Choose the Implementation tab page.

       3.      Enter the following lines in the method onActionLoadChildren():

public void onActionLoadChildren(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent, com.sap.tut.wd.tree.wdp.IPrivateTreeView.ITreeNodeElement element )   {     //@@begin onActionLoadChildren(ServerEvent)       addChildren(element);     //@@end   }

Result

You have added all the necessary lines in the method onActionLoadChildren(..) to load data for a node when it is selected.

Next step:

Event Handling: Selecting an Entry