embedding silverlight

ernow 8 posts 29 karma points

Feb 01, 2010 @ 23:00

Hi,

I am quite new to Umbraco (but love it already). So far I managed to install blog4umbraco and changed/add my own templates and site structure.

I am quite familiar with XSLT and very proficient in .NET

Here is what I have been trying:

I want to be able to add a Silverlight application to my pages/blog posts using the TinyMCE or Windows Live Writer (which I have writen plugins for before so I am guessing I just need to add the correct macro code .

First stop: TinyMCE. I figured I needed a macro and an XSLT that turns some parameters into HTML. That went fine but TinyMCE or Umbraco somehow manages to incorrectly render the macro. When I browse to the page the source of the page shows the macro marker so it is not correctly evaluated.

In TinyMCE:

<div umb_macroalias="Silverlight" umb_width="400" umb_height="300" umb_xapfile="1140" 
 ismacro="true" umbversionid="26a6877f-8c6d-4619-9864-b3a9ba1970d4" umbpageid="1139" 
 onresizestart="return false;" title="This is rendered content from macro" class="umbMacroHolder">

In the browser source:

<?UMBRACO_MACRO width="400" macroAlias="Silverlight" height="300" xapfile="1140" />

I also replaced the XSLT by a .NET UserControl but the effect was the same.

Browsing the web I found some issues concerning TinyMCE and macros (with quotes some say and I do have them)

I see a couple of possible issues:

my understanding of Umbraco is too limited; I am using the wrong technique
I configured the macro all wrong
my xslt is wrong

Here is my xslt:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
 version="1.0" 
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns:msxml="urn:schemas-microsoft-com:xslt" 
 xmlns:umbraco.library="urn:umbraco.library"
 xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon"
 xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes"
 xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath"
 xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions"
 xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings"
 xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
 xmlns:tagsLib="urn:tagsLib"
 xmlns:BlogLibrary="urn:BlogLibrary" 
 exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon 
  Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions 
  Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary ">
 


<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>




 
<xsl:variable name="width"/>
<xsl:variable name="height"/>
<xsl:variable name="xapfile"/>
 
<xsl:template match="/">

<!-- The fun starts here -->
<div style="width:{$width}px;height:{$height}px;">
 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
  <param name="source" value="{$xapfile}"/>
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="3.0.40624.0" />
  <param name="autoUpgrade" value="true" />
  <!-- <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
   <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
  </a> -->
 </object>
 <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
 </xsl:template>
</xsl:stylesheet>

I commented the hyperlink for the download of Silverlight out because it was causing errors and I haven't figured that out yet.

Any pointers?

Copy Link

Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib

Feb 01, 2010 @ 23:10

I can see that you added some variable to your xslt. Did you also wire up some parameters for those? It looks like you are not getting them assigned to your macro.

Should be something like:

<xsl:variable name="width" select="//macro/yourwidthparameteraliashere"/>

Though it does look like you have them inserted in the TinyMCE.

Have you tried putting the macro directly in a template, to see if you can get that working first?

With regards to the links, it is probably because you need to escape your & characters in the url:

<a href="sample.aspx?blah=test&amp;blah2=test2">

Copy Link

ernow 8 posts 29 karma points

Feb 02, 2010 @ 06:45

Thanks for replying Morten! Indeed I forgot to excape the & Thanks!

Instead of adding

select="//macro/Width"

I added

select="/macro/Width" (single forward slash)

I tried adding the macro to a template:

<umbraco:Macro Width="500" Height="400" XapFile="1140" Alias="Silverlight" runat="server"></umbraco:Macro>

Currently the names and aliases of the parameters are exactly the same (including casing)

This renders:

<div style="width:px;height:px;">
 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
  <param name="source" value="/media/348/testslapp.xapxap3623" />
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="3.0.40624.0" />
  <param name="autoUpgrade" value="true" />
  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=3.0.40624.0" style="text-decoration:none">
   <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none" />
  </a>
 </object>
 <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px" />
</div>

Much better than the garbage I had before BUT there were no changes in what is being rendered in TinyMCE and the parameters are still behaving strangly: width and height are not rendered and the link to the media/xap file is extended with xap3623

Any clues? It seems we are getting there...

Copy Link

Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib

Feb 02, 2010 @ 09:16

What types are the macro parameters? It seems that the xapfile is a mediacurrent. That will actually pass you some xml, so take a look at the source of xapfile with copy-of to get an idea of the format.

Maybe also try this:

<xsl:template match="/">
<xsl:copy-of selec="." />

to get the base macro parameters. I may have spelled wrong

Copy Link

ernow 8 posts 29 karma points

Feb 02, 2010 @ 10:10

Exellent advise, thanks!

I changed the select for the mediafile to:

<xsl:variable name="XapFile" select="/macro/XapFile/node/data[@alias='umbracoFile']"/>

This works perfectly.

Now the Height and Width... By rendering

<div><xsl:copy-of select="." /></div>

I noted that Height and Width were both missing entirely! So I took a wild guess and renamed them to SLWidth and SLHeight and suddenly they appear. I would think that this is a bug...

So now that the template is working next up TinyMCE:

In the editor it renders a correct (and even working Silverlight app) preview but when rendering the page in the browser it outputs (view source):

<?UMBRACO_MACRO slheight="300" macroAlias="Silverlight" slwidth="400" xapfile="1140" />

Any hints?

Copy Link

ernow 8 posts 29 karma points

Feb 02, 2010 @ 10:41

By the way: I don't get why I am getting v3 style macro code (<?UMBRACO_MACRO ... ) instead of the v4 style.

Copy Link

ernow 8 posts 29 karma points

Feb 02, 2010 @ 11:31

It seems I am not alone in this

I'll give the in that thread presented solutions a go and I will report back here. Still, feel free to give any advise.

Copy Link

ernow 8 posts 29 karma points

Feb 02, 2010 @ 12:24

I have narrowed it down to Dan's post:

Replace

<xsl:value-of select="$currentPage/data [@alias='pageContent']" disable-output-escaping="yes" />

by

<umbraco:Item field="pageContent" runat="server"></umbraco:Item>

However, the first line (the one to be replaced) is in an XSLT whereas the second one is in a Template and I need the Template because it contains all the blog features. If only I could put the second line in the XSLT...

I am stuck.

Copy Link

ernow 8 posts 29 karma points

Feb 02, 2010 @ 12:32

Fixed it! After reading the other thread again I changed the BlogListPosts.xslt

I replaced

<xsl:value-of select="$post/data [@alias = 'bodyText']" disable-output-escaping="yes"/>

by

<xsl:value-of select="umbraco.library:RenderMacroContent($post/data[@alias = 'bodyText'],$currentPage/@id)"
        disable-output-escaping="yes"/>

Can someone confirm this step? I am not quite sure that this is the right way to fix this.

By the way: Now I have Silverlight all around! Next step: Windows Live Writer but that should be easy now ;-)

Copy Link

ernow 8 posts 29 karma points

Feb 02, 2010 @ 12:50

Two posts back reads:

However, the first line (the one to be replaced) is in an XSLT whereas the second one is in a Template and I need the Template because it contains all the blog features. If only I could put the second line in the XSLT...

It should read:

However, the first line (the one to be replaced) is in an XSLT whereas the second one is in an Template and I need the XSLT because it contains all the blog features. If only I could put the second line in the XSLT...

Copy Link

Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib

Feb 02, 2010 @ 14:52

I think that should be just fine. Only thing is that if you have any .Net usercontrol macros in your bodyText, those will only render, but will not be able to register stuff like postback events and so on.

But if you don't need that, then you should be fine :-)

Copy Link

is working on a reply...

Flag this post as spam?

Embedding Silverlight