Resumé

Custom WebControl ASP.Net per Flash

Cristian Merighi () 0,00

Come centralizzare e riutilizzare la renderizzazione di un elemento Adobe® Flash utilizzando un custom webcontrol ASP.Net 2.0 scritto in C#. Incapsulata anche la logica fsCommand per la chiamata di funzioni javascript da Flash.
Questo articolo è da considerarsi obsoleto. Alcune funzionalità potrebbero non essere più disponibili e non è possibile aggiungere commenti.

...Una volta per tutte! Mal sopporto il ripetere le stesse cose per più di un certo numeo di volte.
A proposito, quante volte ho già copiato e incollato i soliti files javascript di qua e di là per renderizzare correttamente i miei oggetti Adobe® Flash nelle varie pagine web che mi trovo a sviluppare? Ho perso il conto.
Aggravante a tutto ciò è la mancanza - almeno fino al momento in cui questo articolo viene scritto - dell'intellisense in javascript: ciò significa rileggersi le porzioni di codice necessarie per chiamare correttamente le routines...

E' tempo di "ingaggiare" un custom WebControl ASP.NET 2.0 che lo faccia per me!
Un bel <pacem:Flash runat="server" /> con tutta la logica necessaria incapsulata e facilmente utilizzabile!

Con "tutta" la logica necessaria intendo proprio TUTTA la logica necessaria:

  • ogni property è mappata (eventualmente con oggetti enum per le proprietà che lo permettono);
  • la versione del player da utilizzare (rendendo agevoli le operazioni di get e set);
  • il richiamo alle funzioni javascript da utilizzare via fscommand (molto importante per il passaggio di informazioni tra flash e la pagina html).

Ecco come dovrebbe essere la struttura dell'oggetto che intendo:

class diagram

In sintesi, i componenti del nostro custom WebControl risultano essere:

  1. un file Flash.cs dove, via codice C#, è definita la classe Pacem.Web.UI.WebControls.Flash che eredita da System.Web.UI.Control
    (nello stesso file definiamo tutti gli oggetti enum stampato nell'immagine sopra);
  2. un file javascript Flash.js embedded afferente la core logic per il rendering client-side.

Giusto qualche passo di codice C#:

// registration of the resource url of the embedded javascript file
[assembly: WebResource("Pacem.Web.UI.WebControls.ClientScripts.Flash.js", "application/x-javascript")]
namespace Pacem.Web.UI.WebControls
{
    [DefaultProperty("MovieUrl")]
    [ToolboxData("<{0}:Flash runat=server></{0}:Flash>")]
    public class Flash : System.Web.UI.Control
    {
        // FIELDS
        // ...
        
        // PROPERTIES
        // ...
        
        // METHODS        
        protected override void CreateChildControls()
        {
            // if JavaScript is enabled then write down relevant javascript code 
            otherwise put html markup <object ...></object>
        
        }
    }
}

JavaScript embedded code:

function FlashObject(url){
    this.movie = url;
    this.id = "";
    this.FlashVars = "";
    this.quality = "best";
    this.bgcolor = "";
    this.salign = "t";
    this.scale = "noscale";
    this.menu = false;
    this.loop = true;
    this.play = true;
    this.wmode = "opaque";
    this.swLiveConnect = false;
    this.allowScriptAccess = "always";
    this.width = "100%";
    this.height = "100%";
    this.align = "center";
    this.codeBase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0";
    this.FSCommand = null;
}

/*
    ...
*/

function getFlashObjectHTML(flashObj){
	var html = "";	
	html += "<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\""+flashObj.codeBase+"\" width=\""+flashObj.width+"\" height=\""+flashObj.height+"\" align=\""+flashObj.align+"\" id=\""+flashObj.id+"\">";
    html += "<param name=\"movie\" value=\""+flashObj.movie+"\" />";
	html += "<param name=\"FlashVars\" value=\""+flashObj.FlashVars+"\">";
    html += "<param name=\"quality\" value=\""+flashObj.quality+"\" />";
    html += "<param name=\"menu\" value=\""+flashObj.menu.toString()+"\" />";
    html += "<param name=\"loop\" value=\""+flashObj.loop.toString()+"\" />";
    html += "<param name=\"play\" value=\""+flashObj.play.toString()+"\" />";
    html += "<param name=\"bgcolor\" value=\""+flashObj.bgcolor+"\" />";
	html += "<param name=\"salign\" value=\""+flashObj.salign+"\" />";
	html += "<param name=\"scale\" value=\""+flashObj.scale+"\" />";
	html += "<param name=\"wmode\" value=\""+flashObj.wmode+"\" />";
	html += "<param name=\"swLiveConnect\" value=\""+flashObj.swLiveConnect.toString()+"\" />";
	html += "<param name=\"allowScriptAccess\" value=\""+flashObj.allowScriptAccess+"\" />";
	html += "<embed src=\""+flashObj.movie+"\" menu=\""+flashObj.menu.toString()+"\" swLiveConnect=\""+flashObj.swLiveConnect.toString()+"\" allowScriptAccess=\""+flashObj.allowScriptAccess+"\" FlashVars=\""+flashObj.FlashVars+"\" width=\""+flashObj.width+"\" height=\""+flashObj.height+"\" wmode=\""+flashObj.wmode+"\" loop=\""+flashObj.loop.toString()+"\" play=\""+flashObj.play.toString()+"\" quality=\""+flashObj.quality+"\" bgcolor=\""+flashObj.bgcolor+"\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" name=\""+flashObj.id+"\" scale=\""+flashObj.scale+"\" salign=\""+flashObj.salign+"\" align=\""+flashObj.align+"\"/>";
	html += "</object>";
	return html;
}

Il codice completo lo si può scaricare dal link a piede dell'articolo quindi penso di non dover di non aggiungere altro.
Solo richiamo l'attenzione sul metodo (overridden) CreateChildControls: tutte le decisioni sul rendering vengono prese lì...

Ora solo un esempio d'utilizzo:

<!-- Test Page Sample Code -->
<pacem:Flash runat="server" ID="flPacem" 
    WMode="Transparent" 
    FSCommand="Flash_Command"
    Height="295px" 
    Width="720px" 
    MovieUrl="~/flash/initializer.swf"
></pacem:Flash>

E come il WebControl viene reso su un browser IE7 (con javascript abilitato):

<script type="text/javascript">
//<![CDATA[
var xc_ctl00_flPacem_fobj = new FlashObject("/www.pacem.it/flash/initializer.swf");
with (xc_ctl00_flPacem_fobj){
    id = "ctl00_flPacem";
    width = "720";
    height = "295";
    wmode = "transparent";
    FSCommand = Flash_Command;
    flush();
}
function ctl00_flPacem_DoFSCommand(command, args) {
    Flash_Command(command,args);
}
// handling FSCommand for Internet Explorer
document.write('<SCRIPT LANGUAGE="VBScript"\> \n');
document.write('On Error Resume Next \n');
document.write('Sub ctl00_flPacem_FSCommand(ByVal command, ByVal args)\n');
document.write('\tCall ctl00_flPacem_DoFSCommand(command, args)\n');
document.write('End Sub\n');
document.write('</SCRIPT\> \n');
//]]></script>

Riporto anche una demo, davvero banale, sull'utilizzo del componente in relazione alla feature FSCommand:

zip file « download code

Take care. Bye.

feedback
 

Syndicate

Autore

Cristian Merighi facebook twitter google+ youtube

Ultimi articoli

Top rated

Archivio

Dove sono?

Autore

Cristian Merighi facebook twitter google+ youtube

Le mie letture

Feeds