Page builder drag-and-drop

One of the features of the page builder is its drag-and-drop capability.

In Page Builder you can drag-and-drop two types of resources, pages and portlets:


Limitations: The page builder drag-and-drop feature does not support multi-selection and copying resources.

For details about Dojo and drag-and-drop refer to the documentation link given below.


Portlet drag-and-drop

The file config_js.jsp , which is included by the config.jsp dynamic-content spot, contains the object ibmCfg.themeConfig . This object specifies a parameter named dndSourceDefinitions that defines the available drag and drop sources that can be applied to the layout.

The location of the file config.jsp is as follows:

[[Directory structure wp7|PORTAL_HOME]]/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/ PageBuilder2.war/themes/html/PageBuilder2/

The location of the file config_js.jsp is as follows:

[[Directory structure wp7|PORTAL_HOME]]/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/ PageBuilder2.war/themes/html/PageBuilder2/js/

Use the parameter dndSourceDefintions to add a new drag and drop source as follows:

dndSourceDefinitions:  [ 
   {id:"ibmDndColumn", object:"com.ibm.pb.dnd.layout.LayoutColumnSource", 
                       orientation: "vertical"}, 
   {id:"ibmDndRow",    object:"com.ibm.pb.dnd.layout.LayoutRowSource", 
                       orientation: "horizontal"} 
] 

Each item in the DND source definition array consists of the following three parts:
id


object


orientation

The portlet default drag-and-drop sources defined in the DND source definition dndSourceDefinitions as the object parameters are located with the portal Dojo Resources application. The location of the classes is as follows:

[[Directory structure wp7|PORTAL_HOME]]theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/v1.4.3/com/ibm/pb/dnd/layout/

The initialization of drag-and-drop on a page is performed by the init method in the class com.ibm.pb.control.DNDController . The DND Controller is subscribed to the page change event that is broadcast when entering page edit mode. When the page change event is broadcast, the DND controller handles the intialization of DND for the layout. The location of the DND Controller is as follows:

[[Directory structure wp7|PORTAL_HOME]]theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/v1.4.3/com/ibm/pb/control/

To apply a new drag and drop source to a layout, proceed as follows:

  1. Add a new source definition to the array ibmCfg.themeConfig.dndSourceDefintions in the following form:

      {id:"semantic_CSS_class_to_place_on_a_layout_container", 
           object:"dojo_module_path", orientation: "vertical"}

      Example:

      {id:"newDndSourceCSS", object:"custom.DNDSource", orientation: "vertical"}

      2. Add the CSS class defined in the dndSourceDefinitions to applicable containers in a layout template as follows:

      <div class="component-container ibm1Col newDndSourceCSS" name="ibmMainContainer"></div>  

Your new drag-and-drop source is now applied to the page layout. When the DND Controller initializes, it finds the class newDNDSourceCSS on the container, performs the mapping to the custom.DNDSource, and instantiates that object.


Page drag-and-drop

The page drag-and-drop classes are located with the portal Dojo Resources application. The location of the classes is as follows:

[[Directory structure wp7|PORTAL_HOME]]/theme/wp.theme.dojo/installedApps/dojo/[node]/Dojo_Resources.ear/dojo.war/v1.4.3/com/ibm/dnd
ModeledSource.js


PageAvatar.js


PageCreator.js

The navigation widget has several parameters passed in to enable and modify drag-and-drop behavior. The navigation widgets are initialized within the Tab Menu - Page Builder theme by the file NavWidget.jspf.
dndEnabled