This article aims to explain how the inContext edit works for a SitePublisher page. I initially dug in as I wanted to understand how it worked in order to try to resize some elements. Still, this explains how some of the work in it is done.

When you edit a component in context, you end up with a URL like
all requests for java web applications are routed though web.xml which defines the servlets that handle the requests based on patterns. is handled by the action servlet (as per httpd/webapps/content_center/WEB-INF/web.xml).

The servlet itself is defined with the following:

We can see that the struts servlet has a configuration file /WEB-INF/struts/struts-config.xml.
Struts defines a series of actions and routes the requests to the actions.

When we’re doing edit on a page, the path of the request is /iw-cc/Site/Page/…
so based on that knowledge, the action for this request is this one:

    <action path=”/Site/Page/Edit” parameter=”method” type=”” name=”pageEditForm” scope=”request”>
      <forward name=”dispatchPageEdit” path=”/Site/Page/” redirect=”true”/>
      <forward name=”openPageEdit” path=”/livesite/Site/Page/Edit/OpenPageEdit.jsp” redirect=”false”/>
      <forward name=”sessionConflict” path=”/livesite/Site/Page/Edit/SessionConflict.jsp” redirect=”false”/>
      <forward name=”sessionDirty” path=”/livesite/Site/Page/Edit/SessionDirty.jsp” redirect=”false”/>
      <forward name=”pageEdit” path=”/livesite/Site/Page/Edit/Edit.jsp” redirect=”false”/>
      <forward name=”hidden” path=”/livesite/Site/Page/Edit/EditHidden.jsp” redirect=”false”/>
      <forward name=”submitWorkflow” path=”/livesite/pageEdit-start-workflow.jsp” redirect=”false”/>
      <forward name=”noSite” path=”/livesite/Site/Page/Edit/NoSite.jsp” redirect=”false”/>
      <forward name=”addComponentToPage” path=”/livesite/Site/Page/Edit/AddComponentToPage.jsp” redirect=”false”/>
      <forward name=”paletteFreestyleLayout” path=”/livesite/Site/Page/Edit/Palette.jsp” redirect=”false”/>
      <forward name=”managementConsoleFreestyleLayout” path=”/livesite/Site/Page/Edit/ManagementConsole.jsp” redirect=”false”/>
      <forward name=”paletteFixedLayout” path=”/livesite/Site/Page/Edit/FixedLayoutPalette.jsp” redirect=”false”/>
      <forward name=”managementConsoleFixedLayout” path=”/livesite/Site/Page/Edit/FixedLayoutManagementConsole.jsp” redirect=”false”/>

The action associates the method parameter of our request URL with the name and forwards the request to a jsp, in the case of pageEdit, that would be /livesite/Site/Page/Edit/Edit.jsp.
This jsp resides inside the web application so the path on the server, relative to the teamsite installation, translates to httpd/webapps/content_center/livesite/Site/Page/Edit/Edit.jsp.

Edit.jsp includes a few utilities javascript files, but also the two main ones for this activity, namely pageEdit.jsp and inContextEdit.jsp, both of them in livesite/javascript.
The load continues with the output of a hidden form (usefull later) and the dialog divs and then, includes the InContextEditor.jsp in the /livesite/includes/Page/Edit/ directory.

the InContextEditor.jsp outputs two divs, ModalInContextEdit and ContainerInContextEdit,the latter contains an iframe that points to /livesite/blank.html.
As its name suggests, blank.html is an empty file. This means that the content of the frame is empty at first and is populated dynamically a bit later, so we should look to javascript calls.

as an aside, InContextEditor.jsp includes resize.js, drag.js and snapgrid.js, commonly shared between most sitepublisher functions. In addition, the mysteriously named /livesite/includes/3p/ext/include-script.jsp is included.
This script includes another two scripts, /livesite/includes/3p/ext/js/ext-base.js and ext-all.js, which seem to be some library to manipulate the divs, positions and such-like.

Once the page is loaded (Edit.jsp), the HtmlUtil.addEventHandler is called to add an onload event to call the startPageEdit function, in pageEdit.jsp (it’s a javascript).
startPageEdit() sets the edit mode to inContextEdit if need be and calls reloadChildWindows(), which reloads the console to the right and the palette window to the left.
The reload mechanism is achieved by submitting the hidden form (discussed earlier) to the iframe, achieving a reload with all the required content.
The first parameter of the submit is the method parameter (the same method parameter as before for, which defines what actually ahppens), the second is the name of the iframe it gets loaded in.
In our case, this means the console and the palette.

It is the setEditmode function which is of interest. It calls the toggleEditMode function which in turn calls toggleInContextEditMode();
It is this function that we believe sets the scene for in context editing and sizing the in context edit frames.

in inContextEdit.jsp, the function pollenableInContextEdit is called. It prevents people from moving and resizing things around and then enables the incontext edit in the function enableInContextEdit.

Somwhere along the line (I must admit I can’t find the call for now and stopped looking once I found it), the function initInContextEditElements must be called to set the behaviour of the in-context-editable sections, and set the onclick event which will populate the iframe with the DCR element we clicked on and show the div containing the iframe.
The onclick is a function named dispatchInContextEdit which invokes the servlet (as before with the action servlet defined in web.xml) by submitting the form to it with the dispatchInContextEdit method and populates the InContextEditFrame.

Once received by the server, the request is routed to the action servlet which (from struts-config.xml) invokes /livesite/Site/Page/Edit/InContextEditDispatch.jsp.
This is where we will modify the frame properties.

InContextEditDispatch.jsp, IframeInContextEdit, iceIFrame()

first, the jsp loads some javascript libraries, including tiny_mce. None of them seem of particular interest at this point and seem to do run-of-the-mil interwoven stuff (if there is such a thing).
Then, the page defines its own set of javascript functions:

Then comes a HTML form pointing to /Site/Page/Edit/InContextUpdate, which makes us of the presubmit javascript function. The form is quite long and includes:
a few hidden input fields for method, vpath and such like
a few infoboxes to display success or warning messages,
a few hidden input fields to store some DCR properties
the dcrEditFrame, initially sized at 540 wide and 100%.
the Finish, Cancel buttons at the bottom.

The body of the document has an onLoad method executing startInContextEdit(). It executes initInContextEditor (within inContextEdit.jsp) and passes it the current frame (IframeInContextEdit).
This sizes the outter frame. After the sizing of the whole IframeInContextEdit, the dcrEditFrame’s src attribute is updated with the form that allows you to edit the content of the DCR.
This form is located at /command/iw.livesite.edit_dcr so we’ll need to resolve this address and see where it leads.

In order to do that, We’re back in web.xml and we find this url would be served by the commandServlet

The servlet itself resolves to this class:

in /apps/interwoven/teamsite/httpd/webapps/content_center/WEB-INF/conf/livesite/commands.xml, we find the following entry:
  <command id=”iw.livesite.edit_dcr”>
    <operation id=”GenerateForm”/>
    <command-param id=”wizard_id” value=”iw.livesite.edit_form”/>

This tells us it is a wizard. We find wizard configuration in the WEB-INF/conf folders, so ours is in livesite. Looking at the file names, wizard_edit_dcr.xml is the right one with the wizard id matching.

<wizard id=”iw.livesite.edit_form”

the first step points to a command (which really does nothing but is being checked to see if you can execute it). If the command has executed ok, it forwards to
/ccpro/formspub/wizard_datacapture.jsp, which is the datacapture form we’re after. This jsp includes a javascript /formspub/wizard/wizard_datacapture.js and executes the dc_wizard_initialize function wich also executes the dc_initForm() function.

All in a days work…


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s