Liferay event details on adding portlets from DockBar

Part 1: Click the "ADD" process from the page to find the event handler function:

In Liferay, when we select a portlet from the left and add it, a series of actions are triggered and the portlet is eventually displayed on the page, and now we are spy the mysterious process.

On the page, in order to find the event handler we bound after clicking Add, we first find this code corresponding to the JSP page in/html/portlet/layout_configuration/view_category.jsp:

<div 
    class= "Lfr-portlet-item lfr-archived-setup" id= <portlet:namespace
    Portletitem.getportletitemid ()%> "
    instanceable=" <%= portletinstanceable%> "
    plid=" <%= plid% > "
    portletid=" <%= portlet.getportletid ()%> "
    portletitemid=" <%= portletitem.getportletitemid ( )%> "
    title=" <%= htmlutil.escape (Portletitem.getname ())%> "
> 
    <p><%= Htmlutil.escape (Portletitem.getname ())%> <a href= "javascript:;" ><liferay-ui:message key= "Add"/></a></p> 
</div>

As we studied yesterday, this text will not affect the triggering of the Add Portlet event (see http://supercharles888.blog.51cto.com/609344/908773) article. So we're sure that the click event is irrelevant to the display, and the page is not clicked anywhere except for the text (not triggering the Add Portlet event), so our event is ultimately bound to the <a> element because it's the only place that is different from the rest.

Finally, we found the place where the event binding is associated in the/html/js/liferay/layout_configuration.js, which is in the _loadcontent method:

_loadcontent:function () { 
                    var instance = this; 
     
                    Liferay.fire (' initlayout '); 
     
                    Instance.init (); 
     
                    Util.addinputtype (); 
     
                    Liferay.on (' Closeportlet ', Instance._onportletclose, instance); 
     
                    Instance._portletitems = Instance._dialogbody.all (' Div.lfr-portlet-item '); 
     
                    var portlets = Instance._portletitems; 
     
                    Instance._dialogbody.delegate ( 
                        ' MouseDown ', 
                        function (event) { 
                            var link = event.currenttarget; 
                            var portlet = Link.ancestor ('. Lfr-portlet-item '); 
     
                            Instance._addportlet (portlet); 
                        }, 
                        ' a '
                    );