Using Flash Components

From UbikWiki

Contents

Introduction

Starting from FWK 3.6.0, FWK contains 2 new FLASH components:

  • Carousel Component
  • Upload component

Involved Components

These components are configured through XML configuration. This configuration is passed to FLASH components through a configuration URL

To ease usage of these components, 3 Components embedded in the fwk:

  • <flash> tag
  • com.decathlon.fwk.flash.AbstractFCConfiguratorAction
  • Mapping JAR to read and generate Components XML

Flash Tag

Attribute
Description
Required
Default Value
id The id of the component, must be unique yes NA
src Absolute path to Absolute path to SWF file of the component (/fwk/flash/carrousel.swf and /fwk/flash/upload.swf) yes NA
configUrl Absolute path to configuration URL, ie URL that maps the Action inheriting from com.decathlon.fwk.flash.AbstractFCConfiguratorAction yes NA
timeout Request timeout in seconds no 30
noCache Set to false to enable URL result caching by Flash no true
width Width of the component yes NA
height Height of the component yes NA
align Align of the component no middle
bgcolor Background color of the component no #FFFFFF
quality Quality of rendering no high


flashInstallUrl Absolute path to Flash installer (filled to acceptable default value by fwk) no high
allowScriptAccess Policy for Script access (sameDomain...) no sameDomain
wmode transparent or opaque no transparent
version Version of flash player no 9.0.0

AbstractFCConfiguratorAction

Extend this class and implement method AbstractFCConfiguratorAction#createComponentConfiguration. This method must return either:

  • com.decathlon.fwk.carrousel.CarrouselDocument for Carousel configuration
  • com.decathlon.fwk.upload.UploaderDocument for Upload configuration

XMLBeans mapping JAR

This library contains mapping layer Java/XML that must be used in AbstractFCConfiguratorAction subclasses: Include in your classpath:

  • stax-api-1.0.1.jar
  • xbean-2.4.0.jar
  • xbean_xpath-2.4.0.jar
  • fwk-flash-config-parsing-3.6.0.jar

Implementation example with Carrousel

Configure classpath correctly

See XMLBeans mapping JAR

Include Tag in JSP 

<dkt:flash src="/fwk/flash/carrousel.swf" id="carousel_demo" 
	align="left" bgcolor="#869ca7" width="400" height="200" configUrl="/test/carrouselConfig.do">
</dkt:flash>

Note here:

  • configUrl="/test/carrouselConfig.do"

Create action that is mapped to configUrl

Now let's create the Action that generates Flash config: 

public class CarrouselAction extends AbstractFCConfiguratorAction {
	@Override
	protected XmlObject createComponentConfiguration(ActionMapping mapping,
			HttpServletRequest request, HttpServletResponse response,
			ActionForm form) throws Exception {
		CarrouselDocument carrouselDocument = 
			CarrouselDocument.Factory.parse(
	Thread.currentThread().getContextClassLoader().getResource("com/decathlon/fwkdemo/flash/carrouselConfig.xml"));
				Content content = carrouselDocument.getCarrousel().addNewContent();
		{
			Item item = content.addNewItem();
			item.setId("i1");
			item.setSrc(request.getContextPath()+"/images/carrousel/img/terre0001.jpg");
			item.setTitle("Minuit");
			item.setLink("carrouselCallback");
		}
		{
			Item item = content.addNewItem();
			item.setId("i2");
			item.setSrc(request.getContextPath()+"/images/carrousel/img/terre0021.jpg");
			item.setTitle("01h12");
			item.setLink("carrouselCallback");
		}
		{
			Item item = content.addNewItem();
			item.setId("i1");
			item.setSrc(request.getContextPath()+"/images/carrousel/img/terre0021.jpg");
			item.setTitle("01h12");
			item.setLink("carrouselCallback");
		}
		return carrouselDocument;
	}

Notice the following:

  • Class extends AbstractFCConfiguratorAction
  • CarrouselDocument.Factory.parse(URL) is used to externalize part of configuration in XML
  • The rest of the configuration is filled in Java
  • link contains the name of a Javascript function that take the value of ID in parameter, this is due to the fact that config below has type javascript

Let's configure component in file carrouselConfig.xml and put this file in package "com.decathlon.fwkdemo.flash": 

<?xml version="1.0" encoding="UTF-8"?>
<carrousel type="flat" xmlns="http://www.decathlon.com/fwk/carrousel">
	<params>
		<scrolling auto="init" show="complete" type="continuous" default_direction="left" default_speed="2" over_speed="10" click_speed="25" default_pause="1" />
		<depth height="100" ratio="2" alpha="0.5" blur="4" />
	</params>
	<display>
		<position x="40" y="20" />
		<dimension width="300" height="240" />
 
		<default>
			<style fontSize="10" color="0x000000" fontFamily="Arial" fontWeight="normal" />
		</default>
 
		<items scale="stretch" margin="10" loading="images/carrousel/loading.swf" error="images/carrousel/error.png">
			<position y="40" />
			<dimension width="50" height="80" />
			<action tooltip="true" type="javascript" target="_blank" around="center" zoom="1.2" />
			<image>
				<position x="0" y="0" />
				<dimension width="50" height="50" />
			</image>
			<reflection alpha="0.2">
				<position x="0" y="50" />
				<dimension width="50" height="20" />
			</reflection>
			<title>
				<position x="0" y="60" />
				<dimension width="50" height="20" />
				<style color="0xCC0000" fontSize="10" textAlign="center" />
			</title>
		</items>
 
		<left src="">
			<position x="5" y="70" />
			<dimension width="30" height="30" />
		</left>
		<right src="">
			<position x="345" y="70" />
			<dimension width="30" height="30" />
		</right>
	</display>
</carrousel>

You always have the choice to parse an XML file or create fully in Java or mix the 2. You will generally mix the 2:

  • Parse static configuration
  • Add dynamic configuration (error messages, data ...) using Mapping layer

Map it in struts-config.xml to url "/test/carrouselConfig.do":

<action path="/carrouselConfig" type="com.decathlon.fwkdemo.flash.CarrouselAction"></action>


Implementation example with Upload

Configure classpath correctly

See XMLBeans mapping JAR

Include Tag in JSP 

<dkt:flash src="/fwk/flash/upload.swf" id="upload_demo" 
	align="left" bgcolor="#869ca7" wmode="opaque"	
	width="400" height="200" configUrl="/test/uploadConfig.do"></dkt:flash>

Note here:

  • configUrl="/test/uploadConfig.do"

Create action that is mapped to configUrl

Now let's create the Action that generates Flash config: 

public class UploadAction extends AbstractFCConfiguratorAction {
	@Override
	protected XmlObject createComponentConfiguration(ActionMapping mapping,
			HttpServletRequest request, HttpServletResponse response,
			ActionForm form) throws Exception {
		UploaderDocument carrouselDocument = 
			UploaderDocument.Factory.parse(Thread.currentThread().getContextClassLoader().getResource("com/decathlon/fwkdemo/flash/uploadConfig.xml"));
 
		Messages messages = carrouselDocument.getUploader().getDisplay().getError().addNewMessages();
		Message message = messages.addNewMessage();
		// Would come from i18n file
		message.setData("Vous devez d'abord sélectionner un ou plusieurs fichiers.\n");
		message.setType(com.decathlon.fwk.upload.MessageDocument.Message.Type.NOFILE);
		return carrouselDocument;
	}

Notice the following:

  • Class extends AbstractFCConfiguratorAction
  • UploaderDocument.Factory.parse(URL) is used to externalize part of configuration in XML
  • The rest of the configuration is filled in Java

Let's configure component in file uploadConfig.xml and put this file in package "com.decathlon.fwkdemo.flash": 

<?xml version="1.0" encoding="UTF-8"?>
<uploader xmlns="http://www.decathlon.com/fwk/upload"
type="multiple" lockonceused="true" simultaneous="1">
	<params>
		<url>/fwk-demo/test/doUpload.do</url>
		<onselect />
		<onfail />
		<onsuccess />
		<oncomplete />
		<allowed filesize="4098">
			<filetype>
				<name><![CDATA[Images]]></name>
				<extensions><![CDATA[*.jpg;*.jpeg;*.gif;*.png]]></extensions>
			</filetype>
			<filetype>
				<name><![CDATA[Images vectorielles SVG]]></name>
				<extensions><![CDATA[*.svg;*.xml]]></extensions>
			</filetype>
		</allowed>
	</params>
	<display>
		<default>
			<style fontSize="11" color="0x000000" fontFamily="Arial" fontWeight="normal" />
		</default>
		<input visible="true" browseonclick="false">
			<position x="10" y="10" />
			<dimension width="200" height="70" />
			<style fontStyle="italic" />
		</input>
		<browse label="Parcourir...">
			<position x="220" y="10" />
			<dimension width="100" height="20" />
		</browse>
		<error>
			<position x="10" y="85" />
			<dimension width="360" height="40" />
			<style color="0xCC0000" fontSize="10" fontStyle="italic" />
 
		</error>
		<upload image="/fwk-demo/images/upload_custom/ok.png">
			<position x="246" y="35" />
			<dimension width="48" height="48" />
		</upload>
		<queue visible="true" type="text" label="Chargement %1 / %2 (%3%%)">
			<position x="10" y="85" />
			<dimension width="200" height="20" />
			<style textAlign="center" fontSize="14" fontWeight="bold" />
		</queue>
	</display>
</uploader>

Map it in struts-config.xml to url "/test/uploadConfig.do":

<action path="/uploadConfig" type="com.decathlon.fwkdemo.flash.UploadAction"></action>
Retrieved from "http://wiki.ubik-ingenierie.com/ubikwiki/index.php?title=Using_Flash_Components"
Personal tools