Here’s how I did it…

I downloaded TinyMCE and extracted the files into a subfolder of my Sitecore filesystem at /js/tiny_mce. I also created a separate Javascript include file – /js/tiny_mce_init.js – to initialise the TinyMCE editor:

tinyMCE.init({
	// General options
	mode : "textareas",
	theme : "advanced",
	plugins : "safari,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,fullscreen,xhtmlxtras",

	// Theme options
	theme_advanced_buttons1 : "undo,redo,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bold,italic,underline,strikethrough,sub,sup,|,forecolor,backcolor,|,bullist,numlist,|,outdent,indent,blockquote",
	theme_advanced_buttons2 : "link,unlink,anchor,|,image,media,|,cite,abbr,acronym,attribs,|,insertdate,inserttime,charmap,emotions,iespell,|,removeformat,cleanup,code,|,fullscreen,preview,print,|,help",
	theme_advanced_buttons3: "",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,
	theme_advanced_resize_horizontal : false,

	// Example content CSS (should be your site CSS)
	content_css : "/styles/style-editor.css"
});

I also wanted to use the ASP.NET compressor for TinyMCE, which “…gzips all javascript files in TinyMCE to a single streamable file. This makes the overall download size 75% smaller and reduces the number of requests to the web server. The initialization time for TinyMCE will also be reduced dramatically by using this script.”

I downloaded the compressor and placed the tiny_mce_gzip.js and tiny_mce_gzip.aspx files in my /js/tiny_mce folder. I also copied the ICSharpCode.SharpZipLib.dll into the bin folder of my Sitecore web application. (NB if you need the latest version of this dll, you can get it here.)

To initialise the compressor, I had to create another Javascript file – /js/tiny_mce/tiny_mce_gzip_init.js – which looks like this:

tinyMCE_GZ.init({
   plugins : "advimage,safari,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,fullscreen,xhtmlxtras",
   themes : 'advanced',
   languages : 'en',
   disk_cache : true,
   debug : false
});

Not completely sure if this is necessary, but to be on the safe side, I added the path to the compressor .aspx file to IgnoreUrlPrefixes in the Sitecore Web.config file.

I then created a class in a separate web application project (with post-build event set to xcopy the dll into the Sitecore application’s bin folder) which inherits from a TextBox and implements the ITextEditor interface. In this class, we override the OnLoad method to inject the appropriate script include blocks.

using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using CommunityServer.Controls; namespace MT.Flag.LivingLife.Controls { public class MTTinyMCE : System.Web.UI.WebControls.TextBox, ITextEditor { public MTTinyMCE() : base() { } //we can probably remove this public void Configure() { if (this.Height.IsEmpty) this.Height = Unit.Pixel(400); if (this.Width.IsEmpty) this.Width = Unit.Percentage(100); if (this.Rows == 0) this.Rows = 20; if (this.Columns == 0) this.Columns = 20; } protected override void OnLoad(EventArgs e) { this.TextMode = TextBoxMode.MultiLine; base.OnLoad(e); Configure(); // register TinyMCE client script if (!this.Page.ClientScript.IsClientScriptIncludeRegistered("tinymce")) { this.Page.ClientScript.RegisterClientScriptInclude("tinymce", this.Page.Request.ApplicationPath.TrimEnd('/') + "/js/tiny_mce/tiny_mce_gzip.js"); this.Page.ClientScript.RegisterClientScriptInclude("tinymcegzipinit", this.Page.Request.ApplicationPath.TrimEnd('/') + "/js/tiny_mce/tiny_mce_gzip_init.js"); this.Page.ClientScript.RegisterClientScriptInclude("tinymceinit", this.Page.Request.ApplicationPath.TrimEnd('/') + "/js/tiny_mce_init.js"); } } public bool IsRichTextCapable { get { return true; } } bool _isAdmin = false; public string StyleName { get { throw new NotImplementedException(); } set { throw new NotImplementedException(); } } public bool EnableHtmlModeEditing { get { return _isAdmin; } set { _isAdmin = value; } } } }

The default text editor for the Forum module is defined in the /communityserver.config file. I changed the textEditorType attribute of the <Core> node to match the class and assembly of the new class above:

All done, and pretty painless in the end. Thanks to Andrey Kovalenko for pointing me in the right direction.

I can select all the relevant case studies using:
<xsl:variable name=”featuredall” select=”$sc_item//item[@template='case study' and sc:fld('featured',.)!='']” />

However, selecting a set of random items from this set isn’t as easy as it sounds. Using sc:random won’t work, because there’s a chance that the same case study will be used more than once.

After much head-scratching, I wrote an XSL Extension which returns a simple nodeset of random integers. This allows me to iterate through that nodeset, referring to the relevant position in my set of case study items…

The XSL Extension:

using System;
using System.IO;
using System.Xml;
using System.Xml.XPath;
using System.Xml.Xsl;
using System.Collections.Generic;
using System.Text;

namespace Flag08v2.classes
{
public class RandomTest
{

public XPathNodeIterator RandomSequence2(int n)
{

Random randomGen = new Random();

List<int> numbers = new List<int>(n);
for (int x = 1; x<=n; x++)
numbers.Add(x);

List<int> randNumbers = new List<int>(n);
for (int x = 0; x<n; x++)
{
int rn = randomGen.Next(numbers.Count);
int rnVal = numbers[rn];

randNumbers.Add(rnVal);
numbers.RemoveAt(rn);
}

Sitecore.Xml.Packet packet = new Sitecore.Xml.Packet("values", new string[0]);
foreach (int i in randNumbers)
packet.AddElement("value", i.ToString(), new string[0]);

XPathNavigator navigator = packet.XmlDocument.CreateNavigator();
navigator.MoveToRoot();
navigator.MoveToFirstChild();

return navigator.SelectChildren(XPathNodeType.Element);
}
}
}

Then, add the reference to the XSL Extension in the <xsl:stylesheet> declaration:

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:sc="http://www.sitecore.net/sc"
xmlns:dot="http://www.sitecore.net/dot"
xmlns:mt="http://www.flag.co.uk/random"
exclude-result-prefixes="dot sc"
>

And to iterate through the case studies (“maxfeatured” is the maximum number of case studies to show – I set this using a field elsewhere):

...

<xsl:variable name="featuredall" select="$sc_item//item[@template='case study' and sc:fld('featured',.)!='']" />
<xsl:for-each select="mt:RandomSequence2(count($featuredall))">
<xsl:if test="position() <= $maxfeatured or $maxfeatured = 0">
<xsl:variable name="thisNum" select="text()" />
<xsl:variable name="thisItm" select="$featuredall[position() = $thisNum]" />

Item <xsl:value-of select="text()"/> = <xsl:value-of select="sc:fld('title',$thisItm)"/>

</xsl:if>
</xsl:for-each>

Hope that makes sense!

Mike

This is how I did it…

My template for these “teasers” looks like this:

So, I have a Droplink which lets the user select a Flash movie from a specified folder in the Media Library, an Image which is also selected from a specified folder in the Media Library, and a General Link which determines where the teaser should link to.

In my content tree, I have a folder where I store “Teaser” objects:

On my “Home Page” template, I use a Multilist which points to this folder, so I can manually select which ones will appear on the home page.

 So, that’s the content structure in place. Now for the presentation stuff.

I decided to use Adobe’s Flash Player Detection script to do the actual embedding (available from Adobe’s web site). Flash movies in Sitecore have a .ashx extension, so I had to modify the script slightly because it hard-codes the extension as .swf in the AC_FL_RunContent() function. Just change the second parameter of the call to AC_GetArgs from “.swf” to an empty string “”:

// ...
// ...
function AC_FL_RunContent(){
var ret =
AC_GetArgs
( arguments, "", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
, "application/x-shockwave-flash"
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
// ...
// ...

I then added a Javascript helper function which calls this function (passing the link path to the Flash movie as a FlashVars parameter), and outputs a linked image for users without appropriate Flash support.

var flashInstance = 0;
function doTeaser (swfPath, swfWidth, swfHeight, swfMajorVersion, swfMinorVersion, swfRevision, swfBgColor, imgPath, imgWidth, imgHeight, imgAlt, linkPath)
{
    var hasRequestedVersion = DetectFlashVer(swfMajorVersion, swfMinorVersion, swfRevision);
    if (hasRequestedVersion)
    {
        AC_FL_RunContent(
        "src", swfPath,
        "width", swfWidth,
        "height", swfHeight,
        "align", "middle",
        "id", ("teaserFlash"+flashInstance++),
        "quality", "high",
        "bgcolor", swfBgColor,
        "name", ("teaserFlash"+flashInstance++),
        "allowScriptAccess","sameDomain",
        "type", "application/x-shockwave-flash",
        'codebase', 'http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab',
        "pluginspage", "http://www.adobe.com/go/getflashplayer",
        'FlashVars', 'linkurl='+linkPath
        );
    }
    else
    {
        var alternateContent = '<a href="' + linkPath + '"><img src="' + imgPath + '" alt="' + imgAlt + '" width="' + imgWidth + '" height="' + imgHeight + '" /></a>';
        document.write(alternateContent);
    }
}

So, now we need a rendering which writes a script tag calling this helper function, and a noscript tag which writes the flat image for users without Javascript. I had to work out how to access specific fields of the Flash and image objects in order to pass the raw values into the Javascript function.

The full rendering code, which iterates through all the selected teasers on the home page, is as follows:

<?xml version="1.0" encoding="UTF-8"?>

<!--=============================================================
    File: Home Page Teasers.xslt
    Created by: sitecore\mike
    Created: 02/07/2008 16:48:43
    Copyright notice at bottom of file
==============================================================-->

<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:sc="http://www.sitecore.net/sc"
  xmlns:dot="http://www.sitecore.net/dot"
  exclude-result-prefixes="dot sc">

<!-- output directives -->
<xsl:output method="html" indent="no" encoding="UTF-8" />

<!-- parameters -->
<xsl:param name="lang" select="'en'"/>
<xsl:param name="id" select="''"/>
<xsl:param name="sc_item"/>
<xsl:param name="sc_currentitem"/>

<!-- variables -->
<xsl:variable name="home" select="/*/item[@key='content']/item[@key='home']" />

<!-- entry point -->
<xsl:template match="*">
  <xsl:apply-templates select="$sc_item" mode="main"/>
</xsl:template>

<!--==============================================================-->
<!-- main                                                         -->
<!--==============================================================-->

<xsl:template match="*" mode="main">
    <xsl:variable name="ids" select="concat(sc:fld('teasers',.),'|')"/>
    <xsl:if test="string-length($ids)>1">
<ul class="teasers">
            <xsl:call-template name="doTeasers">
                <xsl:with-param name="ids" select="$ids"/>
            </xsl:call-template></ul>
</xsl:if>
</xsl:template>

<xsl:template name="doTeasers">
    <xsl:param name="ids"/>
    <xsl:if test="$ids">
        <xsl:variable name="itm_id" select="substring-before($ids, '|')"/>
        <xsl:variable name="itm_rest" select="substring-after($ids, '|')"/>
        <xsl:variable name="is_more" select="boolean(string-length($itm_rest)>0)"/>

        <xsl:if test="$itm_id">
            <xsl:variable name="itm" select="sc:item($itm_id,.)"/>
            <xsl:if test="sc:fld('flash',$itm)=''">
	<li>
                    <xsl:if test="not($is_more)">
                        <xsl:attribute name="class">last</xsl:attribute>
                    </xsl:if>
                    <sc:link select="sc:item(sc:fld('link',$itm,'id'),.)">
                        <sc:image field="image" select="$itm" />
                    </sc:link></li>
</xsl:if>
            <xsl:if test="sc:fld('flash',$itm)!=''">
	<li>
                    <xsl:if test="not($is_more)">
                        <xsl:attribute name="class">last</xsl:attribute>
                    </xsl:if>
                    <script type="text/javascript">
                        doTeaser("<xsl:value-of select="concat('/',sc:GetMediaUrl(sc:item(sc:fld('flash',$itm),.)))" />", <sc:text field="width" select="sc:item(sc:fld('flash',$itm),.)" />, <sc:text field="height" select="sc:item(sc:fld('flash',$itm),.)" />, <sc:text field="version" select="sc:item(sc:fld('flash',$itm),.)" />, 0, 0, "", "<xsl:value-of select="concat('/',sc:fld('image',$itm,'src'))" />", <sc:text field="width" select="sc:item(sc:fld('image',$itm,'mediaid'),.)" />, <sc:text field="height" select="sc:item(sc:fld('image',$itm,'mediaid'),.)" />, "<sc:text field="alt" select="sc:item(sc:fld('image',$itm,'mediaid'),.)" />", "<xsl:value-of select="sc:path(sc:item(sc:fld('link',$itm,'id'),.))" />");
                    </script>
                    <noscript>
                        <sc:link select="sc:item(sc:fld('link',$itm,'id'),.)">
                            <sc:image field="image" select="$itm" />
                        </sc:link>
                    </noscript></li>
</xsl:if>

            <xsl:if test="$is_more">
                <xsl:call-template name="doTeasers">
                    <xsl:with-param name="ids" select="$itm_rest"/>
                </xsl:call-template>
            </xsl:if>

        </xsl:if>
    </xsl:if>
</xsl:template>

</xsl:stylesheet>

This outputs the teasers inside an unordered list, which I’ve styled up using CSS.

Finally, here’s an example showing how to hook up the “linkurl” FlashVars parameter in the Flash movie. On the first frame of the movie, set _global.linkurl like this:

Then, create a button with a hit area the same size as the teaser, and in its onrelease function, call getURL(linkurl) like this:

Hope all that makes sense!

The flexibility of Sitecore’s content management framework is a strength, but it also means that there are often many different ways of approaching a given situation, and it can be bewildering. Also, a lot of the documentation and blogs assume a certain level of familiarity with the technology, and exposure to the product.

The idea of this blog is to record my small victories; things I’ve managed to get to work, and how I did it. Hopefully, it will help me to remember what I did, and it might help some other people who find themselves on a similar Sitecore journey.