Flash Integration Handout

advertisement
Cascade Server Flash & Data Integration Cheatsheet
Justin Klingman
Manager, Web Design & Content Management | Beacon Technologies, Inc.
jklingman@beacontechnologies.com | http://www.beacontechnologies.com/
30,000 Foot View
1.
2.
3.
4.
Flash player written to read its data from an XML file.
Create Data Definition with necessary data elements.
Data Definition attached to the homepage.
Data Definition outputs data via XSL into Flash player’s XML file format.
Setup a template for XML output
1.
2.
3.
4.
Copy your main target group, rename to “XML”.
Click “Edit” and change Output File Extension to “.xml”.
Create a template that just has “<system-region name="DEFAULT"/>” in it.
Attach the XML template to the XML target.
Creating an XML document
1. Create a configuration set with the XML template.
2. Copy a page asset and rename it to the desired XML file name.
3. Click “Edit”, go to “System” and change the configuration set to the XML
configuration set. Use a simple/blank metadata set and remove any data
definition.
4. Attach a block to the default region that indexes the page’s Content Type that
contains the data you wish you use.
5. Create an XSLT format that interprets the data into an XML schema. Attach this
format to the same default region.
Homepage data definition
<system-data-structure>
<group identifier="flash" label="Flash Area">
<group identifier="slide" label="Slide" multiple="true">
<asset type="file" identifier="img" label="Image (Required Size: 805 x 300 px)" required="true" view-link="true" />
<text identifier="heading" label="Heading" size="50" required="true" />
</group>
</group>
</system-data-structure>
XSLT to insert Flash onto homepage
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" method="xml"/>
<xsl:template match="system-index-block">
<xsl:apply-templates select="calling-page"/>
</xsl:template>
<xsl:template match="calling-page">
<xsl:apply-templates select="system-page"/>
</xsl:template>
<xsl:template match="system-page">
<xsl:apply-templates select="system-data-structure"/>
</xsl:template>
<xsl:template match="system-data-structure">
<div id="homeFlash">
[system-view:internal]
<br /><br />The Flash image slider will be visible here when published.<br/><br/>
<xsl:for-each select="flash/slide">
Slide <xsl:value-of select="position()"/>: <img height="10%" src="{img/path}" valign="middle"
width="10%"/>  <xsl:value-of select="heading"/><br/><br/>
</xsl:for-each>
[/system-view:internal]
[system-view:external]<xsl:comment>#START-CODE<![CDATA[
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="/flash/AC_RunActiveContent.js" language="javascript"></script>
<script language="javascript">
if (AC_FL_RunContent == 0) {
//alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '805',
'height', '300',
'src', '/flash/shell',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'false',
'scale', 'noscale',
'wmode', 'transparent',
'devicefont', 'false',
'id', '/flash/shell',
'bgcolor', '#ffffff',
'name', '/flash/shell',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', '/flash/shell',
'salign', ''
); //end AC code
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="805" height="300"
id="/flash/shell" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="/flash/shell.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="/flash/shell.swf" quality="high" scale="noscale" wmode="transparent" bgcolor="#ffffff" width="805"
height="300" name="/flash/shell" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/xshockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>
]]>#END-CODE</xsl:comment>[/system-view:external]
</div>
</xsl:template>
</xsl:stylesheet>
XML schema used
<(Root Node)>
<(slide) heading="(Text)" scr="(File path to image from the folder the SWF is in)"/>
(Repeat slide node for each slide)
</(Root Node)>
XSLT used to create XML schema from homepage data definition
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" method="xml"/>
<xsl:template match="system-index-block">
<xsl:apply-templates select="system-page"/>
</xsl:template>
<xsl:template match="system-page">
<xsl:apply-templates select="system-data-structure"/>
</xsl:template>
<xsl:template match="system-data-structure">
<HomepageFlash>
<xsl:for-each select="flash/slide">
<section heading="{heading}">
<section heading="{heading}" scr="[system-asset:file]{img/path}[/system-asset:file]"/>
</section>
</xsl:for-each>
</HomepageFlash>
</xsl:template>
</xsl:stylesheet>
Download