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:
- Pages rendered in the navigation widget have a drag handle associated with them. You can use it to drag a page to the required location.
- You can also arrange portlets by using drag-and-drop. The portlet title bar serves as the drag handle. As you drag the portlet over the other portlets or empty containers on the page, the shadow appears. The shadow is a preview place holder that appears in the container as you hover over a target; it serves to show how the layout would look like if the portlet is dropped.
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 wcm7|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 wcm7|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
This defines the CSS class name that is placed on a layout container.
object
This defines the class module of the DND source.
orientation
This defines the type of container on which you place the definition. Specify vertical or horizontal.
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 wcm7|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 wcm7|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:
- 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 wcm7|PORTAL_HOME]]/theme/wp.theme.dojo/installedApps/dojo/[node]/Dojo_Resources.ear/dojo.war/v1.4.3/com/ibm/dnd
ModeledSource.js
This source class provides dnd operational support to a modeled widget. You can extend it to provide different drop actions and drop zones, depending on the type of data that is dragged around.
PageAvatar.js
This class constructs the avatar for page tabs by overriding the default Dojo implementation. Opacity for the avatar is applied by the class ibmPortalDndPageAvatar assigned by the creator method. To restyle the page avatar, modify the class ibmPortalDndPageAvatar. It is located in the file WP_PROFILE/installedApps/node/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/portal.css
PageCreator.js
This class creates the node used as the avatar while dragging. By default this is a gray box with the page title.
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
This toggles drag-and-drop with in the widget. Default is true./ul>
dndType
This is the type specified for page nodes. The default value is cmNode.
dndAccept
This is the type that page nodes accept. The default value is cmNode.
dndCreator
This is the creator method that creates the avatar node. The default value is com.ibm.dnd.PAGE_CREATOR.creator.
Avatars
To modify the avatars, the portal provides a creator function. For portlets it is located in the file PortletMediator.js; for pages it is located in the PageCreator.js. The method creator checks whether the hint parameter is equal to avatar. If yes, it creates the node used to display while dragging. refer to the following example:
creator: function(item, hint){
if(hint=="avatar"){
...
Modify this code to create a custom node that is to be used as the avatar.
The default avatar is the portlet markup itself.
...
}else{
...
When there is no avatar creator function given, a default avatar is created.
The default avatar is based on the one defined in dojo.dnd.Source
in the functions _normalizedCreator/onDropExternal."
...
}
}
Parent Work with Page Builder
Related
Work with page builder navigation
Page builder menus
Page builder iWidgets
Previous
Create top level page tabs
Move page tabs
Create child pages
Move child pages
Add content
Change page style
Change page layout
Hide content
Share pages
Use a different Dojo version
Related reference
Hints and tips for page builder
Related information
Dojo drag and drop: docs.dojocampus.org/dojo/dnd
|