0

¿Como se hizo?

10Nov
en Desarrollo web, Documentación, XUL

Aquí les muestro como hice la extensión que les mostré en un post hace pocos días: FireReproductor.

Para lograrlo solo se modificó el documento capa.xul:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<overlay id="sample"
 
 <script>
 function ocultar_reproductor(){
    reproductor = document.getElementById("reproductor")
    reproductor.setAttribute("hidden", "true");
 }
 function ver_reproductor(){
    reproductor = document.getElementById("reproductor")
    reproductor.setAttribute("hidden", "false");
 }
 </script>
 
<statusbar id="status-bar">
    <splitter/>
<statusbarpanel id="my-panel" label="">
<hbox hidden="false" id="reproductor">
 
<html:object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    width="499" height="120">
    <html:param name="movie" value="player_XUL.swf" />
    <html:param name="quality" value="high"/>
    <html:param name="wmode" value="transparent"/>
    <html:embed src="chrome://ejemplo/content/player_XUL.swf"
      quality="high"
      type="application/x-shockwave-flash"
      WMODE="transparent" width="499" height="120"
</html:object>
</hbox>
<hbox>
    <button label="Ver" onclick="ver_reproductor();"/>
    <button label="Ocultar" onclick="ocultar_reproductor();"/>
</hbox>
</statusbarpanel>
</statusbar>
 
</overlay>

Como se muestra se hizo uso de elementos HTML (¡si, XUL es también compatible con HTML!) mediante la «directiva»: xmlns:html=»https://www.w3.org/1999/xhtml»,

la cual le indica al motor de XUL que se admiten elementos HTML en nuestro documento.

El reproductor se hizo con el programa Flash MP3 Player Builder, luego los archivos generados se copiaron en la carpeta content y ¡listo! ya tenemos nuestro reproductor.

También se usó javascript para mostrarlo y ocultarlo. Si no sabes programar en este lenguaje puede descargar un libro en la sección de Documentación.

Para saber como usar Flash MP3 Player Builder vea este video tutorial.

Etiquetado en:

Dejar un comentario