HowTo: Integrate MediaBin with LiveSite using the ECM Connector 2.0

shanon

HowTo: Integrate MediaBin with LiveSite using the ECM Connector 2.0

REQUIREMENTS

• TeamSite 6.5 with Service Pack 2 and all latest patches.
  
  ( Latest patches are available at https://support.interwoven.com )
  
  NOTE: TeamSite 6.7.0 is not currently supported
  
  
  
• LiveSite 2.1 or higher
  
  
  
• MediaBin 4.5.2 or higher
  

DESCRIPTION

The Enterprise Content Management (ECM) Connector v2.0 was released for TeamSite 6.5 SP2 in late March 2006 as a TeamSite patch. It provides access to MediaBin and WorkSite MP via FormsPublisher DCTs and Workflow. This tech note focuses on the MediaBin portion of the connector and how to integrate it into LiveSite components.

LiveSite components are built upon the concept of Datums. A variety of Datums types exist, each mapping to a different form widget. For example, the "String" Datum is a text box, the "SelectMultiple" Datum is a multi-select widget. The MediaBin integration will focus on two Datum types: File and Image*.

* Image Datum available for LiveSite 2.2.1 or greater only.

This integration is centered around the "Customer Toolkit" which is exposed in TeamSite and enables customer-specific enhancements to ContentCenter Standard/Professional. Users should be familiar with the Customer Toolkit before performing this integration -- consult the TeamSite UITK documentation ( see REFERENCES below ).


ASSUMPTIONS

The ECM 2.0 connector is installed and working with your TeamSite and MediaBin instances. You may test this functionality via the File > Import command. After selecting this command, you should see three options:

• Browse to the customer toolkit directory, herein referred to as

  <customer_tk>

  :

  <iwhome>/local/config/lib/content_center/customer_src

  
  
• Edit the

  etc/conf/customer/ui_custom.xml

  and add in the following

  <action-list> definition

  :

  <br>   <action-list id="iw.livesite.datum_property_file.action_list"<br>                 resourceBundle="com.interwoven.livesite.common" <br>                 public="true"><br><br>      <link id="iw.livesite.mediabin_import.link"<br>            refid="_iw.teamsite.common.hierbrowser_popup.link"<br>            label="Import from MediaBin"<br>            icon="/teamsite/images/command_icons/icn_import.gif"<br>            url="/customer/livesite/ecm_mediabin_import.jsp"<br>            target="_blank"<br>            public="true"><br>            <url-param id="method" value="import" />            <br>      </link><br><br>    </action-list><br>

  Note that the

  label

  and

  icon

  attributes may be changed as necessary without affecting the functionality.
  
  
  
• Copy the attached .jsp.txt file to:

  <customer_tk>/web/customer/livesite/ecm_mediabin_import.jsp

  , creating sub-directories as necessary.
  
  
  
• Open a command prompt (win) or console (*nix) and change directories to

  <customer_tk>

  .
  
  
  
• Execute

  make_toolkit.ipl

  to integrate the changes with Content Center.

  <iwhome>/iw-perl/bin/iwperl <iwhome>/bin/make_toolkit.ipl
  

  After completing this step, you should see a BUILD SUCCESSFUL message.
  
  

CREATING THE MEDIABIN IMAGE COMPONENT

• Log into ContentCenter Professional as a master user and browse to the following vpath:

  /livesite/main/component

  
  
• Create a workarea in this branch for component development ( or use one that already exists for this purpose ). Note that you should not use the "Installed Components" workarea as this should be used for LiveSite Import/Export only.
  
  We will assume that the workarea's name is

  dev

  .
  
  
  
• Click the Get Latest button from the workarea-root to ensure that it has all of the components from the STAGING area.
  
  
  
• Browse to the

  LiveSite

  sub-directory and execute the File > New Component command.
  
  
  
• Select XML/XSL and the click Ok button. The Edit Component window will popup.
  
  
  
• Enter "MediaBin Image" as the name of the component.
  
  
  
• Copy and paste the following code block into the Content XML text area:

  <Data><br>  <!-- <br>   * Image Datum is available with LiveSite 2.2.1 or greater only.<br>   * If using a pre-2.2.1 release, comment out or remove the following Datum<br>   --><br>  <Datum ID="mediabin-image" Name="MediaBin Image" Type="Image"><br>    <Image><br>      <Path></Path><br>      <Description></Description><br>    </Image><br>  </Datum><br>   <br>  <!--<br>   * File Datum is available with ALL LiveSite releases.<br>   --><br>  <Datum ID="mediabin-file" Name="MediaBin File" Type="File"></Datum><br></Data>

• Now click the Preview button and then the Set Default Content button to view the component's Content Properties.
  
  There is now an "Import from MediaBin" link on the right side of the action-list that's below the Image Datum's Path property and the File Datum's text area.
  
  
  
  
  
• Click the Import from MediaBin link and the MediaBin Browser will appear in a popup window.
  
  This window is very similar to the FormsPublisher interface to ECM2.0 and is used in the same manner. The MediaBin features such as Search, Properties, and Find Similar are all exposed via this interface.
  
  
  
  In this case, I've selected an image that's in the "L10N tests" folder which is a sub-folder of the MediaBin root. After clicking the Ok button, the file will be imported into the default MediaBin import folder that was configured in the MediaBin section of ContentCenter Professional's Administration tab. In this case, that directory is

  imported/images

  . The relative path of the asset in MediaBin is appended to the import directory to form the complete workarea-relative path in TeamSite:

  imported/images/L10N tests/French conducteur de musique.jpg

  .
  
  After the import completes, the popup window will automatically close and the Datum property will be set to the newly imported asset.
  
  
  
  
  
• Click the Ok button to close the Content Properties window, then the Close button to close the Component Preview window. After clicking Close the Edit Component window will automatically be brought into focus.
  
  
  
• Now we'll add in a simple XSL skin to display the image. Copy and paste the following code block into the Appearance XSL text area:

  <!DOCTYPE html-entities SYSTEM "<a href="http://www.interwoven.com/livesite/xsl/xsl-html.dtd"><br><xsl:stylesheet" target="_blank">http://www.interwoven.com/livesite/xsl/xsl-html.dtd"><br><xsl:stylesheet</a> version="1.0" xmlns:xsl="<a href="http://www.w3.org/1999/XSL/Transform"><br>" target="_blank">http://www.w3.org/1999/XSL/Transform"><br></a>  <!-- Skin: Default (Default Browser Type) --><br><br>  <xsl:include href="<a href="http://www.interwoven.com/livesite/xsl/HTMLTemplates.xsl"/><br>" target="_blank">http://www.interwoven.com/livesite/xsl/HTMLTemplates.xsl"/><br></a>  <xsl:include href="<a href="http://www.interwoven.com/livesite/xsl/StringTemplates.xsl"/><br>" target="_blank">http://www.interwoven.com/livesite/xsl/StringTemplates.xsl"/><br></a>  <xsl:template match="/"><br>    <div><br><br>      <!-- <br>       * set the width and height to 100% so that the image is stretched as the "div" <br>       * element is resized.<br>       --><br>      <image style="width:100%;height:100%"><br><br>        <!-- use xsl:attribute to set the "src" attribute in the "image" element above. --><br>        <xsl:attribute name="src">            <br>          <xsl:choose><br><br>            <!-- if the Image Datum is populated, use that instead of the File Datum --><br>            <xsl:when test="/Properties/Data/Datum[@ID='mediabin-image']/Image/Path != ''"><br>              <xsl:value-of select="/Properties/Data/Datum[@ID='mediabin-image']/Image/Path" /><br>            </xsl:when><br><br>            <!-- default to the File Datum - if nothing is populated, the src will be blank. --><br>            <xsltherwise><br>              <xsl:value-of select="/Properties/Data/Datum[@ID='mediabin-file']" /><br>            </xsltherwise><br><br>          </xsl:choose>      <br>        </xsl:attribute><br><br>      </image><br>    </div><br>  </xsl:template><br></xsl:stylesheet><br>

• Click the Preview button to see the finished component displayed in the Preview window. Check the Enable Drag and Drop option and drag the lower-right corner of the image to see how it is automatically resized along with the component.
  
  
  
  
  
• Click the Close button to return to the Edit Component window and click the Finish button to save the MediaBin Image component.
  
  

Congratulations, you've now successfully integrated the ECM connector 2.0 with LiveSite's File and Image Datums and created a versatile image component. Don't forget to Submit the component to the STAGING area if you'd like to expose it to your user community. Also, all of your existing components that use Image and/or File Datums will automatically have the "Import from MediaBin" link exposed.

REFERENCES

* ECM 2.0 Integration Guide: PDF ( Support Login Required )

* TeamSite 6.5.2 UI Toolkit: PDF ( Support Login Required )